Basic CSS Syntax

CSS Syntax

CSS rules consist of two main parts: the selector, and one or more declarations.

selector {declaration1; declaration2; ... declarationN }

The selector is usually the HTML element you need to change the style of.

Each declaration consists of a property and a value.

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

selector {property: value}

The following line of code defines the text color of the h1 element as red and sets the font size to 14 pixels.

In this example, h1 is the selector, color and font-size are properties, and red and 14px are values.

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

The following illustration shows the structure of the code above:

CSS Syntax

Tip:Please use curly braces to enclose the declarations.

Different ways of writing values and units

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 abbreviation 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 percentages, even when the value is 0, you need to write the percentage symbol. However, in other cases, you do not need to do this. For example, when the size is 0 pixels, you do not need to use the px unit after 0, because 0 is 0 regardless of the unit.

Remember to write the quotes

Tip:If the value is several words, you need to 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 red text. The last rule is that you do not need to add a semicolon, because a semicolon is a separator, not an end symbol in English. However, most experienced designers add a semicolon at the end of each declaration, which is beneficial because it minimizes the possibility of making mistakes when you add or remove declarations from existing rules. Like this:

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

You should describe only one property 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 Sensitivity

Most style sheets contain more than one rule, and most rules contain more than one declaration. The use of multiple declarations and spaces makes style sheets easier to edit:

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

Whether it contains spaces or not will not affect the working 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, class and id names are case-sensitive.