Introduction to CSS

CSS (Cascading Style Sheets) allows you to style HTML, thus separating content (HTML) from presentation (CSS).

For an example of what can be done by keeping the same HTML (strictly) and only changing the CSS, you can spend some time on the site CSS Zen garden.

CSS is an open standard, standardized by the W3C. There have been several versions. Since "CSS 3", the specifications are separated into modules, and each module follows its own versioning.

CSS also allows for the creation of animations.

Brief History of CSS

1994 - Creation of CSS
- Håkon Wium Lie proposed CSS in October 1994 as a way to improve web presentation.
1996 - CSS 1
- The W3C (World Wide Web Consortium) published the first official version of CSS, CSS1, in December 1996.
- CSS1 introduced fundamental concepts such as selectors, properties, values, and the cascade.
1998 - CSS 2
- CSS2 was published by the W3C.
- This version extended the capabilities of CSS1 with additional features like absolute positioning, z-index, and better media support.
2000s - Diversification and Evolution
- CSS began to be divided into different modules (such as CSS3 Color, Backgrounds and Borders, Text Effects, etc.).
- This modular approach allowed for faster innovation and standardization.
2005 and beyond - CSS3 and Innovations
- CSS3, developed in modules, introduced many new features such as animations, transitions, transformations, grids, and flexbox.
- Continuous improvements with specifications such as CSS variables, grid layout, and media queries for responsive design.
Present and Future
- CSS continues to evolve with regular updates and improvements.
- Focus on compatibility, accessibility, performance, and interaction with other web technologies (HTML, JavaScript).

CSS has played a crucial role in the development of the web, allowing a clear separation between structure (HTML) and presentation (CSS), and continues to be an essential element in the design of modern and responsive websites.

CSS Syntax

Each CSS rule starts with a selector (or multiple selectors, separated by commas), followed by a pair of curly braces {}.

Inside this pair of curly braces will be one or more declarations, consisting of a property, followed by a colon :, followed by the value(s) of the property.

Comments are possible in the code only with the signs /* to start a comment and */ to end it.

css

/* Rule */
.class { /* Selector */
  /* First declaration */
  /* property: values; */
  background-color: #555;

  /* property: values; */
  /* multiple values separated by spaces */
  background: #555 url(/path/to/image.png) no-repeat center center;
}

Selectors

There are a number of CSS selectors. The most important ones to know are:

ID Selectors: #an-id will select the HTML element with the id attribute value an-id, for example <p id="an-id"> (mainly for DOM access, which we will see later, it is a bad practice to use it for CSS rules);
Class Selectors: .a-class will select all HTML elements with the class attribute value a-class, for example <p class="a-class another-class">;
Type Selector: p will select all elements with the <p> tag.

These selectors can be combined, but it is bad practice to combine too many.

Example:

Class Selector Demo

html

<html>
  <h1 class="title">
    The Title
  </h1>
</html>

<style>
.title { /* All elements with the class title */
  font-size: 3em; /* Large size */
  font-weight: bold; /* Bold */
  color: #fff; /* Foreground color: white */
  background-color: #2980b9; /* Background color: belize hole */
}
</style>

There are also:

Link pseudo-classes

a:link for links not yet visited
a:visited for visited links

Dynamic pseudo-classes

a:active for the link being clicked
a:hover for the link being hovered over
a:focus for the link that is active via the keyboard (after using the tab key)

Pseudo-elements

:first-line for the first line of the element
:first-letter for the first letter of the element
:before for content at the very beginning of the element
:after for content at the very end of the element

Examples:

Other Selectors Demo

html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg-nephritis {
      background: #27ae60;
    }
    .fg-white {
      color: #fff;
    }
    
    .with-before:before {
      content: "---";
    }
    
    .with-after:after {
      content: "***";
    }
    
    .test-first-letter:first-letter {
      font-size: 1.2em;
      color: #599;
    }
    
    .test-first-line:first-line {
      font-size: 1.2em;
      color: #559;
    }
    </style>
</head>

<body>
  <p style="color: grey;">
    Ici, tout le paragraphe est dans une police grise.
    Je ne suis pas un simple danseur car c'est un très, très gros travail et parfois c'est bon parfois c'est pas bon. Il y a un an, je t'aurais parlé de mes muscles.
  </p>

  <p class="test-first-line">
    Ici, la première ligne est dans une police plus grande et violette. Je me souviens en fait, si vraiment tu veux te rappeler des souvenirs de ton perroquet, en vérité, la vérité, il n'y a pas de vérité et cette officialité peut vraiment retarder ce qui devrait devenir... C'est cette année que j'ai eu la révélation !
  </p>

  <p class="test-first-letter">
    Et là c'est uniquement la première lettre. Cliquer sur le triangle ci-dessous permet de voir le code qui a généré cette vue.
  </p>

  <p>
    <a class="fg-white  bg-nephritis  with-before  with-after">
      Ici du texte avant et après le contenu html est rajouté en CSS : les tirets au début et les étoiles à la fin.
    </a>
  </p>
</body>
</html>

Adding CSS Styles to a Document

You can add CSS to an element directly in HTML but it is discouraged:

html

  <p style="font-weight: bold;">
    Bold text (DO NOT DO THIS)
  <p>

It is better to do it from a <style> tag or from an external file with the <link rel="stylesheet" src="path/to/file.css"> tag.

html

<html>
<head>
    <title>Title that appears in the tab</title>
    <style>
    .bg-nephritis {
        background: #27ae60;
    }
    .fg-white {
        color: #fff;
    }
    </style>
</head>
<body>
    <p style="font-weight: bold;">
        <span class="fg-white bg-nephritis">
            White on green
        </span>
    </p>
</body>
</html>

Introduction to CSS ​

Brief History of CSS ​

CSS Syntax ​

Selectors ​

Adding CSS Styles to a Document ​

Introduction to CSS

Brief History of CSS

CSS Syntax

Selectors

Adding CSS Styles to a Document