The CSS Section below is filled with links to some of the best articles, tips, tutorials, editors, and templates on cascading style sheets (CSS).

Table of Contents

Section 1: W3C CSS Recommendations   
General CSS Information, Tips
CSS1
CSS2
CSS3 (Working Drafts)
CSS and Accessibility
CSS and XML
CSS Mobile


Section 3: Solutions to Bugs and Cross-Browser Issues
CSS Bugs, Solutions and Workarounds
Cross-Browser, Cross-Platform Font Issues

Section 4: CSS Sites and Resources
Sites Devoted to CSS
More CSS Links Resources

Section 5: Newsgroups, Forums, Discussion Lists

Section 6: CSS Templates

Section 7: CSS Editors, Reference Charts, and Validating Tools
CSS Editors
CSS Reference Charts, Tables
CSS Validating Tools

 

Section 1: W3C CSS (Style Sheets) RecommendationsW3C icon

General CSS Information, Tips

  • Cascading Style Sheets
    Main page for the style sheets section at W3C. Index of contents for that section, also has what's new with new programs, software, news about style sheets.

  • W3C CSS Validation Service
    Check your style sheets code either at the site, or download it to your own computer. Fabulous service (Free!).

  • Web Style Sheets
    from the W3C. Questions and Answers, resources to a broad range of information around style sheets.

  • Adding a Touch of Style
    by Dave Raggett, W3C. Excellent introduction to the world of style sheets by an authority. Very helpful tutorial.

CSS1

CSS1 Recommendations were first released December, 1996. Web standards, including CSS Recommendations, were not well supported by browser companies at that point. Happily that has changed substantially, with the major browsers supporting most or all of CSS1 and many CSS2 features.

  • CSS1 W3C Recommendations
    Main page for W3C's CSS1 recommendations. All basic concepts, index, terminology, sample style sheet, definitions, more.

CSS2

CSS Level 2 has been the current CSS recommendation since early 1998, building on CSS1. As of early 2002, newer browsers support web standards much better than their predecessors, supporting many CSS2 features.

  • CSS2 W3C Recommendations
    Main page for W3C's CSS2 recommendations. All basic concepts, index, terminology, sample style sheet, definitions, more.

  • CSS2 Tag Index at W3C
    Want to look up a specific CSS2 tag and get the definitive answers directly from the W3C? This resource provides an index with links to all the terms at W3C.

  • CSS2 - Tables
    W3C's guidelines and information about working with tables with CSS2.

  • Paged Media
    Especially helpful for printing or transparencies, these W3C CSS2 recommendations include page sizes, page breaks, margins, portrait or landscape, crop marks,widows and orphans, much more.

  • The dynamic pseudo-classes: :hover, :active, and :focus
    The order in which you place the link, visited, and hover tag makes a difference in whether they work correctly or not. This is a link to information about this and more details about the above pseudo-classes.

  • Visual Formatting Model
    W3C's guidelines and information about working with block-level elements, boxes, positioning schemes, layered presentations, text direction, more.

  • Visual Formatting Model Details
    In detail this time, W3C's guidelines and information about working with block-level elements, boxes, absolute position, relative position, floating, inline elements, minimum and maximum height, leading, more.
    [Credits: Referred via css-discuss]

CSS3

June, 2003:
CSS3 working drafts and candidate recommendations are in progress. You can check out what we can look forward to with the upcoming version of CSS. Some newer browsers even support a few of the features. The W3C also welcomes and invites feedback before these modules become final Recommendations.

As you will also see below, CSS is becoming modularized. There are several reasons: 1) One module can easily be updated, speeding up the turnaround time and allowing greater flexibility; 2) User agents can also choose to support specific modules, such as an aural browser with constraints and only needing aural CSS specifications; and, 3) to help clarify relationships between various parts of the specifications and to reduce the overall size of the document.

CSS and Accessibility

CSS and XML

CSS Mobile

  • CSS Mobile Profile 1.0
    A subset of CSS2, this candidate profile provides CSS2 specification for mobile devices, such as wireless phones.

to top

Section 2: CSS Tutorials and Articles

CSS Articles

  • A CSS Redesign in 5 Easy Pieces
    by Jeffrey Zeldman, A List Apart. An interesting, informative, helpful article on redesigning the A List Apart site with latest browser versions in mind, while degrading gracefully for older, more buggy browsers, such as Netscape 4. Insightful, helpful.
    [2001, by Jeffrey Zeldman, A List Apart.]

  • A Dao of Web Design
    by John Allsopp for A List Apart. Excellent article about the font sizing problems across platforms and browsers. Also discusses other accessibility, compatibility areas, with emphasis on adaptability and accessibility and ways to achieve that.
    [John Allsopp for A List Apart]

  • Fear of Style Sheets
    by Jeffrey Zeldman of A List Apart. Good article about the advantages and features of using style sheets, the disadvantages.
    [by Jeffrey Zeldman, for A List Apart]

  • To Hell With Bad Browsers
    by Jeffrey Zeldman, A List Apart. Read about the issues of older, buggy browsers, and considering using W3C recommendations and supporting web standards. Explains that it's still possible for sites to be readable and usable without having to deform your code with all the hacks and workarounds. Great read and explanation. A must read article.
    [by Jeffrey Zeldman for A List Apart]

  • Turning the Tables, or: How I Learned to Stop Worrying and Love Web Standards
    by Drew McLellan, Dreamweaver Fever. Good explanation about the advantages of table-free layouts using CSS-P, including gaining far more control, separating content from style, better accessibility for users, changing style sheets easily, and more.
    [by Drew McLellan, dreamweaver.com]

  • Your secretary wants Web standards too
    by CodeBitch, MacEdition. Why does CSS matter if you're building a site for an Intranet? Why do standards make a difference? This article provides plenty of good insight and reasons.
    [08/13/2001 by CodeBitch, MacEdition]

