Week Three | Part Two: Display Characteristics (cont.)

It worked!

Those pictures of Snuffy sure look like buttons now, don't they? Roll over the images for a special message!

Changing Display from In-line to Block

Let's experiment with the display property using another example.

You will recall from the Week Two lecture that hyperlinks don't usually act like block-level elements. They display in-line and don't cause line breaks. One of these was the <a href> tag ... the tag that creates hyperlinks.

Here are three hyperlinks, all in a row:

Link One > Link Two > Link Three >

Here's the mark up code:

<p>
<a href='#'>Link One ></a>
<a href='#'>Link Two ></a>
<a href='#'>Link Three ></a>
</p>

You might be wondering what that # is doing in my <a href> tag. It's a handy coding trick that will make a hyperlink act like a hyperlink without the need to type in an actual Web site address.

I want to change these links so they display one underneath the other. All I need do is create a new class selector and change the display properties of that selector.

I'll start with my style sheet by creating a new contextual selector called "block":

 a.block, a.block:link, a.block:visited, a.block:active {
 font-family: Arial, sans-serif;
 font-weight: bold;
 display: block;
 font-size: 1em;
 text-decoration: none;
 color: blue;
 background-color: transparent;
 }
 
 a.block:hover {
 text-decoration: underline;
 }

I apply the new class to my links in my Web page like this:

<p>
<a class="block" href='#'>Link One ></a>
<a class="block" href='#'>Link Two ></a>
<a class="block" href='#'>Link Three ></a>
</p>

And here is the result:

Link One > Link Two > Link Three >

Those links sure look like a navigation menu now, don't they?

In this example, I styled something called a pseudo-element.

A pseudo-element has certain interactive properties associated with it. The most common type is the <a href> tag.

We'll be looking at those next week.

By the way, if you move your mouse over on the right side of this page across from the links listed above you'll note that each hyperlink gets enabled. Why do you think that is?

Answer: Because each is a block-level element. Since the links are not contained in a table or division, the pseudo element is active all the way across the page. Not a very good solution if you want your page to be user-friendly!

Go to Week Three - Part Three.