Lesson 2.1. Introduction to CSS

Origin of CSS

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.

One HTML file, many styles

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;}

Rendu du style 1

Try it online

Rendu du style 2

Try it online

CSS integration

There are three ways to use style sheets:

inline: CSS is located in the HTML tags(Lesson 2.2)
internal: CSS is located in the HTML header (Lesson 2.3)
external: CSS is located is a separate file (Lesson 2.4)