SakhaliaNetHome PageHistory of the RailwayVorKutaAcceptance of cookiesAcceptance of cookies

CSS Tutorial :: Part II

CSS Example #6

Selectors

By using selectors, we can define different styles for different elements, classes and identifiers. There are several types of selectors:

Universal selector: affects all the possible elements in a document. It is indicated by an asterisk. The example shows a typical use that developers give to this kind of selector: to show the border of every element in the hope of finding what is causing a CSS conflict.

* {border:solid 1px red;}

Element type selector: allows to style elements based on their HTML type.

div {border:dotted 3px blue;}

Descending selector: allows to style elements, based on their HTML type, which are nested inside other elements. In this example the styling applies for any anchor element that is nested inside a div element.

div a {color:blue; text-decoration:underline;}

Class selector: allows to style elements based on their class.

.headline {font-family:verdana,arial,sans-serif; font-size:18px;}

Identifier selector: allows to style elements based on their identifier.

#mainContent {border:dotted 3px blue;}

Different types of selectors can be combined together to achieve very specific requirements. This is a good programming practice that helps to get rid of an excess of classes in the code. In this example we apply style to any anchor elements and any elements belonging to the headline class that are contained by the element whose identifier is mainContent (it is an open secret that this element is a div).

#mainContent a {color:blue; text-decoration:underline;}
#mainContent .headline {font-family:verdana,arial,sans-serif; font-size:18px;}


This was a very basic example; the number of combinations possible is huge. This allows endless possibilities when styling documents. The better this technique of combining selectors is mastered, the cleaner the structure of a document can be.

In this final example, that shows the full structure of the CSS-HTML code, we apply a generic style for every paragraph and a different color for every paragraph that belongs to the class "blue".

/* CSS in header */

<style type="text/css">
p {font-family:verdana,arial,sans-serif;}
p.blue {color:navy;}
</style>

/* (X)HTML */

<p>This is a normal paragraph.</p>
<p class="blue">This is a navy blue paragraph.</p>
<p>This is a normal paragraph.</p>
<p class="blue">This is a navy blue paragraph.</p>

This is a normal paragraph.

This is a navy blue paragraph.

This is a normal paragraph.

This is a navy blue paragraph.

CSS Example #7

Defining a particular style

Usually it is necessary to define a style that will be applied only on a specific part of the document and not to all the elements of a certain type or other parts of the document. This is done by assigning identifiers to certain elements and then make reference to them inside the stylesheet with the following syntax: #style_name {attribute_1:value; attribute_2:value; etc...}. As this is an identifier, we can't use repeated times on the document the name assigned to it, but only once.

Beware the rules of specificity. In this example, instead of using a document-level stylesheet to style the text, I had to use an inline style, because the stylesheet rules applied to the diverse containers on this page that enclose the example text have greater specificity than the document-level stylesheet.

/* CSS in header */

<style>
#my_style {color:red; text-transform:uppercase;}
</style>

/* HTML in body */

<span id="my_style">This text uses a defined style</span>
This text uses a defined style

CSS Example #8

Defining a contextual style

Sometimes we need a style to be applied to elements that are in relation with other elements, this is, in a particular context. For example, if we want to apply a certain style to only the blockquote elements that are placed inside p elements or only the h3 elements of a certain class placed inside blockquote elements. The code below illustrates this example:

The names of the elements involved are separated by spaces. The hierarchy goes from right to left, so in the example it is the blockquote element who is nested inside the paragraph and not otherwise. The list of elements can be as long as needed.

/* CSS in header */

<style>
p blockquote {color:red; text-transform:uppercase;}
h3.blue blockquote {color:blue; text-transform:uppercase;}
</style>

/* HTML in body */

<blockquote>
<h3 class="blue">This is a blue heading</h3>
</blockquote>

CSS Example #9

Defining the style of a document

Inside the stylesheet we have a range of selectors and their properties enclosed within curly brackets. These properties are applied throughout the entire document and are less specific than the properties set by inline styles. Hence, inline styles should be able to overwrite the properties set by document-level stylesheets. Selectors point to different HTML elements, and as seen in the example below, they can be placed alone or grouped. It is left to the programmer how to organize these elements in the most efficient way. The symbols /* and */ are used to delimitate comments that we may want to add, like in any programming language.

Another interesting technique for document-level styling is to style directly the body element of a particular page by adding an identifier or a class to it.

<style type="text/css">
/* This is a document-level stylesheet */
body {background:yellow; font-family:monospace;}
h1, h2, h3, h4, h5 {color:navy;}
</style>

CSS Example #10

Selectors

This example shows the full code used to define a generic class that will work with any type of element that is included in the class.

/* CSS in header */

<style type="text/css">
.navy {color:navy;}
</style>

/* (X)HTML */

<div class="navy">This is a navy blue div.</div>
<p class="navy">This is a navy blue paragraph.</p>
<span class="navy">This is a navy blue span.</span>
This is a navy blue span.

CSS Example #11

Defining the style of a document

We can combine external and internal stylesheets inside a same document. Remember that unlike internal stylesheets, external stylesheets shouldn't include the style elements, but only the selectors and their properties. The example below has two external stylesheets and an internal stylesheet. When loading more than one stylesheet, each one of the stylesheets gets a higher specificity than the previously loaded one. Stylesheets that have higher specificity can overwrite the values of properties defined in stylesheets that have lower specificity, so if a certain property is defined in two different stylesheets, the value used for that property will be the one defined in the stylesheet that has higher specificity.

<style type="text/css" src="css/main_style.css"></style>
<style type="text/css" src="css/new_style.css"></style>
<style type="text/css">
.our_style {color:blue; text-aling:center;}
#my_style {font-weight:bold; text-align:center; color:blue;}
</style>