–– workshop home ––

Workshops

Advanced Web 3: Presenter Notes

Introduction

Cascading Stylesheets

How to use multiple stylesheets to add variety to your site(s).

Cascade

The cascade is the sequencing of stylesheets. You can link to multiple external stylesheets. The order of those links is significant. If a style is set on the same named element in multiple external stylesheets, the last-invoked style takes precedence.

Two general rules you should follow:

  1. Most general to most local
  2. Media-general to media-specific
Example
  <link … href="/[path]/university.css" />
  <link … href="/[path]/college.css" />
  <link … href="/[path]/department.css" />
  <link … href="/[path]/specific.css" />
  <link … href="/[path]/print.css" media="print" />

Inheritance

Inheritance isn't the same as cascade. Inheritance governs what any single instance of a style inherits from any parent styles. Knowing how to use inheritance lets you exercise fine control over your pages. Making mistakes about inheritance is a common source of frustrating for designers.

The general rule is that the closer the style is to the actual instantiation of the style, the closer it is to the HTML, the higher its inheritance ranking. There's actually a formula that your browser applies; it imposes the formula and derives a number which it assigns to each instance of a style, and that's how it determines inheritance.

Position

Concepts

Document flow: left to right, top to bottom.

Some things disrupt this flow: e.g., float and clear. When document flow is interrupted, it's up to the page designer to adjust.

Positioning does this to an even greater degree. Potentially, the position style gives us absolute control over the page. In practice, it can be a real headache. But if you're patient, and if you thoroughly understand the flow of your document, you can pull off some neat stunts.

Browser support of positioning was erratic until recently, so you won't find a lot of this out in the wild.

Syntax

element { position: var; } where var is:

Relative positioning moves an element relative to its original position.

Absolute positioning places an element with regard to its container.

Fixed is like absolute, but the element stays at that point on the page regardless of scrolling.

Static is the default behavior of all elements. Static is needed only when you have set an element to one of the other three and now want to set it back.

Example

Use this file: Position Example

Exercise

Layers

Introduced with CSS2, layers like positioning seem to offer vast potential for design, but poor browser implementation has kept it rare.

Concepts

The background is layer 0. Everything else is on layer 1 unless otherwise specified.

To define a layer, you must also designate a position. Putting an element on another layer takes it out of normal document flow.

Syntax

element { z-index: n; } where n is any positive or negative integer.

If the integer is negative, the element is actually beneath the background layer.

Example

Use this file: Layers Example

  1. Uncomment all the z-index statements
  2. Set div4 z-index to 1

Handling the Overflow

When you start chopping up a page with positioning, sometimes the content exceeds the window you have made for it. The overflow style defines how a browser should handle that situation.

The Universal Selector

This one is handy when you want to set an attribute on all elements. I don't use it, but other coders are fond of it.

Syntax

* { style; }

That's it. This applies style to absolutely every HTML tag. Where the style isn't appropriate (e.g., font-family for img), it's simply ignored.

The uses for this are subtle. Eric Meyer has a good article, a link to which can be found in the References.

Attribute Selector

Adjacent Selector

Imagemaps

Concept

Using a single image, allow clicks on different regions to request different web pages.

Syntax

This one's more complicated. It requires multiple statements to make it work, and it requires specifying coordinates on the screen, which means using a separate tool to find those values.

Example

Here is a simplified sample:

<img src="[path]/[imagefilename.ext" alt="text" title="text" usemap="#string" />

This can go anywhere in the file. You can have multiple images serving as imagemaps, if you wish. The usemap parameter is the key. string can be any valid string (must start with a letter).

<map name="string">

<area	shape="circle"
	coords="r,x,y"
	href="url"
	title="Circle">

<area	shape="rect"
	coords="x1,y1,x2,y2"
	href="url"
	title="Rectangle">

<area	shape="polygon"
	coords="x1,y1,x2,y2,x3,y3"
	href="url"
	title="Triangle">

<area	shape="default"
	href="url"
	title="Default">

</map>

Where:

About Doctype and Other Head Stuff