This tutorial introduces the display property that can be applied to elements via CSS. I will also be using some techniques from the hover tutorial, so you might want to read that first - it is, however, not compulsory.
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!
