CSS Syntax
CSS syntax consists of three parts: selectors, attributes, and values:
selector {Property:value}
Selectors (selector) are usually HTML elements or tags that you want to define, attributes that you want to change, and each property has a value. Attributes and values are separated by colons and surrounded by curly braces, thus forming a complete style declaration (persons):
body {Color:blue}
The function of this line of code is to define the color of the text within the BODY element as blue. In the example above, the body is the selector, and the part that is included in the curly braces is the declaration. Declarations are made up of two parts: properties and values, color as attributes, and blue as values.
Different writing and unit
of
value
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;}
There are also two ways to use RGB values:
p {color:rgb (255,0,0);} p {Color:rgb (100%,0%,0%);}
Note that when you use the RGB percentage, the percent symbol is written even when the value is 0 o'clock. But in other cases it is not necessary. For example, when the size is 0 pixels, the PX unit does not need to be used after 0, because 0 is 0, regardless of the unit.
Remember to write quotes
Tip: If the value is a number of words, enclose the value in quotes:
p {font-family: "sans serif";} Multiple declarations:
Tip: If you want to define more than one declaration, you need to separate each declaration with a semicolon. The following example shows how to define a centered paragraph with a red text. The last rule does not need a semicolon, because the semicolon is a separator in English, not a closing symbol. However, most experienced designers will have semicolons at the end of each statement, so the advantage is that when you add or subtract a declaration from an existing rule, you minimize the likelihood of error. Like this:
p {text-align:center; color:red;}
You should only describe one attribute per line, which will enhance the readability of the style definition, like this:
p {text-align:center; color:black; font-family:arial;} Space and Case
Most style sheets contain more than one rule, and most rules contain more than one declaration. The use of multiple declarations and spaces makes the stylesheet easier to edit:
Body {color: #000; background: #fff; margin:0; padding:0; Font-family:georgia, Palatino, serif;}
The inclusion of spaces does not affect how CSS works in the browser, and, unlike XHTML, CSS is insensitive to capitalization. There is an exception: class and ID names are sensitive to capitalization if they involve working with HTML documents.