Propriétés CSS
Créer une Classe CSS
Une classe CSS permet de réutiliser un style sur plusieurs éléments.
.bouton {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
Utilisation dans le HTML
<button class="bouton">Cliquez-moi</button>
<button class="bouton">Ou moi</button>
Premiers styles essentiels
color
Couleur de texte :
Applique une couleur violette au texte.
.titre {
color: purple;
}
background-color
Couleur de fond :
Donne un fond gris clair à l'élément.
.boite {
background-color: lightgray;
}
border-radius
Arrondi des coins :
Rend les coins arrondis.
.carte {
border-radius: 15px;
}
text-align
Centrer un texte :
Aligne le texte au centre.
.texte-centre {
text-align: center;
}
Pratique guidée : Carte d'utilisateur
- HTML de base
<div class="carte">
<h2 class="titre">John Doe</h2>
<p class="texte">Développeur web passionné.</p>
</div>
- CSS associé
.carte {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
width: 300px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.titre {
font-size: 24px;
color: #333;
}
.texte {
font-size: 16px;
color: #666;
}
- Résultat attendu
Une jolie carte d'utilisateur avec un fond clair, des coins arrondis, et une ombre légère.