CSS syntax


Selector, Property, and Value

There are three parts to CSS syntax

Selector { Property: Value }

Selector specifies the element you wish to apply the style
Property specifies the property name
Value specifies the style for the property

Selectors

* { color: red } /* Universal selector */

p { color: red } /* Type selector */

.example { color: red } /* Class selector */

#example { color: red } /* ID selector */

Property and Value

The property and value are separated by a colon.

color: red

Multiple properties

If you specify two or more properties for the selector, separate by a semi-colon.

h1 { padding: 3px; background-color: #f9f9f9; color: red; }

p {
margin: 10px;
color: green;
line-height: 120%;
}

Grouping selectors

You can specify the same properties for multiple selectors by separating each selector with a comma.

h1, h2, h3 { color: red; }

#header, #footer {
border: 1px green solid;
background-color: #f9f9f9;
padding: 10px;
}