Pour développer un site aussi attractif visuellement que performant, la plupart des développeurs font recours au langage CSS. L’acronyme CSS (Cascading Style Sheets) qui signifie “feuilles de style en cascade” est un langage de codage utilisé pour décrire la présentation visuelle d’un document écrit en HTML ou en XML.
Les feuilles de style permettent l’application des couleurs, des polices, des marges, des bordures et pleins d’autres effets visuels.
Dans cet article, nous allons énumérer les codes CSS les plus utilisés et que vous devez connaître pour développer votre site web.
Les sélecteurs CSS
Un code écrit en HTML contient plusieurs éléments indépendants identifiables par des balises ou encore des attributs. Les sélecteurs CSS permettent aux développeurs de cibler ces éléments et leur appliquer des styles. Il existe plusieurs types de sélecteurs CSS, les plus utilisés sont les suivants.
Le sélecteur d’élément
Il cible tous les éléments d’un type spécifique et leur ajoute un style. Par exemple, si vous souhaitez changer la taille de police de tous les paragraphes (généralement délimité par la balise p), vous devez utiliser un sélecteur d’élément :
Le sélecteur de classe
ce sélecteur quant à lui cible les éléments HTML dotés d’un attribut de classe spécifique. Si vous souhaitez par exemple modifier la couleur de police de tous les éléments de la classe “highlight”.
Le sélecteur d’identifiants
Il cible un élément spécifique avec un ID unique. Par exemple, changer la couleur d’arrière-plan d’un élément avec pour ID “header” revient à écrire ce bout de code :
Les propriétés CSS
Les propriétés CSS sont des attributs qui définissent un aspect visuel ou comportemental d’un élément HTML. Pour définir la présentation visuelle de vos sites, ceci est un incontournable à apprendre. Par ailleurs, pour un service d’hébergement fiable de vos différents sites, les hébergeurs en français sont à privilégier.
Les propriétés peuvent être utilisées pour définir la couleur de fond, la taille de la police, la marge, l’opacité etc. Voici quelques exemples de propriétés CSS.
Font
Cette propriété est utilisée pour définir la famille de police, le style, le poids et la couleur du texte. Exemple:
Background
Utilisée pour définir la couleur ou l’image de fond d’un élément HTML.
Border
Définit le style, la largeur et la couleur de bordure d’un élément HTML.
Padding
Définit l’espace entre le contenu et la bordure.
Les unités de mesure CSS
Pour spécifier les tailles et les distances pour les documents HTML, CSS utilise des unités de mesure. Les plus utilisées sont :
- Pixels (px) : unité de mesure fixe basée sur la résolution de l’écran.
Exemple : font-size : 16 px ; width : 500 px ;
- Pourcentages (%) : unité de mesure relative base sur la taille de l’élément parent :
Exemple : height : 50% ; width : 100% ;
- EMs (em) : unité de mesure relative basée sur la taille de la police de l’élément parent :
Exemple : font-size : 1.2em ; margin : 0.5em ;
Les pseudo-classes CSS
Les pseudo-classes CSS sont utilisées pour définir des styles pour des états spécifiques d’un élément HTML. Voici quelques-unes des pseudo-classes CSS les plus couramment utilisées :
- Hover : la pseudo-classe hover est utilisée pour définir des styles lorsqu’un élément HTML est survolé.
Exemple : a:hover { color : red ; }
- Active : cette pseudo-classe est utilisée pour définir des styles lorsqu’un élément HTML est cliqué ou touché.
Exemple : button:active { background-color : green ; }
- Focus : utilisé pour définir des styles lorsqu’un élément HTML fait l’objet d’une attention particulière, par exemple lorsqu’un utilisateur tape dans un champ de formulaire.
Exemple : input:focus { border-color : blue ; }
Les autres codes
Bien que les codes cités plus haut soient plus utilisés, il existe d’autres codes tout aussi important à connaître :
- Box model : Le box model est une représentation visuelle de la manière dont les éléments HTML sont structurés en CSS. Il se compose de quatre éléments principaux : la marge, la bordure, le rembourrage et le contenu.
- Flexbox : Flexbox est un module CSS qui permet de créer facilement des mises en page flexibles et réactives. Il est particulièrement utile pour créer des designs responsives.
- Grid : Grid est un module CSS qui permet de créer des mises en page en grille plus avancées que celles possibles avec Flexbox. Il est également utile pour créer des designs responsives.
- Media queries : Les media queries sont utilisées pour créer des styles spécifiques pour différents appareils et tailles d’écran. Ils sont utilisés pour rendre les designs responsives.
- Transitions et animations : Les transitions et animations CSS sont utilisées pour ajouter des effets de mouvement et de changement à des éléments HTML. Ils peuvent être utilisés pour ajouter des éléments visuels intéressants à votre site web.
Conclusion
Le langage CSS est un outil puissant pour personnaliser l’aspect et la convivialité de votre site web. En comprenant les sélecteurs CSS, les propriétés, les unités de mesure et les pseudo-classes, vous serez en mesure de créer des sites Web visuellement attrayant.
De plus, apprendre le CSS est très important si vous souhaitez devenir développeur front-end, car ce langage constitue une base pour tous les autres langages de stylisation.
Services en rapport
Création et gestion de site web Vous souhaitez créer votre site internet personnel ou d’entreprise ? Nous vous aidons dans toutes les étapes et proposons