I. How CSS Works

CSS full name cascading style sheet, which is a computer language used to represent file styles such as HTML (an application of the standard Universal Markup Language) or XML (a subset of the standard Universal Markup Language). is to be able to really do the Web page performance and content separation of a style design language, the Web page can be the location of the object of precise pixel control, support for almost all font size style, with the ability to edit the Web object and model style, and be able to conduct preliminary interaction design, is currently based on text display the best performance design language.

CSS Rules

A CSS document consists of a series of rules, a CSS rule is actually a CSS directive, which first selects the HTML element and then sets the style of the selection element.

Here is a simple CSS rule that sets the background color of the paragraph to green

P {background-colorGreen}

CSS Basic rules

A CSS rule consists of a selector + declaration two parts

Selector: Indicates the element to select

Declaration: consists of a property and a value, which indicates which aspect of the element is affected, and the value is actually a state of the attribute.

In the example above you can see that a rule is from left to right: selectors, left brackets, attributes, colons, values, right curly braces extend 1 to the basic rule: multiple declarations are included in a rule

P {colorgreen; font-size 45px; Font-weight Bold}

Add a semicolon after each declaration to separate

Extension 2 to basic rule: multiple selectors grouped together

H1,h3,p{colorgreen;  Font-size45px; Font-weight Bold}

The selectors are separated by commas
Extension 3 to basic rule: multiple rules applied to the same selector

H1,h3,p{colorgreen;  Font-size45px; Font-weight Bold}

Now we want the background color of the p paragraph to be blue, and we can continue to add a rule

P {background-colorBlue}

CSS Selector categories

All selectors for selecting a specific element are divided into three types: context selector, ID and class selector, attribute selector

Context Selector