Styles HTML - CSS
CSS signifie feuilles de style en cascade.
CSS économise beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la fois.
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 manière dont les éléments sont positionnés et disposés, les images d'arrière-plan ou les couleurs d'arrière-plan à utiliser, différents affichages pour différents appareils et tailles d'écran, et beaucoup plus!
Conseil : Le mot 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
CSS peut être ajouté aux documents HTML de 3 manières :
- Inline - en utilisant l'
style
attribut à l'intérieur des éléments HTML - Interne - en utilisant un
<style>
élément dans la<head>
section - Externe - en utilisant un
<link>
élément pour créer un lien vers un fichier CSS externe
La façon la plus courante d'ajouter du CSS est de conserver les styles dans des fichiers CSS externes. Cependant, dans ce didacticiel, nous utiliserons des styles en ligne et internes, car cela est plus facile à démontrer et plus facile à 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' style
attribut d'un élément HTML.
L'exemple suivant définit la couleur du texte de l' <h1>
élément sur bleu et la couleur du texte de l' <p>
élément sur rouge :
Exemple
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</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 <head>
section d'une page HTML, au sein d'un <style>
élément.
L'exemple suivant définit la couleur du texte de TOUS les <h1>
éléments (sur cette page) sur bleu et la couleur du texte de TOUS les <p>
éléments sur rouge. De plus, la page s'affichera avec une couleur de fond "powderblue":
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>
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 <head>
section 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>
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 de tout un site Web, en changeant un seul fichier !
Couleurs, polices et tailles CSS
Ici, nous allons démontrer certaines 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>
Bordure CSS
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é de bordure CSS :
p {
border: 2px
solid powderblue;
}
Rembourrage CSS
La propriété CSS padding
définit un rembourrage (espace) 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 le 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 en cours.
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">
Exemple
Cet exemple établit un lien vers une feuille de style située dans le dossier html du site Web actuel :
<link rel="stylesheet" href="/html/styles.css">
Exemple
Cet exemple établit un lien vers 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
style
Utiliser l' attribut HTML pour le style en ligne<style>
Utilisez l' élément HTML 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> - Utiliser la propriété CSS
color
pour les couleurs du texte - Utiliser la propriété CSS
font-family
pour les polices de texte - Utiliser la propriété CSS
font-size
pour les tailles de texte - Utiliser la propriété CSS
border
pour les bordures - Utilisez la propriété CSS
padding
pour l'espace à l'intérieur de la bordure - Utilisez la propriété CSS
margin
pour l'espace en dehors de la bordure
Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre didacticiel CSS .
Exercices HTML
Balises de style HTML
Tag | Description |
---|---|
<style> | Defines style information for an HTML document |
<link> | Defines a link between a document and an external resource |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .