Specifying Styles

As you may have gathered from looking at the examples in the previous pages, styles are specified as property: value pairs that are separated by semi-colons. Any value may be enclosed in quotation marks, and multi-word values such as "Trebuchet MS" always should be; you should be aware of this especially if you use an HTML editor to insert properties and values automatically, since many will not include the quotation marks.

Inline Styles

For inline styles, the string of property: value pairs is enclosed in quotation marks and set as the value for the attribute style:

<li style="font-size: 10pt; font-weight: bold">

Linked and Embedded Styles

For linked style sheets or embedded style tags, the style specifications are set for various selectors, which may be any HTML element. In this case the style specification property: value pairs are enclosed within braces (curly brackets) that follow the selector:

H2
{
font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif';
font-weight: bold;
font-size: x-large;
color: #660066;
}

Note that when one of the values consists of multiple words (as in the case of the font-family values in the example above) the each value in the list for that property should be enclosed in quotation marks.

Also remember that you can specify multiple classes (but only one level) for a selector to vary the style specifications, as we saw in the discussion of inheritance.

Contextual Styles

Finally, note that you can create contextual styles by combining two selectors:

P STRONG { color: #FF0000 }

This style would affect only text within a STRONG element that was within a PARAGRAPH element. If you want STRONG text to look the same regardless of context, then just create a simple style with STRONG as the selector:

STRONG { color: #FF0000 }

Note that in either case, any other style specifications for the element in which the STRONG text appears will remain in effect unless the STRONG style specification overrides them.