Collected by
Elizabeth Janson
Home Page

Cascading Style Sheets

The Bottom Line (on this page) - Five Rules to keep us stay sane.

New rules - use lower-case for tags, and remember to close them all. If your STYLE code will not work (and there is no recognised Bug involved - signalled by the rose), sometimes placing the attribute value in parenthesis (inner quote signs) solves the problem.
Make sure all quote signs are in pairs (remember to close them!).

1. Introduction to Style Sheets

Introduction, How do they work?
Linking to the text file
Colour text and background
Background images
Font attributes and shorthand.
Text aligning and indenting words
Boxes padding, borders and margins
Syntax getting the grammar right.

More details
Values and Units
Side Panel as background
Fonts selection
Margins are transparent,
Boxes for every block element
Cascading order is inherited
Rules for handling errors
Media, and using Colour wisely,

2. Selectors

Topics

1. Universal
2. Type selectors
3. ID for special occasions
4. CLASS names
5. Elements DIV and SPAN
6. Pseudo class Anchors
7. Pseudo elements

Does it matter?
Sample style sheet from W3C,
HTML tags are evolving
About <BR> HR and other pets
Classes of links URL + URN = URI
Colour the Link Underlines
Add a DropCap
Decorating the First line
3D or Shadow text

3. TABLE manners

Topics

1. Table bgcolor, border
2. Table rows
3. Table columns
4. Table cell margins
5. Table border-collapse
6. Table Frame and Rule,
7. Tables in practice

Getting into place
Table using only CSS,
Dynamic Tables
Dynamic Table in Netscape and IE5
Inline and Float Positioning
Block Positioning
Absolute Positioning
Making columns

4. Lists

Topics

1. Lists UL, OL and DL
2. Numbered Lists,
3. Defined items,
4. Bullets or gifs
5. Space about a list
6. Markers, a new concept
7. Before and After Elements

Some fun
Adding Tool Tip explanations,
Cursor Choices in CSS
Figures & captions
Buttons
Build a Navigation Bar
The Right SideBar
Clashing with Browsers

5. Bottom Lines (on this page)
Five Rules to keep sane.
Understanding CSS development

Some reference sites
slackerhtml.tripod.com/stylesheets/ Slacker's guide is a good reference
http://www.codeproject.com/html/cssbeginner.asp by Nongjian Zhou has an interesting site
http://www.richinstyle.com
http://www.htmlcenter.com/
http://www.htmlite.com/ for HTML, CSS and javascript
http://glish.com/css/ for layouts

So let's see the Five Rules:

Rule 1. ANY browser should be able to access the content of the site.
Rule 2. Rule 1 does NOT imply that the site should look the same in each browser.
Rule 3. If something non-essential does not work in a certain browser, Too Bad For That Browser.
Rule 4. Always check style sheets in Netscape 4 first. Style sheets may break in most browsers, but if they break in Netscape 4 they break really spectacularly.
Rule 5. Know when to stop. Sometimes, trying to apply a particular style is just more trouble than it's worth.

These rules are not absolute. They're meant to give you something to hold on to when you first use style sheets. Rules Three and Five, especially, give you plenty of leeway for interpretation. After all, each site is unique, both in its design and in the exact mix of browsers that visit it.

Today is only the dawning of the Style Sheet Era – not yet even the morning.
There's still plenty of time for experimenting, and disagreeable results can still be hidden in the darkness. The only thing a web designer should do right now is stay informed and experiment, so that when the sun breaks through at last you can say to your clients and co-workers, "I knew Style Sheets were the future."
Be prepared. -

Some new ideas
CSS style sheets should use lower case element and attribute names. XHTML is case sensitive, and we want to be understood when that new wave hits.
Early in 2001, when I started this project, CSS was to be the answer to the problems of differing Browsers (according to writers in items dated last century, eg 1999).
BUT the goal posts have moved - media for viewing Web Pages is evolving and the markup language needs to adjust.
The next game is called XHTML™ 1.0: The Extensible HyperText Markup Language, meant to be A Reformulation of HTML 4 and easy to learn! - from the W3C Recommendation 26 January 2000.

Understanding CSS development

http://www.w3.org

The CSS3 module describes the various values and units that CSS properties accept. Also, it describes how "specified values", which is what a style sheet contains, are processed into "computed values" and "actual values".

The working draft consists of 24 files. Some are very large, for example the page on FONTS is 140KB. I have tried to pick out the basics. Go to the source to develop your wisdom.

Status of the official document

The W3C Working Draft, 13 July 2001, location

This version:

http://www.w3.org/TR/2001/WD-css3-values-20010713

Latest version:

http://www.w3.org/TR/css3-values

This is a draft of a module of CSS level 3. It will probably be bundled with some other modules before it becomes a W3C Recommendation.

All the properties and features described here that also exist in CSS level 2 are intended to be backwards compatible. (There are actually no new features in this draft, it only serves to rewrite the relevent parts of CSS level 2 in the form of a CSS3 module, but in future versions there will be.)

This draft should not be cited except as "work in progress." It is a work item of the CSS working group and part of the Style activity. It may be modified or dropped altogether at any point in time. Implementations for the purpose of experimenting with the specification are welcomed, as long as they are clearly marked as experimental.

Feedback on this draft is invited. The preferred place for discussion is the (archived) public mailing list www-style@w3.org. W3C members can also send comments to the CSS WG mailing list.

A list of current W3C Recommendations and other technical documents including Working Drafts and Notes can be found at http://www.w3.org/TR.

Enjoy is the name of the game

This page is part of Elizabeth Janson's web site

http://www.geocities.com/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.