Home > Building a Website > Style Website Links

Building Steps

1. Set up a Site
2. Create a Template
3. Create a CSS File
4. Link to a CSS File
5. HTML Basics
6. Set Page Margins & Background
7. Create Site Structure
8. Create a Three Column Layout
9. Style Headings and Paragraph Tags
10. Style Website Links
11. Create Breadcrumb Links
12. Style Round Cornered DIVs #01
13. Style Round Cornered DIVs #02
14. Create Navigation Tabs
15. Adding a Footer
16. Create Editable Regions
17. Name the Categories
18. Create a Page from the Template
19. Create a Library Item
20. Creating More Pages

Style Website Links

Decide why you want to change the link color (and if in doubt, don't)

By default, links tend to be blue before being clicked, red when active (as you actually click it) and purple after being visited. They are also underlined by default. Although this might not fit in with your design, there's a good argument for keeping them in this recognisable format. If something is obviously a link, it's more likely to be clicked than something that isn’t, and the default color scheme is widely used and recognised by web users worldwide.

However, there will inevitably be instances where it would be impractical and highly undesirable to follow this standard formatting, such as in the tabbed menus at the top of this website. For this reason, it’s almost always necessary to change the link styling for certain elements within a site.

For the purposes of this website, we have ‘tweaked’ the colors for the main links in the body copy, keeping the recognisable blue/purple, but changing the hue slightly. Also, the links in the tabs above and menus on the left are radically different in order to suit their surroundings and function.

Here’s how we styled the links.

Create a global CSS Rule for website links

To begin with, I want to set a basic ‘pseudo class’ style for links on the website. These will be a variation on the standard blue for un-visited links and a tweaked purple hue for visited links. Veering from tradition, when a visitor ‘hovers’ their mouse over a link (and as they click on it) I want it to turn black. The underline will remain in place in all cases.

After I’ve created this style, all links will behave in this way unless otherwise specified by other css styles - more of which later.

Create four Anchor Pseudo Classes to control the links

At the bottom of the CSS Styles palette, click “New CSS Rule”.

Now repeat the process for ‘a:visited’ (using color #609) and ‘a:hover’ (using color #000). Obviously the a:visited attribute dictates what the link looks like when it has been visited, and the a:hover dictates what the link looks like when you roll a cursor over it. The only one of these rules we haven’t touched is ‘a:active’ which determines how the link appears as you actually click on it.

Move the rules up the CSS list

I like to keep all the global styles in a CSS document at the top of the document, and you can keep them in order within the CSS Styles palette. Just click on the a:hover style, press shift and click on the a:link style. With all three selected, you should be able to drag them up the list to just beneath the h3 style that was created earlier. If you open the CSS document from the FILES window, you see that the a: styles have all been moved up from the bottom.

Now would be an opportune moment to create the ‘Breadcrumb’ links which nest in the header DIV tag...

Style Website Links - End of Article

Go to previous article | Go to Home Page | Go to next article

Feedback required!

Please send any questions or feedback to: feedback@using-dreamweaver.com or leave it on our Facebook page.