HTML and CSS Reference
In-Depth Information
CSS Selectors
CSS statements, whether in a style sheet ile or style element in the head sec-
tion of a document, begin with a selector expression that determines which
elements the statement's rules apply to. he simplest case is a named HTML
element like the h2 selector in the style element in the preceding section. he
following examples have just the selector portion highlighted in bold:
body { font-family: arial,sans-serif; }
h1 { font-size: 21pt; }
a { color: blue; text-decoration: none; }
p { line-height: 1.4em; }
Actually, the simplest case is just an asterisk, which means all elements. he
following CSS statement
* { font-family: arial,sans-serif; }
instructs the browser to use the Arial font (or a generic sans serif font if Arial
is unavailable) to render every element. his is diferent from setting the body
element's font-family to arial,sans-serif . he body's font family is not inher-
ited by some elements, such as the code and pre elements, which would keep
their default monospace font. he asterisk is better used as a descendent term
to select all elements that are nested within a speciied element.
An individual HTML element can be selected if it has an id attribute.
In this CSS statement, the value of the id attribute is appended to a named
HTML element with a hash sign (#) 2 in between:
h2#main-title { margin-top: 20px; }
Because the value of any element's id attribute must be a unique name
within a document, the HTML element name can be omitted. he preceding
code is more commonly written as follows:
#main-title { margin-top: 20px; }
A selector expression can refer to elements in a given class. In other words,
the element is selected if it has a class attribute with a matching value. In the
CSS, the class name is appended to the element name with a period: { border: thin solid black; }
2. Technically, this is called the octothorpe (eight points) character.
Search WWH ::

Custom Search