HTML CSS

Styles HTML avec CSS

CSS (Cascading Style Sheets) est le langage utilisé pour décrire la présentation et la mise en forme des documents HTML. Il contrôle la mise en page, les couleurs, les polices, l'espacement, et bien plus encore.

Pourquoi utiliser CSS ?

Alors que HTML structure le contenu, CSS définit son apparence. Séparer la structure (HTML) de la présentation (CSS) offre plusieurs avantages :

Maintenabilité : Modifier l’apparence d’un site web entier en éditant un seul fichier CSS.
Cohérence : Assurer une apparence cohérente sur plusieurs pages.
Accessibilité : Un HTML bien structuré avec un CSS séparé est plus facile à analyser pour les technologies d’assistance.
Performances : Les navigateurs peuvent mettre en cache les fichiers CSS externes, accélérant ainsi le chargement des pages.
Code plus propre : HTML se concentre sur la structure du contenu, le rendant plus facile à lire et à gérer.

Évitez d’utiliser des attributs HTML obsolètes comme <font>, <center>, bgcolor, etc. Toute la mise en forme doit être effectuée avec CSS.

Façons d’ajouter du CSS à HTML

Il existe trois méthodes principales pour appliquer des styles CSS :

1. CSS Externe (Recommandé)

Les styles sont définis dans un fichier .css séparé (par exemple, styles.css). Ce fichier est ensuite lié au(x) document(s) HTML à l’aide de la balise <link> dans la section <head>.

HTML (index.html) :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Styled Heading</h1>
    <p>Styled paragraph.</p>
</body>
</html>

CSS (styles.css) :

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: navy;
}

p {
  color: #333;
  line-height: 1.6;
}

C’est la bonne pratique pour la plupart des sites web car elle offre la meilleure séparation des préoccupations et une meilleure maintenabilité.

2. CSS Interne

Les styles sont définis au sein d’un élément <style> placé dans la section <head> du document HTML. Cette méthode convient aux sites web d’une seule page ou aux styles spécifiques uniques à une page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS Example</title>
    <style>
        body {
            background-color: lightyellow;
        }
        h1 {
            color: maroon;
            text-align: center;
        }
        p {
            font-size: 1.1em;
        }
    </style>
</head>
<body>
    <h1>Internal Style Example</h1>
    <p>This paragraph is styled by the internal CSS.</p>
</body>
</html>

3. CSS En ligne

Les styles sont appliqués directement aux éléments HTML individuels à l’aide de l’attribut style. Cette méthode doit être utilisée avec parcimonie, car elle mélange la présentation avec la structure et rend la maintenance plus difficile. Elle est parfois utile pour un style unique sur un seul élément ou pour appliquer dynamiquement des styles avec JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue; text-decoration: underline;">Blue Underlined Heading</h1>
    <p style="color: green; font-style: italic;">This paragraph has inline styles.</p>
</body>
</html>

Syntaxe CSS de base

Une règle CSS se compose d’un sélecteur et d’un bloc de déclaration :

selector {
  property: value; /* Ceci est une déclaration */
  another-property: another-value;
}

Sélecteur : Pointe vers l’élément ou les éléments HTML que vous souhaitez styliser (par exemple, h1, p, .my-class, #my-id).
Bloc de déclaration : Contient une ou plusieurs déclarations enfermées entre accolades {}.
Déclaration : Se compose d’un nom de propriété CSS (par exemple, color, font-size, background-color) suivi d’un deux-points :, puis d’une valeur (par exemple, blue, 16px, #ffffff), et se termine par un point-virgule ;.

Propriétés CSS courantes

color : Définit la couleur du texte.
background-color : Définit la couleur d’arrière-plan d’un élément.
font-family : Spécifie la police du texte.
font-size : Définit la taille du texte (par exemple, 16px, 1.2em, 120%).
text-align : Aligne le texte horizontalement (left, right, center, justify).
width, height : Définit les dimensions d’un élément.
margin : Contrôle l’espace extérieur à la bordure d’un élément.
padding : Contrôle l’espace intérieur à la bordure d’un élément, entre la bordure et le contenu.
border : Définit la largeur, le style (solid, dashed, etc.) et la couleur de la bordure.

Exemple combinant plusieurs propriétés :

.button {
  display: inline-block; /* Permet de définir la largeur/hauteur/rembourrage */
  padding: 10px 20px;
  margin: 5px;
  background-color: dodgerblue;
  color: white;
  border: none;
  border-radius: 5px; /* Coins arrondis */
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  cursor: pointer; /* Modifie le curseur de la souris au survol */
}

Sélecteurs : Cibler les Éléments

Sélecteur d’élément : Sélectionne tous les éléments d’un type spécifique.

`p { color: gray; }` /* Style tous les éléments <p> */

Sélecteur de classe : Sélectionne les éléments avec un attribut class spécifique. Commence par un point (.). Peut être appliqué à plusieurs éléments.

HTML: `<p class="highlight">Highlighted text.</p>`<br>CSS: `.highlight { background-color: yellow; }`

Sélecteur d’ID : Sélectionne un seul élément avec un attribut id spécifique. Commence par un dièse (#). Un ID doit être unique sur une page.

HTML: `<div id="main-content">...</div>`<br>CSS: `#main-content { border: 1px solid black; }`

Recommandation	Utilisez `class` pour styliser plusieurs éléments partageant le même style. Utilisez `id` pour styliser un seul élément unique sur la page (souvent utilisé pour les sections de mise en page ou les crochets JavaScript).

Le Modèle de Boîte CSS

Chaque élément HTML peut être visualisé comme une boîte. Le Modèle de Boîte CSS décrit comment les dimensions (largeur, hauteur), le rembourrage (padding), la bordure (border) et la marge (margin) d’un élément sont calculés et se rapportent les uns aux autres :

Contenu : Le contenu réel de la boîte, où le texte et les images apparaissent.
Padding (rembourrage) : Crée un espace autour du contenu. Il se trouve à l’intérieur de la bordure. Transparent.
Border (bordure) : Une bordure qui entoure le rembourrage et le contenu.
Margin (marge) : Crée un espace à l’extérieur de la bordure. Il sépare l’élément des autres éléments. Transparent.

Comprendre le modèle de boîte est fondamental pour contrôler la mise en page et l’espacement.

div.box {
  width: 300px;
  padding: 20px;
  border: 5px solid red;
  margin: 15px;
  background-color: lightblue;
}

(Remarque : La largeur totale occupée par cette boîte serait width + padding-left + padding-right + border-left + border-right + margin-left + margin-right)

Résumé du chapitre

Utilisez CSS pour toute la présentation et la stylisation.
Préférez le CSS Externe utilisant l’élément <link> dans <head> pour la maintenabilité.
Utilisez le CSS Interne (<style> dans <head>) pour les styles d’une seule page.
Utilisez le CSS En ligne (attribut style) avec parcimonie.
Les règles CSS se composent d’un sélecteur et de déclarations (propriété: valeur;).
Utilisez les classes (.classname) pour styliser des groupes d’éléments.
Utilisez les ID (#idname) pour styliser des éléments uniques.
Comprenez le Modèle de Boîte CSS (contenu, padding, border, margin) pour le contrôle de la mise en page.
Évitez les balises et attributs de style HTML obsolètes.

Pour en savoir plus sur CSS en détail, consultez les tutoriels et ressources CSS dédiés comme les MDN Web Docs.

Balises HTML pertinentes

Balise	Description
`<link>`	Lie une ressource externe (comme un fichier CSS) au document.
`<style>`	Contient des informations de style CSS internes.