Web design development. Everything about Style Sheet Effects

Style sheets offer a way to control various properties associated with the tags in your document. These properties might control the size, position, font or, in the case of the <A> tag, the color of a tag.

Styles can be defined within your document or in an external style sheet. If you're not very familiar with CSS, we'll assume you are defining styles within your document. In that case, you'll want to place your style definitions within a <STYLE> tag which is contained within your document's <HEAD> tag.

Styles have their own syntax separate from that of HTML. The standard way to insert a style into your document is to use this HTML example:

<STYLE TYPE="text/css">

  <!--

    styles go here

  -->

</STYLE>

The use of the HTML comments ensures that your styles will be ignored by browsers that do not support styles.

To define a style, you specify the tag name (usually in upper case), followed by a list of properties and values enclosed in curly braces. To change all the <P> tags in your document to 10 point italic, you would say

<STYLE TYPE="text/css">

  <!--

    P { font-style: italic; font-size: 10pt }

  -->

</STYLE>

Styles and links

After all that, how can you use styles to manage the appearance of your links? For starters, you can use the color property to control the color of your links:

  A { color: yellow }

*If you do not see the color below then your browser does not support styles.

This changes all your links to be yellow, which is hard to read on a white background.

Links are special in that they have three states: unvisited (LINK), active (ALINK), and visited (VLINK). The style syntax defines three special pseudo-classes that let you define a separate appearance for each link state. For example:

  A:link    { color: blue }

  A:active  { color: red }

  A:visited { color: green }

This style sets unvisited links to blue, active links to red, and visited links to green. The pseudo-classes link, active, and visited can only be used with the <A>. This style definition is equivalent to using:

  <BODY LINK="yellow" ALINK="orange" VLINK="blue">

Multiple link appearances

The <BODY> tag forces the same colors on every link in your document. Styles go beyond this, allowing you to create several link styles and use them within a single document. This trick is accomplished using style classes.

Normally, style rules are applied to all occurrences of a tag within a document. A style class creates a named set of rules that are applied to specific tags as you see fit. By adding the CLASS attribute to a tag, along with the class name, you can apply those style rules to just that tag.

For example, suppose you want two kinds of links in your document: obvious links that are easily seen by the reader, and hidden links that blend into the surrounding text. You could define two classes for the <A> tag like this:

  A.obvious:link    { color: yellow }

  A.obvious:active  { color: brown }

  A.obvious:visited { color: orange }

  A.hidden:link    { color: gold }

  A.hidden:active  { color: gold }

  A.hidden:visited { color: gold }

In this case, the class name follows the tag name, separated by a period (.), and precedes the pseudo-class name.

To create an obvious link, you would say:

  <A HREF=Staff CLASS="obvious">

Similarly, a hidden link is specified with

  <A HREF=Staff CLASS="hidden">

Links created without a CLASS attribute would use the default link colors.

The real power of styles does not stop with colors.

<< BACK