Les feuilles de style en cascade, appelées affectueusement CSS, sont un langage de conception simple destiné à simplifier le processus de présentation des pages Web.
Voici les avantages de l'utilisation de CSS -
CSS saves time- Vous pouvez écrire du CSS une fois, puis réutiliser la même feuille dans plusieurs pages HTML. Vous pouvez définir un style pour chaque élément HTML et l'appliquer à autant de pages Web que vous le souhaitez.
Pages load faster- Si vous utilisez CSS, vous n'avez pas besoin d'écrire des attributs de balise HTML à chaque fois. Écrivez simplement une règle CSS d'une balise et appliquez-la à toutes les occurrences de cette balise. Donc, moins de code signifie des temps de téléchargement plus rapides.
Easy maintenance - Pour faire un changement global, changez simplement le style, et tous les éléments de toutes les pages Web seront mis à jour automatiquement.
Superior styles to HTML - CSS a un éventail d'attributs beaucoup plus large que HTML, vous pouvez donc donner un bien meilleur aspect à votre page HTML par rapport aux attributs HTML.
Multiple Device Compatibility- Les feuilles de style permettent d'optimiser le contenu pour plusieurs types d'appareils. En utilisant le même document HTML, différentes versions d'un site Web peuvent être présentées pour les appareils portables tels que les PDA et les téléphones portables ou pour l'impression.
Global web standards- Les attributs HTML sont désormais obsolètes et il est recommandé d'utiliser CSS. C'est donc une bonne idée de commencer à utiliser CSS dans toutes les pages HTML pour les rendre compatibles avec les futurs navigateurs.
Offline Browsing - CSS peut stocker des applications Web localement à l'aide d'une capture hors ligne, ce qui nous permet d'afficher des sites Web hors ligne, ainsi que de garantir un chargement plus rapide et de meilleures performances globales du site Web.
Platform Independence - Le Script offre une indépendance de plate-forme cohérente et peut également prendre en charge les derniers navigateurs.
Une règle de style est composée de trois parties -
Selector- Un sélecteur est une balise HTML à laquelle un style sera appliqué. Cela peut être n'importe quelle balise comme <h1> ou <table> etc.
Property- Une propriété est un type d'attribut de balise HTML. En termes simples, tous les attributs HTML sont convertis en propriétés CSS. Ils peuvent être de couleur, de bordure, etc.
Value- Les valeurs sont attribuées aux propriétés. Par exemple, la propriété de couleur peut avoir la valeur rouge ou # F1F1F1 etc.
Le sélecteur de type correspond tout simplement au nom d'un type d'élément. Pour donner une couleur à tous les titres de niveau 1 -
h1 {
color: #36CFFF;
}Plutôt que de sélectionner des éléments d'un type spécifique, le sélecteur universel correspond tout simplement au nom de n'importe quel type d'élément -
* {
color: #000000;
}Cette règle rend le contenu de chaque élément de notre document en noir.
Supposons que vous souhaitiez appliquer une règle de style à un élément particulier uniquement lorsqu'il se trouve à l'intérieur d'un élément particulier. Comme indiqué dans l'exemple suivant, la règle de style s'appliquera à l'élément <em> uniquement lorsqu'il se trouve à l'intérieur de la balise <ul>.
ul em {
color: #000000;
}Vous pouvez définir des règles de style en fonction de l'attribut de classe des éléments. Tous les éléments ayant cette classe seront formatés selon la règle définie.
.black {
color: #000000;
}Cette règle rend le contenu en noir pour chaque élément avec l'attribut de classe défini sur noir dans notre document.
Vous pouvez le rendre un peu plus particulier. Par exemple -
h1.black {
color: #000000;
}Cette règle rend le contenu en noir uniquement pour les éléments <h1> avec l'attribut de classe défini sur noir.
Vous pouvez définir des règles de style en fonction de l'attribut id des éléments. Tous les éléments ayant cet identifiant seront formatés selon la règle définie.
#black {
color: #000000;
}Cette règle rend le contenu en noir pour chaque élément avec l'attribut id défini sur noir dans notre document.
Vous pouvez le rendre un peu plus particulier. Par exemple -
h1#black {
color: #000000;
}Cette règle rend le contenu en noir uniquement pour les éléments <h1> avec l'attribut id défini sur noir.
Prenons l'exemple suivant -
body > p {
color: #000000;
}Cette règle rendra tous les paragraphes en noir s'ils sont les enfants directs de l'élément <body>. D'autres paragraphes placés dans d'autres éléments comme <div> ou <td> n'auraient aucun effet sur cette règle.
Vous pouvez également appliquer des styles à des éléments HTML avec des attributs particuliers. La règle de style ci-dessous correspondra à tous les éléments d'entrée ayant un attribut de type avec une valeur de texte -
input[type = "text"] {
color: #000000;
}L'avantage de cette méthode est que l'élément <input type = "submit" /> n'est pas affecté et que la couleur n'est appliquée qu'aux champs de texte souhaités.
p [lang]: sélectionne tous les éléments de paragraphe avec un attribut lang.
p [lang = "fr"] - Sélectionne tous les éléments de paragraphe dont l'attribut lang a une valeur d'exactement "fr".
p [lang ~ = "fr"] - Sélectionne tous les éléments de paragraphe dont l'attribut lang contient le mot "fr".
p [lang | = "en"] - Sélectionne tous les éléments de paragraphe dont l'attribut lang contient des valeurs qui sont exactement "en", ou commencent par "en-".
Il existe quatre façons d'associer des styles à votre document HTML. Les méthodes les plus couramment utilisées sont le CSS en ligne et le CSS externe.
Embedded CSS - L'élément <style>: Vous pouvez mettre vos règles CSS dans un document HTML en utilisant l'élément <style>.
Inline CSS - L'attribut de style: vous pouvez utiliser l'attribut de style de n'importe quel élément HTML pour définir des règles de style.
External CSS - L'élément <link>: L'élément <link> peut être utilisé pour inclure un fichier de feuille de style externe dans votre document HTML.
Imported CSS - @import Règle: @import est utilisé pour importer une feuille de style externe d'une manière similaire à l'élément <link>.
Voici la règle pour remplacer toute règle de feuille de style -
Toute feuille de style en ligne a la priorité la plus élevée. Ainsi, il remplacera toute règle définie dans les balises <style> ... </style> ou les règles définies dans tout fichier de feuille de style externe.
Toute règle définie dans les balises <style> ... </style> remplacera les règles définies dans tout fichier de feuille de style externe.
Toute règle définie dans un fichier de feuille de style externe a la priorité la plus basse et les règles définies dans ce fichier ne seront appliquées que lorsque les deux règles ci-dessus ne sont pas applicables.
% - Définit une mesure sous forme de pourcentage par rapport à une autre valeur, généralement un élément englobant.
p {font-size: 16pt; line-height: 125%;}cm - Définit une mesure en centimètres.
div {margin-bottom: 2cm;}em - Une mesure relative de la hauteur d'une police dans les espaces em. Parce qu'une unité em équivaut à la taille d'une police donnée, si vous attribuez une police à 12 pt, chaque unité «em» serait de 12 pt; ainsi, 2em serait 24pt.
p {letter-spacing: 7em;}ex - Cette valeur définit une mesure relative à la hauteur x d'une police. La hauteur x est déterminée par la hauteur de la lettre minuscule de la police.
p {font-size: 24pt; line-height: 3ex;}in - Définit une mesure en pouces.
p {word-spacing: .15in;}mm - Définit une mesure en millimètres.
p {word-spacing: 15mm;}pc - Définit une mesure en picas. Un pica équivaut à 12 points; ainsi, il y a 6 picas par pouce.
p {font-size: 20pc;}pt - Définit une mesure en points. Un point est défini comme 1 / 72ème de pouce.
body {font-size: 18pt;}px - Définit une mesure en pixels d'écran.
p {padding: 25px;}vh - 1% de la hauteur de la fenêtre.
h2 { font-size: 3.0vh; }vw - 1% de la largeur de la fenêtre.
h1 { font-size: 5.9vw; }vmin 1vw ou 1vh, selon la valeur la plus petite.
p { font-size: 2vmin;}Vous pouvez spécifier vos valeurs de couleur dans différents formats. Le tableau suivant répertorie tous les formats possibles -
| Format | Syntaxe | Exemple |
|---|---|---|
| Code hexadécimal | #RRGGBB | p {couleur: # FF0000;} |
| Code hexadécimal court | #RGB | p {couleur: # 6A7;} |
| RVB% | rgb (rrr%, ggg%, bbb%) | p {couleur: rgb (50%, 50%, 50%);} |
| RVB absolu | rgb (rrr, ggg, bbb) | p {couleur: rgb (0,0,255);} |
| mot-clé | aqua, noir, etc. | p {couleur: sarcelle;} |
Il y a la liste de 216 couleurs qui sont censées être les couleurs les plus sûres et indépendantes de l'ordinateur. Ces couleurs varient du code hexa 000000 au FFFFFF. Ces couleurs peuvent être utilisées en toute sécurité car elles garantissent que tous les ordinateurs afficheront correctement les couleurs lors de l'exécution d'une palette de 256 couleurs.
La propriété background-color est utilisée pour définir la couleur d'arrière-plan d'un élément.
La propriété background-image est utilisée pour définir l'image d'arrière-plan d'un élément.
La propriété background-repeat est utilisée pour contrôler la répétition d'une image en arrière-plan.
La propriété background-position est utilisée pour contrôler la position d'une image en arrière-plan.
La propriété background-attachment est utilisée pour contrôler le défilement d'une image en arrière-plan.
La propriété background est utilisée comme un raccourci pour spécifier un certain nombre d'autres propriétés d'arrière-plan.
La propriété font-family est utilisée pour changer le visage d'une police.
La propriété font-style est utilisée pour rendre une police en italique ou en oblique.
La propriété font-variant est utilisée pour créer un effet de petites majuscules.
La propriété font-weight est utilisée pour augmenter ou diminuer le niveau de gras ou de luminosité d'une police.
La propriété font-size est utilisée pour augmenter ou réduire la taille d'une police.
La propriété font est utilisée comme raccourci pour spécifier un certain nombre d'autres propriétés de police.
La propriété color est utilisée pour définir la couleur d'un texte.
La propriété direction est utilisée pour définir la direction du texte.
La propriété letter-spacing est utilisée pour ajouter ou soustraire un espace entre les lettres qui composent un mot.
La propriété word-spacing est utilisée pour ajouter ou soustraire un espace entre les mots d'une phrase.
La propriété text-indent est utilisée pour indenter le texte d'un paragraphe.
La propriété text-align est utilisée pour aligner le texte d'un document.
La propriété text-decoration est utilisée pour souligner, surligner et barré du texte.
La propriété text-transform est utilisée pour mettre du texte en majuscule ou le convertir en majuscules ou minuscules.
La propriété d'espace blanc est utilisée pour contrôler le flux et la mise en forme du texte.
La propriété text-shadow est utilisée pour définir l'ombre du texte autour d'un texte.
La propriété border est utilisée pour définir la largeur d'une bordure d'image.
La propriété height est utilisée pour définir la hauteur d'une image.
La propriété width est utilisée pour définir la largeur d'une image.
La propriété -moz-opacity est utilisée pour définir l'opacité d'une image.
Le lien: signifie des hyperliens non visités.
Le: visité signifie les hyperliens visités.
Le: hover signifie un élément sur lequel le pointeur de la souris de l'utilisateur plane actuellement.
Le: actif signifie un élément sur lequel l'utilisateur clique actuellement.
Le border-collapse spécifie si le navigateur doit contrôler l'apparence des bordures adjacentes qui se touchent ou si chaque cellule doit conserver son style.
L'espacement des bordures spécifie la largeur qui doit apparaître entre les cellules du tableau.
Les légendes côté légende sont présentées dans l'élément <caption>. Par défaut, ceux-ci sont rendus au-dessus du tableau dans le document. Vous utilisez la propriété caption-side pour contrôler le placement de la légende du tableau.
Les cellules vides spécifient si la bordure doit être affichée si une cellule est vide.
La mise en page du tableau permet aux navigateurs d'accélérer la mise en page d'un tableau en utilisant les premières propriétés de largeur qu'il rencontre pour le reste d'une colonne plutôt que d'avoir à charger le tableau entier avant de le rendre.
La couleur de la bordure spécifie la couleur d'une bordure.
Le style de bordure spécifie si une bordure doit être unie, une ligne pointillée, une ligne double ou l'une des autres valeurs possibles.
La largeur de la bordure spécifie la largeur d'une bordure.
La marge spécifie une propriété abrégée pour définir les propriétés de marge dans une déclaration.
La marge inférieure spécifie la marge inférieure d'un élément.
Le margin-top spécifie la marge supérieure d'un élément.
La marge gauche spécifie la marge gauche d'un élément.
La marge droite spécifie la marge droite d'un élément.
Le type de style liste vous permet de contrôler la forme ou l'apparence du marqueur.
La position de style de liste spécifie si un point long qui s'enroule sur une deuxième ligne doit s'aligner sur la première ligne ou commencer sous le début du marqueur.
L'image de style liste spécifie une image pour le marqueur plutôt qu'une puce ou un numéro.
Le style de liste sert de raccourci pour les propriétés de style.
Le décalage du marqueur spécifie la distance entre un marqueur et le texte de la liste.
Le padding-bottom spécifie le rembourrage inférieur d'un élément.
Le padding-top spécifie le remplissage supérieur d'un élément.
Le padding-left spécifie le remplissage à gauche d'un élément.
Le padding-right spécifie le remplissage droit d'un élément.
Le rembourrage sert de raccourci pour toutes les propriétés de remplissage.
La propriété de curseur de CSS vous permet de spécifier le type de curseur qui doit être affiché à l'utilisateur.
auto - La forme du curseur dépend de la zone de contexte sur laquelle il se trouve. Par exemple, un «je» sur du texte, une «main» sur un lien, etc.
réticule - Un réticule ou signe plus.
par défaut - Une flèche.
pointeur - Une main pointée (dans IE 4, cette valeur est hand).
déplacer ou texte - La barre «I».
attendez - Un sablier.
aide - Un point d'interrogation ou une bulle, idéal pour une utilisation sur les boutons d'aide.
Oui! définir l'url comme source d'un fichier image de curseur.
La propriété contour-width est utilisée pour définir la largeur du contour.
La propriété de style de contour est utilisée pour définir le style de ligne du contour.
La propriété contour-color est utilisée pour définir la couleur du contour.
La propriété contour est utilisée pour définir toutes les propriétés de contour dans une seule instruction.
La propriété height est utilisée pour définir la hauteur d'une boîte.
La propriété width est utilisée pour définir la largeur d'une boîte.