CSS3 – Principes de base

LEÇON

 

Qu'est-ce que CSS ?

En anglais : Cascading Style Sheets

En français : Feuille de Style en Cascade

CSS :

  • permet la création de styles (règles de mise en forme) qui définissent comment les éléments HTML doivent être affichés (couleurs, polices, marges/padding, taille, positionnement, bordures, et cetera)
  • permet la séparation du contenu et de la mise en forme (contenu/structure dans le HTML et styles dans le CSS)
  • permet d'éviter la répétition des mêmes règles de mise en forme à plusieurs endroits dans le HTML
  • permet la définition de styles qui s'appliquent à un ensemble de documents HTML
  • offre au rédacteur des possibilités d'affichage beaucoup plus riches que le HTML pur
  • permet la définition de styles à multiples niveaux de généricité / spécificité (d'où le mot cascade)
  • permet la définition de styles selon le type de média (moniteur, imprimante, tablette, smartphone, etc)

 

HTML pur

Regardez cet exemple :

page0.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lorem ipsum</title>
    </head>
    <body>
        <p><font color="red">Lorem ipsum dolor sit amet.</font></p>
        <p>Consectetur adipiscing elit.</p>
        <p><font color="red">Aliquam lobortis risus eros.</font></p>
    </body>
</html>

Remarquez :

  • le code pour la mise en forme (<font color="red">) est mélangé au contenu. Embêtant si la personne responsable du contenu n'est pas la même que celle responsable de la mise en forme.
  • l'instruction <font color="red"> est présente deux fois. Si un jour on décide que les paragraphes en couleur vive devraient plutôt être en rose, il faudra changer cette instruction à deux endroits dans le code. Embêtant si cette instruction est répétée 50 fois par page sur un site avec 50 pages.

 

Mise en forme dans le CSS

Avec CSS, on écrit les règles de mise en forme (les styles) en dehors du fichier HTML.

On en profite en même temps pour ne spécifier qu'une seule fois ces règles. Ainsi, si on a un site avec deux  pages (page1.html et page2.html) qui ont toutes les deux le même besoin d'afficher certains paragraphes avec une couleur vive, cette couleur peut être spécifiée à un seul endroit dans le système. Si jamais on a besoin de changer la couleur, ça se fait d'un coup avec une seule modification.

style.css

.couleur_vive
{
  color:red;
}

 

page1.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lorem ipsum</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p class="couleur_vive">Lorem ipsum dolor sit amet.</p>
        <p>Consectetur adipiscing elit.</p>
        <p class="couleur_vive">Aliquam lobortis risus eros.</p>
    </body>
</html>

 

page2.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ut elementum</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <p class="couleur_vive">Ut elementum dui scelerisque eu.</p>
        <p>Pellentesque habitant morbi tristique.</p>
        <p class="couleur_vive">Senectus et netus et malesuada fames.</p>
    </body>
</html>

 

Possibilités d'affichage plus riche

On va regarder une page simple qui contient un titre, des images et liens, des paragraphes, une liste, et une table.

Une version de la page en HTML pur :

html_pur.html


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>HTML Pur</title>
    </head>

    <body>

        <h1>Lorem ipsum</h1>

        <p>
            <img src="http://www.web-design-codex.fr/wp-content/uploads/2014/09/bouton_rouge.jpg" alt="Bouton Rouge">
            <a href="http://www.web-design-codex.fr/" target="_blank">
                <img src="http://www.web-design-codex.fr/wp-content/uploads/2014/09/bouton_vert.jpg" alt="Bouton Vert">
            </a>
        </p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis risus eros, ut elementum dui scelerisque eu.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eu molestie est.
            Nulla faucibus quam ut orci imperdiet, tempus dapibus ipsum auctor.
        </p>

        <p>
            Nam cursus accumsan elit, eget mollis felis gravida ac. Nam iaculis, libero vitae semper faucibus, mauris diam
            placerat ante, at luctus felis nunc a felis. In nec ante a libero rhoncus auctor a a nibh. Pellentesque habitant
            morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porta risus felis, at mattis magna
            vulputate sed. Aliquam erat volutpat.
        </p>

        <ul>
            <li>Lorem ipsum dolor sit amet</li>
            <li>Nam cursus accumsan elit</li>
        </ul>

        <p>
            <a href="http://www.web-design-codex.fr/" target="_blank">
            Cliquez ici
            </a>
        </p>

        <table border="1">
              <tr>
                <th>Colonne 1</th>
                <th>Colonne 2</th>
                <th>Colonne 3</th>
              </tr>
              <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Aliquam lobortis risus eros</td>
                <td>Morbi porta risus felis</td>
              </tr>
        </table>

    </body>
</html>

 

Affichage dans Chrome


css_principes_de_base_pur_html_capture_ecran


 

 

Ci-dessous, la même page avec un affichage enrichi par le CSS.

Pour mieux apprécier les différences entre les versions (sans et avec CSS), il faudrait créer les différents fichiers et les ouvrir dans un navigateur.

Remarquez :

  • le manque de règles de mise en forme dans le HTML
  • peu de changements dans le HTML et peu de lignes dans le CSS  pour un affichage déjà beaucoup plus stylisé
  • la possibilité d'espacer les éléments et mettre des fonds individualisés, sans exploiter des tableaux (voir marges et padding)
  • la possibilité de pousser des éléments vers le bord de la page (voir les boutons)
  • la possibilité de définir une couleur différente pour l'hyperlien quand la souris le survole
  • et cetera

 

style2.css

h1
{
  color:darkorange;
}

#mes_boutons
{
  float:right;
  background-color:white;
  padding:20px;
}

p, ul
{
  padding:20px; margin:20px;
}

img
{
  width:120px;
}

a
{
  font-size:24px;
  font-weight:bold;
  color:black;
}

a:hover
{
  color:yellow;
}

.fond1
{
  background-color:#ccf0f0;
}

.fond2
{
  background-color:#37aa90;
}

table
{
  margin:20px;
  border-collapse: collapse;
}

table, th, td
{
   border:1px solid gray;
}

th, td
{
   padding:20px;
}

th
{
  background-color:#87ceeb;
}

 

html_avec_css.html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>HTML avec CSS</title>
        <link rel="stylesheet" type="text/css" href="style2.css">
    </head>

    <body>

        <h1>Lorem ipsum</h1>

        <div id="mes_boutons">
            <img src="http://www.web-design-codex.fr/wp-content/uploads/2014/09/bouton_rouge.jpg" alt="Bouton Rouge">
            <br>
            <a href="http://www.web-design-codex.fr/" target="_blank">
                <img src="http://www.web-design-codex.fr/wp-content/uploads/2014/09/bouton_vert.jpg" alt="Bouton Vert">
            </a>
        </div>

        <p class="fond1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis risus eros, ut elementum dui scelerisque eu.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eu molestie est.
            Nulla faucibus quam ut orci imperdiet, tempus dapibus ipsum auctor.
        </p>

        <p class="fond1">
            Nam cursus accumsan elit, eget mollis felis gravida ac. Nam iaculis, libero vitae semper faucibus, mauris diam
            placerat ante, at luctus felis nunc a felis. In nec ante a libero rhoncus auctor a a nibh. Pellentesque habitant
            morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porta risus felis, at mattis magna
            vulputate sed. Aliquam erat volutpat.
        </p>

        <ul class="fond1">
            <li>Lorem ipsum dolor sit amet</li>
            <li>Nam cursus accumsan elit</li>
        </ul>

        <p class="fond2">
            <a href="http://www.web-design-codex.fr/" target="_blank">
            Cliquez ici
            </a>
        </p>

        <table>
              <tr>
                <th>Colonne 1</th>
                <th>Colonne 2</th>
                <th>Colonne 3</th>
              </tr>
              <tr>
                <td>Lorem ipsum dolor sit amet</td>
                <td>Aliquam lobortis risus eros</td>
                <td>Morbi porta risus felis</td>
              </tr>
        </table>

    </body>
</html>

 

Affichage dans Chrome


css_principes_de_base_html_avec_css_capture_ecran

 


 

EXERCICES

  1. Imaginer devoir expliquer CSS à quelqu'un qui ne le connaît pas. Comment faites-vous?
  2. Ouvrir une page web (celle-ci par exemple) et regarder son code source (via l'option de visualisation de code source présente dans le navigateur). Essayer de repérer les liens vers des fichiers CSS. Ouvrir un des fichiers CSS. Essayer de le lire.
  3. Reproduire l'exemple avec page1.html, page2.html et style.css ci-dessus. Dans le fichier CSS, changer la couleur et remarquer que le changement s'applique automatiquement aux deux pages. Il faut éventuellement utiliser F5 ou Ctrl-F5 dans le navigateur pour rafraîchir chaque page.
  4. Reproduire l'exemple avec html_avec_css.html et style2.css ci-dessus. Expérimenter avec les règles dans le fichier CSS : modifier les instructions dans le fichier CSS pour modifier l'affichage - ouvrir/rafraîchir la page dans le navigateur après chaque modification pour voir le résultat.
  5. Reproduire à nouveau l'exemple avec html_avec_css.html et style2.css ci-dessus. Changer uniquement le fichier CSS pour effectuer les modifications suivantes :
    • pour les 3 sections avec fond bleu pâle, changer le fond en gris foncé
    • faire en sorte que les boutons apparaissent à gauche des deux premiers paragraphes (plutôt qu'à droite)
    • augmenter la taille du titre (le titre Lorem ipsum en orange) et changer sa couleur
    • dans la table, changer la couleur de fond pour les éléments <td> : rose au lieu de blanc
    • mettre plus d'espace vide autour des deux boutons
    • mettre une bordure uniquement autour des deux premiers paragraphes (astuce : se fait avec le propriété CSS "border")
  6. Essayer de créer un fichier HTML et un fichier CSS pour reproduire une page web comme celle ci (sans la bordure grise) :

css_principes_de_base_exercice

Astuce :

.colonne-droite
{
  float:right;
  width:100px;
  height:400px;
  background-color:yellow;
  border:1px solid black;
  margin-left:20px;
}