CSS Part 2

Cascading Style Sheets - More About Pages with Style

In last month's column, I introduced CSS and reviewed the basic syntax. This month I am going to go into a little more detail and discuss some ways to use CSS.

Positioning and Spacing

In theory, CCS provides web authors fantastic control over the spacing and positioning of elements on a web page. The caveat, as always, is the browser. If you target IE5 and Netscape 6 (or equivalent) users, you can use a lot of CCS2's features. IF you want to accommodate earlier browsers, you need to be a lot more conservative. Generally, positioning should be done with block elements, such as <P> and <DIV>. With that in mind....

There are 4 types of position defined in CSS2: static, fixed, absolute and relative.

Static - how pages are already laid out by a web browser.

Fixed - position elements with respect to the top of the window, so that regardless of how the page is scrolled, the element remains fixed.

Absolute - position with respect to the position of the parent element.

Relative - positioning places an element with respect to where it would statically be positioned.

All positions can specify 'top' and 'left'. If none is specified, the default value is Auto (i.e., where the browser normally places it).
Top and Left accept values as:
- a percentage ( % or relative to font size (em)* )
- a unit value ( points (pt), inches (in), centimeters (cm), pixels (px) )
- auto

If an element is a block elements, replaced elements (elements like IMGs) and any element with a position of absolute or fixed, you can also specify height & width.
Height & width accept values as:
- a percentage ( % or relative to font size (em)* )
- a unit value ( points (pt), inches (in), centimeters (cm), pixels (px) )
- auto

* em - relative to font size. em=1 means equal to font size, em=.5 means 1/2 the font size, em=1.5 means 150% of the font size.

Elements that have a height & width can also include "overflow" to tell the browser how to handle content that does not fit in the defined space.
Overflow accepts values of:
- visible (Specifies that the width and or height of an element should be adjusted to accommodate the contents that don't fit into the original area of the element.)
- hidden (Specifies that the contents should be 'clipped' to the height and width of the element.)
- scroll (Specifies that scroll bars should always appear on the element, regardless of whether they are necessary.)
- auto (Specifies that scroll bars should be drawn only when scrolling is necessary to accommodate the content that does not fit into the dimensions of the element.)
- default value is visible.

Now that elements can be laid anywhere on a page, what happens when they overlap? The z-index is used to tell the browser how to handle that.
z-index accepts values of: integer value or "auto". The higher the integer, the closer to the front of the page.

That's the theory. In practice, I find the use of position counter-intuitive and spend a fair amount of time fooling with it. I need to take my suggestion of learning the document object model more seriously!

Time for a couple examples!

1) A paragraph with text having a drop shadow. The parent container will be the document body and we will position it at the very beginning of the document. Since we are positioning relative to the document body, we use a position type of absolute. This e.g. works in IE4+ & Netscape 4+.

Our style sheet is:

p.text2 {
font-size: xx-large;
font-weight: bold;
position: absolute;
left: 1px;
top: 1px;
z-index: 2
}

p.shadow2 {
font-size: xx-large;
font-weight: bold;
color: gray;
position: absolute;
left: 3px;
top: 3px;
z-index: 1
}

The html to display it:

<p class="text2">This is an example of a drop shadow</p>
<p class="shadow2">This is an example of a drop shadow</p>

It doesn't matter where in you html document you place this code, it displays starting at the first pixel of the web page.

2) Another drop shadow using relative positioning and relative sizing. We again define 2 "P" classes, but our shadows position will be relative. Rather than off set the shadow by pixels, it will be offset as a % of the font size. Because we are using relative positioning, both of these paragraphs must be contained in a common container and the shadow must be in the main text's container. This e.g. only works in CSS2 compliant browsers.

The style sheet:
p.text3 {
font-size: xx-large;
font-weight: bold;
position: absolute; * we want this positioned based on it's parent container *
z-index: 2;
}

p.shadow3 {
font-size: xx-large;
font-weight: bold;
color: gray;
position: relative; * position normal location - i.e., exactly where p.text3 is *
left: .05em; * but off set by 2% of the font size *
top: .05em;
z-index: 1;
}

The html to display it:
<p>
<p class="text3">This is an example of a drop shadow * no p end tag here! *
<p class="shadow3">This is an example of a drop shadow
</p>
</p>
</p>

This displays the drop shadow text where ever the first "p" would display on the page, so can be reused to display several drop shadow text paragraphs on a page.

Spacing in CSS

