CSS Structure2

Structure: Using CSS to structure space in HTML documents

Basic CSS space properties

The ability to control the space around elements of a document is important in presentation and layout

Designers have had to use workarounds like the <pre> tag for white space or <blockquote> for indenting

Transparent pixel shims are used to push text around

Many have used <table> markup to control space

What kind of space is used on a page?

Block elements

Block elements are surrounded by a "bounding" box that abuts text on the sides and is several pixels above the top line of text and below the bottom line of text

This is a bounding box

Bounding spacing

There are three "belts" of space outside the box

margin: space between the edge of the element's bounding box and the edge of the nearest element's bounding box box

border: space between outside ofthe element's bounding box and its padding

padding: space between the text and the border

Box spacing

margins

There are five properties that can be used in various combinations to set margins

margin-top

margin-right

margin-bottom

margin-left

margin: this can have between 1-4 of the above values

Each property can take one of three values:

length: can be pt, in, em, mm, cm

percentage: will be a percentage of the width of the parent element

auto

These values will affect the entire contents of the box (like the lines of a paragraph)

Often, margins will be set all at once using the margin declaration

If the declaration only receives one value, the value applies to all four margins

If two or three values are set, the missing values are taken from the opposite sides

Top has the same value as bottom, left has the same value as right

The order to set the margins is: top --> right --> bottom --> left

So, to set different margins on successive paragraphs, the following rules mix up the margin settings and units of measurement:

.marga { margin-left: 4em }
.margb { margin-right: 30% }
.margc { margin-top: 10pt }
.margd { margin-top: 50pt;
margin-bottom: 14pt
}
.marge { margin-left: 1in }

Each will be attached to a different <p> and the font size has been reduced to allow the text to fit on the page more easily

Here goes:

What are Cascading Style Sheets?

(The left margin has been pushed to the right with margin-left="4em")
CSS have "been created to give Web designers the influence they want while retaining the Web's interoperability and accessibility" (Lie and Bos, 1997; vii). Because CSS can be attached "to structured documents on the Web (e.g. html), authors and readers can influence the presentation of documents without sacrificing device-independence or adding new html tags" (W3C, 1997).

(The right margin has been pushed left with margin-right="30%")
A CSS contains a set of rules that defines how the elements of a document will be displayed to a user. These rules use a syntax to specify how a particular html element (affecting text, font selection, images, spacing, white space, color etc.) will appear; they also can be applied to groups of html elements, which can be defined in non standard terms, nested html elements, and even discrete blocks of text.

(The top margin has been extended with margin-top="10pt" and the left margin has been pushed right with margin-left="2em")
Style sheets "cascade," because documents and individual elements within documents can affected by the rules in three different style sheets, one created by the designer, a second created by the user, or a third one embedded in the user's browser. When the browser displays a page and there is a conflict among the rules, the designer's style sheet has priority, followed by the user's and then the browser's style sheets.

(The top and bottom margins have been extended with margin-top="50pt" and margin-bottom="50pt",)
There are several advantages of CSS. pages will be more compact and will download faster because there is less markup. For example, a single rule can be set to define all top level headers as red; every use of this tag in every document affected by the style sheet will have this attribute. Another advantage of CSS is that they allow easy site wide changes to web pages; by changing elements in a style sheet, every web page affected by that style sheet also changes when displayed on the web. A third is that users can define style sheets for their personal preferences or to compensate for a disability. For example, a person with poor vision can specify large font sizes using CSS.

(The left and right margins have been expanded with margin-left="1in" and margin-right="1in")
This 1.5 credit workshop will provide you with an intensive, hands-on introduction to the use of CSS to mark up and publish documents on the WWW (or on your web-based internal intranet). You will also gain a conceptual understanding of the structure, strengths, and weaknesses of CSS, which will allow you to use them effectively and efficiently.

Using this tag a little more carefully, you can control many aspects of page layout.

For example, you could set the space between paragraphs to allow them to stand apart (say, .5em), with the following rule:

p.margh { margin-top: 1.5em;
margin-bottom: 1.5em
}

Here's how it looks using the default settings:

Appendix B. Changes from CSS1

CSS2 builds on CSS1 and all valid CSS1 style sheets are valid CSS2 style sheets. The changes between the CSS1 specification (see [CSS1]) and this specification fall into three groups: new functionality, updated descriptions of CSS1 functionality, and changes to CSS1.

The CSS1 specification was short and concise. This specification is much more voluminous and more readable. Much of the additional content describes new functionality, but the description of CSS1 features has also been extended. Except in a few cases described below, the rewritten descriptions do not indicate a change in syntax nor semantics.

While all CSS1 style sheets are valid CSS2 style sheets, there are a few cases where the CSS1 style sheet will have a different meaning when interpreted as a CSS2 style sheet. Most changes are due to implementation experience feeding back into the specification, but there are also some error corrections.

Here's how it looks with additional space between paragraphs:

Appendix B. Changes from CSS1

Margins are transparent, so whatever is "behind" them (the parent element) will show through

Collapsing margins

CSS provides a procedure for browsers to set margins between elements

When setting top and bottom margins, the larger of the two overlapping margin rules is used

This ensures that space will be consistent between pairs of elements

So, in the case of markup such as this:

</ul>
<p>
The next paragraph

The space between the end of the list and the beginning of the next paragraph will be the largest of these three:

The bottom margin of the last <li>

The bottom margin of the </ul>

The top margin of the following <p>

This will typically be the bottom margin of the </ul>

However, if the rules include the border or padding properties, then the margins do not touch and they cannot be collapsed

To control the space around the box, you can also use some other properties

Next!

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