Styles HTML - CSS
Découvrez comment ajouter du CSS aux éléments HTML de 3 façons, apprenez à les styliser avec différentes propriétés CSS et consultez des exemples.
CSS est utilisé pour styliser le HTML. Il détermine la façon dont les éléments HTML s'affichent à l'écran, sur papier ou dans d'autres médias.
CSS permet d'économiser beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages à la fois.
Vous pouvez ajouter du CSS aux éléments HTML de 3 façons :
- Inline — l'attribut
styleest ajouté directement à un élément HTML. - Interne — un élément
<style>est placé dans la section<head>de la page. - Externe — un fichier
.cssséparé est lié à la page.
Pourquoi trois méthodes ? Chacune offre un compromis entre commodité et portée. Les styles inline sont rapides mais ne s'appliquent qu'à un seul élément. Les styles internes couvrent une seule page. Les feuilles de style externes sont l'approche recommandée pour les projets réels, car un seul fichier peut styliser un site entier et est mis en cache par le navigateur.
Priorité de la cascade
Lorsque plusieurs règles ciblent le même élément, CSS résout le conflit par la spécificité et l'ordre des sources. En règle générale, plus un style est déclaré près de l'élément, plus sa priorité est élevée :
style inline > <style> interne > feuille de style externe
Ainsi, si une feuille externe indique qu'un paragraphe est bleu et qu'un style inline indique qu'il est rouge, le paragraphe sera rouge. (Le drapeau !important peut modifier cet ordre, mais utilisez-le avec parcimonie.) En savoir plus dans l'introduction au CSS.
Examinons chaque méthode.
CSS Inline
Un CSS inline applique un style particulier à un seul élément HTML. L'attribut style de l'élément HTML est utilisé ici.
Dans l'exemple ci-dessous, la couleur du texte de l'élément <p> est rouge :
Exemple de CSS inline :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Usage of the inline CSS</h1>
<p style="color:red;">The paragraph is red.</p>
</body>
</html>CSS Interne
Un CSS interne spécifie un style pour une seule page HTML. Il est défini dans l'élément <head> d'une page HTML, à l'intérieur d'une balise <style> :
Exemple de CSS interne :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS Externe
Une feuille de style externe spécifie le style pour plusieurs pages HTML. Elle peut changer l'apparence de tout un site web en modifiant un seul fichier.
Pour utiliser une feuille de style externe, ajoutez un <link> vers celle-ci à l'intérieur de l'élément <head> de la page HTML. L'attribut href pointe vers le chemin du fichier .css :
Exemple de feuille de style CSS externe :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Le fichier styles.css lié contient les règles. Il ne peut pas contenir de code HTML et doit être enregistré avec une extension .css. Pour la page ci-dessus, styles.css pourrait ressembler à ceci :
body {
background-color: yellow;
}
h1 {
font-size: 30px;
}
p {
font-size: 18px;
}Polices et couleurs CSS
La propriété CSS font-family définit la police du contenu textuel.
La propriété CSS font-size définit la taille du texte.
La propriété CSS color définit la couleur du texte lui-même. (Notez que color n'est pas une propriété de police — elle contrôle la couleur du texte en avant-plan.)
La propriété CSS background-color définit la couleur derrière l'élément.
Exemple de polices et couleurs CSS :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #008000;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 200%;
}
p {
color: #666666;
font-family: 'New Roman', serif;
font-size: 150%;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS Border
La propriété CSS border définit des valeurs pour les quatre côtés d'un élément.
Exemple de la propriété CSS border :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dotted red;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS Padding
La propriété CSS padding spécifie le rembourrage (espace) entre le texte et la bordure.
Exemple de la propriété CSS padding :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #008022;
padding: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>CSS Margin
La propriété CSS margin crée un espace autour de l'élément.
Exemple de la propriété CSS margin :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px dashed #090fce;
margin: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>L'attribut id
L'attribut id cible un élément unique et particulier. Une valeur id doit être unique dans la page — deux éléments ne peuvent pas partager le même id. En CSS, on le sélectionne avec un dièse, par exemple #large-text.
Exemple de l'attribut id :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#large-text {
border: 8px groove powderblue;
font-size: 24px;
padding: 20px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p id="large-text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>L'attribut class
L'attribut class est réutilisable : la même classe peut être appliquée à n'importe quel nombre d'éléments, et un même élément peut porter plusieurs classes. Les classes sont donc l'outil idéal pour styliser un groupe d'éléments de la même façon. En CSS, on sélectionne une classe avec un point, par exemple .text.
Exemple de l'attribut class :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.text {
border: 8px inset powderblue;
font-size: 20px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
<p class="text">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>