Table of Contents
CSS selectors
In the previous lecture we have only seen a few base CSS selectors. A base selector is basically an existing HTML tag and using CSS you can redefine some of its default properties to style the whole element. For example, we have already seen how CSS changes the text color of paragraph using the selector ‘p’ which is a basic HTML tag.
In addition to these selectors, you can define your own custom selectors, namely the ID and Class selectors. IDs and classes are applied to HTML elements as attributes providing more control over the presentation. It is common among novice developers to confuse ID with class. But understanding the differences will make a lot easier.
IDs
An ID is a unique identifier to an element and can only be used once per page. Typically, an ID is used for any unique page element such as the header, main navigation, footer, or other key parts in the page design.
The ID is applied to an HTML element by referencing it in the HTML using the id=”name” attribute immediately after the opening tag within an element. To illustrate this let us work with two IDs named highlight and default, respectively, and by applying them to two paragraphs:
<p id=”highlight”>This paragraph has red text.</p>
<p id=”default”>This paragraph has green text.</p>
The corresponding CSS uses the hash(#) character to denote the rule using an ID as a selector.
/* Define highlighted text */
#highlight{
color: red;
}
/* Define default text */
#default{
color:green;
}
Existing or new IDs can be combined with selectors in the style sheet to add further control. Let’s say only the main <h2> on your page needs to be different color. That can be done with selector, defined in the form:
element # name
/* Adjust the color of h2 when used as a title */
h2#title{
color:yellow;
}
Here the new rule will override the default <h2> color with yellow whenever an <h2> is identified with the id=”title” in the HTML. Simply
<h2 id=”title”>Title Of My Article</h2>
<!-- ids.html --> <!DOCTYPE html> <html> <head> <title>Use of ID</title> <link rel="stylesheet" type="text/css" href="ids.css"> </head> <body> <h2 id="title">Title Of My Article</h2> <p id="highlight">This paragraph has red text.</p> <p id="default">This paragraph has green text.</p> </body> </html>
<!-- ids.css -->
/* Define highlighted text */
#highlight{
color: red;
}
/* Define default text */
#default{
color:green;
}
/* Adjust the color of h2 when used as a title */
h2#title{
color:yellow;
}
IDs should be unique, single use elements such as the header, sidebar, the main navigation or the page footer. This lets you scan through your markup easily, as all ID attributes will denote unique content areas of the page. They also provide greater flexibility for a more complex CSS application. IDs must be avoided when there is more than one requirement for the same CSS rule. Do not use an ID for anything you will need to duplicate in the future, such as images, link styles, or paragraphs.
Class
A class selector can be employed any number of times on the same page, making it a very flexible method for applying CSS. Class lets an element belong to a group where common style rule are applied, or itself is a reusable object or style. The most common way of applying a class selector just like an ID selector is referencing it in the HTML using a class=”name” attribute of an HTML element.
As with our ID example, the two classes are named highlight (for the red text) and default (for the green text).
<p class=”highlight”>This paragraph has red text.</p>
<p class=”default”>This paragraph has green text.</p>
<p class=”default”>This paragraph also has green text.</p>
Note that as the identifiers are classes, they can be used more than once, hence in this example two paragraphs have been identified as default. That would not be acceptable if IDs are used. The corresponding CSS uses a full stop (.) character to denote class.
/* Define highlight class */
.highlight{
color: red;
}
/* Define default class */
.defautl{
color: green;
}
Classes are very useful when you want to have control over a number of elements. Consider the following drinks list.
<ul id=”drinks”>
<li class=”strong”>Beer</li>
<li class=”strong”>Spirits</li>
<li class=”mild”>Cola</li>
<li class=”mild”>Lemonade</li>
<li class=”warm”>Tea</li>
<li class=”warm”>Coffee</li>
</ul>
Note that the unordered list (<ul>) is given an unique ID. Thus, id=”drinks” will not be used again at any time, allowing that particular list to be styled uniquely. Note also that we used 3 classes named strong, mild, and warm. This allows each drinks group to be treated individually. The CSS allows that the default text for that list will be red, so any list item without a class attribute will default to red text:
/* Drinks list styling */
ul#drinks{
color:#F00;
}
/* Define strong color */
.strong{
color:#333;
}
/* Define mild color */
.mild{
color:#999;
}
/* Define warm drinks color */
.warm{
color:#CCC;
}
<!-- class.html --> <!DOCTYPE html> <html> <head> <title>Use of Class</title> <link rel="stylesheet" type="text/css" href="class.css"> </head> <body> <p class="highlight">This paragraph has red text.</p> <p class="default">This paragraph has green text.</p> <p class="default">This paragraph also has green text.</p> <ul id="drinks"> <li class="strong">Beer</li> <li class="strong">Spirits</li> <li class="mild">Cola</li> <li class="mild">Lemonade</li> <li class="warm">Tea</li> <li class="warm">Coffee</li> </ul> </body> </html>
<!-- class.css -->
/* Define highlight class */
.highlight{
color: red;
}
/* Define default class */
.defautl{
color: green;
}
/* Drinks list styling */
ul#drinks{
color:#F00;
}
/* Define strong color */
.strong{
color:#333;
}
/* Define mild color */
.mild{
color:#999;
}
/* Define warm drinks color */
.warm{
color:#CCC;
}
The result sees the list of items move through shades of grey (defined by the classes).
Use classes to control elements that belong to a group, and also to enhance the behaviour of an ID. It is recommended that classes are not used for styling structural elements of a page, such as the headers, main navigation, etc. although it will work, doing that would reduce the flexibility of your design and make further customisation difficult without any additional markup. Also, make sure if the class is actually necessary, and that the element cannot be targeted by defining a simple rule before defining it with a class. Remember that a class is used for exception to normal styling, and not to define the standard for an element;