HTML: Style Sheets (Part 4)

Pseudo-Classes

The anchor tag <A HREF= > is of course used to define a link. This tag has several "pseudo-classes" that are under script control. The pseudo-classes are: A:LINK, A:VISITED, A:ACTIVE and A:HOVER. This is what each of these items controls:

<A HREF=> Pseudo-Class
Controls
A:LINK
links
A:VISITED
visited links
A:ACTIVE
active links
A:HOVER
links that the cursor is over

Typically links are underlined. Let's define links that are not underlined, and have links and visited links be different shades of green. Here is how it might appear:

<style>

a:link { text-decoration:none; color:#33FF99; }

a:visited { text-decoration:none; color:#009933; }

</style>

 

<BODY>

<a href="http://www.yahoo.com">Visit yahoo.com</a><br>

<a href="http://www.hotbot.com">Visit hotbot.com</a>

 

to see this how this code behaves in a window.

 

 

Inheritance

Inheritance takes place when an element in a web page 'automatically' uses the same styles as the element it is inside of. The inner element is said to 'inherit' its style from the outer element. Let's take as an example an unordered list, which uses formatting defined by a class. Inside the list are several list elements. The list elements inherit the style used by the <UL> tag. Here is the code:

<head>

<style>

.special { color:skyblue; font-style:italic }

</style>

</HEAD>

<BODY>

<ul class=special>Strikes and You're Out

<li>One

<li>Two

<li>Three

</ul>

</body>

to see this how this code looks in a window.

Not all properties are inherited. Margins, for example, are not inherited but have to be set for each element.

HTML Help's list of style sheet properties at www.htmlhelp.com/reference/css/properties.html lists, for each property, whether or not it is an inherited property.

 

Contextual Selection Criteria

At times you may want to use a style that depends on where the text is positioned. For example, you may want text inside the <EM> tag to look differently, depending on whether it is inside an <H1> tag, an <H2> tag or an <H3> tag. To do this, list the outer tag first, then the inner tag, then the style definition.

Here is an example of how this might look:

<style>

H1 EM { background-color:pink }

H2 EM { text-decoration:underline }

H3 EM { color:gray }

</style>

</HEAD>

<BODY >

<H1>Welcome to the Annual <EM>Wahoo Party National Convention</EM>!</H1>

<H2>Delegates over 5'11" tall <EM>sit in this section</EM>. All other delegates, <EM>sit in that section</EM>.</H2>

<H3>Delegates over 40 years old <EM>wear a yellow shirt like this</EM>. All other delegates, <EM>wear a green shirt like that</EM>.</H3>

to see this how this code looks in a window.

 

Individual Named Styles

Sometimes you are happy using a given class, but you want to modify just one thing: the color of the text, say, or the font size. You can use an 'individual named style' to do this. See this page that explains 'individual named styles' for more information.

 

Other Resources

Try these links on style sheets:


Page Link
CSS Properties www.htmlhelp.com/reference/css/properties.html
CSS Structure and Rules www.htmlhelp.com/reference/css/structure.html
Style Guide www.w3.org/MarkUp/Guide/Style.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) the eEverything.com web site. Set up the pseudo-classes A:LINK, A:VISITED and A:HOVER to have three different colors (of your choice).

Set up 3 contextual selection criteria. Set the <U> tag so that it does something different when it used inside <H1>, <H2> and <H3> tags. Inside <H1>, the <U> tag should change the background color (your choice of color). Inside <H2>, <U> should cause a "1em" padding around the text. Inside <H3>, <U> should cause a font-weight of 900.

If you work on eEverything.com:
Set up a link to "garden.html" and apply the pseudo-classes for <A HREF= > to the link.

For the contextual selection criteria, inside an <H1> tag announce, "Upcoming Spring Sale Promises Awesome Savings!" . Inside an <H2> tag announce, "Savings of Up To 50% in All Departments!". Inside an <H3> tag announce, "An Extra 10% for the First 100 Customers!".