HTML Styles - CSS
CSS signifie "Feuilles de Style en Cascade".
CSS permet d'économiser beaucoup de travail en contrôlant la mise en page de plusieurs pages web simultanément.
CSS = Styles et Couleurs
Qu'est-ce que CSS ?
Les Feuilles de Style en Cascade (CSS) sont utilisées pour formater la mise en page d'une page web.
Avec CSS, vous pouvez contrôler la couleur, la police, la taille du texte, l'espacement entre les éléments, la position et la disposition des éléments, les images ou couleurs de fond à utiliser, les affichages pour différents appareils et tailles d'écran, et bien plus encore !
Astuce : Le mot cascade signifie qu'un style appliqué à un élément parent s'appliquera également à tous les éléments enfants à l'intérieur du parent. Donc, si vous définissez la couleur du texte du corps sur "bleu", tous les titres, paragraphes et autres éléments de texte à l'intérieur du corps auront également la même couleur (à moins que vous ne spécifiiez autre chose) !
Utiliser CSS
CSS peut être ajouté aux documents HTML de trois manières :
- En ligne - en utilisant l'attribut
styleà l'intérieur des éléments HTML - Interne - en utilisant un élément
<style>dans la section<head> - Externe - en utilisant un élément
<link>pour lier à un fichier CSS externe
La manière la plus courante d'ajouter CSS est de conserver les styles dans des fichiers CSS externes. Cependant, dans ce tutoriel, nous utiliserons des styles en ligne et internes, car cela est plus facile à démontrer et plus simple pour vous de l'essayer vous-même.
CSS en ligne
Un CSS en ligne est utilisé pour appliquer un style unique à un seul élément HTML.
Un CSS en ligne utilise l'attribut style d'un élément HTML.
L'exemple suivant définit la couleur du texte de l'élément <h1> sur bleu, et la couleur du texte de l'élément <p> sur rouge :
Exemple
<h1 style="color:blue;">Un Titre Bleu</h1>
<p style="color:red;">Un paragraphe rouge.</p> CSS Interne
Un CSS interne est utilisé pour définir un style pour une seule page HTML.
Un CSS interne est défini dans la section <head> d'une page HTML, à l'intérieur d'un élément <style> .
L'exemple suivant définit la couleur du texte de TOUS les éléments <h1> (sur cette page) sur bleu, et la couleur du texte de TOUS les éléments <p> sur rouge. De plus, la page sera affichée avec une couleur de fond "bleu poudre" :
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html> CSS Externe
Une feuille de style externe est utilisée pour définir le style de plusieurs pages HTML.
Pour utiliser une feuille de style externe, ajoutez un lien vers celle-ci dans la section <head> de chaque page HTML :
Exemple
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html> La feuille de style externe peut être écrite dans n'importe quel éditeur de texte. Le fichier ne doit contenir aucun code HTML et doit être enregistré avec une extension .css.
Voici à quoi ressemble le fichier "styles.css" :
"styles.css" :
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
} Astuce : Avec une feuille de style externe, vous pouvez changer l'apparence d'un site web entier en modifiant un seul fichier !
Couleurs, Polices et Tailles CSS
Ici, nous allons démontrer certaines propriétés CSS couramment utilisées. Vous en apprendrez davantage à leur sujet plus tard.
La propriété CSS color définit la couleur du texte à utiliser.
La propriété CSS font-family définit la police à utiliser.
La propriété CSS font-size définit la taille du texte à utiliser.
Exemple
Utilisation des propriétés CSS color, font-family et font-size :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
</body>
</html> Bordure CSS
La propriété CSS border définit une bordure autour d'un élément HTML.
Astuce : Vous pouvez définir une bordure pour presque tous les éléments HTML.
Exemple
Utilisation de la propriété CSS border :
p {
border: 2px solid powderblue;
}
Padding CSS
La propriété CSS padding définit un espace (padding) entre le texte et la bordure.
Exemple
Utilisation des propriétés CSS border et padding :
p {
border: 2px solid powderblue;
padding: 30px;
} Marge CSS
La propriété CSS margin définit une marge (espace) à l'extérieur de la bordure.
Exemple
Utilisation des propriétés CSS border et margin :
p {
border: 2px solid powderblue;
margin: 50px;
} Lien vers CSS Externe
Les feuilles de style externes peuvent être référencées avec une URL complète ou avec un chemin relatif à la page web actuelle.
Exemple
Cet exemple utilise une URL complète pour lier à une feuille de style :
<link rel="stylesheet" href="https://www.formation-ti.org/html/styles.css">
Exemple
Cet exemple lie à une feuille de style située dans le dossier html sur le site web actuel :
<link rel="stylesheet" href="/html/styles.css">
Exemple
Cet exemple lie à une feuille de style située dans le même dossier que la page actuelle :
<link rel="stylesheet" href="styles.css">
Vous pouvez en savoir plus sur les chemins de fichiers dans le chapitre Chemins de Fichiers HTML .
Résumé du Chapitre
- Utilisez l'attribut HTML
stylepour le style en ligne - Utilisez l'élément HTML
<style>pour définir le CSS interne - Utilisez l'élément HTML
<link>pour faire référence à un fichier CSS externe - Utilisez l'élément HTML
<head>pour stocker les éléments <style> et <link> - Utilisez la propriété CSS
colorpour les couleurs de texte - Utilisez la propriété CSS
font-familypour les polices de texte - Utilisez la propriété CSS
font-sizepour les tailles de texte - Utilisez la propriété CSS
borderpour les bordures - Utilisez la propriété CSS
paddingpour l'espace à l'intérieur de la bordure - Utilisez la propriété CSS
marginpour l'espace à l'extérieur de la bordure
Astuce : Vous pouvez en apprendre beaucoup plus sur CSS dans notre Tutoriel CSS .
Balises de Style HTML
| Balise | Description |
|---|---|
| <style> | Définit les informations de style pour un document HTML |
| <link> | Définit un lien entre un document et une ressource externe |
Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des Balises HTML .