Styling Links
Learn the selectors for the four different link states, how to set your own color and background colors for links and override the default browser settings, how to remove the default underlining applied to links in most browsers, and how to draw a line through a link so users will know they have already visited its destinations. In the lesson you will style the links so that they are in keeping with the design language of the rest of the page.
Link Selectors
Links can have four different states.
link - this is the normal state
visited - when a browser has visited that destination recently
hover - while the cursor is over the link
active - while the link is being clicked
We can create rules that apply to links in any of these states. These statements are very similar to those we have already seen, the only difference being the kind of selector.
The form of this selector is a:state, where a, you'll remember is the name of the actual link element. So you have
a:link
a:visited
a:hover
a:active
NOTE: Its important to note that the order of these selectors is very specific.
Create an a:link style
1. In the CSS Styles panel, click the New CSS Rule icon (+) at the bottom of the panel.
2. Choose Advanced from the Selector Type radio buttons.
3. Choose the mystyle.css stylesheet (or an appropriate stylesheet) under Define in.
4. Type a:link in the Selector text box or type a and then choose a:link from the Selector drop down list.
5. Click OK to continue to the CSS Rule Definition dialog box.
2. In the New CSS Rule dialog box, under Selector Type, select Advanced, which redefines the look of a specific tag.
3. In the Tag pop-up menu, select or type h1.
4. In Define In, select This Document Only.
5. Click OK.
Note: For now we'll apply the style to this document, later you'll see how to export the style so you can use it in other pages in the site.
The Type Category section changes properties such as font, size, style, color and many other type properties.
For example we can set the following properties for our link state of our anchor (a) tag.
- For the Decoration, Select None, this will get rid of the underline default for links.
- For Color, select the color picker and choose a color, or type #024B76 for the hexidecimal color.
The Border Category section adds a border with properties of style, width and color.
For example we can set the following properties for our link state of our anchor (a) tag.
- For the Style, Uncheck the Same for all, then Select Dashed, for the Bottom this will add a subtle dashed underline for links on our page.
- For the Width, Uncheck the Same for all, then Type 1, for the Bottom this will add a 1 pixel width.
Duplicate a:link to create an a:visited style
Since the style for the a:visited state will most likely be similar to the a:link style we can easily duplicate the a:link style then just change the things we need to change.
To duplicate a style do one of the following:
1. Select the a:link style (or other appropriate style).
2. Click on the drop down list on the top right corner and choose Duplicate from the list.
or
Right click on a:link and choose Duplicate from the drop down list that appears.
3. In the Duplicate CSS Rule dialog box provide the following selections
- Under Selector Type choose Advanced
- Under Selector type or choose from the drop down list a:visited.
The Type Category section changes properties such as font, size, style, color and many other type properties.
For example we can change the following properties for our visited state of our anchor (a) tag all other properties will be the same as our a:link state.
- For Color, select the color picker and change the color, or type #A44752 for the hexidecimal color.
For the hover and active states you can follow similar steps to those above either creating new styles or duplicate the a:link or a:visited style.