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.
- CSS References: The
Cascading Style Cheatsheet or JavaScript
Kit's Reference or The
Ultimate Quick CSS Guide.
- Web
Design with Style, Ease, and CSS.
- CSSPlay offers menu systems, layout options, snazzy borders, etc.
- 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 is a CSS
WIKI which 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
a collection 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
Semi-transparent hover
pop-ups and 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)
transition effects.
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
The Noodle Incident Box positioning problems and workarounds.
You'll want to study this CSS
Bug Table.
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.
CSS-Discuss is a useful mailing
list - as is the CSS-Discuss
WIKI.