Introduction to CSS (Cascading Style Sheets) with JavaScript - JavaScript by Example - page 566

EXPLANATION ( CONTINUED )

2 The style of the paragraph element is defined. This style will take effect anywhere

in the document where the <p> tag is used. Note that point sizes may be different
on different browsers. Pixels will give you more accuracy.

3 The ID selector is called block and must be preceded by a hash mark. It can be

used by any HTML element to produce red, underlined text. ID selectors should
only be used once on a page to serve as a unique ID for the element.

4 A paragraph containing text will be displayed according to the style defined in the

style sheet on line 2.

5 By adding the ID called block , the style for this paragraph will be changed to red,

underlined text.

6 The <p> tag will revert to the style defined on line 2. See Figure 14.18.

Figure 14.18 Using the ID selector in style sheets.

14.9 Overriding or Adding a Style with the
<span> Tag

The <span></span> tags are used if you want to change or add styles to only a selected
portion of text (see Table 14.11). By doing so, you can create an inline style that will be
embedded within another element and apply only to that portion of the content. In this
way you can add or override a style to an element for which a style has already been
defined. Carriage returns and breaks in the text will not occur with these tags.

Table 14.11 Attributes of the HTML span Tag

Attribute Definition

class Sets a class for a specific element or elements.

id Used to apply settings to specific HTML elements.

style Used to apply style settings for the specific element included in the span tags.

title Used to give specific elements a title that might appear as a tooltip when the

mouse is held over the element.