Introduction : Séparer la Forme du Contenu
Le CSS (Cascading Style Sheets, ou Feuilles de Style en Cascade) est le langage de présentation du Web. Son principe fondamental est de séparer le contenu (géré par le HTML) de la forme et du style (géré par le CSS).
Cette séparation est cruciale pour le développement moderne car elle permet :
- L’Adaptation : Le même contenu HTML peut être affiché différemment sur n’importe quel support (ordinateur, smartphone, tablette) grâce à des feuilles de style spécifiques.
- L’Évolution Facilité : La modification d’un seul élément de style (ex: la couleur d’un titre) se répercute automatiquement sur toutes les pages du site.
- La Clarté du Code : Le code HTML reste épuré et se concentre uniquement sur la structure et le sens (sémantique).
1. Les Fondamentaux du CSS
A. La Syntaxe de Base
Une règle CSS est toujours composée d’un sélecteur et d’un bloc de déclaration (contenant une ou plusieurs paires propriété: valeur;).
CSS
sélecteur {
propriété: valeur; /* Une déclaration */
propriété: valeur; /* Une autre déclaration */
}
B. Utilisation et Paramètres Classiques
Le CSS est utilisé pour définir tous les aspects visuels d’une page :
- Couleurs : Définition des couleurs d’arrière-plan, des textes, des bordures, etc.
- Polices de caractères : Choix de la police (
font-family), de la taille (font-size), du poids (font-weight). - Bordure : Style (
border-style), épaisseur (border-width), et couleur (border-color). - Visibilité et Agencement : Positionnement des éléments sur la page (
position,float,display).
2. Le Modèle de Boîtes (Box Model)
C’est le concept le plus important en CSS. Chaque élément HTML est traité par le navigateur comme une boîte rectangulaire composée de quatre couches, de l’intérieur vers l’extérieur :
- Contenu (
Content) : Le texte, les images ou le média. - Rembourrage (
Padding) : L’espace transparent entre le contenu et la bordure de la boîte. - Bordure (
Border) : Le cadre visible autour du remplissage. - Marge (
Margin) : L’espace transparent autour de la bordure qui sépare la boîte des autres éléments.
3. Les Sélecteurs : Cibler les Éléments
Les sélecteurs sont les « cibles » qui indiquent quels éléments HTML doivent recevoir le style.
| Type de Sélecteur | Syntaxe | Cible |
| Sélecteur de Type | p { ... } | Tous les éléments de ce type (ex: tous les paragraphes). |
| Sélecteur de Classe | .info { ... } | Tous les éléments portant l’attribut class="info". |
| Sélecteur d’ID | #menu { ... } | L’élément unique portant l’attribut id="menu". |
| Sélecteur Descendant | div p { ... } | Tous les éléments <p> qui sont à l’intérieur d’un élément <div>. |
| Sélecteur Adjacent | p + ul { ... } | Tous les éléments <ul> qui sont immédiatement précédés par un élément <p>. |
Sélecteurs d’Attributs et Pseudo-Classes (CSS2)
Le CSS permet des ciblages très précis basés sur les attributs des éléments :
a[href^="https"]: Tous les liens dont l’attributhrefcommence par"https".- $a[href\$= ».pdf »]$ : Tous les liens dont l’attribut
hrefse termine par".pdf". a:hover: Ciblage lorsque l’utilisateur survole l’élément (pseudo-classe).p:first-of-type: Le premier élément<p>dans son conteneur parent (pseudo-classe).
4. Les Avancées de CSS3
CSS3 a ajouté de nombreuses propriétés qui étaient auparavant réservées aux images ou au JavaScript, améliorant grandement le design.
| Propriété (CSS3) | Description | Exemple d’Utilisation |
border-radius | Rayon de courbure des coins. | Permet d’arrondir les bordures des boîtes (ex: border-radius: 20px;). |
box-shadow | Ombrage sur le cadre d’un élément. | Ajoute des effets de profondeur et de relief (ex: box-shadow: 5px 5px 2px grey;). |
border-image | Utilisation d’une image de décoration pour le cadre. | Permet des bordures graphiques complexes. |
5. L’Essor du Responsive Design avec les Media Queries
L’adaptation à tous les supports (le Responsive Design) est devenue possible grâce aux Media Queries introduites par CSS3.
A. Les Types de Médias (CSS2)
Avec CSS2 et HTML4, il était déjà possible de spécifier une feuille de style différente pour l’impression ou l’écran via l’attribut media :
HTML
<link rel="stylesheet" media="screen" href="screen.css" type="text/css" />
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
B. Les Media Queries (CSS3)
CSS3 a étendu cela en permettant de cibler les styles non seulement selon le type de média, mais aussi selon des critères très précis comme la taille de l’écran.
L’utilisation de la directive @media permet d’appliquer un bloc de style uniquement si la condition est remplie :
CSS
@media screen and (max-width: 640px) {
/* Ces styles s'appliquent si l'écran a une largeur de 640px ou moins */
.bloc {
display: block; /* Exemple: passer de colonnes à des blocs superposés */
}
}
Les critères couramment utilisés incluent : width, height, aspect-ratio, resolution, souvent préfixés par min- ou max- pour définir des plages spécifiques.
