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