Adding Color, Font Size, and Weight

Adding Color, Font Size, and Weight

To add a color to the heading, use the color property. The color can be changed to suit your needs.

For this heading, you will set the font-size to 120% and the font-weight to normal, as shown in Listing 8.3.

Listing 8.3. CSS Code Setting font-size and font-weight

h1#header
{
    color: #036;

    font-size: 120%;
    font-weight: normal;
}

Overriding Standard Heading Settings Any HTML document may have three or more style sheets associated with it, including a browser style sheet, a user style sheet, and one or more author style sheets. Browsers apply default style sheets to all web documents. Although these browser style sheets vary from browser to browser, they have common characteristics, such as black text and blue links. Most modern browsers allow users to set their own style sheets within their browser. These user style sheets will override any browser default style sheetsfor that user only. As soon as you apply a basic style sheet or an inline style to a page, you have added an author style sheet. Author style sheets will generally override both browser and user style sheets. Most browser style sheets will display an <h1> element in bold text at 200% of the default font size. If you style the <h1> element to 120%, this measurement will be used instead of 200% because your style sheet will override the browser style sheet.

Using Shorthand Hexadecimal Colors Hexadecimal colors can be specified using the # symbol immediately followed by three or six hexadecimal characters. Three-digit hexadecimal values are converted to six-digit form by replicating digits. So, #f00 is the same as #ff0000 and #f2a is the same as #ff22aa.