Aller au contenu

Bases de CSS⚓︎

Rajouter du style⚓︎

Ajouter de la diversité dans la page

Tout ce qu'on vient de faire manque de fantaisie. Il existe diverses balises permettant de changer l'aspect du texte.

Exercice 17

Rajoutez le code suivant dans premiere_page.html et observez le résultat.

<p>
    On peut avoir du texte <i>en italique</i>, <b>en gras</b>.<br>
    On peut le <u>souligné</u>.<br>
    On peut faire du <small>petit</small> 
    ou du <big>grand</big>.<br>
    On peut faire des indices : 100101<sub>2</sub> 
    ou des exposants 2<sup>3</sup>.<br>
    On peut même <b><i><u>cumuler</u></i></b> !
</p>
Des balises plus génériques

Il y a d'autes balises génériques qui font sensiblement la même chose, mais le comportement peut changer d'un navigateur à l'autre et il est possible de les redéfinir pour changer le style du document.

Exercice 18

Rajoutez le code suivant dans premiere_page.html pour tester le résultat. Vous pouvez ouvrir la page dans Chrome pour voir s'il y a une différence par rapport à Firefox.

<p>
    <em>Mettre en avant</em> quelque chose.<br>
    <strong>Renforcer</strong> l'effet.<br>
    La fonction <code>print("mon message").</code><br>
    La variable <var>x</var> en math.
</p>

CSS : Décorateur d'intérieur⚓︎

Donner plus de style

Si on veut vraiment changer le style d'une page, il faut utiliser le CSS : Cascading Style Sheet. Il permet de modifier totalement l'aspect d'une page : couleur du fond, ajout de cadres, changement de la police, alignement du texte...

On peut rajouter du code CSS dans le code HTML, mais il est préférable de le mettre à part dans un autre fichier.

Exercice 19

  1. Créez un fichier une_belle_page.html et mettez-y le code suivant :

    <!DOCTYPE html>
<html>
    <head>
        <title>Une bien belle page</title>
        <link rel="stylesheet" href="feuille_de_style.css">
        <meta charset="utf-8">
    </head>
    <body>
            <header>
                <h1>Un titre qui claque</h1>
            </header>
            <section>
                    <h1>Un titre qui rend bien</h1>
                    <p>Des trucs à dire très intéressants</p>
                    <img src="image_chien.jpg" alt="Une image de chien">
            </section>
            <section>
                    <h1>Et un autre pour la route</h1>
                    <p>Un premier paragraphe</p>
                    <p>Un deuxième paragraphe</p>
                   <p>Un paragraphe <strong>costaud</strong></p>
            </section>
    </body>
</html>

  2. Chargez la page et vérifiez que le résultat n'est pas si terrible que ça.

  3. Créez un fichier feuille_de_style.css et metter-y le code suivant :

    /* pour définir des propriétés globales dans tous le document */
body {
        background-color: lavender;
        margin: 0;
}

/* on créé une balise juste pour le titre */
header {
        background-color: red;
        padding: 20px;
        margin: 20px;
        border: 5px solid black;
}

/* pour le titre dans header
 * les autres h1 ne sont pas affectés */
header h1 {
        text-align: center;
        background-color: greenyellow;
        color: blue;
        margin: 10px;
        padding: 30px;
        border: 5px dotted black;
}

section {
        padding: 20px; 
        margin: 20px; 
        background-color: lightsteelblue;
}

  4. Rechargez la page HTML et admirez le résultat.

Modifier les attributs d'une balise

Comme vous pouvez le voir, on définit des attributs qui sont affectés à chaque balise. La syntaxe générale est :

Syntaxe générale de CSS
balise {
        attribut1: valeur1;
        attribut2: valeur2;
}

Il faut bien penser à mettre les points-virgule après chaque attribut, sinon les suivants ne seront pas pris en compte.

Qelques exemples d'attributs

Il existe de nombreux attributs, qui peuvent s'appliquer à toutes les balises ou juste à certaines. En voici quelques uns :

  • text-align permet de déterminer la justification du texte. Les valeurs possibles sont left (aligné à gauche), right (aligné à droite), center (entré) et justify (texte qui occupe toute la ligne en faisant varier les espaces).
  • color permet de choisir la couleur du texte.
  • background-color permet de choisir la couleur du fond.
  • border permet de faire un encadrement autour du bloc, en précisant 3 valeurs : taille motif couleur. Il existe de nombreux motifs possibles. On peut aussi mettre none pour ne pas afficher le cadre.
  • padding permet de modifier l'espace entre l'objet et l'encadrement (qui peut être de taille nulle). On peut donner de une à 4 longueurs selon si on veut mettre la même pour toutes directions ou utiliser des valeurs différentes.
  • margin fait la même chose, mais pour créer de l'espace entre le cadre et les autres éléments.

Les espaces autour de l'objet sont représentés ainsi :

margin et padding

Les longueurs

Les longueurs en HTML/CSS peuvent s'exprimer en pixels (20px) ou en pourcentage de la place disponible (30%). On peut aussi utiliser em qui correspond à la taille de la police.

Les couleurs

Pour les couleurs, on peut utiliser :

  • le nom : red, blue, white, black, darkorchid, moccasin... ;
  • les composantes RGB : rgb(r, v, b), avec chacune des valeurs entre \(0\) (pas de cette couleur) et \(255\) (couleur au max) correspondent à la quantité de rouge, vert et bleu ;
  • les composantes rouge, vert, bleu et opacité : rgb(r, v, b, alpha), avec alpha entre \(0\) (transparent) et \(1\) (opaque) ;
  • l'hexadécimal : par exemple dans 4F210B, chaque paire de symboles correspond à une quantité de couleur exprimée en HTML (4F pour le rouge, 21 pour le vert et 0B pour le bleu).

