Les styles CSS dans HTML
CSS est un langage qui décrit le style d’un document HTML, CSS décrit comment les éléments HTML doivent être affichés.
Ce tutoriel vous apprendra les bases des feuilles de styles CSS .
Sommaire
Les styles HTML avec CSS
CSS signifie Cascading Style Sheets (feuilles de styles en cascades) .
CSS décrit comment les éléments HTML doivent être affichés à l’écran, sur papier ou sur d’autres supports.
CSS économise beaucoup de travail. Il peut contrôler la disposition de plusieurs pages Web en une seule fois.
CSS peut être ajouté aux éléments HTML de 3 manières:
- Intégré – en utilisant l’attribut style dans les éléments HTML
- Interne – en utilisant un élément <style> dans la section <head>
- Externe – en utilisant un fichier CSS externe
La manière la plus courante d’ajouter des CSS consiste à conserver les styles dans des fichiers CSS distincts. Cependant, nous utiliserons ici un style en ligne et interne, car cela est plus facile à démontrer et plus facile à essayer vous-même.
CSS Intégré
Le CSS intégré est utilisé pour appliquer un style unique à un seul élément HTML.
Le CSS intégré utilise l’attribut style d’un élément HTML.
Cet exemple définit la couleur bleu du texte de l’élément <h1> :
Exemple
<h1 style = « color: blue; »> Ceci est un titre bleu </ h1>
CSS interne
Le CSS interne est utilisé pour définir un style pour une seule page HTML.
Le CSS interne est défini dans la section <head> d’une page HTML, dans un élément <style>:
Exemple
<! DOCTYPE html>
<html>
<tête>
<style>
body {background-color: blueblue}
h1 {couleur: bleu;}
p {couleur: rouge;}
</ 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 nombreuses pages HTML.
Avec une feuille de style externe, vous pouvez changer l’apparence d’un site Web entier en changeant un fichier!
Pour utiliser une feuille de style externe, ajoutez-y un lien dans la section <head> de la page HTML:
Exemple
<! DOCTYPE html>
<html>
<tête>
<link rel = « stylesheet » href = « styles.css »>
</ head>
<body><h1> Ceci est un titre </ h1>
<p> Ceci est un paragraphe. </ p></ body>
</ html>
Une 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 la page « styles.css »:
corps {
background-color: powderblue;
}
h1 {
Color blue;
}
p {
Color red;
}
CSS et les Fonts
La propriété color dans CSS définit la couleur du texte à utiliser.
La propriété font-family dans CSS définit la police à utiliser.
La propriété font-size dans CSS définit la taille du texte à utiliser.
Exemple
<! DOCTYPE html>
<html>
<head>
<style>
h1 {
Color bleue;
font-family: verdana;
font-size: 300%;
}
p {
color rouge;
font-family: courrier;
font-size: 160%;
}
</ style>
</ head>
<body><h1> Ceci est un titre </ h1>
<p> Ceci est un paragraphe. </ p></ body>
</ html>
CSS Border
La propriété de border dans CSS définit une bordure autour d’un élément HTML:
Exemple
p {
border: 1px powderblue solide;
}
CSS Padding
La propriété padding dans CSS définit un remplissage (espace) entre le texte et la bordure:
Exemple
p {
border: 1px powderblue solide;
padding: 30px;
}
La marge des éléments HTML (Margin)
La propriété de margin dans CSS définit une marge (espace) en dehors de la bordure:
Exemple
p {
border : 1px bleu de poudre solide;
margin : 50px;
}
