Introduction au CSS
Qu'est-ce que le CSS ?
Le CSS (Cascading Style Sheets) est un langage de feuille de style utilisé pour
contrôler la présentation et la mise en forme des documents HTML. Il permet de
séparer la structure (HTML) du style (CSS) d'une page web.
Pourquoi utiliser le CSS ?
Le CSS facilite la maintenance du code en établissant une séparation claire entre la
structure et le style d'une page web. Il permet également :
d'adapter facilement la mise en page à différents types de dispositifs
(responsive design),
d'améliorer l'accessibilité du site,
et de garantir une expérience utilisateur cohérente.
Commentaires en CSS
Pour insérer un commentaire en CSS, on encadre le texte ou les lignes à commenter
avec /* et */.
Exemple 1 :
/* Ceci est un commentaire CSS */
Exemple 2 :
/*
Ceci est un commentaire CSS
sur plusieurs lignes
*/
Syntaxe de base
Le CSS repose sur des règles de style qui associent des sélecteurs à des propriétés
et leurs valeurs.
Structure de base :
sélecteur {
propriété: valeur;
}
Sélecteurs CSS
Les sélecteurs servent à cibler des éléments HTML spécifiques pour leur appliquer
des styles. Voici quelques exemples :
1. Sélecteur de type
Cible tous les éléments d’un type donné (exemple : tous les paragraphes
<p>).
p{
/* Styles pour tous les paragraphes */
}
2. Sélecteur de classe
Cible les éléments ayant une classe spécifique (utilisation de . devant le nom
de la classe).
.nom-de-classe {
/* Styles pour les éléments avec la classe "nom-de-classe" */
}
3. Sélecteur d'identifiant
Cible un élément unique identifié par un ID spécifique (utilisation de #
devant l'identifiant).
#identifiant {
/* Styles pour l'élément avec l'ID "identifiant" */
}
4. Sélecteur de descendant
Cible des éléments se trouvant à l'intérieur d'autres éléments (exemple : <li>
dans une liste <ul>).
ul li {
/* Styles pour les éléments li à l'intérieur d'une liste non ordonnée (ul) */
}
Informations
Le CSS peut être intégré de deux manières :
1. Dans la balise <style> : Cette méthode s’utilise dans la section <head>
d’une page HTML ou PHP.
2. Dans un fichier externe :
o Les règles CSS sont placées dans un fichier d'extension .css.
o Le fichier CSS est ensuite lié à la page HTML ou PHP à l'aide de la
balise <link> dans la section <head>.
Exemple de lien :
<link rel="stylesheet" href="[Link]">
Le contenu de href est en réalité le chemin vers le fichier .css
Il est possible d’indexé plusieurs fichier css avec la balise <link>
Exemple d’indexation multiple :
<link rel="stylesheet" href="css/[Link]">
<link rel="stylesheet" href="css/[Link]">
<link rel="stylesheet" href="css/[Link]">
Propriétés CSS
Les propriétés CSS sont des attributs utilisés pour définir différents aspects de la
mise en forme et du style des éléments HTML. Chaque propriété est associée à une
valeur qui précise comment un aspect particulier de l'élément doit être affiché.
Voici quelques propriétés CSS couramment utilisées et leur rôle :
1. color
o Utilité : Définit la couleur du texte d’un élément.
o Exemple :
p{
color: red;
/* Le texte du paragraphe sera rouge */
}
2. background-color
o Utilité : Définit la couleur de fond d’un élément.
o Exemple :
div {
background-color: lightblue;
/* Le fond du div sera bleu clair */
}
3. font-size
o Utilité : Spécifie la taille de la police d’un texte.
o Exemple :
h1 {
font-size: 32px;
/* Le texte du titre aura une taille de 32 pixels */
}
4. font-family
o Utilité : Définit la police ou la famille de polices utilisée pour un texte.
o Exemple :
body {
font-family: Arial, sans-serif;
/* Le texte utilisera la police Arial ou une police sans-serif */
}
5. margin
o Utilité : Ajoute un espace extérieur autour d’un élément.
o Exemple :
div {
margin: 20px;
/* Un espace de 20 pixels sera ajouté autour du div */
}
6. padding
o Utilité : Ajoute un espace intérieur entre le contenu de l’élément et ses
bordures.
o Exemple :
section {
padding: 15px;
/* Un espace de 15 pixels sera ajouté à l'intérieur de la section */
}
7. border
o Utilité : Ajoute une bordure autour d’un élément et permet de définir
son épaisseur, son style, et sa couleur.
o Exemple :
img {
border: 2px solid black;
/* Une bordure noire de 2 pixels entourera l'image */
}
8. width et height
o Utilité : Définissent respectivement la largeur et la hauteur d’un
élément.
o Exemple :
div {
width: 300px;
/* Le div aura une largeur de 300 pixels */
height: 150px;
/* Le div aura une hauteur de 150 pixels */
}
9. text-align
o Utilité : Définit l’alignement horizontal du texte à l’intérieur d’un
élément.
o Exemple :
h2 {
text-align: center; /* Le texte du titre sera centré */
}
[Link]
o Utilité : Contrôle la manière dont un élément est affiché (par exemple
: en bloc, en ligne, ou masqué).
o Exemple :
span {
display: inline; /* L'élément sera affiché en ligne */
}
[Link]
o Utilité : Détermine la méthode de positionnement d’un élément
(relative, absolue, fixe ou sticky).
o Exemple :
div {
position: absolute;
top: 50px; /* Le div sera positionné à 50 pixels du haut */
left: 100px; /* Le div sera positionné à 100 pixels de la gauche */
}
[Link]
o Utilité : Gère le contenu qui dépasse les dimensions d’un élément
(affichage, masquage ou défilement).
o Exemple :
div {
overflow: scroll;
/* Ajoute des barres de défilement si le contenu dépasse */
}
13.z-index
o Utilité : Définit l’ordre de superposition des éléments (plus la valeur
est élevée, plus l’élément est au premier plan).
o Exemple :
div {
position: absolute;
z-index: 10;
/* Le div sera affiché au-dessus des éléments avec un z-index inférieur */
}
[Link]
o Utilité : Change l’apparence du curseur lorsque l’utilisateur survole un
élément.
o Exemple :
button {
cursor: pointer;
/* Le curseur affichera une main lorsqu’il survole le bouton */
}
[Link]-shadow
o Utilité : Ajoute une ombre autour d’un élément.
o Exemple :
div {
box-shadow: 5px 5px 15px grey;
/* Ajoute une ombre grise avec un décalage de 5 pixels */
}
[Link]-radius
Utilité : Arrondit les coins des bordures d’un élément.
Exemple :
button {
border-radius: 10px;
/* Les coins du bouton seront arrondis à 10 pixels */
}
[Link]
Utilité : Définit le niveau de transparence d’un élément (de 0 à 1, où 0 est
complètement transparent et 1 est complètement opaque).
Exemple :
img {
opacity: 0.5; /* L'image sera à moitié transparente */
}
[Link]-height
Utilité : Spécifie la hauteur des lignes de texte pour améliorer la lisibilité.
Exemple :
p{
line-height: 1.5; /* La hauteur des lignes sera 1,5 fois la taille de la police */
}
[Link]-decoration
Utilité : Contrôle la décoration du texte (souligné, barré, etc.).
Exemple :
a{
text-decoration: none; /* Supprime le soulignement des liens */
}
[Link]-width et max-height
Utilité : Spécifient la largeur et la hauteur maximales qu’un élément peut
atteindre.
Exemple :
img {
max-width: 100%; /* L'image ne dépassera jamais la largeur de son conteneur */
}
[Link]-width et min-height
Utilité : Spécifient les dimensions minimales d’un élément.
Exemple :
div {
min-height: 200px; /* Le div aura au moins une hauteur de 200 pixels */
}
[Link]
Utilité : Positionne un élément à gauche ou à droite dans son conteneur.
Exemple :
img {
float: left; /* L'image sera alignée à gauche */
}
[Link]
Utilité : Annule l’effet de float pour éviter que les éléments suivants soient
affectés.
Exemple :
div {
clear: both; /* Annule les effets des floats à gauche et à droite */
}
[Link]
Utilité : Contrôle la visibilité d’un élément (visible ou caché sans supprimer
l’espace occupé).
Exemple :
p{
visibility: hidden; /* Le paragraphe sera invisible mais occupera encore de
l'espace */
}
[Link]
Utilité : Ajoute un effet de transition lisse entre deux états d’un élément.
Exemple :
button {
transition: background-color 0.3s ease; /* Change progressivement la couleur de
fond sur 0,3 secondes */
}
[Link]
Utilité : Applique des transformations (rotation, échelle, translation, etc.) à
un élément.
Exemple :
div {
transform: rotate(45deg); /* Tourne l'élément de 45 degrés */
}
[Link]-image
Utilité : Définit une image comme arrière-plan d’un élément.
Exemple :
body {
background-image: url('[Link]'); /* Applique une image en fond */
}
[Link]-size
Utilité : Spécifie comment une image de fond doit être redimensionnée.
Exemple :
body {
background-size: cover; /* L'image couvrira tout le conteneur */
}
[Link]-style
Utilité : Personnalise les puces ou numéros d’une liste.
Exemple :
ul {
list-style: square; /* Change les puces en carrés */
}
[Link]-sizing
Utilité : Définit la manière dont les dimensions d’un élément sont calculées
(inclure ou non le padding et la bordure dans la largeur et la hauteur).
Exemple :
div {
box-sizing: border-box;
/* Inclut le padding et la bordure dans les dimensions de l'élément */
}