Historically, HTML had (and still has) tags for text formatting (bold, italic ...). With the evolution of graphics on the Internet, a problem quickly appeared: when the web designer wanted to change the graphic chart of a web site, he had to modify every page.
To avoid this tedious work, Cascading Style Sheets, usually called CSS, have become a popular standard supported by all modern browsers.
Lets consider the following HTML code:
<h1>One page, many styles</h1>
<h2>Heading 2 title</h2>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
vestibulum at eros.</p>
By applying these two styles, it is possible to obtain distinct renderings:
/* Style 1 */
* {font-family: "Gill Sans", sans-serif;}
h1 {text-decoration: underline}
h2 {color:blue}
/* Style 2 */
* {font-family: "Courier New", Courier, monospace}
h2 {margin-left:2rem; color:grey}
p {margin-left:4rem; font-style:italic;}
There are three ways to use style sheets: