Le CSS (Cascading Style Sheets) décrit la présentation des documents HTML et XML. Il est normalisé par le W3C. Il permet aussi d'adapter les pages aux différents navigateurs, site RWD (Responsive Web Design).

Le CSS existe depuis les début du web mais la mise en forme était quasiment toujours obtenue grâce à des attributs des balises HTML. Depuis les années 2000 et le HTML4, il est recommandé de ne plus les utiliser et de passer par le CSS.

Aujourd'hui la référence devient la version CSS3.

• Référence du langage sur w3schools
• Cours sur le HTML et le CSS sur OpenClassrooms
• Page officielle du CSS sur le site du W3C
• Validateur de feuille CSS sur le site du W3C

Elles sont de la forme “type_de_mise_en_forme: valeur_de_mise_en_forme;”. Des commentaires peuvent être insérés :

• Ils commencent par // et se terminent à la fin de la ligne
• Ils commencent par /* et se terminent par */

L'élément à mettre en forme (balise généralement) peut dépendre d'un autre, appartenir à une catégorie (“class”) ou être unique (“id”). Elles peuvent être incluses :

• dans la balise

<h1 style='color: red; font-size: 24pt;'>

• dans la page avec la balise <style> et regroupées par bloc

<style>
/*Je suis un commentaire qui commente le code et qui ne fait rien*/
body{
    background-color: green;
}
p{
    color: red; // Commentaire pour couleur rouge
    font-size: 20px;
}
ul.menu{
    border: 5px solid red;
}
</style>

• Dans un fichier séparé (méthode à utiliser de préférence) dont le contenu est identique à celui de la balise <STYLE>. Le fichier HTML doit contenir dans l'entête :

page.html

...
<link rel='stylesheet' href='nom_feuille_de_style.css' type='text/css' />
...

nom_feuille_de_style.css

/*Je suis un commentaire qui commente le code et qui ne fait rien*/
body{
    background-color: green;
}
p{
    color: red; // Commentaire pour couleur rouge
    font-size: 20px;
}
ul.menu{
    border: 5px solid red;
}

Une nouvelle présentation peut être facilement créée dans une nouvelle feuille de style et rapidement remplacée sur quelques ou toutes les pages.

Le site peut aussi s'adapter facilement (par exemple aux tablettes et smartphone de plus faible largeur d'écran). Cela peut se faire de 2 façons :

• Mettre en place dans les fichiers .html une 2ème feuille de style en plus de la feuille standard.

  <!-- Choix de la feuille de style en fonction de la largeur d'écran -->
  <link rel="stylesheet" href="style1.css" />
  <link rel="stylesheet" media="screen and (max-width: 800px)" href="style2.css" />

• Ajouter à fin de la feuille de style des nouvelles règles pour les écrans étroits

/* Modification des règles pour les écrans étroits */
@media screen and (max-width: 800px) {
  body {
     margin-left: 0px;
     margin-right: 0px;
  }
  img {
    width: 200px;
  }
  .info {
    left: 300px;
}

• Création d'un premier site avec CSS