1. Qu'est-ce que le CSS ?
CSS est un langage de style utilisé pour décrire la présentation d'une page web, incluant :
- Les couleurs,
- Les polices,
- Les espacements,
- Les dispositions (layouts),
- Les animations.
Il permet de séparer le contenu (HTML) de la présentation.
2. La syntaxe de base
Un bloc CSS se compose de :
- Sélecteur : pour cibler des éléments HTML.
- Propriétés : les aspects de l’élément à modifier.
- Valeurs : les réglages de ces propriétés.
/* Exemple de style CSS */
sélecteur {
propriété: valeur;
}
Exemple concret :
/* Change la couleur du texte des paragraphes en bleu */
p {
color: blue;
}
3. Types de sélecteurs
Sélecteurs de base :
- Tag (EN) ou balise (FR) : cible un élément HTML.
h1 {
font-size: 24px; /* Taille de police */
}
- Classe : commence par un point
.et s’applique à des éléments ayant une classe.
.exempleDeClass {
background-color: yellow; /* Couleur de fond */
}
- ID : commence par un dièse
#et s’applique à un élément avec un ID unique.
#ExempleDIDunique {
margin: 10px; /* Marges */
}
Sélecteurs avancés :
- Groupes : Applique un même style à plusieurs éléments.
h1, h2 {
color: green;
}
- Descendants : Cible les éléments enfants d’un parent.
div p {
font-style: italic;
}
4. Les propriétés CSS principales
Voici des propriétés couramment utilisées :
Texte et police :
color: Couleur du texte.font-size: Taille de la police.font-family: Type de police.text-align: Alignement (gauche, centre, droite).
h1 {
color: red;
font-size: 20px;
text-align: center;
}
Couleur et arrière-plan :
background-color: Couleur de fond.background-image: Image d'arrière-plan.
body {
background-color: #f0f0f0;
}
Espacements :
margin: Espace extérieur.padding: Espace intérieur.border: Bordure.
p {
margin: 10px;
padding: 5px;
border: 1px solid black;
}
Mise en page :
display: Type d’affichage (block,inline,flex,grid).position: Positionnement (relative,absolute,fixed).widthetheight: Dimensions.
div {
width: 300px;
height: 150px;
display: flex;
}
5. Méthodes pour intégrer le CSS
- Dans un fichier externe : Recommandé pour des projets structurés.
<link rel="stylesheet" href="styles.css">
- Dans une balise
<style>: Placée dans l’en-tête HTML.
<style>
body {
background-color: lightblue;
}
</style>
- Directement dans l’attribut HTML
style: À éviter pour des projets complexes.
<p style="color: red;">Texte rouge</p>
6. Le modèle de boîte (Box Model)
Chaque élément HTML est traité comme une boîte avec :
- Content : Le contenu principal.
- Padding : Espace entre le contenu et la bordure.
- Border : Bordure entourant le padding.
- Margin : Espace entre l'élément et les autres.
Exemple visuel :
div {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 15px;
}
7. Concepts avancés à explorer ensuite :
Media Queries : Pour rendre votre site responsive.
Flexbox et Grid : Pour des mises en page modernes.
Animations : Pour dynamiser vos interfaces.