CSS Structure

Structure: Using CSS to structure html documents

Basic CSS structures

The way your page appears on the screen is due, in part, to the work you do, but it is more dependent on the way the user's browser treats your markup

The box model

Instead of thinking of an HTML page as a tree, it is also possible to think of it as a series of nested boxes

CSS Box model

Tags such as <div> and <p> are separate boxes within the big HTML box

display

This property allows you to define any HTML element as one of four basic element values, without regard for the element's original value

Every element has a default display value

block: this type of element always begin on a new line, so the box stands alone

Two such elements are:

p { display: block}
h1 { display: block }

inline: this type of element is placed in the line of text, so the box is also within the same line

The size of the box is determined by the content it encloses

If the box encloses text that wraps, there will be a box on each line

em { display: inline }
strong { display: inline }
span { display: inline }

list-item: this type of element encloses a list that uses "labels" (the bullet, number, letter, or image that marks the beginning of the list item)

none: this is a value which makes the element inside the box invisible (the browser won't display it and will collapse the space (the words "display it" have been hidden)

Most of the time, you can let the browser's style sheet set the default

For reasons of design or layout, you may, however, use this property to change an <li> from its default, <inline>, to <block>

This may occur if another style sheet changes an element and you want to change it back!

More about display

You can use this property to produce an interesting range of effects

An image normally has a block value, so this markup should have the image separated into its own block:

Here is a small image that has been placed <img src="terminator.gif" alt="Ahnold" /> in the middle of the sentence so you can see the effect

And it looks like this:

Here is a small image that has been placed Ahnold in the middle of the sentence so you can see the effect

Now the value of the image is changed on the style sheet from <block> to <inline> - everything else stays the same and here's what happens

Here is a small image that has been placed Ahnold in the middle of the sentence so you can see the effect

Next!

You are here: http://memex.lib.indiana.edu/hrosenba/www/Workshops/CSS/Demo/cssstructure.html
Last updated 3.15.06 - H. Rosenbaum