HTML Styles — CSS
La mode se démode, mais le style – jamais ! Et c'est vrai !..
Coco Chanel
CSS signifie Cascading Style Sheets (Feuilles de Style en Cascade).
CSS permet d'économiser beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la fois.
CSS = Styles and Colors
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 façon dont les éléments sont positionnés et disposés, les images d'arrière-plan ou les couleurs d'arrière-plan à utiliser, les différents affichages pour différents appareils et écrans tailles, et bien plus encore !
Astuce : Le mot en cascade signifie qu'un style appliqué à un élément parent s'appliquera également à tous les éléments enfants du parent. Ainsi, si vous définissez la couleur du corps du texte sur « bleu », tous les titres, paragraphes et autres éléments de texte du corps auront également la même couleur (sauf si vous spécifiez autre chose) !
Utiliser CSS
Le CSS peut être ajouté aux documents HTML de 3 manières :
- Inline - en utilisant l'attribut
styledans les éléments HTML - Interne - en utilisant un élément
<style>dans la section<head> - Externe - en utilisant un élément
<link>pour créer un lien vers un fichier CSS externe
La manière la plus courante d’ajouter du CSS consiste à conserver les styles dans des fichiers CSS externes. Cependant, dans ce didacticiel, nous utiliserons des styles en ligne et internes, car ils sont plus faciles à démontrer et plus faciles à 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> élément en rouge :
Exemple
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Try it Yourself »
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, au sein d'un <style> élément.
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> éléments en rouge. De plus, la page sera affichée avec une couleur de fond « poudre bleu » :
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
CSS externe
Une feuille de style externe est utilisée pour définir le style de nombreuses 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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
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 quelques propriétés CSS couramment utilisées. Vous en apprendrez plus à 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>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Try it Yourself »
CSS Border
La propriété CSS border définit une bordure autour d'un élément HTML.
Conseil : 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;
}
Try it Yourself »
CSS Padding
La propriété CSS padding définit un remplissage (espace) entre le texte et la bordure.
Exemple
Utilisation des propriétés CSS border et padding :
p {
border: 2px solid powderblue;
padding: 30px;
}
Try it Yourself »
CSS Margin
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;
}
Try it Yourself »
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 créer un lien vers une feuille de style :
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Try it Yourself »
Exemple
Cet exemple renvoie à une feuille de style située dans le dossier html du site Web actuel :
<link rel="stylesheet" href="/html/styles.css">
Try it Yourself »
Exemple
Cet exemple renvoie à une feuille de style située dans le même dossier que la page actuelle :
<link rel="stylesheet" href="styles.css">
Try it Yourself »
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 du 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 en dehors de la bordure
Astuce : Vous pouvez en apprendre beaucoup plus sur CSS dans notre Tutoriel CSS.
HTML Exercices
HTML Balises de style
| Étiquette | Description |
|---|---|
| <style> | Définit les informations de style pour un document HTML |
| <link> | Définir un lien entre un document et une ressource externe |
Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
HTML - CSS - W3Schools Video
Cette vidéo est une introduction au CSS et à la manière de l'ajouter au HTML.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
