CSS Tutorial: Syntax
Selectors, properties & values
CSS syntax is made up of three parts:
- selector (often the HTML element you wish to style)
- property (the attribute you wish to change eg. background colour)
- value (eg. the colour you want your background to be)
The way in which these are used is:
selector {property: value;}
You don't have to have each property/value pair on a separate line but it does increase readability - especially in long, complex style sheets.
For example, to set a black background, you would use:
body {background: #000000;}
where #000000 is the hexadecimal code for black.
If the value you want to use contains white space multiple words, put quotes around the value:
p {font-family: 'sans serif';}
You can specify more than one property in a given declaration. The example below shows how to define a center aligned paragraph of italicised text.
p {text-align:center; font-style: italic;}
You can group selectors by separate them with commas.
In the example below, all the header elements have been defined as white:
h1,h2,h3,h4,h5,h6 {color: #ffffff;}
However, whenever you do define a text colour, it is advisable to also define a background colour and vice versa. This can ensure that your text remain readable.
h1,h2,h3,h4,h5,h6 {color: #ffffff; background: #000000;}
Now your white header text will always be on a black background - even if the rest of your page has a white background.
[Top]
The class selector
With the class selector you can define different styles for the same type of HTML element.
For example, you want two types of paragraphs in your document: one italicised and one bold.
p.italic {font-style: italic;}
p.bold{font-weight: bold;}
Now, when you want to use either of the above styles in a web page, you can do the following
<p class="italic">This paragraph will be in italics.</p>
<p class="bold">This paragraph will be bold.</p>
However, you can only specify one class attribute per HTML element at any one time! The example below is the wrong way of trying to get bold, italicised, text:
<p class="italic" class="bold">This text is bold and italic.</p>
The correct method would be to define a third class selector.
p.bold-italic {font-style: italic; font-weight: bold;}
And then use:
<p class="bold-italic">This text is bold and italic.</p>
[Top]
Making selector classes available to multiple HTML elements
If you omit the tag name in a selector, you open it up to be used by any HTML element.
For example, the following class:
.center {text-align: center;}
can be used with any tag as appropriate.
<p class="center">...</p>
<span class="center">...</span>
<td class="center">...</td>
<div class="center">...</div>
can all be used in the same document.
Use class selectors where you think you will need to re-apply the same style more than once in a given document.
If you think that you will need to use the style with different HTML elements, don't include any tag names in the class selector declaration.
[Top]
The id selector
The id selector is different from the class selector.
While a class selector may be applied to many elements in a given document, an id selector can only be applied to only one element within a given document ie. it must be unique within the document.
The style rule below will match a p element that has the id value 'para1':
p#para1 {text-align: center; color: #ff0000; background: #000000;}
The style rule below will match the first element that has the id value 'green':
#green {color: 00ff00;background: #000000;}
So you could have:
<h1 id="green">...</h1>
<h2>...</h2>
<p id="para1">...</p>
in the same document.
But having:
<h1 id="green">...</h1>
<h2 id="green">...</h2>
<p id="para1">...</p>
would be illegal as you would have attempted to repeat the id selector '#green'.
Use id selectors for styles that you are sure you'll only need once in a given document.
[Top]
CSS Comments
You can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date.
Comments are ignored by the browser and begin with "/*", and ends with "*/".
/* This is a comment */
p {text-align: center;}
/* This is another comment */
h1 {background: #ffffff; color: #000000;}
[Top]