Il existe de nombreux sites permettant de trouver la bonne couleur et indiquant comment l'écrire en HTML. En voici deux :

Les textes

Outre color déjà évoqué, voici quelques attributs servant à modifier l'affichage du texte :

  • font-family pour changer de police. On peut en mettre plusieurs au cas où les premières ne soient pas trouver par le navigateur.
  • font-weight pour changer l'épaisseur du texte : normal, light, bold et bolder
  • font-size pour changer la taille du texte. Par exemple 2em double la taille. On peut aussi mettre xx-small, x-small, small, normal, large, x-large ou xx-large.
  • text-decoration pour mettre une ligne sous, sur ou au dessus du texte : none, underline, overline ou line-through.
Exercice 20

Faites l'exercice 4 de la feuille.

Priorité des attributs

Pour revenir à l'exemple, on peut remarquer que la couleur de fond est définie dans le corps du document mais aussi dans les sections. Lorsqu'un même attribut est définit plusieurs fois, c'est celui de la balise le plus à l'intérieur qui est utilisé. Puisque les balises <section> se trouvent dans les balises <body>, ce sont les attributs des sections qui passent avant ceux du corps.

Attributs selon une certaine hiérarchie de balises

Dans l'exemple, il y a la partie suivante :

header h1 {
        ...
}

Cela signifie que les attributs définis ne seront utilisés que dans les balises <h1> se trouvant dans une balise <header>. Les autres balises <h1> ne sont pas affectées.

De façpn générale, on peut modifier les attributs correspondant à une hiérarchie particulière de balises avec la syntaxe suivante :

Exemple de syntaxe
b1 b2 b3 {
        attribut1: valeur1;
        attribut2: valeur2;
}

Avec la syntaxe ci-dessus, on peut modifier uniquement les attributs de la balise <b3> si elle est dans <b2>, elle même dans <b1>. Dans tous les autres cas, la balise <b3> gardera ses attributs de base, ou définis ailleurs.

Observer et modifier les attributs d'une page web

Dans Firefox, en appuyant sur F12, puis en allant dans Inspecteur vous pouvez voir le code HTML et les règles CSS. En appuyant sur le bouton à gauche de Inspecteur, ou en faisant Ctrl＋Shift＋C, vous pouvez sélectionner un élément dans la page pour voir le code HTML et CSS correspondant.

En cliquant sur certains éléments de code, on peut également changer le contenu ou le rendu de la page.

Les classes et les identifiants⚓︎

Définir une classe

Parfois, on ne veut pas rattacher des attributs à une balise particulière, mais plutôt l'utiliser à certains endroits. Par exemple, dans un QCM on peut vouloir mettre en vert les bonnes réponses et en rouge les mauvaises. Dans ce cas, on définit des classes qu'on rajoute dans les balises qui nous intéressent.

La syntaxe est la suivante :

Syntaxe pour définir une classe
.nom_de_la_classe {
        attribut1: valeur1;
        attribut2: valeur2;
}
Utilisation d'une classe
<balise1 class="nom_de_la_classe">...</balise1>
...
<balise2 class="nom_de_la_classe">...</balise2>

La même classe peut être utilisée dans des balises différentes. On peut ainsi faire une classe permettant de centrer du texte. On pourra s'en servir dans un titre <h1> ou dans un bloc <div>.

Un balise peut également avoir plusieurs classes.

Exercice 21

  1. Rajoutez la partie suivante dans votre fichier CSS :

    .interessant {
        font-style: italic;
        color: red;
}

  2. Modifiez le premier paragraphe de la page HTML avec :

    <p class="interessant">Des trucs à dire très intéressants</p>

  3. Rechargez la page et remarquez que ce paragraphe a changé.

Changer les attributs d'un bloc particulier

Si on veut faire un changement particulier à un bloc particulier dans la page, on peut lui donner un identifiant et définir les attributs exclusivement pour cet identifiant :

Donner un identifiant à un bloc
<balise id="mon_id">...</balise>
Définir les attributs pour cet identifiant
#mon_id {
        attribut1: valeur1;
        attribut2: valeur2;
}

Les autres balises du même type ne seront pas modifiées.

Exercice 22

  1. Rajoutez la partie suivante à votre fichier CSS :

    #bob {
        font-weight: bolder;
}

  2. Modifiez la ligne correspondante de la page HTML avec :

    <p id="bob">Un deuxième paragraphe</p>

  3. Rechargez la page et remarquez que ce paragraphe a changé.

De plus en plus précis

On peut utiliser les différentes possibilités pour faire modifications très ciblées :

Un exemple un peu tiré par les cheveux
b1#mon_id b2 .special{
        attribut1: valeur1;
        attribut2: valeur2;
}

Dans cet exemple, on modifie uniquement les attributs des balises de la classe special qui sont dans une balise <b2> qui est également dans une balise <b1> qui a l'identifiant mon_id.

Modifier le comportement des images avec le CSS

En modifiant les attributs des balises <img>, on peut automatiquement modifier leur taille ou leur position dans la page.

S'il y a plusieurs images, on peut éventuellement utiliser des classes pour donner des comportements différents.

Exercice 23

Rajoutez le code suivant dans votre CSS et rafraîchissez la page :

img {
        float: right;
        margin: 20px;
}

Pour aller plus loin⚓︎

Exercice 24

Téléchargez les deux fichiers suivants.

page_a_ne_pas_toucher.html css_a_modifier.css

En modifiant uniquement le fichier CSS, donnez du style à la page HTML.

Pour en apprendre plus

Si vous voulez en apprendre plus sur les possibilités de HTML et CSS, vous pouvez allez voir les pages suivantes :