Statements, At-rules, Rule Sets and Selectors in CSS.

A CSS style sheet is composed from a list of statements. A statement is either an at-rule or a rule set. The following example has two statements; the first is an at-rule that is delimited by the semicolon at the end of the first line, and the second is a rule set that is delimited by the closing curly brace }.

@import url(base.css);
h2 {
color: #666;
font-weight: bold;
}

An at-rule is an instruction or directive to the CSS parser. It starts with an at-keyword: an @ character followed by an identifier . An at-rule can comprise a block delimited by curly braces, {}, or text terminated by a semicolon ;. An at-rule’s syntax will dictate whether it needs a block or text.
Parentheses, brackets, and braces must appear as matching pairs and can be nested within the at-rule. Single and double quotes must also appear in matching pairs. Here’s an example of an at-rule that requires a block—the @media at-rule:

@media print {
body {
font-size: 12pt;
}
}

Here’s an example of an at-rule terminated by a semicolon—the @import at-rule:
A rule set (also called a rule) comprises a selector followed by a declaration block the rule set applies the declarations listed in the declaration block to all elements matched by the selector.
Here’s an example of a rule set:

h2 {
color: #666;
font-weight: bold;
}

A selector comprises every part of a rule set up to but not including the left curly brace {. A selector is a pattern, and the declarations within the block that follows the selector are applied to all the elements that match this pattern. In the following example rule set, the selector is h2:

h2 {
color: #666;
font-weight: bold;
}

This selector—which is comprised of a single simple selector—will match all elements of type h2 in an HTML document. A simple selector can either be an element type selector or the universal selector (*), optionally followed by attribute selectors ,ID selectors, or pseudo-classes.
1 A selector can comprise a number of simple selectors separated by combinators , but it can contain only one pseudo-element , which must be appended to the last simple selector in the chain. Here’s a more complex selector:

h2+p.warning:first-line {
color: #666;
font-weight: bold;
}

This selector consists of two simple selectors separated by an adjacent sibling combinator and a pseudo-element. The first simple selector (h2) is a type selector. The second simple selector contains a type selector (p) and an attribute selector—in this case, a special form of attribute
selector called a class selector, which will match HTML class attributes containing the word “warning.” As such, the selector above would match the first line of text within any p element
that has a class attribute value of "warning" and is an adjacent sibling to an h2 element.
Finally, two or more selectors can be grouped, separated by commas (,); the declaration block that follows applies to both selectors. Consider these two rules:

#main ol {
margin-left: 2em;
}
#main ul {
margin-left: 2em;
}

They can be grouped like this:

#main ol, #main ul {
margin-left: 2em;
}

You can read about selectors in detail in the selector reference section. Declaration blocks begin with a left curly brace, {, and end with a right curly brace,}. They contain zero or more declarations separated by semicolons:

h2 {
color: #666;
}

A declaration block is always preceded by a selector . We can combine multiple rules that have the same selector into a single rule. Consider these rules:

h2 {
color: #666;
}
h2 {
font-weight: bold;
}

They’re equivalent to the rule below:

h2 {
color: #666;
font-weight: bold;
}

Although the last semicolon within a declaration block is optional, it’s good practice to include it, as it’ll help you avoid syntax errors in the future. As you start to add declarations to a block, it’s all too easy to forget the semicolon.