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 want 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 } |
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 } |
With the class selector you can define different styles for the same type of HTML element.
Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:
| p.right {text-align:right} p.center {text-align:center} |
You have to use the class attribute in your HTML document:
| <p class="right">This paragraph will be right-aligned.</p> <p class="center">This paragraph will be center-aligned.</p> |
Note: To apply more than one class per given element, the syntax is:
| <p class="center bold">This is a paragraph.</p> |
The paragraph above will be styled by the class "center" AND the class "bold".
You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned:
| .center {text-align:center} |
In the code below both the h1 element and the p element have class="center". This means that both elements will follow the rules in the ".center" selector:
| <h1 class="center">This heading will be center-aligned</h1> <p class="center">This paragraph will also be center-aligned.</p> |
Do NOT start a class name with a number! This is only supported in Internet Explorer.
You can also apply styles to HTML elements with particular attributes.
The style rule below will match all input elements that have a type attribute with a value of "text":
| input[type="text"] {background-color:blue} |
You can also define styles for HTML elements with the id selector. The id selector is defined as a #.
The style rule below will match the element that has an id attribute with a value of "green":
| #green {color:green} |
The style rule below will match the p element that has an id with a value of "para1":
| p#para1 { text-align:center; color:red } |
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/", like this:
| /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial } |
