CSS TutorialsCss What is
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. 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:
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:
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:
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.