|
CSS structure or syntax is made up of three parts. They are a selector, a property and a value. The property and value are separated by a colon, and surrounded by { }.
They are expressed in the following format;
|
selector {property: value}
|
The selector is normally the HTML element or tag you wish to define, the property is the attribute you wish to change, and each property can take a value.
We have taken the HTML p tag used for starting a new paragraph ( <p> ) and declared that the text
that comes after this tag will have a font of Verdana.
You can use multiple properties for one selector such as this;
|
p {font-family: verdana; color: green; text-align: center}
|
Note that each property is seperated from the next property by a semi-colon. To make it easier
to read I like to write my CSS with one property per line when I have multiple properties;
|
p {
font-family: verdana;
color: green;
text-align: center
}
|
Now maybe you don't want all of your paragraphs to have the same properties. This is where the
Class Selector can help. It allows you to define different properties for the same HTML element.
|
p.green {
font-family: verdana;
color: green;
text-align: center
}
p.red {
font-family: verdana;
color: red;
text-align: center
}
|
Now we add the "class" attribute to our HTML document.
| This HTML Code |
Produces This |
|
<p class="green">This paragraph will be green.</p">
|
This paragraph will be green.
|
| This HTML Code |
Produces This |
|
<p class="red">This paragraph will be red.</p">
|
This paragraph will be red.
|
Let's say that you want some paragraphs to be red and some of your heading tags to be red.
You can omit the tag name ( <p> in our example ) in the selector to create a style that will be used by all the HTML elements
that have a certain class.
In the example below, all HTML elements with class="red" will be have text that is red.
| This HTML Code |
Produces This |
|
<h6 class="red">This heading is red.</h6">
<p class="red">This paragraph will be red.</p">
|
This heading is red
This paragraph will be red.
|
| 
