Use CSS3 in applications - Programming in HTML5 with JavaScript and CSS3 - page 237

FIGURE 4-1 Specifying the color of text using CSS

With this code, each of the h1 through h3 headers have a CSS style applied to change the
color to green, each using a different method. Using the hexadecimal or RGB method gives
you more granular control over the color then using the color name as was done on the <h2>
element. There are just far more colors that exist then could be named. The hexadecimal and
RGB methods allow you to access the full range of colors.

NOTE DEFAULT STYLES

In Figure 4-1, you see that even though all three text items are set to pure green, one is
darker than the others. It is important to know that some elements, such as the various
header elements, have default styles already applied to them. In this case, the style for the
element defaults to a bolder type.

Applying bold to text
CSS also provides access to other properties of the text display via the font object. The font
object provides the ability to make text bold or italic . The following code demonstrates
changing the text to bold for all <p> elements:

p {
font-weight: bold;
}

The above styles produce the output shown in Figure 4-2.

FIGURE 4-2 Displaying the bold style applied to the text

The font-weight CSS property accepts the following values to specify how bold you would
like the text to be: lighter , normal , bold , and bolder . In addition, the numeric values 100
(lighter) to 900 (darker) are supported. The values increase by 100, providing nine values in
total to control the weight of the text.