Web Design in a Nutshell

Selectors

Selectors are the parts of the rule that identify the element (or elements) to which the style will be applied. There are several methods for identifying elements.

Type Selector

The simplest type of selector calls an HTML element by its tag, as shown:

H1 { color: blue }
H2 { color: blue }
P { color: blue }

Type selectors can be grouped into comma-separated lists so a single property will apply to all of them. The following code has the same effect as the previous code:

H1, H2, P { color: blue }

<div> and <span>

Two HTML elements, div and span, were especially created for use with style sheets. They have no inherent properties of their own, but can be used to designate elements on a web page that should be affected by style sheet instructions. They will be ignored by browsers that do not understand them.

The <div> tag is used to delimit block-level tags and can contain other HTML elements within it.

<DIV STYLE="color: blue">
<H1>Headline!</H1>
<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 ...