CSS syntax

CSS follows a specific syntax to define styles.

This lesson focuses on:

There are three parts in the CSS syntax:

selector {property: value}

selector
The selector is the HTML tag that a style will be applied to. For example, the <p> tag for paragraphs or the <h2> heading tag.
property
The property is an attribute of the HTML tag that will be affected by the stylesheet definition. For example, the background color of a webpage or the color of links.
value
The value that the property of a selector will have. For example, the value of the background color of a webpage can be green or the value of the color of links can be gray.

Example:

body {background-color: gray}

The property and value of a selector are separated by a colon, and sorrounded by curly braces.

NOTE: If a value is more than one word, put quotes around it.

Example:

h2 {font-family: "Comic Sans MS"}

NOTE: If you specify more than one property, each property should be separated with a semicolon.

Example:

body {background-color: gray; color: yellow;}

This example specifies that the background color of a webpage should be gray and its text color should be yellow.

You can make style definitions more easily readable by specifying each property on a separate line.

Example:

body{
background-color: gray;
color: yellow;
margin-top: 0;
}

Grouping styles

You can specify that a group of tags will have the same styles by grouping them together.

Example:

p, h1, h2, h3, h4{
color: blue;
font-family: courier;
}

In this example, all text declared with the tags <p>, <h1>, <h2>, <h3>, and <h4> will be blue in color and Courier in font.