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 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