Close
p sélectionne tous les paragraphes <p>. id. Utilise le symbole #. Par exemple, #header sélectionne l’élément avec id="header"... Par exemple, .button sélectionne tous les éléments avec class="button".[type="text"] sélectionne les éléments avec type="text".a:hover sélectionne les liens lorsque la souris les survole.p::first-line sélectionne la première ligne d’un paragraphe.
color, font-size, margin, padding, border, background, etc.
%), em, rem, et vw/vh (viewport width/height) sont très utiles pour le responsive design..container {
width: 100%;
}
body {
font-size: 16px; /* 1rem = 16px */
}
h1 {
font-size: 2rem; /* 32px */
}
.container {
margin: 5vw;
}
p {
font-size: 1.5em;
/* <p> sera 1.5 fois celle de son parent (16px * 1.5 = 24px) */
}
margin, border, padding, et content.
.box {
margin: 10px;
border: 2px solid black;
padding: 20px;
width: 200px;
height: 100px;
}
margin : Crée un espace autour de l’élément, à l’extérieur de la bordure.border : Définit une bordure autour de l’élément. Dans cet exemple, elle est noire et a une épaisseur de 2 pixels.padding : Crée un espace à l’intérieur de l’élément, entre le contenu et la bordure.width : Définit la largeur du contenu de l’élément.height : Définit la hauteur du contenu de l’élément.
.container {
display: flex;
justify-content: center;
align-items: center;
}
display: flex : Active le mode Flexbox pour le conteneur, ce qui permet de gérer la disposition de ses enfants.justify-content : Contrôle l’alignement horizontal des éléments à l’intérieur du conteneur Flexbox.center : Centre les éléments horizontalement.align-items : Contrôle l’alignement vertical des éléments à l’intérieur du conteneur Flexbox.center : Centre les éléments verticalement.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
display: grid : Active le mode Grid pour le conteneur.grid-template-columns : Définit la structure des colonnes dans la grille.repeat(3, 1fr) : Crée trois colonnes de largeur égale.gap : Définit l’espacement entre les éléments de la grille.
Petits appareils (smartphones en portrait)
Appareils moyens (tablettes en portrait, smartphones en paysage)
Appareils larges (tablettes en paysage, petits ordinateurs portables)
Appareils extra-larges (ordinateurs de bureau, grands écrans)
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
@media (max-width: 600px) : Applique les styles à l’intérieur de ce bloc uniquement si la largeur de l’écran est inférieure ou égale à 600 pixels.flex-direction: column : Change la direction des éléments flex en colonne, empilant les éléments verticalement.
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation-name: example;
animation-duration: 4s;
}
@keyframes example : Définit une animation nommée example.from {background-color: red;} et to {background-color: yellow;} : Définissent les étapes de l’animation.animation-name: example; : Associe l’animation example à l’élément <div>.animation-duration: 4s; : Définit la durée de l’animation à 4 secondes.
:root {
--main-color: blue;
}
p {
color: var(--main-color);
}
--main-color: blue; : Définit une variable nommée --main-color avec la valeur blue.color: var(--main-color); : Utilise la variable --main-color pour définir la couleur du texte.
transform.
div {
transform: rotate(45deg);
}
rotate(45deg) fait pivoter l’élément <div> de 45 degrés dans le sens des aiguilles d’une montre.
div {
transform: scale(1.5);
}
scale(1.5) augmente la taille de l’élément <div> de 1.5 fois sa taille d’origine dans les deux directions (X et Y).
div {
transform: translate(50px, 100px);
}
translate(50px, 100px) déplace l’élément <div> de 50 pixels vers la droite (axe X) et de 100 pixels vers le bas (axe Y).
div {
transform: skew(20deg, 10deg);
}
skew(20deg, 10deg) incline l’élément <div> de 20 degrés le long de l’axe X et de 10 degrés le long de l’axe Y.
div {
transform: matrix(1, 0.5, -0.5, 1, 0, 0);
}
matrix(1, 0.5, -0.5, 1, 0, 0) applique une transformation combinée à l’élément <div>, où chaque valeur représente une transformation spécifique (échelle, inclinaison, etc.). Cette méthode est moins courante en raison de sa complexité et est généralement utilisée pour des transformations plus avancées.
transform en les séparant par des espaces.div {
transform: rotate(30deg) translate(50px, 100px) scale(1.2);
}
rotate(30deg) : Fait pivoter l’élément de 30 degrés.translate(50px, 100px) : Déplace l’élément de 50 pixels vers la droite et de 100 pixels vers le bas.scale(1.2) : Augmente la taille de l’élément de 1.2 fois.
body {
font-family: Arial, sans-serif;
}
#header {
color: red;
}
.header-title {
color: blue;
}
body sont hérités par tous les éléments enfants.#header, ont une spécificité plus élevée et priment sur les styles globaux..header-title, peuvent également être utilisés pour appliquer des styles spécifiques mais avec une spécificité inférieure à celle des sélecteurs d’identifiant.
Exemple de pratique :
Vous avez maintenant une vue d’ensemble des bases du CSS, y compris la mise en forme des éléments, la gestion des dispositions, et les concepts avancés tels que les transitions et les animations. Le CSS est un langage incontournable pour la conception web, permettant de créer des interfaces visuellement attractives et fonctionnelles. Maîtriser les fondamentaux du CSS est essentiel pour tout développeur ou designer web.
Pour aller plus loin et approfondir vos connaissances en CSS, voici quelques ressources utiles :
