CSS (Cascading Style Sheets) est un langage utilisé pour décrire la présentation d'une page web écrite en HTML. Il permet de contrôler l'apparence des éléments, comme les couleurs, les polices, les marges, et bien plus encore.
1. Structure de Base d'une Règle CSS
Une règle CSS est composée d'un sélecteur et d'un bloc de déclaration :
sélecteur {
propriété: valeur;
}
Exemple :
p {
color: blue;
font-size: 16px;
}
2. Méthodes pour Ajouter du CSS
1. CSS en ligne :
Ajouté directement dans une balise HTML avec l'attribut style.
<p style="color: red;">Texte rouge</p>
2. CSS interne :
Inclus dans une balise <style> dans le <head> du document HTML.
<style>
body {
background-color: lightgray;
}
</style>
3. CSS externe :
Stocké dans un fichier .css séparé et lié avec <link>.
<link rel="stylesheet" href="styles.css">
3. Sélecteurs CSS
1. Sélecteurs de base :
Type : p (sélectionne toutes les balises <p>).
Classe : .classe (sélectionne les éléments avec une classe spécifique).
ID : #id (sélectionne un élément avec un ID spécifique).
2. Sélecteurs combinés :
Descendant : div p (sélectionne les <p> dans un <div>).
Groupe : h1, h2 (sélectionne les <h1> et <h2>).
3. Pseudo-classes :
:hover (appliqué lorsqu'un élément est survolé).
a:hover {
color: green;
}
4. Propriétés CSS Essentielles
1. Couleurs et arrière-plans :
color : Définit la couleur du texte.
background-color : Définit la couleur de fond.
body {
color: black;
background-color: white;
}
2. Texte :
font-size : Taille de la police.
font-family : Police utilisée.
text-align : Alignement du texte.
h1 {
font-size: 24px;
text-align: center;
}
3. Boîte et marges :
margin : Espace extérieur.
padding : Espace intérieur.
border : Bordure autour d'un élément.
div {
margin: 10px;
padding: 20px;
border: 1px solid black;
}
5. Mise en Page avec CSS
1. Flexbox :
Permet de créer des mises en page flexibles.
.container {
display: flex;
justify-content: center;
align-items: center;
}
2. Grid :
Permet de créer des grilles complexes.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
6. Exemple d'un Fichier CSS Complet
/* Styles globaux */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
}
/* En-tête */
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
/* Navigation */
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
}
nav a:hover {
text-decoration: underline;
}
/* Section principale */
main {
padding: 20px;
}
/* Pied de page */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
7. Conclusion
CSS est un outil puissant pour transformer une page HTML simple en une interface utilisateur attrayante et professionnelle. En maîtrisant les bases comme les sélecteurs, les propriétés et les mises en page, vous pouvez créer des designs modernes et réactifs.
Retour à la liste
Richard Bonnegent
Commentaires (0)