Mini-cours de CSS

Partie III

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.

Nom de sélecteur

Un sélecteur ne peut pas commencer par un chiffre. Plus d'info :

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". (Source)

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.
Jugez par vous-même : cette page avec le 6 styles vus

Vous déjà capable de créer des notes comme ce mini-cours. Il ne vous reste plus qu'à apprendre à faire des arrondis. Et, rappelez-vous, il suffit de créer une seule fois un bon fichier CSS et ensuite vous pourrez le réutiliser pour toutes vos notes !