Cascading Style Sheets (CSS)
CSS, or Cascading Style Sheets, is presentational markup used with HTML. CSS defines web page appearance: fonts, colours, borders, and so on. CSS can also be used instead of tables for positioning and layout on a web page.
A number of web pages already have compilations of links to CSS information. This page has links to those pages when I find them (CSS information compilations). It also has links to specific categories of CSS pages, as listed below.
On this page:
CSS basics and tutorials
| Site/Page Name |
Description |
More Details |
|---|
|
Tables or CSS? |
"...what's so important about tableless layout." |
Reasons for CSS layouts: semantics, accessibility, and efficiency |
|
W3Schools Introduction to CSS |
Introduction to CSS, advanced CSS, examples, and references |
CSS syntax, background, text, font, border, margin, padding, lists, dimension, classification, positioning, pseudo-class, pseudo-element, media types, and more |
|
htmldog.com CSS Guides |
Step-by-step CSS Beginner, CSS Intermediate, and CSS Advanced Guides |
Colours, text, margins and padding, class and ID selectors, pseudo classes, background images, display, page layout, and more |
|
The CSShark Answers FAQs |
An introduction to CSS and a tutorial |
Style FAQs, basic explanations, Netscape 4 problems and workarounds, positioning, resources |
|
Efficient CSS with Shorthand Properties |
An explanation of CSS shorthand properties to avoid bloated CSS |
Details on how "Shorthand properties can be used to set several properties at once, in a single declaration, instead of using a separate declaration for each individual property." |
CSS tricks and fixes
Here you'll find links to ways to solve specific problems with CSS.
| Site/Page Name |
Description |
More Details |
|---|
|
CSS Bugs and Workarounds |
A summary of "...the collective wisdom gleaned from [CSS
newsgroup] posts" |
A long list of CSS properties/problems, descriptions, and workarounds |
|
Windows Explorer vs. the Standards |
Methods of fixing common problems in Internet Explorer (IE) |
How to attack an IE/Win bug, the box model problem, the float model problem, the IE three-pixel text jog |
|
Two columns with color / colour |
How to "...make a two column CSS layout with color in either column that spreads to the full height of the page." |
How to build a basic two-column layout with header and footer, liquid width, and colour in either or both columns for the full column height |
|
Suckerfish Dropdowns |
"...a lightweight, accessible, standards-compliant, cross-browser-compatible method" of creating dropdown menus |
Starts with a horizontal navigation menu list. Uses CSS plus a little JavaScript to create dropdown menus that appear on mouseover. |
|
A fix for float-margin inconsistences across browsers |
A fix for "...inconsistences in the margin applied to...floated boxes..." |
Code for "...a floated div with floated items inside, with an empty div below to clear the float." |
|
Dead Centre |
An example of text that stays dead centre on the page via CSS |
Uses absolute positioning and negative margins |
CSS positioning / layout
| Site/Page Name |
Description |
More Details |
|---|
|
CSS Positioning |
"This article gives an overview of the methods and rules that govern visual rendering in the CSS2 specification." |
The box model, normal flow, floats, absolute positioning |
|
Table designs based on CSS and DIV elements |
How to make a table-like design using CSS |
Introduction to CSS "tables," example of a two by three table layout, a threecolumn table layout, and a10-column table layout |
|
Layout-o-matic |
An online tool to create code for CSS layouts |
For one column, two columns (left or right sidebar), or three columns, with or without padding or margins |
|
CSS Liquid Layouts |
Sample two-column and three-column layouts |
Two-column with header and footer, three columns with 100% height divs, and three-column liquid layout with graphics |
|
3-col layout via CSS |
A sample three-column layout |
"No tables, no absolute positioning (no positioning at all), no hacks(!), same height of all columns. The left and right columns have fixed width (150px), the middle one is elastic." |
CSS layout and Netscape 4
Not all CSS layouts work in Netscape 4. The ones listed in this section do. At this site, the three-column pages use a layout from NN4-compatible XHTML/CSS 3 column layouts, and the two-column pages use the layout from A 2-column CSS layout that works in Netscape 4.
| Site/Page Name |
Description |
More Details |
|---|
|
A 2-column CSS layout that works in Netscape 4 |
Sample page has a header, a fixed left column, a fluid main column, and a footer |
Can copy the CSS and view examples of this layout at other sites |
|
NN4-compatible XHTML/CSS 3-column layouts |
Can choose from 3-column layouts with liquid or fixed widths |
"These are not necessarily for the squeamish since some hacks are involved." |
|
CSS Layouts for Netscape 4 |
"...a list of tableless, CSS templates known to work in Netscape 4.x and validate." |
One column, fixed; two columns, liquid; three columns, liquid |
|
Samples by Steve Pugh |
Sample two-column layouts that also work (not perfectly, but more or less) in Netscape 4 |
The tweaked versions are "...amended to hide the absolute positioning of the footer from Opera 5 and 6 and also to not specify a fixed height for the header and footer..." |
Examples of sites with CSS layout
| Site/Page Name |
Description |
More Details |
|---|
|
Zen Garden |
Pages with exactly the same HTML and content but different CSS and images |
"To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same[;] the only thing that has changed is the external .css file." |
|
CSS Vault |
Site examples with comments |
Latest entries, noteworthy, featured site, recently redesigned, monthly archives |
CSS information compilations
| Site/Page Name |
Description |
More Details |
|---|
|
The Nemesis Project for CSS and XHTML |
"The Nemesis Project is an attempt to gather links to all the CSS information possible." |
Articles, tips-n-tricks, tutorials, layouts |
|
CSS Resources |
Over 200 links and examples |
Articles, CSS plus JavaScript, demos, benefits of using CSS, hacks, image techniques, layouts, lists, navigation, positioning, reference guides, tools, tutorials |
|
Holy CSS ZeldMan! |
"Here you'll find a whole bunch of links to some of the vast resources out there." |
CSS basics, CSS tutorials, CSS guides, CSS layout resources, CSS techniques and articles, CSS builders, CSS discussion lists and forums |
