CSS Tutorial :: Part III

CSS Example #12

Selectors: pseudo-classes

A special type of selectors are pseudo-classes, which allow to reference elements not by their structural features, but by their status. This is the kind of selector used to define the properties of anchor elements when they are visited or the cursor is over them. The different types of pseudo-classes are:

:link: exclusive for anchor elements, refers to links that haven't been visited.

:visited: exclusive for anchor elements, refers to links that have already been visited.

:hover: refers to elements that have the cursor over them.

:active: refers to elements that are active, because they have been clicked.

:focus: refers to elements that have the focus (typically used with input data elements).

a:link {color:blue;}
a:visited {color:green;}
a:hover, a:active {color:red;}
input:focus {background-color:yellow;}

CSS Example #13

Selectors: pseudo-elements

Another special type of selectors are pseudo-elements, which allow to add some special effects in element type selectors. The different types of pseudo-elements are:

:first-line: allows to add a special style to the first line of a text.

:first-letter: allows to add a special style to the first letter of a text.

:before: allows to insert some content before the content of an element.

:after: allows to insert some content after the content of an element.

:first-child: allows to select every element that is the first child of its parent.

:lang(language): allows to select every element with a language attribute whose value is the one specified within parentheses.

p:first-line {color:blue;}
p:first-letter {color:navy;}
p:before {content:url('smiley.gif');}

CSS Example #14

Advanced selectors

Selectors can grant even more possibilities, since a set of advanced selectors was included in the CSS2 specification. These are:

Child adjacent selector: affects the elements that are nested immediately inside other elements, this is, in the first level of nesting. These "child" elements are adjacent to their "parent" element, hence this name.

#mainContent >li {background:url('images/folder.png') no-repeat left top;}

Brother adjacent selector: affects an element that is immediately preceded by another element that has the same "parent". In this example, if we have several paragraphs just after the heading, the style will be applied only to the first paragraph, because it is the one that is immediately after the heading, hence it is called "brother".

h1 +p {font-weight:bold;}

Attribute selector: allows to refer to an element depending on a certain attribute that this element has or on the value of the attribute. Let's see a couple of examples:

Imagine that we have some abbr elements like this:

<abbr title="Cascading Style Sheets">CSS</abbr>

By using an attribute selector, we may specify a special style for these kind of elements that have a descriptive title that shows up when the cursor is placed over them. This helps the user to differentiate the elements that have a descriptive title from those that don't have it.

abbr [title] {border-bottom:1px dotted #999;}
abbr [title]:hover {cursor:help;}

In this second example, we will use the value of the attribute rel to style differently those links that have a nofollow set to them.

a [rel="nofollow"] {

We can target as well attributes that contain a certain keyword in their values, instead of a fixed value:

a [rel~="friend"] {background-image:url('images/friend.gif);}

CSS Example #15


In the world of CSS, rules with more specific selectors override those rules that have less specific selectors. If two rules are equally specific, the last defined one has precedency. To calculate how specific is a rule, each selector type has assigned a numeric value. Specificity of a rule is calculated by the sum of the value of each of its selectors. Unfortunately, specificity is not calculated in base 10, but in a greater, non-specific base number. This is done to ensure that a very specific selector will never be nullified by other less specific selectors. However, if we have less than 10 selectors in a specific selector, we could calculate the specificity in base 10 for simplifying. Following this convention, specificity of a selector is defined by a four digits number:

If the style is an inline style, the first digit equals 1.

The second digit equals the total number of identifier selectors.

The third digit equals the total number of class, pseudo-class and attribute selectors.

The fourth number equals the total number of element type and pseudo-element selectors.

Some examples of specificity are:

style="" - 1000

#wrapper #content {} - 0200

#content .datePosted {} - 0110

div#content {} - 0101

#content {} - 0100

p.comment .datePosted {} - 0021

p.comment {} - 0011

div p {} - 0002

p {} - 0001

For the programming needs of everyday, it will suffice the essential theory: a rule written in an inline style will be always more specific than any other rule; a rule with an identifier selector will be more specific than a rule without an identifier; a rule with a class selector will be more specific than a rule with element type selectors; and finally, if two rules have the same specificity, the last defined one will prevail.

CSS Example #16


An HTML element that contains another element is considered as parent of that element. Hence an element is considered child of the element that contains it. In the example below the elements blockquote and strong are children of the element body, and the element strong is child of the element blockquote. Hence, body is parent of blockquote and strong, and blockquote is parent of strong.

<body><blockquote>This <strong>is</strong> a text line.</blockquote></body>

This characteristic of HTML elements is very important, since generally an element inherites the values of the properties from its parent element. In the following example, the element strong passes its default properties to the word "is", but inherites from its parent element (blockquote) a font size and a color.

<blockquote style="font-size:12px; color:red">This <strong>is</strong> a text line.</blockquote>

Most properties are inheritable; for example, if we want that an entire document uses the font Arial, we can use this command:

<body style="font-family:Arial;">

This way, all the elements that are child of the element body will use the font Arial.

Generally, if a child element does not set its own style, it will inherit the style of its parent element. The value inherit is used in a property when we want to force it to inherit its value from the same property of the parent element.

Inherited styles have a null specificity and therefore any kind of style directly applied in an element will override them. Actually, inheritance and specificity have something in common: they allow to skip a lot of work when programming stylesheets, by automatically setting the most appropriate default values for every element. Then, when we need something to be different, we just have to specify that part and leave the rest as it is.

Despite being undoubtedly useful, inheritance causes many issues when styling HTML documents. I have displayed few CSS examples in these pages because the properties of the page body and the containers caused conflicts. I will display the most interesting CSS examples that I have available in empty pages, to avoid at once the root of the problem.

CSS Example #17

Creating external stylesheets

Every website is supposed to use extrenal stylesheets as well as the internal ones. Usually websites have, either all of their pages or all the pages of a section following a same style. This adds uniformity to the site, and, not less important, saves a lot of work. Creating a external stylesheet only requires a text editor. The file includes all the required CSS commands without the style tags. Once the file is saved with a .css extension, it is ready to be used as a stylesheet. To load it the desired documents, we have to add to each single document a single instruction like this: <link href="my_style.css" rel="stylesheet" type="text/css">. These external stylesheets, as before mentioned, can coexist with an internal stylesheet used to manage the possible particularities of each page.

/* CSS in my_style.css */

p blockquote {color:red; text-transform:uppercase;}
h3.blue blockquote {color:blue; text-transform:uppercase;}

/* HTML in header */

<link href="my_style.css" rel="stylesheet" type="text/css">

CSS Example #18

Div and Span elements

The block-level element div is useful for adding structure to a document. It allows to contain different elements inside a single block that can be manipulated at once. By adding the elements of each section in a document inside a div which has assigned an identifier, we can manage the layout of a document by just moving around these div elements. For example a div with id="mainContent", a div with id="sideContent" and a div with id="navigationBar" would allow to add structure to a document. However, as happens with classes, there exists as well a bad habit of adding an excess of div elements in the documents, creating unnecessary complexity in the code and spoiling the semantic qualities of the documents. Using too many div elements usually is a symptom of a badly structured HTML document.

The inline element span is used to group inline elements and give them a certain style. Its most obvious application is for styling pieces of text. Albeit span is by default an inline element, it can be displayed as a block-level element by using the property display:block; if it is needed.