CSS links: Difference between revisions
Jump to navigation
Jump to search
m (using an external editor) |
|||
| (15 intermediate revisions by 2 users not shown) | |||
| Line 6: | Line 6: | ||
See also: | See also: | ||
* [[CSS]] | * [[CSS]] (for a short overview), [[CSS tutorial]], [[CSS for XML tutorial]] | ||
== Tools / Software == | == Tools / Software == | ||
| Line 17: | Line 17: | ||
=== Editors === | === Editors === | ||
* [http://www.bradsoft.com/download/ TopStyle Lite] ([http://www.newsgator.com/Individuals/TopStyle/Default.aspx direct link]). | * Any [[text editor]] can do, some have CSS modes that you may have to install. | ||
* [http://www.bradsoft.com/download/ TopStyle Lite], $80 payware. ([http://www.newsgator.com/Individuals/TopStyle/Default.aspx direct link]). | |||
=== Browser plugins and Bookmarklets === | === Browser plugins and Bookmarklets === | ||
| Line 23: | Line 24: | ||
* [https://addons.mozilla.org/en-US/firefox/search?q=css+validator&status=4 CSS validator] Michel Langley's Firefox add-on (sends the page to the W3C validator). | * [https://addons.mozilla.org/en-US/firefox/search?q=css+validator&status=4 CSS validator] Michel Langley's Firefox add-on (sends the page to the W3C validator). | ||
* [http://westciv.com/xray/ XRAY] is a bookmarklet for IE, Mozilla/Firefox and Safari. Use it to see the box model for any | * [http://westciv.com/xray/ XRAY] is a bookmarklet for IE, Mozilla/Firefox and Safari. Use it to see the box model for any element on any Web page. | ||
element on any Web page. | |||
== | === Online utilities === | ||
; Tools that add browser-specific code to not yet standardized CSS (i.e. all the fancy CSS3 you would use for [[HTML5]]) | |||
* [http://prefixmycss.com/ PrefixMyCSS] | |||
* [http://pleeease.io/playground.html Pleeease] | |||
== Specifications == | |||
When you are in doubt proceed first with an [http://jigsaw.w3.org/css-validator on-line validation], then check compatibility charts (see below). You also can consult the CSS-compatible browser [http://www.w3.org/Style/CSS/#browsers list] at W3C. | |||
* [http://www.w3.org/TR/REC-CSS1 Cascading Style Sheets, level 1] (W3C Recommendation 17 Dec 1996, works in all browsers in principle) | |||
* [http://www.w3.org/TR/REC-CSS2/ Cascading Style Sheets, level 2] (W3C Recommendation 12-May-1998, revised 11 April 2008 as CSS 2.1) | |||
* [http://www.w3.org/Style/CSS/current-work Overview of current work]. So-called CSS 3 is in fact a long series of modular specifications. Some of these are almost finalised, and some features are already implemented in modern browsers like FF 3.5, Opera, etc. (09:30, 10 September 2009 (UTC)). | |||
=== Tests === | |||
* [http://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm CSS1 Test Suite] | |||
* [http://www.webstandards.org/action/acid2// Acid2 Browser Test] | |||
== Manuals, short references and implementation charts == | |||
=== Manuals === | |||
* [http://reference.sitepoint.com/css SitePoint CSS reference] | |||
* [http://www.htmlhelp.com/reference/css/properties.html CSS Properties] Good summaries from the Web Design Group | * [http://www.htmlhelp.com/reference/css/properties.html CSS Properties] Good summaries from the Web Design Group | ||
* [http://www.zvon.org/Output/bar_list.html Mozilla/Opera sidebars from Zvon] (work sort of with firefox ) | * [http://www.zvon.org/Output/bar_list.html Mozilla/Opera sidebars from Zvon] (work sort of with firefox ) | ||
* [http://www.blooberry.com/indexdot/css/ Index DOT Css] (ok, but outdated) | * [http://www.blooberry.com/indexdot/css/ Index DOT Css] (ok, but outdated) | ||
=== | === CSS cheatsheets === | ||
* [http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ CSS Cheat Sheet] by Dave Child (very good) | |||
* [http://www.sizefactory.com/xhtml/csscheatsheet.html CSS cheat sheet] also good, but simpler (Sizefactory) | |||
* [http://lesliefranke.com/files/reference/csscheatsheet.html CSS Cheat Sheet] (Leslie Franke). | |||
Overviews and cheat sheets | |||
* [http://refcards.com/subject/web Refcards] (several) | |||
* [http:// | === Compatibility charts === | ||
* [http:// | * [http://www.quirksmode.org/css/contents.html CSS contents and browser compatibility] at quirksmode.org. Good. Also has stuff on DOM compatibility | ||
* [http://www.webdevout.net/ Web Devout], good [http://www.webdevout.net/browser_support_css.php Web Browser CSS support]. Good ! | |||
== General Tutorials == | |||
(see also the Links section, maybe looking at examples will get you there faster !) | (see also the Links section, maybe looking at examples will get you there faster !) | ||
| Line 64: | Line 81: | ||
* [http://www.zeldman.com/lectures/css/ CSS in the Real World]. Lecture notes from Zeldmann | * [http://www.zeldman.com/lectures/css/ CSS in the Real World]. Lecture notes from Zeldmann | ||
* [http://www.orderedlist.com/articles/writing_lean_css Writing Lean CSS] at OrderedList (9/2004). Use cascades and regroup selectors, etc. | * [http://www.orderedlist.com/articles/writing_lean_css Writing Lean CSS] at OrderedList (9/2004). Use cascades and regroup selectors, etc. | ||
* [http://tecfa.unige.ch/guides/tie/html/css-intro/css-intro.html Cascading Style Sheets] (en français) | |||
== Page Layout tutorials == | |||
Design without tables, CSS Positioning, etc. | Design without tables, CSS Positioning, etc. | ||
* [http://www.uie.com/articles/responsive_design/ Responsive Web Design] By Ethan Marcotte, User Interface Engineering. Originally published: Jan 11, 2011 | |||
* [http://www.webreference.com/programming/css_utopia/chap5/ HTML Utopia: Chapter 5: Building the Skeleton] by Dan Shafer (extract of chap 5 of the "Designing Without Tables" book) | * [http://www.webreference.com/programming/css_utopia/chap5/ HTML Utopia: Chapter 5: Building the Skeleton] by Dan Shafer (extract of chap 5 of the "Designing Without Tables" book) | ||
* [http://www.brainjar.com/css/positioning/ CSS Positioning] Good and clean CSS tutorial (look at the source of the pages !) | * [http://www.brainjar.com/css/positioning/ CSS Positioning] Good and clean CSS tutorial (look at the source of the pages !) | ||
| Line 76: | Line 95: | ||
* [http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html Boxes] from [http://www.thenoodleincident.com/ thenoodleincident.com]. Nice examples ! | * [http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html Boxes] from [http://www.thenoodleincident.com/ thenoodleincident.com]. Nice examples ! | ||
* [http://www.meyerweb.com/eric/tools/s5/ S5 is a slide show format based entirely on XHTML, CSS, and JavaScript]. With one file, you can run a complete slide show and have a printer-friendly version as well | * [http://www.meyerweb.com/eric/tools/s5/ S5 is a slide show format based entirely on XHTML, CSS, and JavaScript]. With one file, you can run a complete slide show and have a printer-friendly version as well | ||
* [http://learnlayout.com/ Learn CSS Layout]. CSS layout bases in several languages | |||
=== CSS with XML | == Compatibility issues and Quirks modes == | ||
; About quirks modes | |||
* [http://www.quirksmode.org/css/quirksmode.html Quirks mode and strict mode] | |||
* [http://www.cs.tut.fi/~jkorpela/quirks-mode.html What happens in Quirks Mode?], (modified 9/2009), by Jukka Korpela. | |||
* [http://hsivonen.iki.fi/doctype/ Activating Browser Modes with Doctype] | |||
* [http://hsivonen.iki.fi/doctype/ Henri Sivonen] provides a detailed explanation. (updated 5/2009). | |||
; About IE bug-related hacks | |||
* [http://www.positioniseverything.net/articles/ie7-dehacker.html CSS Hacks and IE7] | |||
* [http://www.quirksmode.org/css/condcom.html Conditional comments] (Quirksmode, updated July 2009 or later) | |||
== CSS with XML == | |||
* [http://www.xml.com/pub/a/2000/03/29/tutorial/ On Display: XML Web Pages with Mozilla] by Simon St.Laurent | * [http://www.xml.com/pub/a/2000/03/29/tutorial/ On Display: XML Web Pages with Mozilla] by Simon St.Laurent | ||
== Client-side style-sheets == | |||
* [http://www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_anarchist.html The CSS Anarchist's Cookbook] by Eric Meyer, O'Reilly | * [http://www.oreillynet.com/pub/a/network/2000/07/21/magazine/css_anarchist.html The CSS Anarchist's Cookbook] by Eric Meyer, O'Reilly | ||
* [http://www.oreillynet.com/pub/a/network/2000/06/30/magazine/mozilla_stylesheets.html Tap the Power of Mozilla's User Style Sheets] | * [http://www.oreillynet.com/pub/a/network/2000/06/30/magazine/mozilla_stylesheets.html Tap the Power of Mozilla's User Style Sheets] | ||
== Font compatibilty == | |||
* [http://db.tidbits.com/getbits.acgi?tbart=05284 Why Windows Web Pages Have Tiny Text] | * [http://db.tidbits.com/getbits.acgi?tbart=05284 Why Windows Web Pages Have Tiny Text] | ||
* [http://style.metrius.com/font_size/livetext.html Beyond the FONT tag: Practical HTML text styling] by Todd Fahrner | * [http://style.metrius.com/font_size/livetext.html Beyond the FONT tag: Practical HTML text styling] by Todd Fahrner | ||
== | == Examples == | ||
(Code you can copy) | (Code you can copy) | ||
* [http://www.csszengarden.com/ Zen Garden], The Beauty of CSS Design. This allows you to load various great CSS designs of into the page (which then radically changes its appearence (recommended, over 400 designs !). | * [http://www.csszengarden.com/ Zen Garden], The Beauty of CSS Design. This allows you to load various great CSS designs of into the page (which then radically changes its appearence (recommended, over 400 designs !). | ||
* [http://www.css.nu/category/css-anwendung CSS-Anwendungsbeispiele] (in German, with code) | |||
* [http://tecfa.unige.ch/guides/css/ex/ TECFA Example directory] (only small stuff) | |||
== Link collections == | |||
* [http://www.w3.org/Style/CSS/ CSS Page at W3C], see also [http://www.w3.org/Style/ Style]. Specifications plus some good ressources links. | * [http://www.w3.org/Style/CSS/ CSS Page at W3C], see also | ||
** [http://www.w3.org/Style/ Style]. Specifications plus some good ressources links. | |||
** [http://www.w3.org/Style/CSS/learning Learning CSS] | |||
* [http://cssvault.com/ CCVault] This site has a nice gallery and various good links to other resources (tutorials and examples that are worth a visit). | * [http://cssvault.com/ CCVault] This site has a nice gallery and various good links to other resources (tutorials and examples that are worth a visit). | ||
* [http://www.meyerweb.com/eric/css/edge/ css/Edge]. This is another good site for advanced CSS: "The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations" (own examples good pointers) | * [http://www.meyerweb.com/eric/css/edge/ css/Edge]. This is another good site for advanced CSS: "The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations" (own examples good pointers) | ||
| Line 112: | Line 146: | ||
[[Category: | [[Category: Web authoring]] | ||
[[fr:Liens CSS]] | [[fr:Liens CSS]] | ||
[[Category: CSS]] | |||
Latest revision as of 11:15, 30 September 2014
Definition
This page contains links for CSS. So far, it is just a quick copy/paste from my old http://tecfa.unige.ch/guides/css/pointers.html So far it only got links. Some of these may be broken ... -
See also:
- CSS (for a short overview), CSS tutorial, CSS for XML tutorial
Tools / Software
On-line validation tools
- W3C validator (W3C) download and on-line). This only works with W3C vocabularies, e.g. not with your own XML.
- WDG CSSCheck
Editors
- Any text editor can do, some have CSS modes that you may have to install.
- TopStyle Lite, $80 payware. (direct link).
Browser plugins and Bookmarklets
- CSS validator Michel Langley's Firefox add-on (sends the page to the W3C validator).
- XRAY is a bookmarklet for IE, Mozilla/Firefox and Safari. Use it to see the box model for any element on any Web page.
Online utilities
- Tools that add browser-specific code to not yet standardized CSS (i.e. all the fancy CSS3 you would use for HTML5)
Specifications
When you are in doubt proceed first with an on-line validation, then check compatibility charts (see below). You also can consult the CSS-compatible browser list at W3C.
- Cascading Style Sheets, level 1 (W3C Recommendation 17 Dec 1996, works in all browsers in principle)
- Cascading Style Sheets, level 2 (W3C Recommendation 12-May-1998, revised 11 April 2008 as CSS 2.1)
- Overview of current work. So-called CSS 3 is in fact a long series of modular specifications. Some of these are almost finalised, and some features are already implemented in modern browsers like FF 3.5, Opera, etc. (09:30, 10 September 2009 (UTC)).
Tests
Manuals, short references and implementation charts
Manuals
- SitePoint CSS reference
- CSS Properties Good summaries from the Web Design Group
- Mozilla/Opera sidebars from Zvon (work sort of with firefox )
- Index DOT Css (ok, but outdated)
CSS cheatsheets
- CSS Cheat Sheet by Dave Child (very good)
- CSS cheat sheet also good, but simpler (Sizefactory)
- CSS Cheat Sheet (Leslie Franke).
Overviews and cheat sheets
- Refcards (several)
Compatibility charts
- CSS contents and browser compatibility at quirksmode.org. Good. Also has stuff on DOM compatibility
- Web Devout, good Web Browser CSS support. Good !
General Tutorials
(see also the Links section, maybe looking at examples will get you there faster !)
- Adding a touch of style by David Raggett, nice tutorial for the masses
- Fixing your site with the right DocType. "List a Part" article for a related, but important subject !
- Chapter 20: CSS chapter 20 of the book Cascading Style Sheets, designing for the Web, by H�kon Wium Lie and Bert Bos.
- Introduction to CSS (includes an XML CSS short tutorial).
- CSS FLoats Part I (should work with Mozilla, for others see part 2 (from Webreference's HTML with style tutorials section)
- A List Apart CSS hacks (since issue 100 this famous on-line mag uses strict W3C complicant code ... and they still let you see style-less contents with old browsers).
- Flexible Layouts, good A List Apart story (nov 2002)
- Evolution of a Home webreference article showing how they could rebuild their home page without tables for all 5 browsers.
- Advanced CSS Layouts, WebReference.com tutorial by R.V Lizaola & A.King
- CSS in the Real World. Lecture notes from Zeldmann
- Writing Lean CSS at OrderedList (9/2004). Use cascades and regroup selectors, etc.
- Cascading Style Sheets (en français)
Page Layout tutorials
Design without tables, CSS Positioning, etc.
- Responsive Web Design By Ethan Marcotte, User Interface Engineering. Originally published: Jan 11, 2011
- HTML Utopia: Chapter 5: Building the Skeleton by Dan Shafer (extract of chap 5 of the "Designing Without Tables" book)
- CSS Positioning Good and clean CSS tutorial (look at the source of the pages !)
- Tutorial 19: CSS Positioning, Part II webreference article
- The Layout Reservoir Good 2 and 3 colum designs !
- CSS Layout Techniques: for Fun and Profit
- Boxes from thenoodleincident.com. Nice examples !
- S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well
- Learn CSS Layout. CSS layout bases in several languages
Compatibility issues and Quirks modes
- About quirks modes
- Quirks mode and strict mode
- What happens in Quirks Mode?, (modified 9/2009), by Jukka Korpela.
- Activating Browser Modes with Doctype
- Henri Sivonen provides a detailed explanation. (updated 5/2009).
- About IE bug-related hacks
- CSS Hacks and IE7
- Conditional comments (Quirksmode, updated July 2009 or later)
CSS with XML
- On Display: XML Web Pages with Mozilla by Simon St.Laurent
Client-side style-sheets
- The CSS Anarchist's Cookbook by Eric Meyer, O'Reilly
- Tap the Power of Mozilla's User Style Sheets
Font compatibilty
- Why Windows Web Pages Have Tiny Text
- Beyond the FONT tag: Practical HTML text styling by Todd Fahrner
Examples
(Code you can copy)
- Zen Garden, The Beauty of CSS Design. This allows you to load various great CSS designs of into the page (which then radically changes its appearence (recommended, over 400 designs !).
- CSS-Anwendungsbeispiele (in German, with code)
- TECFA Example directory (only small stuff)
Link collections
- CSS Page at W3C, see also
- Style. Specifications plus some good ressources links.
- Learning CSS
- CCVault This site has a nice gallery and various good links to other resources (tutorials and examples that are worth a visit).
- css/Edge. This is another good site for advanced CSS: "The goal here is to find ways to make CSS live up to its fullest potential, with only minimal regard to browser limitations" (own examples good pointers)
- Position is Everything Quote: "we're Big John and Holly Bergevin, and together we built this site to explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to 'make it work' without using tables for layout purposes."
- CSS Layout Techniques: for Fun and Profit, CSS notes for the Eric Costello's Glish.com
- House of Style Tutorials and Guides (also sell the Style Master software)
- DHTML Links (good CSS pointers)
- Cascading Style Sheets (good list of links at WebReference.com)
- Web Content Articles at Apple's Developper connection has some CSS articles and Safari information