CSS Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value} |
The selector is normally the HTML element/tag you wish to define, the property is the
attribute you wish to change, and each property can take a value. The property and value
are separated by a colon, and surrounded by curly braces:
body {color: black} |
Note: If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"} |
Note: If you wish to specify more than one property, you must separate each
property with a semicolon. The example
below shows how to define a center aligned paragraph, with a red text color:
p {text-align:center;color:red} |
To make the style definitions more readable, you can describe one
property on each line, like this:
p
{
text-align: center;
color: black;
font-family: arial
} |
Grouping
You can group selectors. Separate each selector with a comma. In the
example below we have grouped all the header elements. All header elements will
be displayed in green text color:
h1,h2,h3,h4,h5,h6
{
color: green
} |
The class Selector
With the class selector you can define
different styles for the same type of HTML element.