A CSS Rule - from Stylin' p. 35.
A rule is an instruction that tells a browser how to render a specified element on an HTML page. Each CSS rule consists of a selector and a declaration.
In the example
below, h1 is the selector. It is the XHTML tag to which
the style is being attached. The declaration is the
content between the curly braces.
h1 { color: green; }
The declaration defines
what the style actually is. The declaration consists of two parts:
the property (in this case,
color) and the value (green)
and they are separated by a colon.
Syntax
A declaration may contain more than one property. Each property is separated by a semi-colon:
h1 { color: green; font-size: 14px; }
If a value is made up of multiple words, put quotes around
the value. Example: "Times New Roman"
Notice that the syntax for embedded and linked CSS is different than that of inline styles. In either case, style declarations can be grouped together.
Inline Syntax
<p style="attribute1: value; attribute2: value;"> </p>
<p style="font-family: arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
font-weight: bold;
color: #CC0000;
background-color: #FFFF99;"> Here is an example of
a paragraph which uses an inline style.</p>
Embedded/Linked Syntax
Selector {
attribute 1: value;
attribute 2: value;
attribute 3: value;
}
h1 {
font-family: arial, Helvetica, sans-serif;
font-size: 16px;
text-align: center;
font-weight: bold;
color: #CC0000;
background-color: #FFFF99;
}
The syntax MUST be correct for the style to work consistently. However, the style format (or the manner in which the style is formatted in the editor) can be written in several different ways. Find the way that works best for you and stick to it for easier debugging. Here is the same style formatted in 2 different ways:
h1 { color: red; font-family: arial, times, serif; }
h1
{
color: red;
font-family: arial, times, serif;
}