Styling the selected elements

In recent lessons you've been learning about the first part of CSS – selectors. In this lesson you'll start by learning about how we specify the styling of the elements they select. Then we'll put it all together – the selectors and the styling – to create a ruleset.

Property + value = declaration

For each selected element, we need to specify the 'properties' to be styled and the 'value' for each property. For example, you could specify the font colour (property), and you may want that colour to be 'blue' (value).

Each property/value pair is known as a declaration. A declaration is shown below. Notice how a colon follows the property, and a semi-colon follows the value.

	
color: blue;
			

The properties and their values will vary according to the element you are styling. For example, the properties that apply to a paragraph will be different to those for an image. The declarations below could apply to a paragraph.

color: blue;
font-family: arial;					
font-size: 130%;
text-align: center;
			

Declaration + selector = ruleset

When we combine one or more declarations with a selector we create a ruleset. A ruleset can have any number of declarations, each applying a value to a particular property. Below you can see two examples of a complete ruleset. In the first example the selector is a class. In the second the selector is an ID. Notice how the declarations are enclosed by a pair of curly brackets.

	
.classname {
	color: blue;			
	font-family: arial;					
	font-size: 130%;
	text-align: center;			 
	}		

	
#idname {
	color: blue;			
	font-family: arial;					
	font-size: 130%;
	text-align: center;	 
	}		
			

It is likely your stylesheet will have many rulesets. Here's how they look in the stylesheet.