starting with HTML + CSS (Step 5: Styling the links)
The navigation menu still looks like a list, instead of a menu. Let's add some style to it.
We'll remove the list bullet and move the items to the left, to where the bullet was. We'll also give each item its own white background and a black square. (Why? No particular reason, just because we can.)
We also haven't said what the colors of the links should be, so let's add that as well:
blue for links that the user hasn't seen yet and purple for links already visited:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>My first styled page</title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } </style></head><body>[etc.]Traditionally, browsers show hyperlinks with underlines and with colors. Usually, the colors are similar to what we specificed here: blue for links to pages that you haven't visited yet (or visited a long time ago), purple for pages that you have already seen.
In HTML, hyperlinks are created with <a> elements, so to specify the color, we need to add a style rule for “a”. To differentiate between visited and unvisited links, CSS provides two “pseudo-classes” (:link and :visited). They are called “pseudo-classes” to distinguish them from class attributes, that appear in the HTML directly, e.g., the class="navbar" in our example.
Step 1 | Step 2 | Step 3 | Step 4 | Step 5 | Step 6 | Step 7
(W3)
Related Posts
Related Posts |
