What is CSS and how does it work?

What is CSS and how does it work?

What is CSS?

Cascading Style Sheets (CSS) is a simple design language intended to simplify the process of making web pages presentable. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTMLdocument. Most commonly, CSS is combined with the markup languages HTML or XHTML.

CSS was invited by Håkon Wium Lie on October 10, 1994 and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by W3C members, it becomes a recommendation.

How does CSS Work?

When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:

  1. The browser converts the markup language and the CSS into the DOM (Document Object Model).
  2. The DOM represents the document in the computer's memory.
  3. It combines the document's content with its style.
  4. CSS is the way HTML elements (a page heading, an important word) render. It allows you to state that all titles must be underlined.
  5. The way CSS does that is by attaching properties (italics, underline, font size, color…) to HTML elements (heading, emphasis, table…).
  6. As HTML elements can be part of a class structure or can be identified individually, CSS can attach properties to whole classes or to identifiers of HTML elements.
  7. The CSS rules allowing headings to be underlined and emphasized words to be italics.
  8. The browser displays the contents of the DOM.