Home | Site Navigation | Internal Page Navigation | No-Follow | Images
Styles | New Window | | Privacy | Purchase Book on HTML

Cascading Style Sheets and Anchor Tags

In web design, HTML is used to create the structure of the website, while Cascading Style Sheets (CSS for short) are used to impart style to the page. These two ideas overlap in places and there are many commands in HTML that act like CSS. However, many of these have been denigrated by the web community. While the HTML commands for fonts, centering, etcetera, still work, the preferred method is to use a style sheet.

There are both advantages and disadvantages to style sheets. First, it seems the designers of CSS did not consider all the different possibilities of website design, making it difficult to create three columns or footers that span several columns. Second, a quick change to a font or some other aspect of style causes the web designer to deal with multiple files. What at one time might have been dealt with using a simple table structure, now requires a complex of divisions and paragraphs that can absorb hours in design and testing. In spite of these drawbacks the community has accepted many CSS standards. CSS makes it more difficult for scrapers to swipe code. Also, it forces a certain unity of form and function on the web developer.

Using CSS, all the links on a page or a site can be given universal attributes. For blue links, with red active links, purple visited links, and a green text when the link is hovered over, the following code should appear in the style sheet or on the page (omit the "style type" tags on the style sheet):

<style type="text/css">
a:link { color: blue; text-decoration: underline;}
a:active { color: red; text-decoration: underline;}
a:visited { color: purple; text-decoration: underline;}
a:hover { color: green; text-decoration: underline;}
</style>


This is the same code used in the style sheet for this site. Be certain to use the colons and semi-colons in the appropriate places. The ";" should come after each separate command. If you do not want links underlined, set the text-decoration to "none".

What is important to note is that a specific link, or anchor tag, can be given attributes different than other links using style sheets. The easiest way to impose a style on a link is to give it an "id" or "class" and then in the style sheet indicate the properties to be given to that link. An anchor tag with an "id" would look like this:

<a href="http://www.indepthinfo.com/" id="speciallink">In Depth Information</a>.

It is important to note that an "id" can only apply to one tag, while a "class" can be assigned to many tags. In this case, we have named the id, "speciallink". We could also have designated the anchor tag a class in a similar manner. The names of these ids and classes is completely up to the web developer. To create a link that is pink and changes to red when you hover over it, the following CSS code would work:

<style type="text/css">
a#speciallink:link { color: pink; text-decoration: underline;}
a#speciallink:active { color: yellow; text-decoration: underline;}
a#speciallink:visited { color: pink; text-decoration: underline;}
a#speciallink:hover { color: red; text-decoration: underline;}
</style>


A hash mark in the CSS designates a specific "id" while a period would designate a "class". This is what the special link would look like:

Purple Rain

Other interesting effects can be added as well, using other commands such as, font-size:12pt; font-weight: bold; and font-style: italic;. Even a different color background can be added using, background: yellow;1.

There are more tricks that can be done with links. For example, an entire page can be made to be a link, simply by putting an anchor tag around most of the code (just after the "body" tag and just before the "/body" tag). Java Scripts have also been used to make links (though these are recommended only for special purposes).

Now find out how to spawn a new window with a link.


1. HTML Goodies





Contact Us