CSS: Pseudo-classes and pseudo-elements. CSS usage examples.

Pseudo-classes

User agents commonly display unvisited links differently from previously visited ones. CSS provides the pseudo-classes :link and :visited to distinguish them: The two states are mutually exclusive.

Let's look at the following example. We want to make all our links blue and displayed with different font. To achieve this we can do the following:
Code Result 
<style>
  a:link {
   font-family: "Monotype Corsiva", italic; 
   font-weight: bold; 
   color: blue;
  }   
</style>   
...
<a href="http://www.w3.org/TR/REC-CSS2/">CSS specification</a>
We can also make this link look different if it's been already visited:
Code Result 
<style>
  a:visited {
   font-family: Verdana, monospace; 
   font-weight: normal; 
   color: blue;
  }   
</style>   
...
<a href="http://www.w3.org/TR/REC-CSS2/">CSS specification</a>
Using this two pseudo-classes we can make our links look like normal text (even not being underlined! hint: use text-decoration property).

Pseudo-elements

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases: These pseudo-classes are not mutually exclusive. An element may match several of them at the same time. The following example shows how to change a link only while the mouse cursor is over it.

Two more pseudo-elements :first-letter and :first-line will define style for the first letter and the first line of an element respectively. For example, if we want to start each paragraph with a big pretty colorful letter we can do something like this: 

<style>
  p:first-letter {
    color: blue;
	background-color: #f2f4d2;
	font-size: 250%;
	font-weight: 800;
	font-family: "Monotype Corsiva", italic; 
  }
</style>
and the very first letter of each paragraph in our document will be displayed with blue bold Monotype Corsiva font on yellow backgroung. You can find the complete example here.

Similarly, pseudo-element :first-line will define style for the very first line.

How to use CSS

Let us return to the discussion of applying styles to HTML elements. In this lecture we limit ourselves with three options:
  • inline styles
  • embedding styles
  • external styles

    Inline styles

    This way to insert styles in an HTML document is probably the easiest. To apply some style rules to an element all we need to do is to add parameter style to the elements tag and in the string value list all the rules. Here is a short example that shows how to create a square button with white background and big blue font:
    Code Result 
    <form>
<input type=button value=OK 
       style="width:60px; height:60px; background-color:white; 
	          color:blue; font-size:24pt; font-weight:bold;">
</form>
    This method is very convenient for debugging when you just need to figure out how exactly your style changes the element, but we do not recommend to use it very often. Of course, there is nothing wrong with using it, but the whole idea of CSS is to doing a little editing change a lot of elements. It's also convenient to have all you style rules for different elements in one place (in the header section or in separate file). Thus, even if you need to define some style for only one element it's better to assign this element a specific ID and define styles for an element with this ID using embedding styles.

    Embedding styles

    Embedding styles are included in an HTML document using <style> tag. This tag creates a subsection in the header section. Let us rewrite the previous example by defining style rules for a specific ID:

    We would like to illustrate usage of embedded style sheets. We'll take this course syllabus as an example. As you can see the original syllabus is nothing but pure HTML file (no CSS rules used). Now we want to modify the way this document looks without actually editing the content. So, we decided to use embedded style sheets and created a style section in the header. In this new section we defined rules for such HTML elements as H?, TABLE, A, TD, TH, etc. All the rules we defined are below:

    Thus the modified version differs from the original one only by this style section in the header. Now compare their looks.

    External styles

    The next question under consideration will be this. If we liked our new design that much ( yeah, right!) that we decided to apply the same rules to all our pages. What should we do? Of course, we can insert identical style section with exactly same rules to all our documents, but this approach has a significant disadvantage. Namely, if we later decide to slightly change the rules we'll have to edit all these documents. In such situation the best way would be to use external styles. We create a new file (for example, syl.css) and include all CSS rules in this file. Now all we need to do is to include a link to this file in all our documents. To do so we need to add HTML tak <link> in the header section like this: 
    ...
<head>
 <title>Syllabus<title>
 <link rel=stylesheet type="text/css" href="syl.css">
<head>
...
    Parameter rel tells the browser that we are including style sheets in the document. Parameter type specifies how the included file should be treated, and parameter href points to the file to be included. As you can see the new version of the syllabus it looks exactly the same as the previous styled version, but doesn't contain the style rules in it.

    This method also has another small advantage. If user intensively uses documents from your web site, then she or he doesn't have to download the same style sheets file more than once. This file would be stored in local cache. Not a big deal, but still ...

    And finally, we'd like to mention that we can combine all the approaches above. One document can include several external style sheets (from different files), a set of embedded rules, and inline rules for HTML elements. As an example of this you can see the source of this document.