Introduction à CSS

Qu'est-ce que le CSS ?

CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie « feuille de style en cascade ».
Le CSS est un langage informatique permettant de mettre en forme des pages web.

Autrement dit, le HTML s'occupe du contenu de votre page Web alors que le CSS s'occupe de la présentation, de l'apparence visuelle. (les couleurs, les fontes de caractères, les marges, etc.)

CSS3 est la dernière version de CSS. Il fournit des capacités de type JavaScript et également des fonctionnalités de développement mobile.

Syntaxe générale d'un style CSS

La syntaxe CSS se compose de 3 parties: un sélecteur, une propriété et une valeur.

Dans le code CSS ci-dessus, on indique que tous les paragraphes (balise p) seront affichés avec une couleur blanche pour les caractères et un fond de couleur vert pâle .

Sélecteur	Ce qui permet de sélectionner les éléments à mettre en forme (ici tous les paragraphes).
Bloc de déclarations	Ce bloc contient une ou plusieurs déclarations séparées par des points-virgules et encadrées par une paire d'accolades.
Déclaration	Contient une propriété et sa (ses) valeur(s).
Propriété	Le nom de la propriété CSS. Comme color ou font-size.
Valeur	La valeur que doit prendre l'élément sélectionner pour la propriété courante.

Ce sont les styles qui permettent de donner l'apparence voulue à la page.

Exemple avec la balise <em>

<p>Il est temps de se lever <em>maintenant</em>!</p>

Style (code CSS)	Résultat
Aucun style (italique par défaut)	Il est temps de se lever maintenant!
em {color: green;}	Il est temps de se lever maintenant!
em {color: green; font-style: normal;} (enlève l'italique)	Il est temps de se lever maintenant!
em {color: green; background-color: yellow;} (rétablit l'italique)	Il est temps de se lever maintenant!
em {color: red; font-family: magneto;}	Il est temps de se lever maintenant!

Quelques propriétés CSS utiles

Nous allons commencer par quatre propriétés qui vont nous servir à bien débuter avec CSS :

Propriété	Fonction	Exemple
color	Spécifie la couleur du texte	h1 {color: navy;}
background-color	Couleur d'arrière plan (genre surlignage)	mark {background-color: pink;}
font-family	Police de caractères (mettre des guillemets si le nom de la police contient des espaces)	p {font-family: Arial, Sans-serif;}
font-size	Taille des caractères	h2 {font-size: 15px;}

Pour la taille des caractères il existe différentes unités

Pour le moment, nous utiliserons les pixels (px) ou le pourcentage (%) par rapport au texte normal, comme on le fait dans un traitement de texte

Comment spécifier des styles

Il y a 3 endroits où peut spécifier les styles d'un document :

directement dans un élément (attribut style)
dans le document comme tel (élément style)
dans un fichier externe (ayant l'extension .css)

Spécification des styles directement dans un élément

On utilise l'attribut style dans la balise ouvrante de l'élément

Les styles ne s'appliquent qu'à l'élément

Par exemple :

  <h1 style="color: green;">Le gobelin</h1>
  <p style="text-align: center; font-style: italic;">
    Le gobelin est une créature légendaire, anthropomorphe et de petite taille, issue du
    folklore médiéval européen.
  </p>

  <h1>Cet autre titre n'est pas affecté</h1>
  <p>
    Cet autre paragraphe n'est pas affecté non plus.
  </p>

Spécification des styles dans le document comme tel

Les styles sont déclarées dans l'élément style contenu dans l'élément head du document

Ces styles s'appliquent à tous les éléments du document

Par exemple :

  ...
  <style>
    h1 {
      color: green;
    }
    p {
      text-align: center;
      font-style: italic;
    }
    ...
  </style>
</head>

Voici un autre exemple de styles dans l'entête (section head) d'une page Web

Spécification des styles dans un fichier externe

Les styles sont rassemblés au sein d'un fichier texte avec le suffixe (extension) "css"

Ce genre de fichier est souvent appelé feuille de style

Ces styles s'appliquent à tous les documents qui utilisent cette feuille de style

Voici l'exemple du fichier mes_styles.css :

h1 {
  color: green;
}
p {
  text-align: center;
  font-style: italic;
}
...

On remarque que les balises <style> et </style> ne sont plus nécessaires

Pour appliquer les styles au document courant un élément link doit être ajouté à l'élément head de la manière suivante

  ...
  <link href="mes_styles.css" rel="stylesheet">
</head>

Tout comme les images, les fichiers de styles sont souvent rassemblés dans un même répertoire appelé généralement styles ou css

Notons aussi que plusieurs fichiers de styles peuvent être appliqués à un même document

  ...
  <link href="css/defaut.css" rel="stylesheet">
  <link href="mes_styles.css" rel="stylesheet">
</head>

Cascade

On se rappelle que CSS veut dire Cascading Style Sheets ou Feuilles de style en cascade

Le concept de cascade est illustré par la possibilité de spécifier des styles à différents endroits (comme nous venons de le voir)

Si une propriété donnée est spécifiée à plusieurs niveaux, la valeur retenue sera celle exprimée "le plus près" de l'élément (au niveau le moins général) :

la valeur de l'attribut style d'un élément a priorité sur la valeur donnée dans l'élément style de la section head
la valeur donnée dans l'élément style de la section head a priorité sur la valeur donnée dans un fichier externe (feuille de style)

À ces trois niveaux il faut aussi ajouter l'ordre dans lequel les styles ont été spécifiés

Dans l'exemple suivant, le nombre entre parenthèses indique la priorité utilisée pour déterminer la valeur de l'attribut :

dans "css/defaut.css" :
  h1 { color: yellow; }                               (4)

dans "mes_styles.css" :
  h1 { color: blue; }                                 (3)

dans le document courant :
<link href="css/defaut.css" rel="stylesheet">
<link href="mes_styles.css" rel="stylesheet">
<style>
  h1 { color: red; }                                  (2)
</style>

<h1 style="color: green;">Le gobelin</h1>             (1)