CSS = styles et couleurs
Styling HTML avec CSS
CSS signifie feuilles de style en cascade
Styling peut être ajouté à des éléments HTML de 3 façons:
- En ligne - en utilisant un attribut de style dans les éléments HTML
- Interne - en utilisant un <style> élément dans le code HTML <head> section
- Externe - en utilisant un ou plusieurs fichiers CSS externes
La façon la plus courante d'ajouter un style, est de garder les styles dans les fichiers CSS séparés. Mais, dans ce tutoriel, nous utilisons un style interne, car il est plus facile de démontrer, et plus facile pour vous d'essayer vous-même.
Vous pouvez apprendre beaucoup plus sur CSS dans notre tutoriel CSS .
Styling en ligne (Inline CSS)
Style en ligne est utilisé pour appliquer un style unique à un seul élément HTML:
Style en ligne utilise le style de l' attribut.
Cet exemple modifie la couleur du texte de la <h1> élément bleu:
Styling interne (Internal CSS)
style interne est utilisé pour définir un style pour une page HTML.
Style interne est défini dans la section <head> section d'une page HTML, dans un <style> élément:
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Essayez vous - même » Styling externe (External CSS)
Une feuille de style externe est utilisé pour définir le style de nombreuses pages.
Avec une feuille de style externe, vous pouvez changer l'apparence d'un site Web entier en changeant un seul fichier!
Pour utiliser une feuille de style externe, ajouter un lien vers elle dans la section <head> section de la 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> Essayez vous - même » Une feuille de style externe peut être écrit dans un éditeur de texte. Le fichier ne doit pas contenir de balises HTML. Le fichier de feuille de style doit être enregistré avec une .css prolongation.
Voici comment le « styles.css » ressemble:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS Fonts
La CSS color propriété définit la couleur du texte à utiliser pour l'élément HTML.
La CSS font-family propriété définit la police à utiliser pour l'élément HTML.
La CSS font-size propriété définit la taille du texte à utiliser pour l'élément HTML.
Exemple
<!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> Essayez vous - même » Le modèle de boîte CSS
Chaque élément HTML a une boîte autour d'elle, même si vous ne pouvez pas le voir.
La CSS border propriété définit une bordure visible autour d' un élément HTML:
Le CSS padding propriété définit un rembourrage (space) à l' intérieur de la frontière:
La CSS margin propriété définit une marge (space) en dehors de la frontière:
Les exemples ci - dessus utilisent CSS px pour définir la taille en pixels.
L' id Attribut
Tous les exemples ci-dessus utilisent le style CSS pour les éléments HTML d'une manière générale.
Pour définir un style particulier pour un élément spécial, ajoutez d'abord un attribut id à l'élément:
<p id="p01">I am different</p>puis définir un style pour l'élément spécifique avec l' id :
La class d' attributs
Pour définir un style pour un type spécial ( class ) d'éléments, ajoutez une class attribut à l'élément:
<p class="error">I am different</p>Maintenant, vous pouvez définir un style différent pour les éléments avec la classe spécifique:
Utilisez id pour répondre à un single élément. Utilisez la class pour répondre groups d'éléments.
Résumé du chapitre
- Utilisez le code HTML de style attribut pour le style en ligne
- Utilisez le code HTML <style> élément pour définir CSS interne
- Utilisez le code HTML <link> élément pour faire référence à un fichier CSS externe
- Utilisez le code HTML <head> élément pour stocker <style> et <link> éléments
- Utilisez la CSS color propriété pour les couleurs de texte
- Utilisez le CSS font-family propriété pour les polices de texte
- Utilisez le CSS font-size propriété pour la taille du texte
- Utilisez le CSS border propriété pour les bordures des éléments visibles
- Utilisez le CSS padding propriété pour l' espace intérieur de la frontière
- Utilisez le CSS margin propriété pour l' espace en dehors de la frontière
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»
HTML style Balises
| Marque | La description |
|---|---|
| <style> | Définit les informations de style pour un document HTML |
| <link> | Définit un lien entre un document et une ressource externe |