A Complete Guide to Web Design

396 Chapter 23 – Cascading Style Sheets

Selectors

Web Design in a Nutshell, eMatter Edition

<P>This is a whole paragraph of text.</P>

</DIV>

The<span> tag is used inline to change the style of a set of characters:

<P>This is a paragraph and <SPAN STYLE="color: blue">this area

will be treated differently</SPAN> from the rest of the

paragraph</P>

When used with the CLASS and ID attribute selectors (discussed later in this

chapter), these tags can be used to create custom-named elements, sort of like

creating your own HTML tags.

Deleted and inserted text

Deleted text (<del>) and inserted text (<ins>) are two new logical elements

introduced by the HTML 4.0 Specification. They have no inherent style informa-

tion and rely on style sheets (not the browser) for text display instructions. They

are used when it is important to track edits to a document, such as in legal

contracts.

For instance, deleted text might be hidden from view or displayed in strike-

through text. Inserted text might be displayed in bold or in a different color from

the original document.

DEL { text-decoration: line-through }

INS { color: red }

Contextual Selectors

You can also specify style attributes for HTML elements based on the context in

which they appear.

As we’ve seen already, a simple selector specifies that all emphasized text within a

document should be red.

EM { color: red }

Using a contextual selector (written as a list of simple selectors separated by white

space) you can specify that only the emphasized text that appears within a list

item will be green:

LI EM { color: green }

In other words, this affects emphasized text when it appearsin the context ofa list

item element. If both of these rules for emphasized text were to appear in the

same document, the contextual selector (because it is more specific) would take

precedence over the simple selector.

Several contextual selectors can be grouped together in comma-separated lists.

The following code makes bold (<B>) text red when it appears in the context of a

heading:

H1 B, H2 B, H3 B { color: red }