CSS Basic Syntax

Reading guidance CSS syntax CSS rules consist of two main parts: selectors, and one or more declarations. selector {declaration1; declaration2; Declarationn} selectors are usually HTML elements that you need to change the style. Each declaration consists of a property and a

CSS syntax

A CSS rule consists of two main parts: a selector, and one or more declarations.

selector {declaration1; declaration2; ... declarationn}

Selectors are usually HTML elements that you need to change the style.

Each declaration consists of an attribute and a value.

The property is the style property (style attribute) that you want to set. Each property has a value. Attributes and values are separated by colons.

selector {Property:value}

The next line of code is to define the text color within the H1 element to be red, while setting the font size to 14 pixels.

In this example, H1 is a selector, color and font-size are attributes, and red and 14px are values.

h1 {color:red; font-size:14px;}

The following shows you the structure of the above code:

Tip: Use curly braces to enclose the declaration.

Different notation 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 RGB values in two ways:

P {Color:rgb (255,0,0);} P {Color:rgb (100%,0%,0%);}

Note that when RGB percentages are used, the percent sign is written even if the value is 0 o'clock. But in other cases it is not necessary to do so. For example, when the size is 0 pixels, px units are not required 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 quotation marks:

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 of a red text. The last rule does not require a semicolon, because the semicolon is a delimited symbol in English, not a closing symbol. However, most experienced designers add semicolons at the end of each statement, so the benefit is that when you increment or decrement a statement from an existing rule, you minimize the likelihood of errors. Just like this:

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

You should describe only one attribute per line, which can enhance the readability of the style definition, like this:

p {  text-align:center;  Color:black;  Font-family:arial;}

Spaces 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 it easier to edit a style sheet:

Body {  color: #000;  Background: #fff;  margin:0;  padding:0;  Font-family:georgia, Palatino, serif;  }

The inclusion of spaces does not affect how the CSS works in the browser, and, unlike XHTML, the CSS is not sensitive to casing. However, there is one exception: class and ID names are sensitive to capitalization if they involve working with HTML documents.