• Css

    by Published on 03-05-2010 10:11 PM
    1. Categories:
    2. Html,
    3. Css

    So far throughout our XHTML tutorials we have learnt the basics of how to structure our XHTML files. This article will introduce CSS so that you can start applying designs to your websites.

    We will use the code from the XHTML div example and expand upon it adding the CSS code.

    If you have no prior knowledge of CSS then you may wish to consult the CSS tutorials section and then come back to this guide for implementing XHTML and CSS.

    There are various ways to apply CSS to your XHTML, a simple way is to add the code directly to the tags with the style attribute, this is useful when drafting work but can make your code look extremely messy when you start to add more complicated code. Keeping all of the CSS in one place allows us to see it more clearly and know which part needs editing in the future to make changes easy.

    The method we shall be using will be applying the CSS straight to the tag names, if we have two of the same tags but only wish to apply the CSS to one of those tags then we can add an id attribute to the tag as such:

    HTML Code:
    <div id="header"></div>
    ...
    by Published on 01-07-2010 12:30 AM
    1. Categories:
    2. Css

    Hex Color Table

    • Color
    • HEX Code
    • Example

    • AliceBlue
    • #F0F8FF

    • AntiqueWhite
    • #FAEBD7

    • Aqua
    • #00FFFF

    • Aquamarine
    • #7FFFD4

    • Azure
    • #F0FFFF

    • Beige
    • #F5F5DC

    • Bisque
    • #FFE4C4

    • Black
    • #000000

    • BlanchedAlmond
    • #FFEBCD

    • Blue
    • #0000FF

    • BlueViolet
    • #8A2BE2

    • Brown
    • #A52A2A

    • BurlyWood
    • #DEB887

    • CadetBlue
    • #5F9EA0

    • Chartreuse
    • #7FFF00

    • Chocolate
    • #D2691E

    • Coral
    • #FF7F50

    • CornflowerBlue
    • #6495ED

    • Cornsilk
    • #FFF8DC

    • Crimson
    • #DC143C

    • Cyan
    • #00FFFF

    • DarkBlue
    • #00008B

    • DarkCyan
    • #008B8B

    • DarkGoldenRod
    • #B8860B

    • DarkGray
    • #A9A9A9

    • DarkGreen
    • #006400

    • DarkKhaki
    • #BDB76B

    • DarkMagenta
    • #8B008B

    • DarkOliveGreen
    • #556B2F

    • Darkorange
    • #FF8C00

    • DarkOrchid
    • #9932CC

    • DarkRed
    • #8B0000

    • DarkSalmon
    • #E9967A

    • DarkSeaGreen
    • #8FBC8F

    • DarkSlateBlue
    • #483D8B

    • DarkSlateGray
    • #2F4F4F

    • DarkTurquoise
    • #00CED1

    • DarkViolet
    • #9400D3

    • DeepPink
    • #FF1493

    • DeepSkyBlue
    • #00BFFF

    • DimGray
    • #696969

    • DodgerBlue
    • #1E90FF

    • FireBrick
    • #B22222

    • FloralWhite
    • #FFFAF0

    • ForestGreen
    • #228B22

    • Fuchsia
    • #FF00FF

    • Gainsboro
    • #DCDCDC

    • GhostWhite
    • #F8F8FF

    • Gold
    • #FFD700

    • GoldenRod
    • #DAA520

    • Gray
    • #808080

    • Green
    • #008000

    • GreenYellow
    • #ADFF2F

    • HoneyDew
    • #F0FFF0

    • HotPink
    • #FF69B4

    • IndianRed
    • #CD5C5C

    • Indigo
    • #4B0082

    • Ivory
    • #FFFFF0

    • Khaki
    • #F0E68C

    • Lavender
    • #E6E6FA

    • LavenderBlush
    • #FFF0F5

    • LawnGreen
    • #7CFC00

    • LemonChiffon
    • #FFFACD

    • LightBlue
    • #ADD8E6

    • LightCoral
    • #F08080

    • LightCyan
    • #E0FFFF

    • LightGoldenRodYellow
    • #FAFAD2

    • LightGrey
    • #D3D3D3

    • LightGreen
    • #90EE90

    • LightPink
    • #FFB6C1

    • LightSalmon
    • #FFA07A

    • LightSeaGreen
    • #20B2AA

    • LightSkyBlue
    • #87CEFA

    • LightSlateGray
    • #778899

    • LightSteelBlue
    • #B0C4DE

    • LightYellow
    • #FFFFE0

    • Lime
    • #00FF00

    • LimeGreen
    • #32CD32

    • Linen
    • #FAF0E6

    • Magenta
    • #FF00FF

    • Maroon
    • #800000

    • MediumAquaMarine
    • #66CDAA

    • MediumBlue
    • #0000CD

    • MediumOrchid
    • #BA55D3

    • MediumPurple
    • #9370D8

    • MediumSeaGreen
    • #3CB371

    • MediumSlateBlue
    • #7B68EE

    • MediumSpringGreen
    • #00FA9A

    • MediumTurquoise
    • #48D1CC

    • MediumVioletRed
    • #C71585

    • MidnightBlue
    • #191970

    • MintCream
    • #F5FFFA

    • MistyRose
    • #FFE4E1

    • Moccasin
    • #FFE4B5

    • NavajoWhite
    • #FFDEAD

    • Navy
    • #000080

    • OldLace
    • #FDF5E6

    • Olive
    • #808000

    • OliveDrab
    • #6B8E23

    • Orange
    • #FFA500

    • OrangeRed
    • #FF4500

    • Orchid
    • #DA70D6

    • PaleGoldenRod
    • #EEE8AA

    • PaleGreen
    • #98FB98

    • PaleTurquoise
    • #AFEEEE

    • PaleVioletRed
    • #D87093

    • PapayaWhip
    • #FFEFD5

    • PeachPuff
    • #FFDAB9

    • Peru
    • #CD853F

    • Pink
    • #FFC0CB

    • Plum
    • #DDA0DD

    • PowderBlue
    • #B0E0E6

    • Purple
    • #800080

    • Red
    • #FF0000

    • RosyBrown
    • #BC8F8F

    • RoyalBlue
    • #4169E1

    • SaddleBrown
    • #8B4513
    • ...
    by Published on 01-06-2010 12:30 AM
    1. Categories:
    2. Html,
    3. Css

    As you can now create an XHTML page you will be wanting to give it a nice look, to do this you need to learn CSS which stands for Cascading Style Sheets. We use Css to alter the appearance of items within a page or site, very good coders will use as little code as possible to ensure that their websites loads fast, with css you can take out indiviual style attributes and apply the styles to tags or specific tag ids.

    Let's start by simply changing the colour of a normal header.

    To code css we have to put container tags into the head of the XHTML page and give it an attribute that let's the browser know the code is css, here is an example of the tags we use to specify css.

    HTML Code:
    <style type="text/css">
    </style>
    Now we can begin to learn the basics of css. If we wish to change the colour of an item then first we type tag name that we wish to change, so as we are changing the h1 we will type h1. After the tag has ...
  • Recent Activity

  • Stay Updated