Difference between revisions of "Cascading Style Sheets"
(→Demonstrations) |
|||
(32 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
− | In computing, '''Cascading Style Sheets''' ('''CSS''') is a | + | In computing, '''Cascading Style Sheets''' ('''CSS''') is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in [[HTML]] and [[XHTML]], but the language can be applied to any kind of [[XML]] document, including [[Scalable Vector Graphics|SVG]] and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C). |
==Overview== | ==Overview== | ||
− | CSS is used by both the authors and readers of | + | CSS is used by both the authors and readers of web pages to define colours, fonts, layout, and other '''aspects''' of document presentation. It is designed primarily to enable the separation of document structure (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on braille-based, tactile devices. Similarly, identical HTML or XML markup can be displayed in different 'brands', liveries or colour schemes on different but related web sites referencing different CSS. |
==Recommendations== | ==Recommendations== | ||
− | The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December | + | The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for: |
− | * | + | * Font properties such as typeface and emphasis |
− | * | + | * Colour of text, backgrounds, and other elements |
* Text attributes such as spacing between words, letters, and lines of text | * Text attributes such as spacing between words, letters, and lines of text | ||
− | * | + | * Alignment of text, images, tables and other elements |
− | * | + | * Margin, border, padding, and positioning for most elements |
* Unique identification and generic classification of groups of attributes | * Unique identification and generic classification of groups of attributes | ||
The W3C maintains the [http://www.w3.org/TR/REC-CSS1 CSS1 Recommendation]. | The W3C maintains the [http://www.w3.org/TR/REC-CSS1 CSS1 Recommendation]. | ||
− | CSS level 2 was developed by the W3C and published as a Recommendation in May | + | CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities, among them the absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. The W3C maintains the [http://www.w3.org/TR/REC-CSS2/ CSS2 Recommendation]. |
− | CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a [http://www.w3.org/TR/CSS21/ Candidate Recommendation] for several months, on | + | CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a [http://www.w3.org/TR/CSS21/ Candidate Recommendation] for several months, on 15 June 2005 it was reverted to a working draft for further review. |
− | CSS level 3 is currently under | + | CSS level 3 is currently under development. The W3C maintains a [http://www.w3.org/Style/CSS/current-work#table CSS3 progress report]. |
==CSS experiments== | ==CSS experiments== | ||
Line 33: | Line 33: | ||
These experiments are usually only compatible with browsers that are largely standards compliant. | These experiments are usually only compatible with browsers that are largely standards compliant. | ||
+ | |||
+ | ==Rarely used CSS properties== | ||
+ | ''Note: See "[http://www.seomoz.org/blog/css-properties-you-probably-never-use 15 CSS Properties You Probably Never Use (but perhaps should)]" — by Matthew Inman (Oatmeal); 2007-02-15''. | ||
+ | |||
+ | * clip | ||
+ | clip: rect(5px, 40px, 45px, 5px) | ||
+ | * visibility | ||
+ | visibility: (inherit | visible | hidden) | ||
+ | * text-shadow | ||
+ | text-shadow: color, x-coordinate, y-coordinate, blur radius | ||
+ | text-shadow: #000000 10px -5px 1px | ||
+ | * content | ||
+ | content: "Your browser supports content" | ||
+ | * quotes (note: [http://alistapart.com/ A List Apart] endorses the revival of the <q> tag using content) | ||
+ | q { quotes: '"' '"' } | ||
+ | * counter-reset and counter-increment | ||
+ | body { | ||
+ | counter-reset: section; /* Set the section counter to 0 */ | ||
+ | } | ||
+ | h1:before { | ||
+ | counter-increment: section; /* Increment the section counter */ | ||
+ | content: "Section " counter(section) ": "; /* Display the counter */ | ||
+ | } | ||
+ | * marks | ||
+ | @page: { marks: <value>; } | ||
+ | * page-break-before and page-break-after | ||
+ | page-break-before: (always|auto|empty string|left|right); | ||
+ | page-break-after: (always|auto|empty string|left|right); | ||
+ | * orphans and widows | ||
+ | orphans: <integer> | ||
+ | widows: <integer> | ||
+ | * font-size-adjust | ||
+ | font-size-adjust: number | ||
+ | * font-stretch | ||
+ | font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit) | ||
+ | |||
+ | :From the W3C: The 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest: | ||
+ | :# ultra-condensed | ||
+ | :# extra-condensed | ||
+ | :# condensed | ||
+ | :# semi-condensed | ||
+ | :# normal | ||
+ | :# semi-expanded | ||
+ | :# expanded | ||
+ | :# extra-expanded | ||
+ | :# ultra-expanded | ||
+ | |||
+ | * font-variant | ||
+ | font-variant: (normal | small-caps) | ||
+ | |||
+ | * caption-side | ||
+ | caption-side: (top | bottom | left | right) | ||
+ | |||
+ | * table-layout | ||
+ | table-layout: (auto | fixed) | ||
+ | |||
+ | * empty-cells | ||
+ | empty-cells: (show | hide) | ||
==References== | ==References== | ||
− | * W3C: ''[http://www.w3.org/Style/CSS/ | + | * W3C: ''[http://www.w3.org/Style/CSS/ Cascading Style Sheets, home page] CSS Home Page'' |
* W3C: ''[http://www.w3.org/TR/CSS1 Cascading Style Sheets, level 1] CSS 1 specification'' | * W3C: ''[http://www.w3.org/TR/CSS1 Cascading Style Sheets, level 1] CSS 1 specification'' | ||
* W3C: ''[http://www.w3.org/TR/CSS21 Cascading Style Sheets, level 2 revision 1] CSS 2.1 specification'' | * W3C: ''[http://www.w3.org/TR/CSS21 Cascading Style Sheets, level 2 revision 1] CSS 2.1 specification'' | ||
Line 49: | Line 107: | ||
==CSS books== | ==CSS books== | ||
* Wikibooks | * Wikibooks | ||
− | * | + | * Jeffrey Zeldman: ''Designing With Web Standards'', New Riders, ISBN 0735712018 (paperback) ([http://www.zeldman.com/dwws/ book's companion site]) |
− | * | + | * Eric A. Meyer: ''Cascading Style Sheets: The Definitive Guide'', 2nd Edition, O'Reilly & Associates, ISBN 0596005253 |
− | * | + | * Eric A. Meyer: ''Cascading Style Sheets 2.0 Programmer's Reference'', McGraw-Hill Osborne Media, ISBN 0072131780 |
− | * | + | * Keith Schengili-Roberts: ''Core CSS, 2nd Edition'', Prentice Hall, ISBN 0-130-09278-9 |
* [http://www.aw-bc.com/catalog/academic/product/0,1144,0321193121,00.html ''Cascading Style Sheets: Designing for the Web''] by Håkon Wium Lie and Bert Bos | * [http://www.aw-bc.com/catalog/academic/product/0,1144,0321193121,00.html ''Cascading Style Sheets: Designing for the Web''] by Håkon Wium Lie and Bert Bos | ||
* ''The Zen of CSS Design'' (co-authored by CSS Zen Garden Owner, Dave Shea), ISBN 0321303474 | * ''The Zen of CSS Design'' (co-authored by CSS Zen Garden Owner, Dave Shea), ISBN 0321303474 | ||
Line 67: | Line 125: | ||
*[http://www.yourhtmlsource.com/stylesheets/ Style Sheets Tutorials] - Step by step lessons. | *[http://www.yourhtmlsource.com/stylesheets/ Style Sheets Tutorials] - Step by step lessons. | ||
*[http://www.westciv.com/style_master/hands_on_tutorial_sm/ Style Master CSS Tutorial] - A good introductory tutorial. | *[http://www.westciv.com/style_master/hands_on_tutorial_sm/ Style Master CSS Tutorial] - A good introductory tutorial. | ||
+ | *[http://code.google.com/doctype/ Google Doctype] — CSS/XHTML/JavaScript | ||
− | ===Demonstrations=== | + | ====Demonstrations==== |
*[http://csszengarden.com/ ''CSS Zen Garden''] - Showcases the powerful abilities of CSS. | *[http://csszengarden.com/ ''CSS Zen Garden''] - Showcases the powerful abilities of CSS. | ||
*[http://cssbeauty.com/ ''CSS Beauty''] - CSS Design Showcase. | *[http://cssbeauty.com/ ''CSS Beauty''] - CSS Design Showcase. | ||
*[http://stylegala.com/ ''Stylegala''] - Web Design Publication. | *[http://stylegala.com/ ''Stylegala''] - Web Design Publication. | ||
+ | *[http://www.mostinspired.com/blog/2008/03/16/niche-galleries/ 24 Great Niche Galleries] | ||
+ | *[http://www.lightondark.com/sites/ light on dark] | ||
+ | *[http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts Perfect multi-column CSS liquid layouts - iPhone compatible] | ||
===Resources=== | ===Resources=== | ||
Line 80: | Line 142: | ||
*[http://www.ilovejackdaniels.com/css/css-cheat-sheet/ CSS Cheat Sheet] - A printable single-page quick reference for CSS. | *[http://www.ilovejackdaniels.com/css/css-cheat-sheet/ CSS Cheat Sheet] - A printable single-page quick reference for CSS. | ||
*[http://www.cssbeauty.com/news/ CSS News] - Repository of latest tips and tricks in the world of CSS Design. | *[http://www.cssbeauty.com/news/ CSS News] - Repository of latest tips and tricks in the world of CSS Design. | ||
+ | *[http://www.webdevout.net/browser-support-css Web browser CSS support] | ||
====Browser issues==== | ====Browser issues==== | ||
Line 85: | Line 148: | ||
*[http://www.w3.org/Style/CSS/Test/CSS1/current/test5526c.htm CSS1 Acid test] | *[http://www.w3.org/Style/CSS/Test/CSS1/current/test5526c.htm CSS1 Acid test] | ||
*[http://webstandards.org/act/acid2/ CSS2 Acid2 test] and its [http://www.webstandards.org/press/releases/archive/2005/04/13/ announcement] | *[http://webstandards.org/act/acid2/ CSS2 Acid2 test] and its [http://www.webstandards.org/press/releases/archive/2005/04/13/ announcement] | ||
+ | ====Build Online==== | ||
+ | *[http://www.metatitan.com/cssbuilder.php CSS Builder] | ||
====About the box model==== | ====About the box model==== | ||
*[http://www.ilovejackdaniels.com/css/box-model/ CSS Box Model] - A guide to the box model in CSS and how different browsers treat it. | *[http://www.ilovejackdaniels.com/css/box-model/ CSS Box Model] - A guide to the box model in CSS and how different browsers treat it. | ||
*[http://www.redmelon.net/tstme/box_model/ Interactive CSS Box Model Demo] | *[http://www.redmelon.net/tstme/box_model/ Interactive CSS Box Model Demo] | ||
+ | |||
+ | ==External links (resources)== | ||
+ | *[http://csstidy.sourceforge.net/ CSSTidy] | ||
+ | *[http://www.strictlycss.com/articles/article/40/the-only-css-layout-you-need CSS layout examples] | ||
+ | *[http://magnetiq.com/2006/08/27/using-less-images/ Using Fewer Images] | ||
+ | *[http://logopond.com/ LogoPond] | ||
+ | *[http://cssglobe.com/ CSS Globe] — Web standards news | ||
+ | *[http://www.smashingmagazine.com/list-of-css-tools-static.html List of CSS Tools] | ||
+ | *[http://www.code-sucks.com/css%20layouts/faux-css-layouts/ Faux Column CSS Layouts] | ||
+ | *[http://www.search-this.com/2007/03/12/no-margin-for-error/ No Margin For Error] | ||
+ | *[http://www.gotapi.com/ gotAPI] — Quick reference search for HTML, Cascading Style Sheets, JavaScript, AJAX, Oracle, Prototype.JS, PHP, MySQL, ActionScript and more | ||
+ | *[http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/ CSS Cheat Sheet] | ||
+ | *[http://bjorkoy.com/blueprint/index.html Blueprint] | ||
+ | ===Techniques=== | ||
+ | *[http://www.alistapart.com/articles/zebratables/ Zebra Tables] | ||
+ | *[http://tutorialblog.org/25-code-snippets-for-web-designers-part2/ 25 Code Snippets for Web Designers (Part2)] | ||
+ | *[http://blog.jm3.net/2007/03/16/the-only-ten-things-to-know-about-css/ (The Only) Ten Things To Know About CSS] | ||
+ | *[http://www.roscripts.com/CSS_creme_of_the_month-123.html CSS creme of the month] | ||
+ | *[http://ryanfait.com/sticky-footer/ A CSS sticky footer that just works] | ||
+ | *[http://css.maxdesign.com.au/index.htm ss.maxdesign.com.au] — CSS resources and tutorials for web designers and web developers | ||
+ | *[http://alistapart.com/articles/sprites CSS Sprites: Image Slicing's Kiss of Death] | ||
+ | *[http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/ A CSS styled table version 2] | ||
+ | *[http://virtuelvis.com/gallery/css3/target/interface.html CSS 3 fun :target] | ||
+ | *[http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/ CSS Frameworks + CSS Reset: Design From Scratch] | ||
+ | *[http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ Designing With Grid-Based Approach] | ||
+ | *[http://www.yaml.de/en/home.html "Yet Another Multicolumn Layout" (YAML)] — an (X)HTML/CSS framework for creating modern and flexible floated layouts. | ||
+ | *[http://www.easy-designs.net/articles/replaceSelect/ <select> Something New, Part 1] | ||
+ | *[http://code.google.com/p/easy-designs/ easy-designs] | ||
+ | *[http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/ Hands on with Blueprint, a CSS Framework] | ||
+ | *[http://www.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/ Powerful CSS-Techniques For Effective Coding] | ||
+ | *[http://www.noupe.com/css/using-css-to-fix-anything-20-common-bugs-and-fixes.html Using CSS to Fix Anything: 20+ Common Bugs and Fixes] | ||
+ | *[http://eriwen.com/css/css-indirect-adjacent-combinator/ About the indirect adjacent combinator (~) in CSS] | ||
+ | |||
+ | ==External links (other)== | ||
+ | *[http://www.mostinspired.com/ Most Inspired] | ||
+ | *[http://www.pmob.co.uk/ Raw CSS examples] | ||
+ | *[http://www.glish.com/css/index.html glish.com] — CSS Layout Techniques: for Fun and Profit | ||
+ | *[http://www.dynamicdrive.com/style/ Dynamic Drive CSS Library] | ||
+ | *[http://www.webreference.com/authoring/style/sheets/layout/advanced/ Advanced CSS Layouts: Step by Step] | ||
+ | *[http://www.htmldog.com/ HTML Dog] — HTML and CSS Tutorials, References, Articles and News. | ||
+ | *[http://www.timvansas.nl/bookmarks/ CSS & XHTML Bookmarks] | ||
+ | *[http://erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css 5 tips for organizing your CSS] | ||
+ | *[http://www.blooberry.com/indexdot/css/propindex/all.htm CSS Property Index] | ||
+ | *http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py | ||
+ | *http://www.meyerweb.com/eric/css/tests/ | ||
+ | *[http://www.meyerweb.com/eric/css/ Eric Meyer: CSS] | ||
+ | *[http://www.webreference.com/authoring/style/sheets/layout/ CSS Layout Resources and Information] | ||
+ | *[http://www.skimcss.com/skimlist SkimCSS] — everything CSS related | ||
+ | *[http://www.alistapart.com/articles/holygrail In Search of the Holy Grail (of CSS)] — by Matthew Levine of ALA | ||
+ | *[http://dotkraft.com/ dotkraft.com] | ||
+ | *[http://www.wittysparks.com/2007/04/22/60-best-css-directories-you-would-die-to-watch/ 60 best CSS directories you would die to watch] | ||
+ | *[http://www.dezwozhere.com/links.html CSS, Accessibility and Standards Links] | ||
+ | *[http://www.csstux.com/index.php csstux - The best dressed sites on the web] | ||
+ | *[http://www.softwaredeveloper.com/features/designing-on-a-dime-060407/ Designing on a Dime: 100 Freebie CSS Resources] | ||
+ | *[http://blog.pmarca.com/2007/06/essential_html_.html Essential HTML, CSS, Javascript, PHP, and miscellaneous cheatsheets] | ||
+ | *[http://csseasy.com/?hellodiggers CSSeasy] | ||
+ | *[http://www.seo-expert-blog.com/blog/css-galleries-free-web-designs-for-download CSS Galleries: Free Web Designs for Download] | ||
+ | *[http://www.wittysparks.com/2007/06/10/26-best-ways-to-implement-ajax-css-and-javascript-based-tabs/ 26 Best ways to implement AJAX, CSS and Javascript based Tabs] | ||
+ | *[http://psdtuts.com/ PSDTuts] | ||
[[Category:World Wide Web]] | [[Category:World Wide Web]] |
Latest revision as of 04:09, 29 June 2008
In computing, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. The CSS specifications are maintained by the World Wide Web Consortium (W3C).
Contents
Overview
CSS is used by both the authors and readers of web pages to define colours, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document structure (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on braille-based, tactile devices. Similarly, identical HTML or XML markup can be displayed in different 'brands', liveries or colour schemes on different but related web sites referencing different CSS.
Recommendations
The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for:
- Font properties such as typeface and emphasis
- Colour of text, backgrounds, and other elements
- Text attributes such as spacing between words, letters, and lines of text
- Alignment of text, images, tables and other elements
- Margin, border, padding, and positioning for most elements
- Unique identification and generic classification of groups of attributes
The W3C maintains the CSS1 Recommendation.
CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities, among them the absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. The W3C maintains the CSS2 Recommendation.
CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on 15 June 2005 it was reverted to a working draft for further review.
CSS level 3 is currently under development. The W3C maintains a CSS3 progress report.
CSS experiments
Recently, there has been a trend among web designers to document all their experiments with CSS on a section of their site. Examples include:
- css/edge
- Newt Edge
- CSS Play
- CSS Experiments
- Virtuelvis Gallery
- Position is Everything
- the CSS playground
These experiments are usually only compatible with browsers that are largely standards compliant.
Rarely used CSS properties
Note: See "15 CSS Properties You Probably Never Use (but perhaps should)" — by Matthew Inman (Oatmeal); 2007-02-15.
- clip
clip: rect(5px, 40px, 45px, 5px)
- visibility
visibility: (inherit | visible | hidden)
- text-shadow
text-shadow: color, x-coordinate, y-coordinate, blur radius text-shadow: #000000 10px -5px 1px
- content
content: "Your browser supports content"
- quotes (note: A List Apart endorses the revival of the
tag using content)
q { quotes: '"' '"' }
- counter-reset and counter-increment
body { counter-reset: section; /* Set the section counter to 0 */ } h1:before { counter-increment: section; /* Increment the section counter */ content: "Section " counter(section) ": "; /* Display the counter */ }
- marks
@page: { marks: <value>; }
- page-break-before and page-break-after
page-break-before: (always|auto|empty string|left|right); page-break-after: (always|auto|empty string|left|right);
- orphans and widows
orphans: <integer> widows: <integer>
- font-size-adjust
font-size-adjust: number
- font-stretch
font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)
- From the W3C: The 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest:
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- normal
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
- font-variant
font-variant: (normal | small-caps)
- caption-side
caption-side: (top | bottom | left | right)
- table-layout
table-layout: (auto | fixed)
- empty-cells
empty-cells: (show | hide)
References
- W3C: Cascading Style Sheets, home page CSS Home Page
- W3C: Cascading Style Sheets, level 1 CSS 1 specification
- W3C: Cascading Style Sheets, level 2 revision 1 CSS 2.1 specification
- W3C: CSS: under construction, CSS 3, etc.
See also
- W3C
- List of stylesheet languages
- Comparison of layout engines (CSS)
- CSS Zen Garden
- CSS Property Index
CSS books
- Wikibooks
- Jeffrey Zeldman: Designing With Web Standards, New Riders, ISBN 0735712018 (paperback) (book's companion site)
- Eric A. Meyer: Cascading Style Sheets: The Definitive Guide, 2nd Edition, O'Reilly & Associates, ISBN 0596005253
- Eric A. Meyer: Cascading Style Sheets 2.0 Programmer's Reference, McGraw-Hill Osborne Media, ISBN 0072131780
- Keith Schengili-Roberts: Core CSS, 2nd Edition, Prentice Hall, ISBN 0-130-09278-9
- Cascading Style Sheets: Designing for the Web by Håkon Wium Lie and Bert Bos
- The Zen of CSS Design (co-authored by CSS Zen Garden Owner, Dave Shea), ISBN 0321303474
- Cascading Style Sheets: The Definitive Guide
- Eric Meyer On CSS
- More Eric Meyer On CSS
CSS discussions
External links
Tutorials
- Style Sheets Tutorials - Step by step lessons.
- Style Master CSS Tutorial - A good introductory tutorial.
- Google Doctype — CSS/XHTML/JavaScript
Demonstrations
- CSS Zen Garden - Showcases the powerful abilities of CSS.
- CSS Beauty - CSS Design Showcase.
- Stylegala - Web Design Publication.
- 24 Great Niche Galleries
- light on dark
- Perfect multi-column CSS liquid layouts - iPhone compatible
Resources
Validation
- The W3C CSS Validation Service - Verify the syntax of all or part of a stylesheet.
Reference
- CSS crib sheet - A quick reference "cheat" sheet.
- CSS Cheat Sheet - A printable single-page quick reference for CSS.
- CSS News - Repository of latest tips and tricks in the world of CSS Design.
- Web browser CSS support
Browser issues
- Position Is Everything - Articles on CSS bugs in different browsers and workarounds to common CSS problems
- CSS1 Acid test
- CSS2 Acid2 test and its announcement
Build Online
About the box model
- CSS Box Model - A guide to the box model in CSS and how different browsers treat it.
- Interactive CSS Box Model Demo
External links (resources)
- CSSTidy
- CSS layout examples
- Using Fewer Images
- LogoPond
- CSS Globe — Web standards news
- List of CSS Tools
- Faux Column CSS Layouts
- No Margin For Error
- gotAPI — Quick reference search for HTML, Cascading Style Sheets, JavaScript, AJAX, Oracle, Prototype.JS, PHP, MySQL, ActionScript and more
- CSS Cheat Sheet
- Blueprint
Techniques
- Zebra Tables
- 25 Code Snippets for Web Designers (Part2)
- (The Only) Ten Things To Know About CSS
- CSS creme of the month
- A CSS sticky footer that just works
- ss.maxdesign.com.au — CSS resources and tutorials for web designers and web developers
- CSS Sprites: Image Slicing's Kiss of Death
- A CSS styled table version 2
- CSS 3 fun :target
- CSS Frameworks + CSS Reset: Design From Scratch
- Designing With Grid-Based Approach
- "Yet Another Multicolumn Layout" (YAML) — an (X)HTML/CSS framework for creating modern and flexible floated layouts.
- <select> Something New, Part 1
- easy-designs
- Hands on with Blueprint, a CSS Framework
- Powerful CSS-Techniques For Effective Coding
- Using CSS to Fix Anything: 20+ Common Bugs and Fixes
- About the indirect adjacent combinator (~) in CSS
External links (other)
- Most Inspired
- Raw CSS examples
- glish.com — CSS Layout Techniques: for Fun and Profit
- Dynamic Drive CSS Library
- Advanced CSS Layouts: Step by Step
- HTML Dog — HTML and CSS Tutorials, References, Articles and News.
- CSS & XHTML Bookmarks
- 5 tips for organizing your CSS
- CSS Property Index
- http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
- http://www.meyerweb.com/eric/css/tests/
- Eric Meyer: CSS
- CSS Layout Resources and Information
- SkimCSS — everything CSS related
- In Search of the Holy Grail (of CSS) — by Matthew Levine of ALA
- dotkraft.com
- 60 best CSS directories you would die to watch
- CSS, Accessibility and Standards Links
- csstux - The best dressed sites on the web
- Designing on a Dime: 100 Freebie CSS Resources
- Essential HTML, CSS, Javascript, PHP, and miscellaneous cheatsheets
- CSSeasy
- CSS Galleries: Free Web Designs for Download
- 26 Best ways to implement AJAX, CSS and Javascript based Tabs
- PSDTuts