CSS Document Structure

In the most basic form, a CSS style rule or “rule set” has the following syntax:
selector {property: value;}
Doesn’t that look suspiciously like the structure of an HTML tag? Earlier
I mentioned that the tag syntax and rule syntax were roughly analogous.



html
css                                       <tagname attribute=”value”></tagname>
                                              selector {property: value; }




The tag name of the HTML tag and the selector of the CSS style rule are
similar, and sometimes even the same if you are using the tag name as the
selector. The CSS property is similar to the HTML attribute, and like the
tag/selector, may share the same name.
In a style rule, the selector targets the HTML element that will be affected by
the rule set. The selector is everything that comes before the curly brackets.
The declaration block is everything that is between the two curly braces, and
the style declaration itself is the property: value pair. The semicolon at the
end is not required for a single declaration, but is used to separate declarations
from each other and to end a list of multiple declarations. Therefore, it
is a good habit to end all declarations with a semicolon.
Just as HTML tags can have multiple attribute-value pairs in one tag, you can
have multiple property-value pairs per style rule:
selector {property: value; property: value; property: value;}
For some properties, you can also have multiple values for one property:
selector {property: value, value, value;}
And you can have multiple selectors for a set of properties and values:
selector1, selector2, selector3 {property: value; property: value;}

In contrast to HTML, the CSS style rule always has a selector, the selector
always has a property, and the property always has a value. This is important
to keep in mind as it leads to some of the very first clues to hunt for when
troubleshooting CSS. Forgot a selector? Then the declaration has nothing
to be applied to. Don’t have a property? Then the browser can’t determine
where to assign the value. Missing a value? Then the selector and property
are all dressed up with nowhere to go and won’t render in the browser. Leave
off the opening or closing curly bracket? Then the style won’t render, and the
style declarations following it may be affected as well. Remember also that
misspellings, use of improper terms, and unaccepted values will all have the
same effect: your CSS won’t work as expected. These sorts of errors are among
the most common problems when your pages don’t render as expected.