CSS:Classes,Style Properties for the Anchor Tag

Classes

Up to now we have used a single style associated with a single HTML tag but very often in Web page design the same tag needs different styles associated with it depending upon how its being used. Most notably here is the paragraph marker where we often have different styles of paragraph within a single document, for example a quotation paragraph. Of course we could solve our problem by using inline style requests but these would be cumbersome within a large document or large Web site. The answer is to use classes which offer more versatility in allowing you to apply different definitions to the same HTML tag element.

A class is defined by specifying the selector followed by a dot and a class name, for example p.quotation or p.body and the associated class is to be used within the Web page is specified as an attribute to the tag, for example <p class=”quotation”> would select the properties and values associated with the p.quoation definition. Here are some more examples:

Rule HTML Code Presentation
p.red {font-family:Arial; color:red} <p class=”red”>Red text paragraph</p> Red text paragraph
p.green {font-family:Arial; color:black} <p class=”green”>Green text paragraph</p> Green text paragraph
p.blue {font-family:Arial; color:blue} <p class=”blue”>Blue text paragraph</p> Blue text paragraph

If you omit the tag name in the selector then the style can be applied to other tags, for example .red {font-family:Arial; color:red} could be used with a paragraph tag [<p class=”red”>] or a heading [<h2 class=”red”>].

Note: It is important to know that once you start using a style sheet then every HTML tag element used within a document should be included in the style sheet. Even experienced Web page authors get caught-out when adding new elements to an existing Web page and the tags are not included in the style sheet and the presentation results are not what was expected.

Style Properties for the Anchor Tag:

Text tagged with the anchor tag, used to reference other hypertext links, is usually shown underlined and in blue text. After a link has been followed the text is shown in a purple text. These styles can easily be controlled with a style sheet using the following selectors:

Selector Description Example
a:link sets the style for an unvisited link a:link {font-family:Arial; color:red; text-decoration:none}
a:visited sets the style for a visited link a:visited {font-family:Arial; color:green; text-decoration:none}
a:active sets the style for the link when it is linking
a:hover sets the style for the link while the mouse pointer is hovering over the text a:hover {font-family:Arial; color:black; text-decoration:none}

The following table shows some of the properties you can assign to the above selectors:

Property Description
background-color sets the background colour for the link
color sets the colour for the link
font-family sets the font type for the text
text-decoration none, underline, overline, strikethrough

For example:

Here is a hypertext link to the BBC’s homepage. If you place the mouse cursor over the link the text should turn black. Note: the text-decoration:none setting – this switches off the underlining that is associated with hypertext links.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *