Difference between revisions of "Cascading Style Sheets"

From Christoph's Personal Wiki
Jump to: navigation, search
(→‎Techniques)
(→‎Techniques)
Line 172: Line 172:
 
*[http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ Designing With Grid-Based Approach]
 
*[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.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]
  
 
==External links (other)==
 
==External links (other)==

Revision as of 21:30, 30 September 2007

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).

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:

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:
  1. ultra-condensed
  2. extra-condensed
  3. condensed
  4. semi-condensed
  5. normal
  6. semi-expanded
  7. expanded
  8. extra-expanded
  9. 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

See also

  • W3C
  • List of stylesheet languages
  • Comparison of layout engines (CSS)
  • CSS Zen Garden
  • CSS Property Index

CSS books

CSS discussions

External links

Tutorials

Demonstrations

Resources

Validation

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.

Browser issues

About the box model

External links (resources)

Techniques

External links (other)

Retrieved from "http://wiki.christophchamp.com/index.php?title=Cascading_Style_Sheets&oldid=4670"