Styling links on an HTML web page is easy with CSS. This tutorial will focus on styling hyperlinks using both inline styles and CSS classes defined in a CSS stylesheet. Readers should have a basic understanding of HTML.

Setting Styles on Links Using Inline CSS

The simplest way to style links with CSS is to set CSS definitions on a line-by-line basis. This method is useful for small projects, or for changing one aspect of a single element on a web page.

The first sample code below contains an additional style property that instructs the web browser to display the text link without the default underline.

< a href="https://www.seoogle.info/" style="text-decoration:none;" > Example < /a >

The second sample code below changes the text link color from the default display color (blue) to the specified color (red).

< a href="https://www.seoogle.info/" style="color:red;" > Example < /a >

Multiple changes to the style of a link can also be accomplished by adding multiple definitions within the style property of the link as shown in the third code sample below. This code displays the link without the default underline, and changes the default display color (blue) to the specified color (red).

< a href="https://www.seoogle.info/" style="text-decoration:none;color:red;" > Example < /a >

Unfortunately, specifying link styles with inline CSS does not give web designers access to link states. This is one of many reasons why most web designers will define styles in CSS stylesheets.

CSS Link State Properties

CSS link states give web designers greater control over the display of links included in their web sites. “A List Apart” has a beautiful example that shows how CSS link states can be creatively implemented in web site navigation.

CSS recognizes four states for hyperlinks:

  1. A : link – The style for links in the unvisited state.
  2. A : visited – The style for links in the visited state.
  3. A : active – The style for links that are in the active state. Links enter the active state when a user clicks on them.
  4. A : hover – The style for links that are in the hovered state. Links enter the hovered state when a mouse moves over them.

Setting Styles on Links Using a Stylesheet

Ideally, a web designer will create a single CSS file that contains style information that can be applied to all pages in a web site. That CSS file is called in the head of an HTML file, as shown in the code sample below.

< LINK REL=STYLESHEET HREF="style1.css" TYPE="text/css" >

Below is a simple sample of what the style1.css file might look like. The styles applied in this sample makes every link on the page display with red text and underlines appearing only when a mouse hovers over the link.

a:link { text-decoration: none; color: red; }

a:visited { text-decoration: none; color: red; }

a:active { text-decoration: none; color: red; }

a:hover { text-decoration: underline; color: red; }

More complicated link styles can be defined using a stylesheet. What if a web designer wanted links in the navigation bar to be larger than the rest of the links on the page? This effect can easily be accomplished by defining CSS classes for the two styles of links. The sample code below shows CSS style definitions for classes named “navigation” and “other”.

a.navigation { font-size: 1.5em; }

a.other { font-size: 1.0em; }

The classes can be called from HTML as shown in the sample code below.

< a href="https://www.seoogle.info/" class="navigation" > Example < /a >

< a href="https://www.seoogle.info/" class="other" > Example < /a >

Classes can be reused for multiple links on the same page. IDs are another HTML entity that can be used to define styles, but IDs can only be used a single time on a web page. The following sample code shows CSS style definitions for an ID named “contact”.

a#contact { text-decoration: none; font-size: 0.8em; color: red; }

The ID can be called from HTML as shown in the sample code below:

< a href="https://www.seoogle.info/" ID="contact" > Example < /a >

Expanding Link Styles on the Sample CSS Stylesheets

This tutorial has reviewed the basic information a web designer needs to style hyperlinks in an HTML web page using both inline styles and CSS Stylesheets. Web designers are not limited to the basic samples given in this tutorial. With the tools presented in this article and practice, designers will be able to achieve a variety of professional looking effects that can be incorporated into many projects in the future.

 

Tags: