7.0 Grouping of Elements

As well as defining properties for HTML selectors (tags, such as body, h1, p, etc.), it is also possible to define your own selectors using class and id. You may recall that we first came across class and id as attributes in the HTML Tutorial but here these are called class selectors and id selectors. But just like before, class is used for groups and can be used as many times as desired in a HTML document, and id is a unique identifier that can only be used once in a document (but many times in a website, so is extremely useful). Using these as selectors, element properties can be defined in groups in the style sheet. And then specific elements can be targeted in the HTML documents by using <span> and <div>tags. This will become clear shortly so don't worry if this makes no sense yet.

The format for using class selectors in a stylesheet is:

.selector {property:#value;}

And the format for using id selectors in a stylesheet is:

#selector {property:#value;}

The selectors themselves can be called almost anything we wish. For example:

.happy	{width:#600px;}

In addition, these can combined with regular selectors like this:

p.happy	{color:#00ff00;}

An example will help here. Say we had a website on tea and wanted to link to other websites, but we wanted any links to green tea websites to render in green and those to regular tea websites to be brown (and any other links to be blue). In the HTML document we could have (and note we are adding these links into a list):

<p>Links to Tea Websites</p>
<ul>
<li><a href="t1.html" class="greentea">Nettle Tea</a></li>
<li><a href="t2.html" class="greentea">Fennel Tea</a></li>
<li><a href="t3.html" class="greentea">Jasmin Tea</a></li>
<li><a href="t4.html" class="normaltea">Earl Grey</a></li>
<li><a href="t5.html" class="normaltea">Yorkshire</a></li>
<li><a href="t6.html" class="normaltea">Tetleys</a></li>
</ul>

And in the the stylesheet we could add:

a		{color: blue;}

a.greentea	{color: green;}

a.normaltea	{color: brown;}

Remember the id tag is a unique identifier for specific elements and can only be used once in a HTML page. Other than that, it is much the same as using a class selector. For example to target the previous list on teas differently from any other list in the HTML document we could add:

<ul id="tea">

And then in the stylesheet we could add styling for this list. For example:

#tea		{
		width:200px;
		border:1px dotted #ff0000;
		padding:5px;
		}

Id selectors do have one additional use over class selectors when used with links. If you recall the section on internal links within a page in the HTML Tutorial, these unique identifiers can be used to target specific parts of a HTML document, to the extent that a browser will automatically scroll a page to display a specified element. For example, somewhere in a HTML document we could have:

<h2 id="heading1">Heading No. 1</h2>

And elsewhere in the same document we could create a link to that element by using the # selector inside the value of the href attribute. The # must be followed by the id of the tag you want to link to. For example:

<a href="#heading1">Link to heading No. 1</a>

And we could even link to this specific part of this HTML document from a link in a different HTML document like this:

<a href="page2.html#heading1">Link to heading No. 1</a>