CSS (Cascading Style Sheets) est un langage de feuilles de style utilisé pour décrire la présentation et la mise en forme d'un document écrit en HTML ou XML. Il permet aux développeurs de séparer la conception visuelle et la mise en page d'une page Web de sa structure et de son contenu.
En séparant la conception visuelle (CSS) de la structure et du contenu (HTML), les utilisateurs peuvent simplement modifier le fichier CSS pour obtenir un design complètement différent.
Le site Web CSS Zen Garden en est une démonstration. Le site répertorie des variations de sa conception. La seule chose qui crée ce changement visuel est l'utilisation d'un fichier CSS différent.
La plupart des sites Web utilisent CSS. Dans la section head du HTML d'une page se trouve une URL pointant vers un ou plusieurs fichiers CSS.
CSS fonctionne en associant des règles de style à des éléments HTML spécifiques ou à des groupes d'éléments, contrôlant des aspects tels que les couleurs, les polices, l'espacement, le positionnement, et plus encore.
Exemples d'utilisation de CSS :
Style de texte :
h1 {
color: #333;
font-size: 24px;
font-weight: bold;
}Cette règle CSS définit la couleur, la taille de la police et l'épaisseur de la police pour tous les éléments de la page.
Mise en page et positionnement :
.container {
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}Cette règle CSS définit la largeur d'un élément avec la classe « container », le centre horizontalement sur la page et utilise flexbox pour distribuer uniformément ses éléments enfants.
Conception réactive :
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}Cette requête média CSS applique des styles aux éléments avec la classe « column » lorsque la largeur de l'écran est de 600 pixels ou moins, rendant la mise en page réactive à différentes tailles d'écran.
Les requêtes média permettent aux sites Web d'être beaux sur les grands moniteurs ainsi que sur les tablettes et les téléphones mobiles.
Effets spéciaux : Animations et transitions :
.button {
background-color: #007bff;
color: #fff;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}Cette règle CSS définit la couleur d'arrière-plan et la couleur du texte pour les éléments avec la classe « button » et ajoute un effet de transition fluide lorsque la couleur d'arrière-plan change au survol.
Ce ne sont là que quelques exemples de la façon dont CSS est utilisé pour styliser et formater les pages Web.
CSS offre une large gamme de propriétés et de sélecteurs qui permettent aux développeurs de créer des conceptions visuellement attrayantes et réactives, améliorant l'expérience utilisateur et rendant les sites Web plus attrayants.