CSS syntax
« Previous: Applying CSS | Next: Typography »
CSS works by defining how an HTML element should be displayed. Consider the following CSS – this can be inserted within <style> tags or saved on its own as a CSS file:
body {
color: #090;
}
h1 {
color: #ea6300;
background: #fffaf4;
}
This code defines the appearance of the <body> and <h1> tags. The tag is specified without its angle brackets, and any properties given to this tag are contained within curly braces { }.
You can create an inline style by simply inserting the properties inside the style attribute of the desired tag. For example:
<h1 style="color: #ea6300; background: #fffaf4;">Heading</h1>
Selectors, properties & values
In this example, body { } and h1 { } are selectors. A selector specifies the HTML element whose appearance is being changed.
color and background are properties. There are many properties that can be defined using CSS; in this case, color sets the colour of the text (and border, if any) within the element, and background sets the background colour of the element (it can also be used to add background images, as we shall see).
Each property is given a value – this follows a colon ‘:’ immediately after the name of the property. In this example, we are using hexadecimal colour codes to define colours. Each value should be closed by a semi-colon ‘;’ before defining the next property.
All CSS rules take the following form:
selector {
property: value;
}
A stylesheet can contain an unlimited amount of selectors, in any order. Each selector can contain as many property-value pairs as you like; these, too, can be in any order you like. Unlike HTML, CSS contains no basic structural code; it simply lists the various selectors and their properties.
For a comprehensive reference of CSS properties, see w3schools CSS reference or HTML dog CSS reference. While the full list might seem bewilderingly long, bear in mind that many properties are not widely supported in current browsers, and so we’ll only be using a (relatively) small number of the available properties.
Grouping selectors
Suppose we wanted to change the colour of all heading tags. We could use multiple selectors – h1 { } h2 { }… However we can save a lot of time by grouping the selectors, like this:
h1, h2, h3, h4, h5, h6 {
color: #ea6300;
background: #fffaf4;
}
This can be used to group as many selectors as we want. Note that selectors are comma-separated.
Nesting selectors
Using selectors thus far has been rather a blunt instrument: we can change the appearance of all instances of a certain tag, but what if we only wanted to change some instances? Nesting is one way in which we can start to get more control over our page. Here’s an example:
li a {
color: #a00;
}
This rule changes the colour of the <a> tag, but it will only apply to an <a> which is contained in a <li>. All other <a> tags will retain the default link colour.
You can nest to as many levels as you like. For instance,
li li table h3 a {
color: #a00;
}
will set the colour of an <a> tag within an <h3>, which itself is inside a <table>, within a <li>, within another lt;li>. As you can see, nesting can get rather fiddly, so take it slowly and avoid unneccessary complexity.
Classes and ids
Classes and ids allow us to specify one, or a group, of HTML elements. This gives us far greater precision in changing the appearance of particular elements.
A class or id is applied to an HTML element using the class or id attribute:
<h1 id="mainheading">Main heading</h1>
<p class="redpara">A red paragraph</p>
An id must be unique – it can only be specified for a single element per page. Classes can be applied to as many elements as you like.
Once a class or id has been defined in the HTML, we can attach styles to them using the following CSS:
#mainheading {
color: #ea6300;
}
.redpara {
color: #a00;
}
Note that (in the CSS, but not the HTML) the id name is preceded by the # symbol, and the class name is preceded by a full stop.
CSS comments
You can add comments to CSS just as you can with HTML, to leave a note for yourself or anyone else who might need to understand your code. Unlike HTML, CSS comments begin with /* and end with */. For example:
body {
/* this is a comment */
color: #090;
}