Cascading Style Sheet Notes II:
Pseudo-classes, grouping, and floating images

Three new concepts: pseudo-classes, Grouping in a cascading style sheet, and floating images using the inline style property in an <img> tag.


Pseudo-elements and pseudo-class names are case-insensitive. Browsers commonly display unvisited links differently from previously visited ones.  Browsers can also alter the display behavior of links as a result of the mouse hovering over a link or clicking on a link. These behaviors are controlled from a CSS file using the following pseudo-classes.

a:link applies for links that have not yet been visited.
a:visited applies once the link has been visited by the user.
a:hover applies while the mouse is hovering over the the link.
a:active applies when the mouse button is clicked on the link.

See for a sample HTML file that exhibits these behaviors. The CSS for the above HTML file can be seen further below.


In order to decrease repetitious statements within style sheets, grouping of selectors and declarations is allowed. For example, multiple HTML tags in a document could be given identical styles using grouping. Grouping consist of a comma separated list of the tags that will share a common style. The group should be listed first, later style commands will override the group style.

body, a:link, a:visited, a:hover, a:active, h1, h2, h3, p {
 background: olive; 
 color: white; 
 font-family: Tahoma, sans-serif }
a:link { color: lime }
a:visited { color: maroon }
a:hover { background: teal } /* The order of the a pseudo-classes is important here */
a:active { color: yellow }
h1 {background: lime; color: olive; font-family: Nadianne, sans-serif; text-align:center}
p {font-family: Kidprint, sans-serif; font-size: larger }

The above CSS file can be viewed at:
CSS files can be validated at:

Inline Style Property for <img> tag

In HTML 3.2 the <img> tag can float an image on the left or right side of a web page by setting the align property. The align property is NOT legal in HTML 4.01 strict. Images are now floated using an inline style property. This property will also handle the height and width of the image.  See the sample code fragment below:

<p><img src="sharisey.jpg" style="width:200px;height:300px;float:right" alt="Sharisey!"></p>

Note that the <img> tag is an inline tag and therefore must be inside a block level element such as <p>. The style property is actually a miniature style sheet, using semi-colons to separate the elements with full colons between the property and the property value.

CSS Help: