CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS Example
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:
To make the CSS more readable, you can put one declaration on each line, like this:
Example
{
color:red;
text-align:center;
}
CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with “/*”, and ends with “*/”, like this:
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called “id” and “class”.
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a “#”.
The style rule below will be applied to the element with id=”para1″:
Example
{
text-align:center;
color:red;
}
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
The class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a “.”
In the example below, all HTML elements with will be center-aligned:
Example
You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with will be center-aligned:
Example
Do NOT start a class name with a number! This is only supported in Internet Explorer.