CSS syntax
CSS rules consist of two main parts: selectors, and one or more declarations.
selector {declaration1; declaration2;… declarationN} The
selector is usually an HTML element that you need to change the style.
Each declaration consists of an attribute and a value.
The property is the style attribute you want to set. Each attribute has a value. Attributes and values are separated by colons.
The function of the following line of code of selector {property: value} is to define the color of the text in the h1 element as red and at the same time set the font size to 14 pixels.
In this example, h1 is the selector, color and font-size are attributes, and red and 14px are values.
h1 {color:red; font-size:14px;}
The following diagram shows you the structure of the above code:
CSS Syntax
Tip: Please use curly braces to surround the declaration.
Different writing
methods and units of values In addition to the English word red, we can also use the hexadecimal color value #ff0000:
p {color: #ff0000; }
In order to save bytes, we can use the short form of CSS:
p {color: #f00; }
We can also use RGB values in two ways:
p {color: rgb(255,0,0);}
p {color: rgb(100%,0%,0%); }
Please note that when using RGB percentage, write percentage even when the value is 0 symbol. But in other cases, this is not necessary. For example, when the size is 0 pixels, there is no need to use the px unit after 0, because 0 is 0, no matter what the unit is.
Remember to write quotation marks.
Tip: If the value is several words, add quotation marks to the value:
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 red text. The last rule is that there is no need to add a semicolon, because a semicolon is a separator in English, not an end symbol. However, most experienced designers will add a semicolon at the end of each statement. The advantage of this is that when you add or remove statements from existing rules, you will minimize the possibility of errors. . like this:
p {text-align:center; color:red;}
You should only describe one attribute per line, which can enhance the readability of the style definition, like this:
p { text-align: center; color: black; font-family: arial; } Space and capitalization 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 style sheet easier to edit:
body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; } Whether it contains spaces will not affect the working effect of CSS in the browser. Similarly, it is different from XHTML , CSS is not case sensitive. There is one exception: when it comes to working with HTML documents, the class and id names are case sensitive.