Apprendre le code CSS
Auteur: Winkin Adrien
Publié le 15-08-2023 | Catégorie: Développement front-end
Dans cet article, nous allons voir les bases du langage de programmation le plus complémentaire au HTML, à savoir, le langage CSS. Après avoir lu cet article, vous aurez les connaissances nécessaires pour commencer à créer vos premiers design sur vos pages.
Qu'est-ce que le langage CSS?
Le CSS (cascading style sheets) est un langage de programmation qui sert uniquement à appliquer du style et à contrôler l'apparence de nos codes HTML. Le code CSS vise seulement (ou presque) à appliquer du style statique tel que de la coloration, des espaces et autres. Le style dynamique tel que les animations est pris en charge par du JavaScript et d'autres frameworks dont nous parlerons dans un autre article.
Comment applique-t-on le CSS
Il y a trois façons d'insérer du code CSS dans nos pages web.
- La balise <link> : Lorsque nous créons un fichier CSS (donc avec l'extension .CSS) et que nous souhaitons l'appliquer à une page HTML, nous utilisons la balise <link> commme suit : <>. Vous devrez mettre ce code dans la balise <head>
- La balise <style> : cette balise est placée directement dans la section <head> de la page HTML à laquelle elle est destinée. Dans cette balise, on écrit directement le code CSS qu'on veut appliquer à la page. L'avantage est qu'il n'y a pas besoin de créer de fichier supplémentaire pour le CSS. Le désavantage est qu'il faut, à chaque fois qu'on veut le réutiliser, recopier le code sur les pages en questions.
- L'attribut style : d'abord, un attribut est une propriété qu'on peut rajouter directement dans une balise HTML. Du code CSS peut-être directement insérer via cet attribut. Voici un exemple : <span style=color:blue;>Ceci est un conteneur span</span> ==> Ceci est un conteneur span
Les sélecteurs
Voici les 4 sélecteurs déléments HTML pour appliquer du code CSS
- Sélecteur d'élément : il permet de styliser tous les éléments du même type, par exemple, "p" pour les paragraphes.
- Sélecteur de classe : les classes sont des attribut qu'on insère directement dans les éléments HTML (par exemple : <span class = ma_classe>). Nous pouvons donc styliser des éléments avec une classe spécifique, en appelant la classe comme cela ==> .ma_classe.
- Sélecteur d'identifiant : ce sont exactement les même que les classes sauf que, pour les insérer comme attribut, on remplace le mot "class" par "id" et on les appelle avec le # dans le code CSS. par exemple, #mon_id
- Sélecteur descendant : styliser un élément à l'intérieur d'un autre élément, par exemple, "div p" pour tous les paragraphes à l'intérieur des divisions. Honnêtement, je ne vous recommande vraiment pas d'utiliser ces sélecteurs parce qu'ils ne sont pas pratiques.
Quelques propriétés importantes de CSS
Dans cette partie, nous allons voir une liste de propriété du langage CSS que vous utiliserez fréquemment dans vos futurs codes CSS. Ensuite nous verrons un exemple pratique de ces propriétés dans un code.
Liste des propriétés
- color : définit la couleur d'un texte (avec un code hexadécimal).
- background-color : définit une couleur d'arrière plan pour les éléments sélectionnés.
- margin-top/right/left/bottom : définit un espace à gauche, à droite, en haut ou en bas d'un élément (en px = pixels).
- padding-top/right/left/bottom : définit un agrandissement à gauche, à droite, en haut ou en bas d'un élément (en px).
- font-family : définit une police de caractères pour un élément.
- width et height : définissent respectivement la largeur et la hauteur de l'élément (en px).
- border : rajoute des bordures autour d'un élément.
- font-size : définit la taille de la police (en px).
Voilà un bref aperçu des principales propriétés en CSS. Je précise que je n'ai pas parlé des propriétés de (dis)position car j'estime qu'elles ne sont pas utiles. En effet, lorsque vous aurez appris développer responsive avec bootstrap (un article sortira bientôt), vous utiliserez les classes de ce framework pour déterminer la (dis)position de vos éléments HTML.
Exemple pratique de ces propriétés
<head>
<style>
.ma_div{
color:#00FF00;
}
.maclass{
background-color:red;
}
#monid{
margin-bottom:12px;
}
</style>
<head>
<body style=font-family:Lato,sans-serif;>
<h2 id=monid>Voyons les différents conteneur en HTML</h2>
<div class=ma_div>
<h3>Ceci est un titre 3.</h3>
<p class=maclass>Ceci est un paragraphe.</p>
<div>Ceci est une division.</div>
</div>
</body>
Résultat de l'exemple
Voyons les différents conteneur en HTML
Ceci est un titre 3.
Ceci est un paragraphe.
Ceci est une division.
Conclusion
Le langage CSS joue un rôle vital dans le développement web front-end en permettant de styliser et de mettre en forme les pages HTML. Cet aperçu du langage CSS devrait vous donner une base solide pour commencer à créer des mises en page attrayantes. À partir de ces concepts fondamentaux, vous pouvez explorer d'avantage et vous aventurer dans des propriétés CSS plus avancées pour améliorer vos compétences en design web.
Pour vous permettre d'aller plus loin, je vous mets la documentation CSS en lien ici.