untitled

(John Hannent) #1
<html>
<head>

<style type=”text/css”>

img.framed {padding-left: 6px; padding-right: 4px; padding-
top: 6px; border: 12px inset lightblue;}

</style>

</head>

<img class=”framed”src = “texture.jpg”>

</body>
</html>

In this style, you’ve created a class you want to call framed. Its purpose is to
surround any image whose class is specified as framedwith a nice blue inset
border. Any image without the class=”framed”attribute, or with some
other class name attribute, does not get this blue frame. So far so good.

But what is a pseudo-class? Well, folks, it’s not a fake class, as the term
pseudo implies. It’s just a built-in style: a class that the CSS specification
includes that therefore some browsers support and know how to render.
In other words, it’s what CSS has been calling a property.

Pseudo-classes are designed to provide some useful feature, without creating
a new property or adding to the list of HTML elements. It would have probably
have made more sense to just create some new properties, as they’ve done in
the past. Confusing as this terminology is, we now have to live with it: CSS
now features a small handful of special pseudo tricks. Some of them change
the color or other style of an element based on context (such as a hyperlink
that turns a different color to indicate that the user has already visited that
site). Other pseudo tricks are complex ways of selecting based on an ele-
ment’s status within the document tree (such as select all parents with no
child elements).The job of the CSS programmer is to figure out the handful of
pseudo-elements so that we can employ them if needed. Some of them are
pretty useful.

Hyperlink formatting with pseudo-classes ....................................


Here’s an example of a useful CSS pseudo-element. Displaying different kinds
of hyperlinks in different colors frequently helps the viewer to navigate your
page. So, the good, busy people involved with CSS committees decided to
create some built-in (pseudo) classes to handle this very common need.

270 Part IV: Advanced CSS Techniques

Free download pdf