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 was first introduced in 1996 by Håkon Wium Lie and Bert Bos, and has since undergone several revisions and updates. The latest version of CSS is CSS3, which includes a wide range of new features and improvements.

One of the key benefits of CSS is that it allows developers to apply styling to multiple elements at once, using selectors. Selectors allow developers to target specific elements or groups of elements, and apply styles to them. For example, a developer could use a selector to target all of the paragraphs on a page and apply a specific font style and color to them.

CSS also allows developers to create responsive web designs that can adapt to different screen sizes and devices. This is achieved through the use of media queries, which allow developers to apply different styles based on the width of the screen. This is essential in today's world of mobile-first design, where websites need to be optimized for a wide range of devices.

In addition to basic styling properties like color, font, and layout, CSS also includes advanced features like animations, transitions, and filters. These features can be used to create engaging and interactive web experiences, such as hover effects, sliding menus, and scrolling animations.

While CSS is a powerful tool, it can also be challenging to use. CSS code can quickly become complex and difficult to manage, especially on larger projects. However, there are several tools and techniques that developers can use to make CSS more manageable, such as using a CSS preprocessor like Sass or Less, or using a CSS framework like Bootstrap or Foundation.

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.