CSS (Cascade Style Sheet) est le langage permettant de mettre en forme les pages web
Propriétés CSS et définition des styles
Propriétés CSS
Les propriétés CSS sont définies ainsi : propriete: valeur;
Exemple : color: #68F0B2;
Définition des styles dans les balises HTML
Il est possible de définir la mise en forme CSS d'un élément de la page web directement dans le code HTML avec l'attribut style.
Exemple : <p style="text-align:center; color: #99AB54;>Bonjour !</p>
Définition des styles dans l'entête de la page web
Il est possible de définir les mises en forme dans l'entête de la page web avec la balise <style type="text/css"></style>, à placer dans l'entête de la page (entre les balises <head> et </head>). Ainsi, ces mises en formes s'appliqueront à l'ensemble de la page web.
Exemple :
<style type="text/css">
p {
text-align: center;
color: #B728A5;
}
</style>
Définition dans un fichier séparé
Il est possible de définir une même présentation pour plusieurs pages web en définissant les styles CSS dans un fichier CSS liés à toutes les pages web. Le lien entre une page web et un fichier CSS avec la balise <link rel="stylesheet" type="text/css" href="/..." />, à placer dans l'entête de la page web (entre les balises <head> et </head>).
Exemple : <link rel="stylesheet" type="text/css" href="/fichier.css" />
Formats et classes
Formats globaux
Mise en forme pour toutes les occurences d'une balise HTML.
balise { propriété: valeur; ...}
Exemple : titres de niveau 2 avec un texte centré, bleu, souligné, avec une magre de 5 pixels en bas
h2 { text-align: center; color: #0000ff; text-decoration: underline; margin-bottom: 5px;}
Formats globaux imbriqués
Mise en forme de balises HTML (ou format CSS) se trouvant à l'intérieur d'autres balises HTML (ou formats CSS).
contenant contenu { propriété: valeur; ...}
Exemple : les images se trouvant dans un bloc auront une bordure rouge
div img { border-style: solid; border-color: #ff0000;}
Mise en forme commune
Mise en forme commun pour plusieurs balises et/ou formats.
format1, format2 { proprieté: valeur; ...}
Exemple : tableaux et images feront 500 px de large et auront une bordure blanche de 1 px de type solid
table, img { border: 1px solid #ffffff; width: 500px;}
Classes
Définition
Une classe permet de définir un format pouvant être appliqué à plusieurs éléments HTML (ou plusieurs occurences d'une balise HTML) d'une page web.
.nomclasse {
propriété: valeur;
...}
Possibilité d'ajouter une balise devant le point afin de définir une classe spécifique à une balise :
balise.nomclasse {
propriété: valeur;
...}
Exemple : création d'une classe nommée cri définissant un texte rouge, en gras et centré.
.cri { color: red; font-weight: bold; text-align: center;}
Attribution d'une classe à un élément HTML
<balisehtml class="nomclasse">...</balisehtml>
Exemple : attribution de la classe cri à un paragraphe
<p class="cri">Arrêtez de parler en classe !</p>
Formats indépendants
Définition
Un format indépendant permet de définir un format pouvant être appliqué à un seul élément HTML d'une page web.
#nomformat {
propriété: valeur;
...}
Possibilité d'ajouter une balise devant le dièse afin de définir un format indépendant spécifique à une balise :
balise#nomformat {
propriété: valeur;
...}
Exemple : création d'un format indépendant nommé monbloc définissant des dimensions de 400 px par 300 px pour un élément HTML
#monbloc {
width:400px;
height:300px;
}
Attribution d'un format indépendant à un élément HTML
<balisehtml id="nomclasse">...</balisehtml>
Exemple : attribution du format indépendant monbloc à un bloc
<div id="monbloc">Bonjour !</div>
Sélecteur
Un sélecteur permet de formater un élément HTML en fonction d'une situation particulière (survol, premier caractère, lien actif, etc).
:selecteur {
propriété: valeur;
...}
Les sélecteurs sont des valeurs définies : https://www.w3.org/TR/css-2020/#selectors
Possibilité d'ajouter une balise, une classe ou un format indépendant devant le deux-points afin de définir un sélecteur spécifique à un de ces éléments :
balise:selecteur {
propriété: valeur;
...}
Exemple : soulignement et texte en jaune lors du survol des liens
a:hover { color: yellow; text-decoration: underline;}
Remarques
- La balise
spanpermet de formater une partie d'un paragraphe de texte. - Il est possible de cumuler classe et format indépendant pour une même balise, en lui mettant les deux attributs
classetid. - Les commentaires en CSS s'écrivent entre
/*et*/.