Summary: This module covers the basics of styling links, using the "pseudo class" selectors.
Module Map
Introduction
The primary goal of this "Web Programming Quick Start" series is to get the reader to the point of doing something productive with a minimum of time and effort. It is not intended to be an exhaustive treatment/reference of any of the subjects discussed. This is also very much a work in progress. All comments, criticisms, suggestions, etc. are most welcome.
In the series of modules on XHTML (eXtensible HyperText Markup Language) and CSS (Cascading Style Sheets), we will be following the "current wisdom" on web page construction and design as exemplified by the three excellent web-related books of Rachael Andrew.
This module builds on material discussed in the XHTML and CSS modules. In our examples, we will include the styling rules in the head section of each file, as discussed under "Internal Styling" in a previous module. In practice, you would ultimately use the "External Styling" method of placing the styling rules in a separate file so that any number of pages could access the same set of rule.
A screen recording, demonstrating the material in this module is also available (time permitting).
Below is a table summarizing the example files used in this module:
| Example File | Description |
|---|---|
| demo1.htm | First initial demonstration file |
| demo2.htm | Second initial demonstration file |
| demo2a.htm | Styling unvisited links of demo2.htm with boldface and no underlining and red/underlined on hover |
| demo1a.htm | Styling unvisited/visited links and hover/active links with different "framed boxes" |
| demo1b.htm | Styling unvisited/visited links and hover/active links with different vertical borders (of different thicknesses) |
Preliminaries
This is not the only module where we will discuss styling links, i.e. the anchor, <a...>, tag. The styling we will discuss here is fairly basic, and after we have discussed styling lists, we will combine the styling of lists and links together.
We will use two example files. The first file, demo1.htm is similar to the demo1.htm we used in earlier CSS modules. The only difference is that the font for the page has been styled to be Arial, 12 pt. Figure 1 shows demo1.htm in a Firefox browser, and Figure 2 shows the part of the XHTML fin this file that containing the CSS.
Note: For most of the examples in the CSS modules, the styling rules are contained within the XHTML file in the head section of the document, rather than being contained in a separate css file. This is done only because it allows for one fewer figure for each example. In practice these styling rules would likely be contained in a separate css file so that the styling could be applied to multiple XHTML files.
Figure 1: Initial Example XHTML file, demo1.htm
Figure 2: XHTML code for demo1.htm
The second example file is demo2.htm and is a simple bulleted list of links taken from those listed at the conclusion of these CSS links. It also has the font for the page styled to be Arial, 12 pt. Figure 3 shows demo2.htm in a Firefox browser, and Figure 4 shows the XHTML in this file that containing the CSS.
Figure 3: Initial Example XHTML file, demo2.htm
Figure 4: XHTML code for demo2.htm
The Anchor "Pseudo Class" and a Simple Styling Example
Recall in our first module concerning CSS, we discussed the components of a CSS rule, as shown in Figure 5 . To this point the selectors have been XTHML tags such as <p>, <h1>, <img>, etc.
Figure 5: Components of the style rule
Now we will see a selector that is not just an XHTML tag, but is called a "pseudo class selector." The term class will make more sense when we discuss classes later in this set of modules on CSS. All we need to understand here is that there are different events or states that can be associated with the anchor <a...> tags, and we can define style rules for each of these events. The four events related to anchor tags are as follows:
- a:link -- The link (unvisited) as it appears on the web page with no cursor-related action.
- a:visited -- The links has been visited
- a:hover -- The link when a cursor moves over it (hovers).
- a:active -- The link when it is clicked.
Starting with demo2.htm, noted above, we style the links to obtain demo2a.htm as shown in the Firefox browser view in Figure 6, and the segment of the XHTML code containing the CSS style rules are shown in Figure 7.
Figure 6: Initial Example XHTML file, demo2a.htm
Figure 7: XHTML code for demo2a.htm
From the browser view of Figure 6, the only difference visible is that the links are boldfaced and not underlined. However if you move the cursor over a link, you will see that as the cursor "hovers" over the link the color of the text turns red and the text of the link is underlined, as shown in Figure 8 .
Figure 8: Firefox Browser View or demo2a.htm Showing the "Hover Action"
Using the CSS coding contained in Figure 7, please note the following:
- Lines 12 through 15 -- The CSS rule for styling any link before it has been visited is specified as follows:
- Lines 16 through 19: -- The CSS rule for styling any link when the "event" of a mouse moving over the link ("hover") occurs is specified as follows:
- Line 16 -- The selector is a:hover, containing the following two definitions:
- Line 17: color: #FF0000; sets the color of the text to red
. - Linne 18: text-decoration: underline; sets the link to have underling.
- Line 17: color: #FF0000; sets the color of the text to red
- Line 16 -- The selector is a:hover, containing the following two definitions:
Figure 8 shows the result of the styling for the a:hover selector, and since we have not styled the a:visited selector, Figure 9 shows how the browser default for a visited link is rendered by the Firefox browser.
Figure 9: Firefox Browser View or demo2a.htm, Showing a "Visited" Link
Using Borders, et. al. in Styling Links
The examples given in this section are a variation of some shown in the excellent CSS-related books of Rachael Andrew .
Example 1
In this first of two examples, using borders in styling links, we begin with demo1.htm ( browser view shown in Figure 1, and XHTML/CSS coding shown in Figure 2). The result of this styling is shown in Figure 10 and the two segments of CSS code are shown in Figure 11a and Figure 11b.
Figure 10: Initial Example XHTML file, demo1a.htm
Figure 11a: XHTML code for styling a:link and a:visited selectors in demo1a.htm
Figure 11b: XHTML code for styling a:hover and a:active selectors in demo1a.htm
Using the CSS coding contained in Figure 11a and Figure 11b, please note the following:
- Lines 13 through 44 in Figure 11a: Style both a:link and a:visited selectors, and since they are both the same, we will discuss only one: a:link . As you will see, the borders for the top and left sides are the same and those for the right and bottom borders are the same
- Line 14: color: #000000; sets the text color to black
. This is likely the default for most browsers. - Line 15 text-decoration: none; Turns off the underlining of the link, as discussed earlier.
- Lines 16, 20 and 24: top
border-top-width: thick;
border-top-style: solid;
border-top-color: #A87F2F;
set the top border as shown in Figure 10, using color #A87F2F
- Lines 19, 23, 27: left -- Same as top .
- Lines 18, 22, and 26: bottom
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: #392E2C;
set the bottom border as shown in Figure 10, using color #392E2C
. - Lines 17, 21, and 25: right -- Same as bottom .
- Line 14: color: #000000; sets the text color to black
- Lines 45 through 77 in Figure 11b: Style both a:hover and a:active selectors, and since they are both the same, we will discuss only one: a:hover . As you will see, the borders for the bottom and right sides are the same and those for the right and bottom borders are the same. Since these are much the same as already discussed, we will discuss only those definitions that are different from what we have already discussed. These are as follows:
- Line 60: background-color: #E8E5BA; Sets the background color to #E8E5BA
- Lines 57 and 58: bottom and right colors set at #392E2C
- Lines 56 and 59: top and left colors set at #93702E
- Line 60: background-color: #E8E5BA; Sets the background color to #E8E5BA
Figure 12 shows the result when a cursor "hovers" over the link.
Figure 12: Firefox Browser View or demo1a.htm Showing the "Hover Action"
One important note: "Rules for the pseudo-classes won't work reliably with the cascade unless you define them in the following order: a:line, a:visited, a:hover, a: active." (Source: Negrino, p. 144). This reference is the only one I have found concerning this order, but it will take you only one time of taking these out of order to teach this lesson.
Example 2
In this second of two examples, demo1b.htm, using borders in styling links, we begin with demo1.htm, with a browser view showing in Figure 1 and XHTML/CSS coding shown in Figure 2. The result of this styling is shown in Figure 13, and the two segments of CSS code are shown in Figure 14.
Figure 13: Initial Browser View of Example XHTML file, demo1b.htm
Figure 14: XHTML code for styling link in demo1b.htm
Using the CSS coding contained in Figure 14, please note the following:
- Lines 13 through 42 in Figure 14: Style both a:link and a:visited selectors, and since they are both the same, we will discuss only on: a:link (Lines 13 through 27). As you will see only the left and right borders are styled with some padding to place the link "within" the box. Furthermore since the background for the link is a dark color, the color of the text of the link is set to white.
- Line 15: text-decoration: none; Turns off the underlining (decoration) for the link.
- Lines 14 and 16:
color: #FFFFFF;
...
background-color: #392E2C;
Set the color of the text in this box to white (#FFFFFF) and the background color to #392E2C - Lines 17 through 20:
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: .5em;
Sets the padding for the text of the link so that it will fit within the box "appropriately." See also Figure 14.
- Lines 21 through 26:
border-right-width: 3px;
border-left-width: 10px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #C6AF52;
border-left-color: #C6AF52;
Set the borders on the left (e.g. 10 pixels wide) and right (e.g. 3 pixels wide) sides of the box (There are none on the top and bottom). See also Figure 14.
- Lines 43 through 50 in Figure 14: Style both a:hover and a:active, and since they are both the same, we discuss only a:hover (Lines 43 through 46).
- Line 44: color: #FFFFFF; keeps the color of the text of the link the same as for a:link and a:visited, namely white.
- Line 45: text-decoration: underline; is the only significant difference, in that the links displays underlined on the hover and active events.
Figure 14, and Figure 15 also show the result with and without a cursor "hovering" over the link.
Figure 15: Firefox Browser View or demo1b.htm Showing the "Hover Action"
Dreamweaver
Dreamweaver can be particularly helpful in specifying CSS rules. This process has been outline in considerable detail in the lecture outlines associated with the C.S. 1308 course (Computer Literacy and the Internet). The discussion of how to specify internal and external file styling rules is contained within the material for the second lecture of the third week (3-2).
Conclusion
The following might also be helpful:
This file was last modified on:
This work is licensed by Ronald Sawey under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.