CSS: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
Line 3: Line 3:
== Definition ==
== Definition ==


CSS is a style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS language is human readable and writable, and expresses style in common desktop publishing terminology. One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. There are rules for resolving conflicts between different style sheets. With the help of some JavaScript code one also may offer several stylesheets to an enduser. Finally CSS is an important component in so called "DHTML" and [[AJAX]]. Programming Dynamic Web pages may involve dynamic change of CSS features.
CSS is a style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to [[HTML]] documents. The CSS language is human readable and writable, and expresses style in common desktop publishing terminology.


This page is just a quick copy/paste from my old
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. There are rules for resolving conflicts between different style sheets. With the help of some JavaScript code one also may offer several stylesheets to an enduser.  
http://tecfa.unige.ch/guides/css/pointers.html So far it only got links. Some of these may be broken ... - [[User:Daniel K. Schneider|Daniel K. Schneider]]


== Tools / Software ==
Finally CSS is an important component in so called "DHTML" and [[AJAX]]. Programming Dynamic Web pages may involve dynamic change of CSS features.
 
=== On-line validation tools ===
 
* [http://jigsaw.w3.org/css-validator W3C validator] (W3C) download and [http://jigsaw.w3.org/css-validator/validator-uri.html on-line]). This only works with W3C vocabularies, e.g. not with your own XML.
* [http://www.htmlhelp.com/tools/csscheck/ WDG CSSCheck]
 
=== Editors ===
 
* [http://www.bradsoft.com/download/ TopStyle Lite] ([http://www.newsgator.com/Individuals/TopStyle/Default.aspx direct link]).
 
=== Browser plugins and Bookmarklets ===
 
* [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
element on any Web page.
 
== Documentation ==
 
=== Specifications ===
 
When you are in doubt proceed first with an [http://jigsaw.w3.org/css-validator on-line validation], then check bug-lists, e.g. [http://www.richinstyle.com/bugs/ RichInStyle's] or another pick form the [http://www.w3.org/Style/CSS/#browsers list] at W3C.
 
* [http://www.w3.org/TR/REC-CSS1 Cascading Style Sheets, level 1]
* [http://www.w3.org/TR/REC-CSS2/ Cascading Style Sheets, level 2]
 
=== Manuals, short references and implementation charts ===
 
* [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.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 !
* [http://www.blooberry.com/indexdot/css/ Index DOT Css] (ok, but outdated)
 
=== Made at TECFA ===
 
* [http://tecfa.unige.ch/guides/tie/html/css-intro/css-intro.html Cascading Style Sheets] (en français)
* [http://tecfa.unige.ch/guides/css/ex/ TECFA Example directory]
* [http://tecfa.unige.ch/guides/css/ex/styles/ Directory for centrally managed styles]
 
=== General Tutorials ===
 
(see also the Links section, maybe looking at examples will get you there faster !)
 
* [http://www.w3.org/MarkUp/Guide/Style Adding a touch of style] by David Raggett, nice tutorial for the masses
* [http://www.alistapart.com/stories/doctype/ Fixing your site with the right DocType]. "List a Part" article for a related, but important subject !
* [http://www.w3.org/Style/LieBos2e/enter/ Chapter 20: CSS] chapter 20 of the book Cascading Style Sheets, designing for the Web, by H�kon Wium Lie and Bert Bos.
* [http://www.w3.org/TR/REC-CSS2/intro.html Introduction to CSS] (includes an XML CSS short tutorial).
* [http://webreference.com/html/tutorial20/ CSS FLoats Part I] (should work with Mozilla, for others see [http://webreference.com/html/tutorial21/ part 2] (from Webreference's HTML [http://webreference.com/html/tutorials/ with style tutorials section])
* [http://www.alistapart.com/stories/100/notes.html 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).
* [http://www.alistapart.com/stories/flexiblelayouts/ Flexible Layouts], good A List Apart story (nov 2002)
* [http://www.webreference.com/dev/evolution/2001.html Evolution of a Home] webreference article showing how they could rebuild their home page without tables for all 5 browsers.
* [http://webreference.com/authoring/style/sheets/layout/advanced/ Advanced CSS Layouts], WebReference.com tutorial by R.V Lizaola & A.King
* [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.
 
=== Page Layout ===
 
Design without tables, CSS Positioning, etc.
 
* [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.webreference.com/html/tutorial19/ Tutorial 19: CSS Positioning, Part II] webreference article
* [http://www.bluerobot.com/web/layouts/ The Layout Reservoir] Good 2 and 3 colum designs !
* [http://glish.com/css/ CSS Layout Techniques: for Fun and Profit]
* [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
 
=== CSS with XML ===
 
* [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 ===
 
Wow !
 
* [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]
 
=== Font compatibilty ===
 
* [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
 
=== Good examples ===
 
(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 !).
 
=== 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://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.positioniseverything.net/ 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."
* [http://glish.com/css/ CSS Layout Techniques: for Fun and Profit], CSS notes for the [http://glish.com/ Eric Costello's Glish.com]
* [http://www.westciv.com/style_master/house/index.html House of Style] Tutorials and Guides (also sell the Style Master software)
* [http://www.web-building.com/links/css.php3 DHTML Links] (good CSS pointers)
* [http://www.webreference.com/authoring/languages/html/css.html Cascading Style Sheets ] (good list of links at WebReference.com)
* [http://developer.apple.com/internet/webcontent/index.html Web Content Articles] at Apple's Developper connection has some CSS articles and Safari information


See also:
* [[CSS links]] A page with CSS resources
* [[User-side JavaScript]]. A technology that allows users to redesign pages and filter contents.


[[Category: Technologies]]
[[Category: Technologies]]

Revision as of 10:38, 22 September 2008

Draft

Definition

CSS is a style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS language is human readable and writable, and expresses style in common desktop publishing terminology.

One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. There are rules for resolving conflicts between different style sheets. With the help of some JavaScript code one also may offer several stylesheets to an enduser.

Finally CSS is an important component in so called "DHTML" and AJAX. Programming Dynamic Web pages may involve dynamic change of CSS features.

See also:

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=CSS&oldid=18490"