Mini-cours de CSS

Avec 6 styles

On a vu que les styles background-color, margin et padding servent à gérer la couleur et les marges (extérieures et intérieures) des blocs ainsi qu'un style concernant le texte : color.

Nous allons voir maintenant deux autres styles qui concernent le texte : text-align et font-size, et comment sélectionner des zones.

text-align

Le navigateur décide pour nous. Le texte est alors toujours aligné sur le bord gauche. Mais, parfois, on aimerait que le texte (par exemple, un titre) soit centré.

Par défaut, le texte compris entre <hx> et </hx> n'est pas centré, (avec x variant de 1 à 6).

Le style text-align concerne l'alignement du texte dans un bloc.

La valeur de ce style est limité à 4 mot-clés :

Attention ! Le mot clé est center (mot anglais) et non centrer (mot français).
L'alignement sur les deux bords est réalisé par l'ajout de plusieurs espaces (par le navigateur).

Utilisons ce nouveau style pour différentes balises. 

body {background-color: orange; }
h1 { text-align: center; }    /* Par défaut, l'alignement est à gauche ! */
h2 { text-align: right; }     /* Par défaut, l'alignement est à gauche ! */
p { text-align: justify; }
.gauche { text-align: left; } /* les balises ayant attribut class="gauche"
                                 afficheront le texte à gauche */

Et, appliquons ces styles au fichier HTML : text-align.htm.

Ces alignements sont indépendants de la taille de la fenêtre du navigateur.

Le sélecteur : .

Lors de l'étude du style background-color, nous avions rencontré en lieu et place d'un nom de balise : ".code". Cette fois-ci, ".gauche". Il est temps de vous apprendre un truc très utile.

CSS permet de donner des styles non seulement à des balises, mais aussi des styles différents et prioritaires à des balises ayant l'attribut class. Ceci permet de donner un style différent à des zones particulières.

Pour créer une classe, il suffit de placer un point immédiatement suivi d'un mot puis d'une paire d'accolades contenant les instructions. 

.gauche { text-align: left; } /* les balises ayant comme attribut class="gauche"
                                 afficheront le texte à gauche */

Ce mot est quelconque : "code", "gauche", ...
Ce mot est appelé nom de la classe.

Ce qui se trouve devant la paire d'accolades s'appelle un sélecteur.

Contenu du fichier titres.css 

h1{text-align:center}
.gauche{text-align:left}

Et, appliquons ces styles au fichier HTML : titres.htm.

Nous constatons que tous les titres ne sont pas centrés. Le second se comporte différemment (car sa balise contient class="gauche").

font-size

Le style font-size concerne la taille du texte.

Pour une taille fixe, les valeurs permises pour ce style sont celles des marges.
Toutefois, en général, elles sont comprises en 6px et 36px.

Pour une taille relative (à celle qui aurait utilisée en absence d'indication), on peut aussi choisir un pourcentage.

Attention ! Entre le nombre et %, l'espace est interdit.

Le sélecteur : # 

#titre {    /* À l'unique balise ayant comme l'attribut id="titre"
                seront appliqués les styles suivants : */

    font-size: 200%;      /* La taille est le double */
    }

Vous savez que #titre est un sélecteur (puisqu'il se trouve devant les accolades).

Pour créer des styles pour une balise identifiée de manière unique - grâce à l'attribut id, il suffit de placer un dièse (#) immédiatement suivi de la valeur de cet attribut id puis d'une paire d'accolades contenant les instructions.

Comme il n'existe qu'un seul titre de page (souvent identique au contenu de la balise title), qu'il se trouve normalement dans la zone header - qui ne peut pas contenir de balises titre (h1) - , pour attribuer des styles au titre de la page, on peut alors écrire ... 

#titre {
    font-size: 200%;
    }

... et attribuer ce style à un paragraphe identifié. 

...
<body>
  <div id="container">
    <header>
      <p><a href="index.htm">Mini-cours de CSS</a></p>

      <p id="titre">Partie III</p>
    </header>
    ...

Le résultat se voit en haut de cette page. On croirait que le titre de la page est dans un bloc-titre (h1). En réalité, il est dans un bloc-paragraphe (p) ayant un texte de grand taille (doublée).

Il ne faut pas choisir une balise pour l'effet visuel (par défaut) qu'elle produit, mais en fonction de sa signification. Un titre est ce qui précède plusieurs paragraphes. Pour un titre de page, le bon choix est la balise p.

Si vous placez un bloc h1 dans un bloc header, la page ne sera pas validée par la W3C. Et, votre score auprès de Google risque de diminuer ...

Les six principaux attributs en CSS sont donc :

Constatons l'évolution :

  1. Sans CSS
  2. CSS avec des couleurs
  3. ... et des marges
  4. ... et avec des centrages et des tailles différentes

Pour rédiger de jolies notes HTML, vous en savez déjà assez.

Stop. Pour aujourd'hui, vous en avez appris assez !
Dormez et revenez demain.