CSS: Syntax

By Xah Lee. Date: . Last updated: .

CSS Syntax

CSS source code looks like this:

p {
 line-height: 1.5;
 width: 600px;
 font-family: sans-serif;
}

li {
 margin-top: 10px;
 color: gray;
}

blockquote {
 color: blue;
}

img {
 border: solid thin black;
}

table.xyz {
 border: 1px solid black;
}

In the above example, it says that any p tag's content (a paragraph) have a line height that's 1.5 times of default, and has a width of 600px 〔see CSS: Length Units〕 , and the font should be sans-serif. 〔see CSS: Common Web Fonts〕

Similiarly, other HTML Tags 's appearance are also specified.

In general, CSS code has lines like this:

selector { propertyName1 : value1; propertyName2 : value2; propertyName3 : value3; }

The selector basically means the tag matching syntax. It is technically called Selector .

Semicolon is used as separator, and is optional for the last item.

Space or line return has no meaning, unless they are inside a quoted string such as "Courier New".

code {
 font-family: "Courier New", monospace;
}

CSS Basics