Free collection of beautiful vector icons for your web pages.

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)