General syntax
Firstly define the element the CSS is written for. Then use { and after putting in the styles, close it with }
This might look like this:
body { styles go in here }In this case, the 'body' is known as the selector. This can get more complicated, and can include many different selectors.
For several elements to use the same style, you can separate them with commas:
p, div, span { styles go in here }The syntax for the styles follows this pattern:
name_of_style_attribute: value;You can include as many styles as you want inside the { and } curly braces. Occasionally, there may be more than one value for a single style, for example with the border attribute:
border: 3px double red;To define styles that should only target elements with a certain class, put a fullstop then the name of the class, after the element. This might look like:
p.nameofclass { styles go in here }This would also need the class to be written inside the HTML 'p' element tags to which it refers:
<p class="nameofclass">If we use the syntax without specifying an element name, then every element of class 'nameofclass', not just p tags, will use this style:
.nameofclass { styles go in here }There are also some pseudo-classes such as :hover. This particular one will only work in some browsers (most notably, Internet Explorer 6-) with 'a' elements. It will be applied when the mouse hovers over the element.
a:hover { color: red; }The pseudo-classes can be used along with classes, like this:
a.nameofclass:hover { color: red; }One of the most powerful uses of this pseudo class is to produce menus written only using pure CSS.
If an element has been defined with an ID then it can be given its own style by using the ID selector. Try to restrict this to cases where it is actually needed:
#id { color: red; font-weight: bold; }You can also target the specific element type, combined with the ID selector:
element_type#id { color: red; font-weight: bold; }Now for some clever stuff. It is possible to target an element based on what its parent elements are, by writing the name of the parent, followed by a space, followed by the name of the element you want to target. Note that the parent does not have to be a direct parent. It could be anywhere in the chain of ancestors. For example, if you want to assign a style to li elements where one of their parents is a ul whose parents include a td whose parents include a tr whose parents include a table whose parents include the body, you can write this:
body table tr td ul li { styles go in here }If you also want to assign that style to p elements, you can combine this with the comma, as shown earlier:
body table tr td ul li, p { styles go in here }Or mix that up however you like. You can also combine it with class selectors. For example, this will match all li elements whose parents include a td of class fish:
td.fish li { styles go in here }If at any time you define two or more conflicting styles, the more specific one should be used by the browser. If you use an inline style, that should override other styles. There are exceptions to these rules, but I will not go into those here.
All styles will have a default value, and that may be different for different elements (for example, the border style has a default value of 'none', but most browsers use something like '2px groove black' as the default border for a fieldset). If you have styled an element with a generic style, and you want to reset it to its default style for that specific element, you will need to manually set it back to its default value. For example, you could set all paragraphs to have a 1 pixel border, then set paragraphs not to have a border if they are inside a div:
p { border: 1px solid black; }
div p { border: none; }Some styles can be represented in a number of different ways. For example, the border style can be used to apply a border to all sides of an element:
p { border: 1px solid black; }It is also possible to specify one border at a time:
p {
border-top: 1px solid black;
border-right: 1px solid green;
border-bottom: 1px solid black;
border-left: 3em solid black;
}It is also possible to specify the thickness, colour, and style separately. Each one can accept 1, 2, 3 or 4 values. If one value is specified, all sides will use it. If you specify two, the first will be used by top and bottom, and the second will be used by right and left. If you specify three, the first will be used by top, the second will be used by right and left, and the third will be used by bottom. If you specify four, they will be used by top, right, bottom and left respectively:
p {
border-width: 1px 2px 3px;
border-style: solid solid solid double;
border-color: black green;
}And this can be done for one side at a time as well. This is generally most useful to specify a normal style, then override it for just one side:
p {
border: 1px solid black;
border-right-color: green;
}These styles are all considered to be as specific as each other, so if you specify the border-right style and then the border style, the right border will be styled according to what you define in the border style.
Last modified: 4 September 2008