The rules of CSS

Style sheets consist of a number of rules that define how various web page elements
should be displayed. Although sometimes bewildering to newcomers, CSS rules are simple
to break down. Each rule consists of a selector and a declaration. The selector begins a CSS
rule and specifies which part of the HTML document the rule will be applied to. The declaration
consists of a number of property/value pairs that set specific properties and
determine how the relevant element will look. In the following example, p is the selector
and everything thereafter is the declaration:
p {
color: blue;
}
As you probably know, p is the HTML tag for a paragraph. Therefore, if we attach this rule
to a web page (see the section “Adding styles to a web page” later on in this chapter for
how to do so), the declaration will be applied to any HTML marked up as a paragraph,
thereby setting the color of said paragraphs to blue.

CSS property names are not case sensitive, but it’s good to be consistent in web
design—it’s highly recommended to always use lowercase. Note, though, that
XML is case sensitive, so when using CSS with XHTML documents served with
the proper XHTML MIME type, everything must be consistent. Also, the W3
specifications recommend that CSS style sheets for XHTML should use lowercase
element and attribute names.

When you write CSS rules, you place the declaration within curly brackets {}. Properties
and values are separated by a colon (:), and property/value pairs are terminated by a semicolon
(;). Technically, you don’t have to include the final semicolon in a CSS rule, but most
designers consider it good practice to do so. This makes sense—you may add
property/value pairs to a rule at a later date, and if the semicolon is already there, you
don’t have to remember to add it.
If we want to amend our paragraph declaration and define paragraphs as bold, we can do
so like this:
p {
color: blue;
font-weight:bold;
}

You don’t have to lay out CSS rules as done in this section; rather, you can add rules
as one long string. However, the formatting shown here is more readable in print.
Note that in the files available for download, the formatting is changed slightly again:
the property/value pairs and closing curly bracket are both tabbed inward, enabling
rapid vertical scanning of a CSS document’s selectors.

Related posts:

1. Types of CSS selectors In the previous example, the most basic style of selector...
2. CSS Syntax & Syntax Details CSS syntax is easy. A stylesheet contains styles; a style...

Related posts brought to you by Yet Another Related Posts Plugin.