Using Style Sheets (CSS)

Using Cascading Style Sheets (CSS), you can apply styles in many ways. The following example shows how to set the style of a paragraph to a specific format (see Figure 21-9). This would apply to all <p> tags in this document. However, you can override these settings by placing comments directly in a <p> tag.

<html>
      <head>
            <link rel="stylesheet" type="text/css" href="styles.css" >
            <title> This is a basic Web Page! </title>
      </head>
      <body>
            <p class="Test">
                            This should be bold and green
            </p>
            <p style="color:blue; font-size:36pt;">
                                                  This should be big blue text
            </p>
      </body>
</html>

Figure 21-9: Using CSS to apply styles

And the style sheet styles.css file contains this:

p.Test{ color:green; font-weight:bold}

Table 21-4 shows the common style properties that can be used for text.

Table 21-4: Common Style Properties for Text
Property	Description
`font`	Describes font settings
`font-style`	Sets the font style
`font-weight`	Sets the font thickness
`font-size`	Sets the font size
`font-family`	Specifies the font family
`color`	Sets the color of text
`background-color`	Sets the background color of text
`background-image`	Sets the background image of text
`background-repeat`	Determines how the background image for text is placed
`letter-spacing`	Adjusts spacing between text
`text-indent`	Sets the indentation of the first line in text
`text-align`	Positions text horizontally
`margin-top`	Sets the top margin of text
`margin-right`	Sets the right margin of text
`margin-bottom`	Sets the bottom margin of text
`margin-left`	Sets the left margin of text
`text-decoration`	Sets the highlight of text
`text-transform`	Sets the case of text
`cursor`	Sets the mouse pointer icon when the mouse hovers

Table 21-5 shows the properties that can be used for image positioning.

Table 21-5: Common Style Properties for Images
Property	Description
`position`	Declares the type of positioning, relative or absolute
`top`	Specifies the top offset
`right`	Specifies the right offset
`left`	Specifies the left offset
`bottom`	Specifies the bottom offset
`width`	Determines the width of an element
`height`	Sets the height of an element
`display`	Hides or shows an element
`border-width`	Sets the border width
`border-style`	Sets the border style
`border-color`	Sets the border color