The display property determines how an element is displayed, or whether it is displayed at all. While there are 17 possible values, I will only be focusing on three – block, inline and none. Personally, I feel that the last value of none is the most important of the three. However, an understanding of the first two properties is needed to utilize its full potential.

1. Display an element as a block

Quite simply, applying this property to an element means that the element will be displayed as a block level element, with a line break before and after the element. This is commonly applied to inline elements so that they respect other properties given to them. (such as absolute positioning)

Given the following link, which is inline by default:

<a id="my-link">Hi, I am a link!</a>

We can apply the display block property as follows:

/* Style for the link */
#my-link {
display: block;
}

Note that applying such a style will only make a difference if other properties have to be applied to the link which are not respected by inline elements.

2. Display an element as inline

Pretty much the same concept as above, except for the fact that we are now displaying the element as inline – there will be no line breaks and the element will not respect certain properties, such as positioning. This is usually the default for most elements, so no CSS is required unless overriding a previous property.

3. Hiding and displaying an element

This is where the display none property comes in – we can use it to display or hide elements under certain conditions, on hover for example. Since I have already done a tutorial on the nuances of the hover selector, I will not be going through them again.

Since an element which is hidden cannot be hovered over, we generally use the parent-child relationship of elements to make this work. Javascript may also be used for this purpose, but it is far more cumbersome, especially if you are already using an external CSS file. Given the following HTML:

<div id="parent">
<div id="child">
Hidden text!
</div>
</div>

We can use the following CSS to achieve the desired effect:

/* Style when no hover */
#parent #child {
display: none;
}

/* Style when mouse-overed */
#parent:hover #child {
display: block;
}

If the parent div is empty, it will not be visible. To make sure the parent div can be seen and hovered over, use the following CSS:

/* Style for parent div */
#parent {
height: 40px;
width: 60px;
background-color: #ccc;
}

That’s all you need to know – anything beyond these basics should be quite simple if you understand this property. Hopefully you will take what you’ve learned from this and let your imagination run wild!

This selector, like most styles, can be applied to absolutely any HTML element in your web page to create a rollover effect. A lot of people still use javascript to do this, which works but is deprecated. In other words, this is the ninja way to do things.

1. Applying hover to a link element

Say that you have the following element in your web page, just a basic link with the id ‘my-link’.

<a id="my-link">Hi, I am a link!</a>

The id tag lets us apply a style specifically to this element – a web page may only have one instance of a given id, which means you can’t give the id of ‘my-link’ to any more elements on your page. Let the link given above be the one we will be styling.

Now, to apply the actual hover effect, you would put the following code in your CSS – which should preferably be an external stylesheet.

/* Style when no hover */
#my-link {
color: #ccc;
text-decoration: none;
}

/* Style when mouse-overed */
#my-link:hover {
color: #000;
text-decoration: underline;
}

This will give you a basic text link that changes color and is underlined upon mouse over. Not good enough for you? Well, read on over to the next section…

2. Applying hover to a div element

What’s great about cascading style is it’s versatility – it can be applied to any kind of element to change it’s appearance in various ways. Let the following be the div element that you wish to apply styling to:

<div id="my-div">Hi, I am a div!</div>

I will give you a basic example, keep in mind that which styles you apply is totally up to you.

/* Style when no hover */
#my-div {
color: #ccc;
background-color: #fff;
text-decoration: none;
font-family: Georigia, serif;
padding: 5px;
}

/* Style when mouse-overed */
#my-div:hover {
color: #000;
background-color:#ddd;
text-decoration: underline;
border: 1px solid #000;
}

This should give you a div element that changes in appearance when hovered over. Of course, these are only example styles – you may choose to apply a different, better styling to your elements.

Note that while we only experimented with <a> and <div> tags here, the hover selector can be used for styling any HTML tags.

Well, that was all. Not too tough, was it? Hope you enjoy your new-found skills!

A note about pre-loading images

Maybe you’re one of those people who don’t like to see the short lived flicker that occurs when you hover your image links – the time the browser takes to load the rollover image. There are ways around that too, my favorite being the background positioning technique. You can read more about that here.