Styling your web links

- Hello everyone, this is Sue Jenkins with Productivity Tips for Web Designers. In this week's lesson, I will show you how you can customize multiple sets of web links with CSS. A web link, or hyperlink, consists of any word, phrase, image, or other object that is coded to transfer the user to another document, location or file in the browser by clicking or otherwise interacting with that link. Hyperlinks have lots of uses including navigation, accessing files on other domains, opening windows, and downloading files.

Here's a sample webpage that I put together to show you that browsers by default will display all of your text hyperlinks as blue, underlined text or in the case of images or other objects that have a border attribute with a blue border. In addition, as you click a hyperlink, the link turns red and then after clicking a link, the link turns and stays purple. In most cases, these default colors will likely not match your custom web design but fortunately, you can override them with style attributes in your CSS.

All links have four states that can be styled with CSS. There's the regular link, your normal unvisited link. The visited link or one that's been clicked on. The hover state, as the link appears when you're actually hovering over it and by the way, you can't hover on a mobile device so that is irrelevant for people on tablets and smartphones. Then the fourth is the active link, as it appears as it's being clicked before you release your mouse. For each of these four, you can control the font family, the font size, the color, the decoration, background color and lots of other CSS attributes like borders, margins, and padding.

Link styles use the "a tag" paired with pseudo-classes that denote the link states. Notice the order of the styles shown here. To ensure that they're going to function properly in a browser, you really need to add them to your CSS in the same exact order. For simplicity, this code example shows you color names instead of hexademical or RGB values so you can really focus on the style syntax, a: and then link visited, hover, or active and then between your curly brackets, you have your style declaration, your property value pair.

Here's an example of how those four link states look on this sample webpage. You could see in my CSS over on the top left that I've added that to my internal CSS and in Dreamweaver, it shows me that now all of my links are this hot pink color and if I launch the page in a browser, the links are now pink when I hover, it turns green when I click down, it turns yellow, and after I click and return a visited link turns orange. So back at this webpage in Dreamweaver, you'll notice that there's essentially three different sets of links.

There's the links on the navigation bar, then there's the general text links and then the footer links and all of the styles currently share the same CSS but with a little CSS class magic, we can easily create separate styles for each of these three sets. So let's start with creating a special set for the navigation bar. To create the special set of link styles, we'll insert the class name "nav" into the pseudo-class selector and then add the style properties we want to use to style the declarations for each of our four link states.

For instance, we can change the font color, the background color, and remove the link underline. Then, to make the navigation links functional with these new CSS styles, all we need to do is add the class name to each of the navigation links in our HTML. So now, in this example, I've already added all the four styles for my navigation and all of the four link states in the CSS. Then to add the class attribute to each of the navigation links, you'll select each one, and then go down to the class menu at the bottom of the properties panel, and choose the style name.

This appends the link with the class name and then a little keyboard shortcut to repeat that same action, command or control y. I'll just select each of those and do command, control y to apply that same class name to each of my links. Now, if we want to create even more link styles, all we have to do is continue to use this same method for adding additional special classes for each of the different sections.

Let's take a look at this page in a browser. We have our navigation button links, that's one set. We have our main links, that was the original set. Now we have our third set of links for the footer. I'd like to say a little word here about best practices. While you can use CSS to change any of the properties for your link styles, you may want to exercise a little bit of restraint by only choosing link styles that will really support your design rather than distract from it. Also, try to reserve the text decoration underline style just for links.

If you really need to emphasize something, use style, weight, size or color instead of an underline. You also want to keep in mind that any style that changes how text flows on your page, could be seen as annoying to site visitors and this can easily happen by changing the hover state, like if you want to change the the font to italic or even change it to bold. Notice how the text is shifting? That can be seen as annoying. In addition, so many visitors really expect to see their links with underline so if you do remove them, make sure that your text is sufficiently different from the surrounding text so that they know intuitively, "hey that's a link!" Good underline replacements include making the text bold.

You could change the link case. You could change the decoration like adding an over-line. You can change the font just for links or add a background color. You could change just links to italic or just to bold but I wouldn't go from normal to italic or normal to bold. Here's another little trick that you can do with CSS. Though mobile users can't experience it, you could change the cursor style for the hover state of your links from an arrow or a pointer to a plus sign or a custom cursor even. You can create your own graphics and save them as a ping 24 and that will give you a nice transparent area around it and then just drop it in to your CSS so you can use your own custom cursor.

For usability and accessibility, you could also create a special link style that includes a graphic before or after any links that lead to external sites. On this example, I've included a little graphic before the link so that anytime there's a hyperlink on my page, that graphic would appear to indicate that it's a link that will take you somewhere else. Another great accessibility trick is to add about three to ten pixels of padding to all of your hyperlinks. This actually grows the click-able area around your text making it easier for people to click.

On this one, there is a little bit of padding all the way around so it increases the click area. Also for any visitors who may be visually impaired, really take care to ensure that your selected colors have enough contrast so that the links look visibly different when squinting. Customizing your link styles is a really great way to make your links more visually appealing. The best styled links will make the link text stand apart from the surrounding text while still being harmonious within the rest of your design. Follow these best practice tips and use your creativity to make your own fully customized link styles for every section of your webpage.