Syntax of Styles

Style sheets contain a list of styles, known as rules. The general syntax of a style is as follows:

selector
{
  property: value;
}

The selector may either be an existing tag, or a class. The following example has a selector of p, a property of color, and background, with the values #00f and transparent respectively.

p {
  color: #00f;
  background: transparent;
}

The means that when the <p> tag is used, the colour will be applied from the above style definition.

Using Comments

You can add comments to your style sheets. Comments are not only useful for reminding yourself what a particular style does, but also useful for other project members if you're working in a project group. A comment is anything between /* and */.

p {
  /* Set the colour to Blue for the paragraph tag */
  color: #00f;
  background: transparent;
}

Grouping Selectors

If you want to apply a style to a range of selectors, you can do so by separating them by commas in the selector section. The following example sets the foreground and background colour for a paragraph, and a table column.

p, td {
  color: #000;
  background-color: #fff;
}

Classes

The class attribute is uselful for defining different styles for the same tag. The name of the class is separated from the tag using a period. The class name is then specified to determine which class of the tag is required in the HTML document.

The following example defines three classes of style to be used with the <p> tag.

p.red {
  color: #f00;
  background: transparent;
}
p.green {
  color: #0f0;
  background: transparent;
}
p.blue {
  color: #00f;
  background: transparent;
}

The HTML document can now reference the class of the <p> tag to apply that particular style.

<p class="red">
  This paragraph is red
</p>
<p class="green">
  This paragraph is green
</p>
<p class="blue">
  This paragraph is blue
</p>

If you want to define a class that can be used on a range of tags, you can do so by not specifying the tag name as in the following example.

.whiteOnBlue {
  color: #fff;
  background-color: #39C;
}

You can then use the class in an appropriate html tag. The following example uses the whiteOnBlue class in a <p> tag.

<p class="whiteOnBlue">This text is white, on a blue background</p>

The next example uses the whiteOnBlue class in a <td> tag.

<table border="0" cellpadding="5" cellspacing="0">
<tr>
  <td>Left</td>
  <td class="whiteOnBlue">This text is white, on a blue background</td>
  <td>Right</td>
</tr>
</table>

ID Selectors

All id attributes in an (X)HTML document must be unique. You may specify styles for an id by specifying a # immediately before the id value. This effectively allows you to specify a style for a single instance of an element in the document tree, which is useful for laying out documents.

The following example defines a style for a paragraph with an id of "firstPara".

p#firstPara {
  font-size: large;
}

The style would then be used in the document as follows.

<p id="firstPara">
  This paragraph has been specified with an id attribute, and so may only appear once in the document.
</p>

The following example specifies styles that may be used for layout purposes.

#navBar {
  float: left;
  width: 15%;
  color: #000;
  background: #fff;
  border-right: 1px solid #cc9;
  border-bottom: 1px solid #cc9;
  padding: 10px;
}
#mainContent {
  float: left;
  width: 80%;
  color: #000;
  background: #fff;
  padding: 10px;
}

The styles may then be used in the document to create a two column effect as follows.

<div id="navBar">
  Navigation links in here
</div>
<div id="mainContent">
  Main content in here
</div>