to top

General CSS Tutorials and Tips

The tutorials and tips listed below are more introductory or more general. See the topics listed further below for more specific CSS techniques, such as handling lists, centering, specific CSS elements, and more.

  • Adding a Touch of Style
    by Dave Raggett, W3C. Excellent introduction to the world of style sheets by an authority. Very helpful tutorial.
    [by Dave Raggett, W3C]

  • comp.infosystems.www.authoring.stylesheets FAQ
    Check this fabulous resource to find so many questions answered before you ask them again at the newsgroups. Links to many authoritative and helpful resources here, too. Highly valuable resource.
    [css pointers group, css.nu]

  • Converting Existing Content to CSS
    For WebsiteTips.com by Shirley Kaiser, SKDesigns. Want to learn some basic CSS to convert your existing <font> tags to style sheets? This interactive tutorial will provide you with the basics to get you started designating fonts, colors, hyperlinks, formatting, and using style blocks and external style sheets. This is the first tutorial of a new series (more coming!).
    [10/21/01 by Shirley Kaiser, SKDesigns, for WebsiteTips.com.]

  • CSS Examples
    For CSS1 and CSS2. An excellent reference and resource to see the CSS and the results of dozens of examples of CSS implementation. Backgrounds, text, fonts, borders, margins, padding, lists, dimension, classifications, positioning, pseudo-classes, pseudo-elements.
    [W3 Schools. Credits: Link via css-discuss]

  • CSS Frequently Asked Questions
    by HWG. Answers so many common questions about CSS. Excellent reference!
    [HTML Writers Guild, hwg.org.]

  • CSS Enhancements in Internet Explorer 6 Public Preview
    Microsoft, March, 2001 "Describes the enhanced support for the Cascading Style Sheets (CSS) specification provided by Microsoft Internet Explorer 6 Public Preview or later. (14 printed pages)" [To view the samples you need to download IE6 public beta.]
    [03/01/2001 Microsoft.com]

  • Everything you ever wanted to know about Style
    by John Allsopp, House of Style. Thorough tutorial about CSS. Great resource. The House of Style website is a thorough resource for CSS, too.
    [by John Allsopp, Westciv.]

  • Get Started With Cascading Style Sheets
    By Matt Rotter and Charity Kahn (9/3/97, updated 11/2/00 by Paul Anderson). Very good tutorial here from Builder.com, recently updated and includes CSS1 and CSS2. Thorough. Includes a helpful CSS Reference Table with each term having a hyperlink to its explanation directly at W3.org.
    [11/02/2000 update by Paul Anderson for Builder, C|Net.com]

  • Introduction to CSS shorthand properties
    Helpful tutorial and tips about using CSS shorthand properties. The tutorial also covers browser compatibility and links to further resources. Well done.
    [Updated 12/30/2002 by Ove A. Klykken, domedia.org]

  • Mulder's Stylesheets Tutorial
    Webmonkey's Steve Mulder wrote this extensive 5-part tutorial. Terrific for learning how to do style sheets or checking various details. Also discusses browser differences, workarounds, degrading, and other tips.
    [09/16/1999 by Steve Mulder, Webmonkey]

  • Put Style Sheets into Perspective
    by Linda Cole, WDVL. This thorough, detailed tutorial is designed to help you put CSS together with your HTML. Sections: Intro; font properties; Margin, Padding and Borders; CSS Rules; Additional Resources; Selectors; Methods of Combining CSS with HTML; Inheritance; Summary. Excellent.
    [06/17/1998 by Linda Cole for WDVL]

  • Working with Fonts and CSS
    CSS guru Eric Meyer Provides a good introductory tutorial to designating fonts with CSS via O'Reilly Network. Covers basic font selection, cross-browser issues, links to resources.
    [07/26/2001 by Eric Meyer for O'Reilly Network]

to top

Centering with CSS

  • Center with CSS
    Since the HTML attribute CENTER does not have an identical counterpart in CSS, this tutorial provides directions how to center block-level elements, images, centering a table, more.
    [All My FAQs Wiki. Credits: Link via css-discuss]


CSS and Links

  • So, You Don't Want Links Underlined, Huh?
    by HTML Goodies author, Joe Burns. Good tutorial and shows a variety of ways to accomplish this, using Style Sheets code. (Note that style sheets don't work on all browsers.).
    [by Joe Burns for HTML Goodies]


CSS and Lists

  • Consistent List Indentation
    Eric Meyer's excellent tutorial that explains how to handle indenting for lists that's consistent cross-browser and cross-platform.
    [08/30/2002 by Eric Meyer for Netscape DevEdge.]

  • CSS Design: Taming Lists
    Mark Newhouse's helpful tutorial for A List Apart. Covers how to effectively style lists with CSS -- indenting, bulleted lists, positioning, list style, the before pseudo-element, inline lists, lists for navigation, borders, breadcrumb trails, and more.
    [09/27/2002 by Mark Newhouse for A List Apart.]

  • Pure CSS tabsNew!
    Mark Pilgrim's tutorial on how to create the look of tabbed navigation using CSS and the list element rather than using graphics.
    [03/24/2003 by Mark Pilgrim, diveintomark.org.]

to top

CSS and Scrollbars

  • Coloring Your Scrollbars with CSS
    For WebsiteTips.com by Shirley Kaiser, SKDesigns. Learn how to easily change the scrollbar colors for forms and browser windows with a few snippets of CSS. This new tutorial explains how with visual samples, instruction, and all the code.
    [by Shirley Kaiser for WebsiteTips.com]


CSS and Tables

to top

CSS2 Tutorials and Information

See other sections here, too, including Tutorials and Articles, Bugs and Workarounds, CSS-P and Table-Free Layouts, and the CSS Templates section has some table-free templates to use and learn from, too.

  • CSS Floats, Part I
    WebReference.com's good tutorial on the float and clear properties for CSS2.
    [03/22/2000 by Stephanos Piperoglou, WebReference.com]

  • CSS2: Font Management
    by Chuck Musciano, WebReview. First part of a new series on CSS2 font management.
    [12/15/2000 by Chuck Musciano, WebReview]

  • Generating Content the Easy Way
    by Chuck Musciano, WebReview. Tutorial on using CSS2 to define different content placed before or after an element in your document using the content property.
    [07/13/2001, by Chuck Musciano, WebReview]

  • Media Types
    by Rachel Andrew. Tutorial on the media types for CSS, what each is for, how they're used, recommendations, and testing pages she's working on, too. Helpful tutorial, good info.
    [Fall, 2001, by Rachel Andrew, edgeofmyseat.com]

  • RichInStyle.com CSS2 tutorial
    by RichInStyle. Basic and advanced tutorials using CSS2. Basic includes introduction, attaching style sheets, applying style, color, fonts, text, lists, box model, positioning. Advanced includes boxes, generated content, dynamic effects, tables, paged media, @font-face, aural style sheets, language styles. Well done.
    [RichInStyle.com]

  • What's New in CSS2
    Babette Van Hardeveld's excellent section on CSS2. She includes sections with good info on Cross-media publishing, Generated content, New selectors, New properties, and Sources. Great reference.
    [Thanks to Peter-Paul Koch for mentioning this via TheList.]

to top

CSS-P, Table-Free Layouts Using CSS

See also Bugs and Workarounds, and the Templates section has some table-free templates to use and learn from, too.

  • A CSS Redesign in 5 Easy Pieces
    by Jeffrey Zeldman, A List Apart. An interesting, informative, helpful article on redesigning the A List Apart site with latest browser versions in mind, while degrading gracefully for older, more buggy browsers, such as Netscape 4. Insightful, helpful.
    [2001, by Jeffrey Zeldman, A List Apart.]

  • Advanced CSS Layouts: Step by Step
    WebReference.com's Rogelio Vizcaino Lizaola and Andy King write a detailed tutorial about designing the webreference.com main page with CSS-P (style sheet positions) rather than tables. This is a complex layout for which they provide step-by-step instructions and screenshots and explain the bugs and workarounds along the way to make style sheet positioning work cross-browser. Very insightful and helpful.
    [08/28/01 Rogelio Vizcaino Lizaola and Andy King, WebReference.com]

  • Box Lessons
    by Owen Briggs. These are among the best resources for working with CSS-P boxes in a variety of layouts, with workarounds and templates included.
    [2001, regularly updated, Owen Briggs, thenoodleincident.com]

  • CSS Design
    By Christopher Schmitt, WebReview. This is an excellent step-by-step approach to resolving everyday layout implementation using CSS rather than hacks with invisible .gifs and table cells. Schmitt goes through a real life Web page design using CSS for the Babble discussion list main page with JavaScript code directing older browsers, too. Provides what and why, practical solutions and easy to understand instruction. Excellent tutorial.

    [Update note from C. Schmitt:
    The JavaScript can be replaced with the addition of an external style sheet using @import (older browsers don't recognize @import):
    <style type="text/css" media="all">
    @import "stylesheet.css";></style>     ].
    Not sure what the author means? See Todd Fahrner's Workaround.
    [by Christopher Schmitt for WebReview]

  • CSS-P: How to build a web site without tables
    by Mako, Orion HiTek, Inc. Step by step instructions from start to finish building a web page with CSS-P (CSS positioning) rather than HTML tables. Good detail here, includes all files for download to follow along as you're guided through the tutorial. Also includes links to W3C, Eric Meyer's master grid, and other good resources.
    [by Mako, Orion HiTek, Inc., mako4css.com]

  • CSS Positioning
    Very well done tutorial at Brainjar.com that provides "an overview of the methods and rules that govern visual rendering in the CSS2 specification. It also points out some things to watch out for." Good examples along the way, and easy to understand.
    [by Mike Hall, brainjar.com. Hat tip: rudy limeback via thelist]

  • Designing for two stylesheets
    by Rachel Andrew, edgeofmyseat.com. Good tutorial that provides the code and instructions for how to create a basic 2-column design with CSS-P for newer browsers, a more simple style sheet for older browsers, then provide a simple JavaScript sniffer code.
    [by Rachel Andrew, edgeofmyseat.com.]

  • Positioning with CSS2
    by Westciv. Excellent tutorial that explains various positions: static, absolute, fixed, relative; elements, properties, more.
    [Westciv.com]

  • Real World Table Free Site Development
    by Rachel Andrew for Women Designer's Group. Well done, easy to understand introduction to using CSS for layouts without tables. She provides JavaScript sniffers for older browsers and also provides resources to other tutorials with details about how to write the style sheets.
    [by Rachel Andrew, for womendesignersgroup.com.]

  • Table-less: HOW?
    Q & A at A List Apart's Coder's Forum. This link provides a good overview and code example for creating a table-less layout using CSS-P, and links over to the forum discussion with more helpful samples, resources and information.
    [alistapart.com]

  • Tables or CSS? Choosing a layout
    by Craig Saila. Concise, to-the-point article highlighting key reasons, with links to resources. Well done. A must read article.
    [by Craig Saila, saila.com]

  • To Hell With Bad Browsers
    by Jeffrey Zeldman, A List Apart. Read about the issues of older, buggy browsers, and considering using W3C recommendations and supporting web standards. Explains that it's still possible for sites to be readable and usable without having to deform your code with all the hacks and workarounds. Great read and explanation. A must read article.
    [by Jeffrey Zeldman, A List Apart.]

  • Toss out your Tables! CSS is the scene!
    by Charlie Morris, WDVL. This tutorial first discusses the advantages and disadvantages, then digs into a tutorial on setting up a layout without tables using css-p, tricks with overlapping layers, and links to some excellent resources.
    [05/31/01 Charlie Morris, WDVL]

  • Turning the Tables, or: How I Learned to Stop Worrying and Love Web Standards
    by Drew McLellan, Dreamweaver Fever. Good explanation about the advantages of table-free layouts using CSS-P, including gaining far more control, separating content from style, better accessibility for users, changing style sheets easily, and more.
    [by Drew McLellan, dreamweaver.com]

  • Web Page Reconstruction with CSSNew!
    Christopher Schmitt deconstructs Digital Web's markup and rebuilds it using CSS. Insightful, helpful article packed with great tips.
    [06/2002 by Christopher Schmitt for Digital-Web.com]

to top

Section 3: Solutions to Bugs and Cross-Browser, Cross-Platform Issues

CSS Bugs, Solutions and Workarounds


Specific to Netscape 4

These links go to sites specifically about Netscape 4 issues. The All Browsers section below has more on Netscape 4, too.

  • CodeBitch's Netscape 4 Crasher Pages
    Helpful general tips about what CSS issues make Netscape 4 crash. Includes links to related articles.
    [Credits: Referred via css-discuss]

  • CSS and Netscape 4
    Mark Howells lists some helpful tips to keep in mind about CSS issues for Netscape 4 browsers.
    [by Mark Howells]

  • CSS and Netscape 4.xx Issues
    by Mako, Orion HiTek, Inc. Goes into differences with IE and Netscape, fonts, tables, line height, border, more.
    [by Mako, Orion HiTek, Inc., mako4css.com]

  • Netscape 4.x Compatible CSS
    Chart includes CSS selectors, properties, and their values that are fully supported by Netscape 4.x (Mac and PC versions). Be sure to see also the clarification and correspondence about his chart with Jeffrey Zeldman.
    [by Bob Sawyer, bobsawyer.com]

  • Netscape 4.x problems
    by Tapio Markula. Excellent tutorial explaining all the bugs and how to do all the workarounds, and also updated often.
    [by Tapio Markula.]

All Browsers
  • A JavaScript Fix For Text That's Too Tiny
    This JavaScript, initially prompted by the cross-browser smaller font sizing issue with Internet Explorer (Windows version), " if applied with care, helps make many sites readable no matter what the text size setting." Note that this will work for many but not ALL site designs.
    [June 06, 2002 by Matt Round at The Noodle Incident]

  • Assigning browser-specific styles
    by Peter-Paul Koch. Good trick for customizing style sheets easily for browsers using @import, such as font sizes for Internet Explorer vs. Netscape 4. CSS code. Sample code and instructions.
    [08/08/2001 by Peter-Paul Koch, evolt.org.]

  • Box Lessons: Bugs and Workarounds
    Owen Briggs is documenting bugs, cross-browser problems and workarounds, primarily for CSS boxes, but also other layout issues with CSS. Interesting, helpful resource.
    [by Owen Briggs]

  • Browser Errors and CSS
    by Tapio Markula. Excellent, thorough tutorials and discussions for main browsers. (IE4, IE5, Netscape 4, Netscape 6, Opera 4.x, 5.x, 5.12)
    [by Tapio Markula]

  • Cascading Style Sheets in Internet Explorer 4
    Microsoft's information for using Cascading Style Sheets with Internet Explorer 4. Although last updated October 1997, it's a helpful resource and insight if you need to allow for IE4 users.
    [Microsoft.com]

  • Cascading Style Sheets, level 1 (With Mozilla Bug Annotations)
    Incredibly helpful bug listing for Mozilla 1.0 -- annotating Mozilla's bugs (highlighted in green) within W3C's CSS level 1 recommendations.
    [Mozilla.org]

  • comp.infosystems.www.authoring.stylesheets FAQ
    Check this fabulous resource to find so many questions answered before you ask them again at the newsgroups. Links to many authoritative and helpful resources here, too. Highly valuable resource.
    [CSS Pointers Group, css.nu]

  • Cross-Browser Compatible Style Sheets
    by Ian Graham. Excerpt from The XHTML 1.0 Web Application Sourcebook. Lots of good tips, workarounds, what to avoid for the major browsers, versions and platforms. Links to further resources, too.
    [by Ian Graham]

  • CSS Bug Table, by Richinstyle.com
    Chart covers CSS bugs for IE 3, IE 4, IE 5, Netscape 4, Mozilla, Opera 3, Opera 4. Also included are the following: IE 4 bug sheet, IE 5 bug sheet, Mozilla bug sheet, Opera 4 bug sheet. Very helpful.
    [richinstyle.com]

  • CSS Bugs and Workarounds
    Fabulous chart with workarounds from the CSS Pointers Group.
    [CSS Pointers Group, css.nu]

  • CSS 2 Tests
    Peter-Paul Koch's fascinating tests and results with documentation, screen shots, and more. Currently includes CSS2 selectors, declarations, and a compatibility chart for Netscape 4.x and 6, IE 4, 5 and 6, Opera 5, and Konqueror.
    [by Peter-Paul Koch]

  • David Baron's CSS Playground
    Great information on cross-platform, cross-browser font size problems, browser inconsistencies and workarounds, lots of tests with screenshots, lists of bugs, much more on CSS.
    [by David Baron.]

  • Fear of Style Sheets
    by Jeffrey Zeldman of A List Apart. Good article about the advantages and features of using style sheets, the disadvantages.
    [by Jeffrey Zeldman, A List Apart.]

  • How to hide CSS from buggy browsers
    by Johannes Koch. Excellent coverage with authoritative references and input. Includes @import rule, the media attribute, the 'comment bug,' the attribute selector, the child selector, Tantek's hack, and includes a summary chart for quick reference, too. Great!
    [by Johannes Koch.]

  • The Little Shop of CSS Horrors
    by Matt Haughey. Excellent article explaining some CSS quirks (screenshots included) and how to handle them, such as an image float problem, blue borders around images, font styles in table cells, CSS text padding within a table, and more. Excellent article. A must read.
    [by Matt Haughey, haughey.com]

  • Mulder's Stylesheets Tutorial
    Webmonkey's Steve Mulder wrote this extensive 5-part tutorial. Terrific for learning how to do style sheets or checking various details. Also discusses browser differences, workarounds, degrading, and other tips.
    [by Steve Mulder, Webmonkey]

  • Some Problems with CSS Implementations, and a Workaround
    by Todd Fahrner. Informative, helpful article by one of the top CSS gurus.
    [by Todd Fahrner]

  • Styles and Tables
    by Eric Meyer, author of Cascading Style Sheets: The Definitive Guide (O'Reilly). Good tutorial for dealing with CSS inside tables, including workarounds for Netscape 4.x. Originally published at WebReview.
    [by Eric Meyer, meyerweb.com]

  • Todd Fahrner's Workaround for delivering the best possible CSS
    Must read tip. Using @import with an external style sheet, learn an easy and effective means of using style sheets while allowing for older browsers, too, without having to use JavaScript browser sniffer code or building separate style sheets for each browser. Excellent tip.

    [Important: See also the discussion at Little Green Weblog with Charles Johnson, Todd Fahrner 07/17/01 regarding the latest. Good points made.]

to top

Cross-Browser, Cross-Platform Font Issues

See also the HTML and Design and Layout sections for more excellent resources.

  • A Comparison of Popular Online Fonts: Which is Best and When?
    By Michael Bernard, Melissa Mills, Michelle Peterson, & Kelsey Storrer for Usability News, Summer 2001. Excellent study and findings about font faces and sizes used on the Web.
    [Summer 2001, by Michael Bernard, Melissa Mills, Michelle Peterson, for Usability News]

  • Absolute Font Sizes: A Clarification
    by Eric Meyer (originally for WebReview December 1999). Excellent article about the bugs with CSS and font sizing.
    [12/1999 by Eric Meyer, originally for WebReference.com]

  • Achieving A Consistent and Readable Type Across Platforms
    by Wes Reimer, WebReference.com. [Note: This article's info is outdated. See also Zeldman's Dec. 25, 2000 Daily Report about this. I also suggest reading Zeldman's Fear of Style Sheets IV.] Article with screenshots showing the differences between Macs and PCs. Provides (outdated) solutions and alternatives to dealing with such widely varying font size issues (what may look fine on one platform may not be readable on the other).
    [12/14/2000 by Wes Reimer for WebReference.com]

  • Assigning browser-specific styles
    by Peter-Paul Koch. Good trick for customizing style sheets easily for browsers using @import, such as font sizes for Internet Explorer vs. Netscape 4. CSS code. Sample code and instructions.
    [08/08/2001 by Peter-Paul Koch, evolt.org.]

  • Browser Safe Fonts
    Jason Cranford Teague's article on using more than the typical 2 major fonts (Helvetica, Times) for websites. Lists main fonts shipped with Macs and PCs, offers options to consider beyond what's so typically seen.

  • Building Characters: A Brief History of the Web War
    by Geoff Duncan, Tidbits.com. Interesting history and technical reasons behind the type size on Macs especially that can be too small to read. This is a sequel to update the previous history written at Tidbits.com. Links to resources. Interesting, helpful info.
    [03/20/2000 by Geoff Duncan, Tidbits.com]

  • How should text be presented within a website?
    by Michael L. Bernard for SURL (Software Usability Research Laboratory), part of the series Criteria for optimal web design (designing for usability). Fantastic article based on solid research that explains the results of studies for a variety of fonts, font sizes, discusses serif vs. sans serif, line lengths, background colors and texture, contrast, more. The article discusses a variety of age groups, too. Very insightful, helpful article. A must read article.
    [by Michael L. Bernard for SURL]

  • Cross-Browser Compatible Style Sheets
    by Ian Graham. Excerpt from The XHTML 1.0 Web Application Sourcebook. Lots of good tips, workarounds, what to avoid for the major browsers, versions and platforms. Links to further resources, too.
    [by Ian Graham]

  • A Dao of Web Design
    by John Allsopp for A List Apart. Excellent article about the font sizing problems across platforms and browsers. Also discusses other accessibility, compatibility areas, with emphasis on adaptability and accessibility and ways to achieve that.
    [John Allsopp for A List Apart]

  • David Baron's CSS Playground
    Great information on cross-platform, cross-browser font size problems, browser inconsistencies and workarounds, lots of tests with screenshots, lists of bugs, much more on CSS.
    [by David Baron]

  • Default Fonts - Windows 95 & Macintosh
    Graphic display of default fonts for Windows95 and Mac OS. (Shows fonts at 12 pt. Amazing differences in sizes!) Also links to fonts supplied with MSOffice, MSPlus! and Core Web fonts.

  • Fear of Style Sheets, IV: Give Me Pixels or Give Me Death
    by Jeffrey Zeldman for A List Apart. Terrific article about dealing with font sizing for CSS with the current cross-browser, cross-platform issues. A must read article.
    [by Jeffrey Zeldman for alistapart.com]

  • The Font of Foulness, Part I: Size Matters
    WebReference tutorial, by Stephanos Piperoglou, on CSS and HTML font sizing issues.
    [06/15/2000 by Stephanos Piperoglou, for WebReference.com]

  • Fonts and Products: Fonts supplied with some Microsoft products
    Microsoft's listing of default fonts included for a variety of their programs, including several Windows versions, Office products (Access, Excel, Word, more), several Internet Explorer versions, core web fonts. Also lists individual fonts with information on which programs they're included in and the font creators.
    [microsoft.com]

  • Fonts Included in Various Microsoft Products
    Well done information here, easy to access. Included: Internet Explorer 4, 5, FrontPage 98, 2000, Office Office 97 SR1a, 2000, Windows 95, 98, ,98se, NT Workstation 4.0, NT Workstation 4.0 SP5, Word 2000.
    [by Brett Merkey]

  • Improving Appearance of Arial Font on the Macintosh (Solutions for both Mac Users and Web Developers)
    by Bob Baumel. Excellent, informative article. A must read article.
    [by Bob Baumel]

  • So, What Size and Type of Font Should I Use on My Website?
    by M. Bernard and M. Mills, Usability News, Summer 2000. Study done with IBM compatible computers comparing readability of various fonts and sizes. Interesting, helpful info.
    [Summer 2000, by Bernard and M. Mills, Usability News]

  • Size Matters
    by Todd Fahrner, A List Apart. Excellent tutorial that explains cross-browser font sizing problems for xx-small through xx-large keywords in CSS1. Workarounds and alternative solutions are also explained and provided for Netscape 4 through the newer versions 5 and 6.

  • Standard Fonts on Windows and Mac Computers
    by Peter Perchansky, DynamicNet. Lists basic fonts with Windows 95, Mac standard fonts, Microsoft Web Fonts (for Mac, Win3.x/95/NT), and resources. Good info.

  • Text Size Control with CSS
    by Steve Mulder, Webmonkey. Shows screenshot examples of cross-browser, cross-platform differences, using pixels, ems, percentages and what to watch out for. Includes JavaScript sniffer to direct to separate style sheets for macs or PCs.
    [09-02/98, Steve Mulder, Webmonkey.]

  • Text Sizing: The Ground Will Not Be Friends With You
    Owen Briggs has provided 264 screenshots rendering fonts in the most popular browsers. Owen's screenshots can help provide amazing insight about what all the browsers do (or don't do) to fonts. Absolutely incredible resource.
    [06-06/2002, Owen Briggs, The Noodle Incident.]

  • Toward a standard font size interval system
    by Todd Fahrner, Metrius (previously Verso). "Discusses how the 7 HTML font sizes should (and don't) relate to the 7 CSS font size keywords." Excellent article that explains CSS font sizing problems, including graphics that show the comparisons of font sizes in various platforms, browsers. Article includes references, links to W3C recommendations, possible workarounds, and much more. Definitely a must read as part of exploring the CSS font sizing issues.
    [by Todd Fahrner]

  • Understanding Cross-Platform Text Size Differences
    Informative, helpful article by Bob Baumel. Explains and shows cross-platform font issues, sizing variations and what to keep in mind for your Web site designs.
    [by Bob Baumel]

  • Using Special Characters on Web Pages: Cross-Platform Considerations
    by Bob Baumel. Advice on special characters that work cross-platform for PC, Mac, and Unix, concentrating on ISO 8859-1 character set, also known as ISO Latin-1, and also some on Unicode.
    [by Bob Baumel]

  • Web Pages aren't Printed on Paper
    Or how I gave up trying to "control" web pages and discovered adaptability
    by John Allsopp, WestCiv website.
    Important reasons why relative sizing and percentages for fonts need to be used for adaptability.
    [by John Allsopp, WestCiv]

  • Why Windows Web Pages Have Tiny Text
    by Geoff Duncan, Tidbits.com. Great article about what's going on with Windows font sizing vs. Mac font sizing.
    [02/15/1999 by Geoff Duncan, Tidbits.com]

  • Windows default fonts
    by Jukka Korpela. Compiled table chart with samples from Windows 3.x, 95, 98, NT4.
    [by Jukka Korpela]

to top

Section 4: CSS Sites and Resources

Sites Devoted to CSS

The following list are to either entire sites or sections within sites that are devoted to CSS.

  • All My FAQs Wiki: CSS FAQs
    Helpful, concise FAQ about CSS that answers many common questions. Terrific listing of links to more tutorials, charts, resources, too.
    [allmyfaqs.com]

  • Cascading Style Sheets
    from the WDG (Web Development Group). This site goes into a great deal of detail about the use of cascading style sheets, including a quick tutorial, CSS structure, rules, properties, linking style sheets to HTML, a CSS checker, resources.
    [by WDG, htmlhelp.com]

  • Cascading Style Sheets
    from WDVL (Web Developers Virtual Library). Wow. Grab a cup of coffee or tea and plan to refer back to this resource often!

    There are over half a dozen tutorials here on various aspects of CSS: Introduction to CSS; A Brief Tutorial, Putting Style Sheets in Perspective; Benefits of Cascading Style Sheets; Cascading Style Sheets - Designing for the Web; Linking Styles to Documents; WDVL's Default Style Sheet; Web Design - More Than Meets The Eye; Further Resources; CSS Examples; The Style Attribute and CSS Declarations - The Human Factor; How do I Select Thee, Let Me Count the Ways; WebDeveloper.com's Guide to Cascading Style Sheets; The CSS Styles.
    [by WDVL]

  • CSSBook.com: Designing CSS Web Pages
    CSSBook.com is the site for “Designing CSS Web Pages,” a book that teaches Web designers how to approach the design language of cascading style sheets. It also looks handsome.
    [10/2002 by Christopher Schmitt]

  • CSS Support Charts
    by Eric Meyer (formerly at WebReview.com, now at Netscape's DevEdge) ...intended to ease your pain and suffering by offering you a one-stop area for finding everything you need to know about CSS. Very helpful resource of information, updated January 2001 but remains a popular and helpful resource. Tutorials, articles, details and overviews.
    [by Eric Meyer]

  • CSShark Answers FAQNew!
    Mako 4 CSS. Top-notch helpful site devoted to CSS. Learn the basics, answers to common and not-so-common questions, Netscape 4 issues, bugs and workarounds, resources, and more.
    [mako4css.com]

  • Index DOT Css
    Brian Wilson's CSS site with thorough tag references, tutorials, resources, lots of information.
    [by Brian Wilson, blooberry.com]

to top

More CSS Links Resources

to top

Section 5: CSS Newsgroups, Forums, Discussion Lists

See also the Discussion Lists and Newsgroups section for more related to web design, CSS, search engine optimization, graphics, HTML, etc.

  • A List Apart (ALA): Coders Forum
    This forum at the well known ALA site covers CSS issues and other issues related to web design and development. Lots of good questions, answers, and dialogues to be found there.
    [alistapart.com]

  • Bradsoft's TopStyle CSS Editor Newsgroup
    (news.bradsoft.com/topstyle.support.general)
    Ask your questions here about TopStyle and CSS issues, and find answers at this CSS newsgroup list. TopStyle's creator, Nick Bradbury (also creator of HomeSite), is amazingly prompt in answering questions, and he's quite generous in helping, listening to feedback, and he implements many of the suggestions he receives into the next software update.

  • Bradsoft's CSS Newsgroup
    (news.bradsoft.com/topstyle.support.css)
    Ask your CSS questions here, read or search the discussions to find valuable help at Bradsoft's CSS newsgroup list, just started December 2001. Bradsoft's Nick Bradbury started it because of all the CSS questions on the regular support list, and it's turning into another great resource. Lots of knowledgeable CSS people there, too.

  • comp.infosystems.www.authoring.stylesheets FAQ
    Check this fabulous resource to find so many questions answered before you ask them again at the newsgroup listed below. Links to many authoritative and helpful resources here, too. Highly valuable resource.
    [CSS Pointers Group, css.nu]

  • comp.infosystems.www.authoring.stylesheets
    Ask your questions here and find answers at the CSS newsgroup list. You'll find responses to questions from notable CSS gurus and authors, such as Eric Meyer and Alan Flavell. Tremendously beneficial resource.

  • CSS-Discuss
    New list created by Eric Meyer and John Allsopp January, 2002. All levels encouraged, from newbies through advanced. Valuable resource.

  • netscape.public.mozilla.style
    Mozilla's newsgroup for CSS questions and answers. Great place to ask Netscape-specific CSS questions but also good for any CSS questions.

  • opera.page-authoring
    This Opera newsgroup covers CSS, DHTML, anything related to Opera and page authoring. Excellent resource.

  • Project Seven's CSS Newsgroup
    Run by Al Sparber, well known among Dreamweaver enthusiasts for his Project Seven site and editor of the best-selling Dreamweaver 4 Magic. While it's especially helpful for Project Seven product users and Dreamweaver users, the newsgroup is open to all discussion related to CSS.

to top

Section 6: CSS Templates

  • CSS Layout Techniques
    Eric Costello's cross-browser CSS layouts collection, with some from around the 'Net and some of his own. Includes 2, 3, 4 column fluid and static layouts (no tables - all CSS), static width and centered, nested float, more. Free for the taking, too. Also includes CSS Resources and CSS Tutorials. Fantastic.
    [By Eric Costello, glish.com]

  • CSS Layouts
    Craig Saila has generously provided a terrific selection of freely available CSS layout templates that are cross-browser, cross-platform compatible, some even working fine with Netscape 4 browsers. Included are explanations and charts showing browser support for each layout template. Craig also has tips and tutorials at his site.
    [By Craig Saila, saila.com.]

  • CSS TemplatesNew!
    By studio id. Includes cross-browser, cross-platform templates that includes a header, 3 column body, and footer. Well done.
    [by Michael Angeles, studio id.]

  • The Layout Reservoir
    Rob Chandanais' BlueRobot.com CSS layouts - free resource of layouts, including two column and three column varieties, all with CSS. Well done!
    [Rob Chandanais, Bluerobot.com]

  • W3C Core Styles
    Offered by the W3C, you can link directly to the style sheets at the W3C server if you wish, using these pre-made CSS templates for your own site.
    [by Todd Farhner and colleagues at Verso for W3C]

to top

Section 7: CSS Editors, Reference Charts, and Validating Tools

CSS Editors

  • Bradsoft TopStyle CSS, HTML, XHTML Editor
    by Nick Bradbury, who created Macromedia HomeSite. Top-rated editor for PCs (5 stars with ZDNet, PCMagazine, CNet, more). Integrates seamlessly with Macromedia HomeSite, Macromedia Dreamweaver, CSE HTML Validator, NoteTab, and others. The Lite version is already included in HomeSite (and possibly other programs, too.). Popular program with Web site developers. Highly recommended by WebsiteTips.com and used for this website. Download trial or purchase available. There's also a fabulous newsgroup for TopStyle. See above description.

  • Coffee Cup Style Sheet Maker++
    Rated 5 stars with ZDNet, and other rave reviews. Helpful program for PCs for creating and editing style sheets for your website. Same company as the Coffee Cup HTML editor. Download trial or purchase available.

  • Layout Master
    by Westciv, John Allsopp. New program June, 2001. Trial demo and purchase at the site for PCs, beta for Windows (full version coming soon). Thorough tutorial online and included with program downloads. Already received a 5-cow rating from Tucows.

  • Style Master
    by Westciv, John Allsopp. Pro version also available for both PCs and Macs. Trial demo and purchase at the site. Given ZDNet's 5-star rating.

to top

CSS Reference Charts, Tables

  • CSS Bugs and Workarounds
    Fabulous chart with workarounds from the CSS Pointers Group.
    [CSS Pointers Group, css.nu]

  • CSS Enhancements in Internet Explorer 6
    Microsoft's documentation about enhancements for IE6 for CSS, including more support for CSS1, the !DOCTYPE "Switch" and much more. 14 printable pages, and a helpful reference for IE6.
    [03/2001 by Lance Silver, Microsoft Corporation]

  • css filters (css hacks)New!
    Helpful chart via centricle.com showing CSS filters or hacks to hide or allow various browsers and platforms. “Will the browser apply the rule(s)?” Includes links and information for each one, resources.
    [04/21/2003 by centricle.com]

  • CSS Master Compatibility Chart
    Great chart by Eric Meyer, indicating browser compatibilities for specific values and properties of CSS, has notes, more. Great reference.
    [by Eric Meyer]

  • CSS Support Charts
    by Eric Meyer (formerly at WebReview.com, now at Netscape's DevEdge) ...intended to ease your pain and suffering by offering you a one-stop area for finding everything you need to know about CSS. Very helpful resource of information, updated January 2001 but remains a popular and helpful resource. Tutorials, articles, details and overviews.
    [by Eric Meyer]

  • CSS Style Properties
    From Project Cool Developer Zone. Excellent chart for older browsers (version 3 and 4) that summarizes the 5 style properties of supported CSS. Designed to quickly scan, the chart indicates browser compatibilities, incompatibilities. (FYI: the 5 style properties are Text, Font, Color and Background, Placement, Classification.)
    [projectcool.com]

  • CSS1 and CSS2 Browser Support
    by WestCiv. This chart is very thorough and covers Netscape 4 and 6, Internet Explorer 4, 5, 5.5, 6, Opera 3 and 5, WebTV 1 for Windows, Mac.
    [WestCiv.com]

  • CSS2 Reference
    W3Schools' CSS2 reference chart. Helpful chart includes property, description, values, browser support, W3C recommendations, links to online examples and more details, too.
    [W3Schools.com]

  • CSS 2 Tests
    Peter-Paul Koch's fascinating tests and results with documentation, screen shots, and more. Currently includes CSS2 selectors, declarations, and a compatibility chart for Netscape 4.x and 6, IE 4, 5 and 6, Opera 5, and Konqueror.
    [by Peter-Paul Koch]

  • SelectORacle
    by the Opal Group (by Kevin Jacobs, coding and expertise, Eric Meyer, CSS guru). Input complex CSS selectors and this tool will translate it for you to understand it.
    [by Eric Meyer and Kevin Jacobs, the Opal Group]

  • Summary Chart: How to hide CSS from buggy browsers
    by Johannes Koch. Excellent chart for quickly viewing the workarounds for various browsers, with links to how to implement them.
    [by Johannes Koch]

to top

CSS Validating Tools

  • W3C CSS Validation ServiceW3C icon
    Check your style sheets code either at the site, or download it to your own computer. Fabulous service (Free!).

  • W3C CSS Validator FAQ
    Answers to common questions about the W3C CSS Validator, including what some of the errors mean with links to more information.

  • CSE HTML Validator
    Integrates within Macromedia HomeSite, Bradsoft TopStyle, and several other programs. Also stands alone as an HTML validator and link checking program, too. Easy to use, great program.

  • CSS Check
    WDG's online validator for CSS. You can check online Web pages or files from your own computer. Very friendly approach to its reports, and provides hints and warnings as well as errors.

to top

 
Site map Affordable Web Hosting-Cheetah Solutions LLC - dedicated, reseller and shared Web Hosting Updates

Web Hosting Template. All content on this website is © Copyright 2000-2010 - All Rights Reserved
Website template powered by VooWeb.com Web Hosting Template
The content on this site may not be reused or republished. Web Hosting Template