CSS allows us to specify margins and padding for containers. Most block level elements are described by a "box". The components making up a container's box are depicted below:
(See http://www.w3.org/TR/REC-CSS1#formatting-model for the formal definition.)

We can use these to control spacing between block level elements. For example, paragraphs, table & list elements, DIV, etc.

Margins - There are four margins that can be set individually or all set the same with a single command.

margin-top: value;
margin-bottom: value;
margin-left: value;
margin-right: value;
margin: value; (set all margins the same)
Note: If top is set, but not bottom, the bottom margin will be the same as the top. The same holds for right & left. Set the opposite side to zero if you don't want it.

Values are:
- a percentage ( % or relative to font size (em) )
Note: % refers to width of closest block-level ancestor
- a unit value ( points (pt), inches (in), centimeters (cm), pixels (px) )
- auto

Padding has exactly the same elements & parameters.

Border - block level containers can also be circumscribed with a border. Borders are described with:

border-top-width: value;
border-right-width: value;
border-left-width: value;
border-bottom-width: value;
border-width: value; (all sides the same).
The same rule apply for opposite sides as with margin & padding values.

Values:
- thin
- medium (default)
- thick
- a unit value ( points (pt), inches (in), centimeters (cm), pixels (px) ) or em

Borders also have color & style attribute:
border-style: value;

Values:
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset

border-color: value;

Values: named colors or hex values

Borders can be described with a single CSS command:
border: thin silver solid; (no punctuation between attributes)

There are two more aspects to positioning and spacing a block elements box that effect how the container will interact with other containers and the surrounding text. These are: Float and Clear.

Block level containers may appear directly "in-line" or may be floated to one side of the page, temporarily altering the margins of text that may flow on either side of the object.

float: value;

Values:
- none
- left
- right

Clear specifies where the next line should appear in a visual browser after the line break caused by this container.

clear: value;

Values:
- none: The next line will begin normally. (default)
- left: The next line will begin at nearest line below any floating objects on the left-hand margin.
- right: The next line will begin at nearest line below any floating objects on the right-hand margin.
- all: The next line will begin at nearest line below any floating objects on either margin.

Time for a couple examples to put some of this together.

1) Special paragraph. There's one paragraph on the page that has to really stand out. One way to accomplish that could be to give it a background color & a border and center it on the page. CCS1 compliant browser required.

Style sheet:
p.special {
border: .2em solid thin silver;
background-color: #ffe;
width: 60%;
text-align: left;
}

Html to display it:

<center>
<p class="special"> Special paragraph text </p>
</center>

2) We have a collection of images we want to display as thumbnails. We want them neatly displayed in two columns on the page. And we'll make them 'pretty' by providing spacing and borders.

Style sheet:
* images on left side *
div.floatl {
float: left;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}

div.floatl p {
text-align: center;
}
* images on right side *
div.floatr {
float: right;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}

div.floatr p {
text-align: center;
}

* where we will put the images - make sure it's wide enough to accomidate the pictures, margins, border & padding *
div.container {
border: 2px dashed #333;
background-color: #ffe;
width: 300px;

}
* When you float an element with CSS, it no longer takes up any "space" and the background and border show up above the images instead of surrounding them. We need to put some content other than the floated DIVs into the container DIV *
div.spacer {
clear: both;
}

Html code:

<center>
<div class="container">
<div class="spacer">
 
</div>

<div class="floatl">
<img src="castle.gif" width="100" height="100"
alt="image 1" /><br />
<p>caption 1</p>
</div>

<div class="floatr">
<img src="burnout.gif" width="100" height="100"
alt="image 2" /><br />
<p>caption 2</p>
</div>

<div class="floatr">
<img src="date.jpg" width="100" height="100"
alt="image 3" /><br />
<p>caption 3</p>
</div>

<div class="floatl">
<img src="date.jpg" width="100" height="100"
alt="image 3" /><br />
<p>caption 3</p>
</div>
<div class="spacer">
 
</div>

</div>
</center>

This discussion has only touched on a few of the ways CCS can be used for spacing and positioning of elements on web pages. The intention was to provide enough information to get you started and to give you some idea of what to look at to try your hand at use CCS.

Download these samples: www.dalesplace.net/ccs_eg_2.zip

Web references:
http://www.w3.org/TR/REC-CSS1#formatting-model
http://hotwired.lycos.com/webmonkey/authoring/stylesheets/
http://builder.cnet.com/webbuilding/pages/Authoring/CSS/
http://builder.cnet.com/webbuilding/pages/Authoring/CSS/table.html
http://www.webreference.com/authoring/style/sheets/layout/advanced/

Using CSS - Part Two