III. Découvrir le CSS
CSS signifie Cascading Style Sheets. Il complète le HTML en définissant l’apparence, la couleur et la mise en page des éléments.
Relier une feuille de style
La méthode recommandée consiste à placer le fichier CSS à côté du fichier HTML et à le relier dans l’élément <head>.
<link rel="stylesheet" href="Style.css">Dans les exemples qui suivent, chaque règle comprend un sélecteur puis une ou plusieurs déclarations.
Les sélecteurs
Un sélecteur cible les éléments HTML auxquels appliquer un style.
p {
color: #2448c7;
}
h1 {
text-align: center;
}Les classes et les identifiants
Une classe peut être utilisée sur plusieurs éléments. Un identifiant sert à identifier un élément unique dans la page.
/* HTML : <p class="texte">...</p> */
.texte {
color: #2448c7;
}
/* HTML : <h2 id="titre-principal">...</h2> */
#titre-principal {
color: #172f86;
}En CSS, une classe commence par un point (.) et un identifiant par un dièse (#).
Couleurs et arrière-plans
Les couleurs peuvent être indiquées avec un nom, une valeur hexadécimale ou un autre format reconnu par CSS.
body {
color: #18243a;
background-color: #f3f6fb;
}
.carte {
background-color: white;
border-color: #dce3ef;
}Typographie, bordures et espacements
La typographie améliore la lisibilité. Les bordures et les espacements aident à délimiter et organiser le contenu.
h1 {
font-family: Arial, sans-serif;
font-size: 2rem;
}
.carte {
border: 1px solid #dce3ef;
margin: 1rem;
padding: 1.5rem;
}margin: espace à l’extérieur de l’élément.padding: espace entre le contenu et la bordure.border: bordure autour de l’élément.