Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

 

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

CSS Tutorial: Formatting Hyperlinks with Cascading Style Sheets (CSS)

Links are pieces of text that are hyperlinked to other web pages. They are 'clickable' meaning that a user can put their mouse cursor over the link, click, and go to the designated web page. There are four states that a link may be in on an HTML web page: the link, a visited link, an active link, and a hovered link.

The link, of course, is just the link as it appears when no action has been taken, and the cursor isn't over the link. The default color for links is blue, and they are usually underlined. However, with CSS, you can change this. A visited link is one that the user has visited, and it is usually no longer blue to the user - but it is still clickable.

An active link is a link that has just been clicked. The link turns a different color between the time that the user clicks the mouse button down and then let's goes of the mouse button, meaning that they have activated the link. A hovered link refers to the time that the user has their mouse cursor over a link, but has not clicked.

To manipulate these links, we use the following in our CSS:



a:link {color: #008000; text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:active {color: #ff0000; text-decoration: underlined}
a:hover {color: #3300ff; text decoration: underlined}

When we put the above code within our HTML web page CSS, all of the links on the web page will be green. When the user puts their mouse cursor over the link, it will turn blue, and be underlined. When they click the link, it will temporarily turn red and be underlined, and when they return to this page, the link that they clicked will be gray.

The upper portion of the web page code now looks like this:


<html>
<head>

<title>Your Page Title</title>

<style type= "text/css" title="styleid" media="all">
<!--
body { background-color: 000000; color: ffffff;
margin: 100px;
font-family: Arial, Georgia, "Times New Roman", Verdana, Sans-Serif;
font-size: 12px;
Line-height: 160%
}
H1 { color: ff0000; font-family: Arial, "Times New Roman"; }
ul {list-style-image: url (images/bullet.gif)}
a:link {color: #008000; text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:active {color: #ff0000; text-decoration: underlined}
a:hover {color: #3300ff; text decoration: underlined}
-->
</style>


</head>
<body>

</body>
</html>

HTML allows us to format and manipulate text to make our web pages more attractive and appealing; however, Cascading Style Sheets enable us to make them even more attractive and appealing. This is one of the biggest benefits of CSS, other than the fact that using CSS saves loads of time when creating or changing web pages.

In the next section, you'll learn how to display tables with Cascading Style Sheets.

Previous

Next



  An Introduction to Cascading Style Sheets
business web design  Creating a Basic HTML Page
business web design  Embedding Cascading Style Sheets
business web design  Using Cascading Style Sheets (CSS) to Specify Web Page Formatting
business web design  Manipulating Bulleted and Numbered Lists with Cascading Style Sheets (CSS)
business web design  Formatting Hyperlinks with Cascading Style Sheets (CSS)
business web design  Creating Tables within a Web Page with Cascading Style Sheets (CSS)
business web design  Cascading Style Sheets (CSS) Classes and ID's
business web design  Cascading Style Sheet Codes Chart - Property Index

Web Development Tutorials

  Cascading Style Sheets Tutorial: An Introduction to Cascading Style Sheets
  JavaScript Tutorial: An Introduction to JavaScript
  Web Development: A step by step guide to developing a successful Internet business
  HTML Codes Chart: Copy and paste HTML codes for your web page
  HTML Tips: Copy and paste special effect HTML codes for your web page
  Web Design Tips: Tips, tricks, and special effect codes for your web page
  JavaScript Code Snippets: Copy and paste special effect JavaScript codes for your web page
  216 Web Safe Color Chart: Hexadecimal and RGB Color Codes for your web page
  ASCII Character Codes Chart: American Standard Code for Information Interchange character codes chart