Defining a Style in Css

At this stage, all CSS rules you create will follow a very simple formula. CSS syntax is made up
of a selector (the element or tag you wish to control), followed by at least one declaration
comprising a property and its value, as Figure 1-1 illustrates
The selector defines the exact element(s) that will be affected by the rule you create. The
following example uses the paragraph tag as the selector, and the color property set with the
hexadecimal reference for red as the value:
p {
color: #F00;
}
Note that after the selector, the property and value are contained within curly braces.
Almost without exception, this syntax will define all your CSS rules. See that a colon follows the
property (color:) and a semicolon follows the value (#F00;). To omit either the colon or a curly
brace will result in the style sheet failing to various degrees, so it is vital to watch for syntax
errors that occur easily while busily defining new rules. Failing to include the semicolon after
each value when adding more properties will also screw things up. If there is only one property
and value, or it is the last of several, the semicolon can be omitted.
Any further properties and values for that selector are added within the curly braces. You
do not have to place them on a new line so long as each is separated with a semicolon, but for
clarity it is recommended that each does fall on a new line:
p {
color: #F00;
font-size: 12px;
}
Now all paragraphs will not only be red, but will also have a set font size of 12 pixels. The
selector (in this case the p) acts as the link between the CSS and the (X)HTML, and as a result all
paragraphs will be styled accordingly. Note that the selector is defined in lowercase, as required
by XHTML only, as HTML is case insensitive
It’s then a case of adding new rules to the style sheet using the same syntax. Here, a rule to
make all top-level headings (<h1>) dark gray and 16 pixels high is added to the style sheet:
p {
color: #F00;
font-size: 12px;
}
h1 {
color: #333;
font-size: 16px;
}
Very simple properties are used in this example, and property syntax will be explored in much
more detail in the following chapters. For now though, we’ll concentrate on how a style sheet
is structured.