Home » Articole » EN » Computers » Web development » Web design » Cascading Style Sheets in web design

Cascading Style Sheets in web design

posted in: Web design 0


Cascading Style Sheets, commonly called CSS, form a computer language that describes the presentation of HTML and XML documents. The standards defining CSS are published by the World Wide Web Consortium (W3C). Introduced in mid 1990, CSS is commonly used in web design and well supported by web browsers in the 2000s.

Issues and Principles


Separate the structure of a document from its presentation styles

One of the major goals of CSS is to allow the shaping out of documents. It is for instance possible to only describe the structure of an HTML document, and describe the entire presentation in a separate CSS style sheet. The styles are applied at the last moment in the web browser of visitors viewing the document. This separation provides a number of benefits, improving accessibility, switching of presentation, and to reduce the complexity of the architecture of a document.

Thus, the advantages of style sheets are multiple:

  • The structure of the document and the presentation can be managed in separate files;
  • The design of a document is initially without worrying about the presentation, allowing to be more efficient;
  • In the case of a website, the presentation is uniform: documents (HTML pages) refer to the same style sheets. This feature allows for more rapid fitness of visual appearance;
  • A same document can give a choice between several style sheets, eg one for printing and one for reading on screen. Some web browsers allow the visitor to choose a style from among several;
  • HTML code is greatly reduced in size and complexity, since it does not contain more tags or presentation attributes.

Decline presentation styles according to the receiver

CSS allows the rendering of a document based on the restitution of media and capabilities (monitor type or vocal device), from those of the browser (text or graphics), as well as the preferences of the user.

Style sheets can be differentiated for the following media, according to CSS2.1:

  • all: whatever the media;
  • screen: desktop monitors;
  • print: printing on paper;
  • handheld: very small screens and customers with limited capacity;
  • projection: when the document is projected;
  • tv: when the document is displayed on a television-type apparatus;
  • speech: for rendering via a voice synthesizer (replacing aural, originally planned by CSS2.0 CSS2.1 then depreciated).

Other types of media are theoretically under the CSS2.1 specification, but are not implemented by user agents: braille and embossed for tablets and embossers, and tty for TTY.

In each media, presentation styles determined by the author of the document are combined with the default user agent and those from the user preferences and personal configuration.

The receiver capabilities may be considered by the authors, to user agents that implement the “media queries” CSS3 module: it allows to condition the consider a style sheet for constraints regarding particular resolution or the color rendering capacity.

Allowing the cascade of styles

The “cascade” is the combination of different sources of styles applied to a document, according to their respective priority. Different cascade modes can be combined:

  • by origin of styles, from the user agent, the author and the user. The top priority of user styles is a major factor of accessibility of the documents submitted by using CSS;
  • by media: a generic style sheet can be applied to several restitution of media (on-screen display, printing, projection) and be combined with media-specific sheets;
  • according to the architecture of a set of web documents: a generic stylesheet can be applied to all pages of a web site, be combined with own sheets in each section thereof, and with own styles to this or that specific page;
  • depending on the architecture of the sheets themselves: an external style sheet to the document can be combined with internal style sheet and the styles directly applied to each element belonging to it (“online” styles). A style sheet can also import one or more outer sheets.

Translated from Wikipedia

Leave a Reply

Your email address will not be published. Required fields are marked *