| CSS Resources |
Harold Goldstein -- http://goldray.com/css/style_resources.htm |
Resources and Tutorials
- Westciv's CSS Handbook - w/Browser Guide, Gallery of examples, free courses, advanced tutorial.
- For succinct reference pages try The Cascading Style Cheatsheet or JavaScript Kit's Reference.
- While a year old, Blooberry offers a thorough CSS and browser support reference.
- CSSPlay offers menu systems, layout options, snazzy borders, etc.
- SkimCSS offers articles on nifty little CSS tricks; buttons, hover
effects, tabs, using ems,
- Dr. Dobbs (formerly Webreview) has a dated but useful series of CSS Reference Guides.
- Hotwired has a a basic and an advanced tutorial as well as other articles.
- RichinStyle is an all around resource; tutorials, bug tables, help files, safe style sheets, etc.
- CNet's Builder.Com has CSS tutorials, a great Reference Table; ALA offers a great range of articles.
- The CSS/EDGE is kind of an online journal of CSS with interesting cutting edge tricks and techniques.
- The tutorial series from the W3C is from the source so it might have the greatest weight.
- Here is a monster list of CSS tutorials from the esoteric to the fundamental.
- CSS discuss has a range of hints - for centering for example.
- Position is Everything explains bugs, demos interesting behaviors and position examples.
- CSS and XHTML Lab is acllection of experiments, methods, tips and tricks.
Validation and Editing Tools
Topstyle and Style Master are fine CSS editors; both sites offer other style resources/teaching tools.
JimTools' CSS Generator (select HTML, CSS) and CNet's Style-o-Mattic both generate code.
The W3C HTMLValidation service, the W3C CSS Validation Service, and this HTML Validator are key tools.
Specific Issues and Techniques
POSITIONING and LAYOUT
Brainjar on
the box model, BarelyFitz on the position property and the WestCiv or Hotwired position tutorial.
O'Reilly's intro to CSS layout has CSS vs tables discussion; ALA has Using Css for flexible layout.
A collection of pure CSS TABS and Navigation menus.
Practical CSS Layout Tips and Techniques. Notes on rebuilding a site to use CSS.
On CSS layouts - all sorts of column solutions.
A nice set of CSS layout templates.
Glish on CSS layout to position w/o tables; Bluerobot has its layout reservoir; and other box layout options.
An approach to 3 column design (and really modular design) separating html entirely from layout.
Try the Firdamatic to
create and customize tableless layouts via a form; AlistApart on 2 column layouts.
CSS discuss has a host of layout resources; here are ready made 3 column layouts.
For centering the Ozone Asylum's discussions and links help; for example try this approach or this or use DHTM.
Alternate approaches to vertical alignment for centering and for bottom alignment; precisely positioning a footer.
The Floatutorial uses floating elements for sample CSS layouts; here they create a floating thumbnail gallery.
Here is how to float
an image between two columns.
Discussions of equal columns. Here is an example with equal columns, a header and a footer.
Using CSS for a fixed layer; a script to fix DIVs for IE/Windows; and an approach to fix a top and bottom div.
Drop
shadows with CSS.
FONT SIZE and other FONT ISSUES
You can embed your fonts with
CSS. Microsoft has many examples and a tool to
facilitate this.
Font sizing issues;
more on size options;
on using ems and percent for font sizing;
the pixel/ points debates.
More font sizing discussions.
CSS for MENU SYSTEMS and NAVIGATION
Here is a fine compendium of CSS menu systems,
from the simple to the more elegant.
Use CSS for a simple navigation bar and
use CSS lists for expandable dynamic menus and clean rollovers.
An approach to CSS tabs with
submenus; and another approach.
A beautiful CSS rollover menu system with
submenus. (see Project Sevens tutorial list)
More on CSS for mouseover button popup
effects (with images too);
or use images in the rollover.
Hybrid CSS dropdown menu system;
fully functional in all modern browsers.
OTHER
Rollover button generator ...
semi-transparent hover
pop-ups.
To determine the cascade, inheritance and specificity are
important and not well understood.
The W3C elaborates on the box model;
issues on the creation and placement of boxes.
A tutorial for the design of a CSS based site template -
from project start to finish.
Using CSS with lists;
even within blocks, or horizontal lists, or lists as dynamic menus with
hover effects. .
Use CSS to align text along a curved path.
Making rounded corners with
CSS.
Use CSS to define style for different 'media types';
( i.e. print). Read a List Apart and
this lucid tutorial.
Use CSS with your styled emails.
Articles on alternate style sheets/switching style sheets;
CSS/javascript for changing page style on
the fly.
CSS has text/object filters (see examples of their use)
and transition effects.
You can use style sheets to apply your own style while
browsing external web pages..
Using bookmarklets to
facilitate your CSS editing; creating a calendar with CSS.
How to do specific basic tasks with CSS;
a summary.
A nice collection of tutorials and tips; coloring your scrollbars, layout templates, cross browser issues,
more.
CSS for cross browser drop shadows.
Using CSS shorthand to create efficient code.
A CSS generator for boxes with rounded corners or another approach for liquid round corners.
Using CSS to allow the user to ZOOM IN.
The Dark Side
A List Apart shows common style problems (and fixes).
The Noodle Incident Box positioning problems and workarounds.
You'll want to study this CSS Bug Table and Bugs and Workarounds offers solutions.
CSS hacks for pixel perfect layouts (even with IE5 PC) from Glish with further explanations by Tantek.
Recommended Books
Cascading Style Sheets, Second Edition: Designing for the Web by Lie and Bos.
Cascading Style Sheets, The Definitive Guide by Eric Meyer
The Complete CSS Guide from Westciv is mostly online as well.
Westciv's discussion list for CSS and CSS-Discuss are useful lists - as is the CSS-Discuss WIKI.
Copyright © 2008 The
Goldray Group, All Rights Reserved