CSS 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,h2,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,h2,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.

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 use one ‘class’ declaration 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>

Or you could use:

<p class="italic bold">This text is bold and italic.</p>

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.

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.

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;}