2. Basic syntax

CSS syntax

CSS syntax consists of three parts: selector, attribute, and value:

selector {property: value}

Selector is usually the HTML element or tag you want to define. Property is the attribute you want to change and each attribute has a value. The attribute and value are separated by colons and surrounded by curly brackets, thus forming a complete style Declaration (Declaration ):

body {color: blue}

The above line of code defines the text color in the body element as blue. In the above example, the body is the selector, and the part included in the curly brackets is the declaration. The Declaration is composed of two parts: attribute and value, color is attribute, and blue is value.

Different write methods and units of Values

In addition to the English word red, we can also use the hexadecimal color value # ff0000:

p { color: #ff0000; }

To save bytes, we can use the abbreviated form of CSS:

p { color: #f00; }

We can also use the RGB value in two ways:

p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }

Note that when the RGB percentage is used, the percentage symbol must be written even if the value is 0. However, this is not required in other cases. For example, if the size is 0 pixels, PX is not required after 0.

Remember to write quotation marks

Tip: If the value is a number of words, enclose the value with quotation marks:

p {font-family: "sans serif";}

Multiple declarations:

Tip: to define more than one declaration, separate each declaration with a semicolon. The following example shows how to define the center section of a red text. The last rule does not require extra points, because the semicolon is a separator in English, not an ending symbol. However, most Experienced designers add a semicolon at the end of each statement. The advantage is that when you increase or decrease the statement from the existing rules, will minimize the possibility of errors. Like this:

p {text-align:center;color:red;}

You should write only one attribute in each line of description to make the style definition more readable, just like this:

p {text-align: center;color: black;font-family: arial;}

Space and Case sensitivity

Most Style Sheets contain more than one rule, while most rules contain more than one declaration. Multiple declarations and spaces make the style sheet easier to edit:

body {color: #000;background: #fff;margin: 0;padding: 0;font-family: Georgia, Palatino, serif;}

Whether or not to contain spaces does not affect the effect of CSS in the browser. Similarly, unlike XHTML, CSS is not case sensitive. However, there is an exception: if it involves working with HTML documents, the class and ID names are case sensitive.