CSS

===Use===
Before CSS, nearly all presentational attributes of HTML documents were contained within the HTML markup. All font colors, background styles, element alignments, borders, and sizes had to be explicitly described, often repeatedly, within the HTML. CSS lets authors move much of that information to another file, the style sheet, resulting in considerably simpler HTML. And additionally, as more and more devices are able to access responsive web pages, different screen sizes and layouts begin to appear. Customizing a website for each device size is costly and increasingly difficult. The modular nature of CSS means that styles can be reused in different parts of a site or even across sites, promoting consistency and efficiency.

For example, headings (<code>h1</code> elements), sub-headings (<code>h2</code>), sub-sub-headings (<code>h3</code>), etc., are defined structurally using HTML. In print and on the screen, choice of [[Typeface|font]], [[Point (typography)|size]], [[color]] and [[Emphasis (typography)|emphasis]] for these elements is ''presentational''.

Before CSS, document authors who wanted to assign such [[Typography|typographic]] characteristics to, say, all <code>h2</code> headings had to repeat HTML presentational markup for each occurrence of that heading type. This made documents more complex, larger, and more error-prone and difficult to maintain. CSS allows the separation of presentation from structure. CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and can do so independently for on-screen and printed views. CSS also defines non-visual styles, such as reading speed and emphasis for aural text readers. The [[W3C]] has now [[deprecation|deprecated]] the use of all presentational HTML markup.<ref>{{cite web|author=((W3C HTML Working Group)) |title=HTML 5. A vocabulary and associated APIs for HTML and XHTML|url=https://www.w3.org/TR/html/introduction.html#presentational-markup|publisher=[[World Wide Web Consortium]]|access-date=28 June 2014|archive-url=https://web.archive.org/web/20140715001359/https://www.w3.org/TR/html/introduction.html#presentational-markup|archive-date=15 July 2014|url-status=live}}</ref>

For example, under pre-CSS HTML, a heading element defined with red text would be written as:
<syntaxhighlight lang="html">
<h1><font color="red">Chapter 1.</font></h1>
</syntaxhighlight>

Using CSS, the same element can be coded using style properties instead of HTML presentational attributes:
<syntaxhighlight lang="html">
<h1 style="color: red;">Chapter 1.</h1>
</syntaxhighlight>

The advantages of this may not be immediately clear but the power of CSS becomes more apparent when the style properties are placed in an internal style element or, even better, an external CSS file. For example, suppose the document contains the style element:

<syntaxhighlight lang="html">
<style>
    h1 {
        color: red;
    }
</style>
</syntaxhighlight>

All <code>h1</code> elements in the document will then automatically become red without requiring any explicit code. If the author later wanted to make <code>h1</code> elements blue instead, this could be done by changing the style element to:

<syntaxhighlight lang="html">
<style>
    h1 {
        color: blue;
    }
</style>
</syntaxhighlight>

rather than by laboriously going through the document and changing the color for each individual <code>h1</code> element.

The styles can also be placed in an external CSS file, as described below, and loaded using syntax similar to:

<syntaxhighlight lang="html">
<link href="path/to/file.css" rel="stylesheet" type="text/css">
</syntaxhighlight>

This further decouples the styling from the HTML document and makes it possible to restyle multiple documents by simply editing a shared external CSS file.