HTML and CSS Reference
In-Depth Information
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:
p.in-a-box
{ border: thin solid black; }
2. Technically, this is called the
octothorpe
(eight points) character.
