DisplayS2C Home « Display

With CSS we can change how an element looks or whether an element is visible at all. We have the opportunity to decide what to do with box overspill and how we handle it. CSS also allows us to change the appearance of the cursor, to notify users that an element is being actioned, or a mouse action is available on it. In this lesson we learn how to use the various CSS display properties to do these things.

Display CSS Properties

cursor

Specify the type of cursor to be displayed when pointing at an element.

display

Specifies the type of box generated by an element.

overflow

Specify what to do with the content of a block container, that overflows the element's box.

visibility

Specify whether the box generated by an element is rendered.

Viewing The Display Properties

Lets see some examples of the above display properties to see what they do.

Open up the file with Notepad we created and tested in Lesson 7: Positioning.

You saved the file to your computer in the C:\_CSSIntermediate folder as lesson_7_csspage.html

Copy and paste the following code into the reopened file, overwriting the existing text.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for Display follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Intermediate CSS - Lesson 8 - Display</title>

<style type="text/css">
/* CSS display Property */
.para1 {
	display: inline;
}
.para2 {
	display: block;
}
/* CSS overflow Property */
#div1, #div2, #div5  {
  height: 70px;
  width: 100px;
  padding: 10px;
  margin: 10px;
  margin-bottom: 20px;
  border: 1px solid black;
}
/* clipping and overflow hidden */
#div2  {
  overflow: hidden;
}
/* clipping and overflow scroll */
#div5 {
  overflow: scroll;
}
/* CSS visibility Property */
/* Visibility set to collapse on a table row */
#table1 {
  visibility: collapse;
}
</style>

</head>
<body>
<h1>CSS Display Properties</h1>
<h3>cursor Mouseover</h3>
<p>
<span style="cursor:crosshair;">crosshair</span><br />
<span style="cursor:help;">help</span><br />
<span style="cursor:move;">move</span><br />
<span style="cursor:n-resize;">n-resize</span><br />
<span style="cursor:progress;">progress</span><br />
</p>
<h3>The display property using the inline value</h3>
<p class="para1"> Using the display property inline value.</p>
<p class="para1"> Using the display property inline value.</p>
<h3>The display property using the block value</h3>
<p class="para2"> Using the display property block value.</p>
<p class="para2"> Using the display property block value.</p>
<h3>overflow hidden</h3>
<div id="div2">This div has an overflow property value set
to hidden so all overflow from the div will be clipped.</div>
<h3>overflow scroll and clipping</h3>
<div id="div5">The user agent should provide a scrolling mechanism to view 
the content of overflowing when there is box overspill.</div>
<h3>overflow default</h3>
<div id="div1">This div has no overflow property value set
 and so will use the default overflow setting which is visible.</div>
<h3>no collapse on this table</h3>
<table border="2">
  <tr><th>Fruit</th><th>Colour</th></tr>
  <tr><td>Banana</td><td>Yellow</td></tr>
  <tr><td>Pea</td><td>Green</td></tr>
</table>
<h3>visibility collapse on above table</h3>
<table border="2">
  <tr><th>Fruit</th><th>Colour</th></tr>
  <tr id="table1"><td>Banana</td><td>Yellow</td></tr>
  <tr><td>Pea</td><td>Green</td></tr></table>
</body>
</html>

Save the file in the C:\_CSSIntermediate folder as lesson_8_csspage.html and close the Notepad.

save display

Viewing Our Saved File

From the C:\_CSSIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

display

Reviewing The Code

Mouseover the words under the cursor property heading to see a selection of the cursors available.

The inline display property removes the usual linebreaks before and after the <p> tag block level element.

The overflow property allows us to specify what to do with the content of a block container, that overflows the element's box so we can deal with box overspill. As you can see from the screenshot the default settting is overflowing and obstructing other information on the page. This is often caused by using the CSS height property in conjunction with text. What might appear to fit into a box in one text size may not fit if a user enlarges the text in their browser. So you can either avoid using the height property in this instance or set an appropriate overflow property value.

The visibility property allows us to specify whether the box generated by an element is rendered.

Lesson 8 Complete

Edit the code to use more of the values available with the above CSS properties. The complete list of values is available within the reference section.

Related Tutorials

CSS Intermediate Tutorials- Lesson 7 - Positioning

What's Next?

We conclude the CSS intermediate tutorials with a round-up of the CSS properties used in this section.

CSS Reference

CSS Display Properties

The cursor CSS Property

The display CSS Property

The overflow CSS Property

The visibility CSS Property

go to home page Homepage go to top of page Top