Les pages HTML sans style peuvent sembler basiques et peu engageantes.
Cela peut frustrer les utilisateurs et donner une mauvaise impression de votre site web.
Le CSS est la solution qui permet de transformer vos pages HTML en interfaces esthétiques et dynamiques.
Lancez votre carrière de développeur web avec une formation pratique.
Introduction au langage CSS
Dans les chapitres précédents, nous avons découvert les bases de l’HTML et appris comment l’utiliser afin de rédiger des documents structurés. Ces documents contiennent des titres qui apparaissent en taille plus grande que le texte, des paragraphes marqués par des sauts de ligne, et des liens seront soulignés pour être distingués. En somme, l’HTML nous offre une lisibilité minimale sans aucune mise en style. C’est ici que le rôle du CSS (Cascading Style Sheets) se distingue : il intervient pour donner vie à ces documents en contrôlant précisément l’affichage de chaque élément HTML dans le navigateur permettant ainsi de créer des interfaces utilisateur cohérentes et esthétiques.
Le CSS peut être utilisé pour une mise en forme élémentaire des documents, comme changer la couleur, la taille et la police des titres et des liens ou des paragraphes. Par exemple vous pouvez transformer un simple texte noir en un titre coloré, en majuscule, avec une police plus grande et plus élégante ou transformer un texte affiché sur une colonne en une composition avec un cadre principal et une barre latérale. Avec le CSS, vous pouvez aussi produire des animations rendant vos pages web interactives et dynamiques. Vous pouvez créer des transitions douces entre les couleurs, faire apparaître ou disparaître des éléments, ou encore animer des objets pour attirer l’attention de l’utilisateur.
Voici une image qui montre l’apparence d’un formulaire avant et après l’application du CSS :
Il existe de nombreuse méthodes pour ajouter du style CSS à votre page web. Parmi elles, on trouve les styles en ligne, les feuilles de style externes, et les styles intégrés. Dans cette partie, nous allons découvrir la balise <style> qui permet d’intégrer directement des règles CSS dans un document HTML.
- La balise <style> :cette technique consiste à englober les règles CSS dans une balise <style> placée dans l’en-tête du document. Cette méthode est pratique si vous voulez appliquer des styles à une seule page sans créer un fichier CSS externe.
Pour la syntaxe du CSS, elle repose sur différents éléments clés permettant de cibler les éléments HTML et de définir leurs styles.
- Les sélecteurs :identifient les éléments HTML ciblés par les règles CSS. Il peut s’agir d’un élément spécifique, d’une classe, ou un identifiant unique.
Par exemple : h2{…} / va cibler tous les éléments h2/
Les accolades `{ }` encadrent les déclarations de styles associées à chaque sélecteur .
- Les propriétés :définissent les aspects spécifiques de l’élément que vous voulez modifier comme la couleur, la taille, les marges …
color: red; / Définit la couleur du texte /
- La valeur :chaque propriété doit être suivie par une valeur qui précise comment elle doit être appliquée. Les valeurs peuvent être des unités de mesure, des couleurs ou d’autre type de données. La propriété et la valeur sont séparées par deux points. Chaque déclaration se termine par un point-virgule.
Créer votre premier code CSS
Maintenant que nous avons une compréhension globale sur les concepts de base du CSS, il est temps de passer à la partie pratique. Nous allons écrire notre premier code CSS, et voir comment appliquer différents styles aux éléments HTML.
Dans cette partie on va transformer cette page HTML simple en ajoutant des propriétés comme la couleur , la taille de police et bien plus encore afin de donner vie à notre contenu .
Code utilisé :
<style>
nav{
background-color: yellow;
color: orange;
font-weight: bold;
}
article{
background-color: green;
color: yellow;
}
h1{
color: red;
text-align: center;
}
section{
background-color: blue;
color: white;
}
</style>
Pratique : Amusez-vous à changer les valeurs des propriétés dans le CodePen pour voir les changements instantanément en cliquant sur l’image suivante :
Les propriétés CSS sont très nombreuses, voici quelques-unes que vous serez amenés à utiliser très souvent :
- Color :Définit la couleur du texte . Il peut prendre les valeurs : #00008b,white, red, , rgb(255, 0, 0).
- Background-color :Définit la couleur de l’arrière-plan.
- Font-size :Définit la taille du texte , peut prendre les valeurs : 15px taille en pixel , 1.3em signifie 1,5 fois la taille du texte parent, 100%.
- Text-align :Permet d’aligner le texte , peut prendre les valeurs : left texte aligné à gauche , center texte centré , right texte aligné à droite , justify c’est-à-dire que les lignes sont étendues de sorte que chaque ligne ait la même largeur.
- Font-weight :Cette propriété permet de définir l’épaisseur du texte , peut prendre les valeurs : normal valeur par défaut , bold texte en gras ou des valeurs numériques 200 épaisseur légère , 600 épaisseur en gras ..
- Text-decoration :ajouter ou supprimer des décorations du texte . La valeur none Supprime toute décoration, underline : ajoute un soulignement au texte. line-through : Trace une ligne au travers du texte.
Positionner le CSS efficacement
Il existe plusieurs façons pour placer du code CSS dans une feuille HTML, chacune ayant son propre usage.
Voici les trois méthodes principales pour ajouter du style CSS à votre code HTML :
- CSS interne :définit dans un fichier HTML dans l’entête ; la section <head>, à l’intérieur de balises <style>. Ce type est utile si vous voulez appliquer des styles à une seule page.
- CSS inline :Le CSS inline est utilisé directement sur un élément HTML spécifique. Il vous suffit d’ajouter l’attribut style à chaque balise HTML. Cette méthode est spécifique, car elle s’applique uniquement à l’élément concerné.
<h1 style="color: red; font-size: 16px;">Ce titre est en rouge.</h1>
- CSS externe :Le CSS externe est généralement utilisée lorsque vous souhaitez appliquer des styles à plusieurs pages web en même temps. Vous pouvez lier vos pages Web à un fichier séparé avec une extension .css , vous pouvez ainsi changer tout votre site en une seule fois.
Créez un nouveau fichier .css avec l’éditeur de texte, et ajoutez les règles de style.
Dans la section <head> de votre feuille HTML, ajoutez une référence à votre fichier .css externe juste après la balise <title>.
<link rel="stylesheet" href="style.css" />
Pour conclure, nous avons découvert les bases du CSS, un langage qui permet de donner du style et de la personnalité à vos pages HTML. Nous avons exploré différentes façons d’ajouter du CSS, que ce soit en ligne, à l’intérieur de vos documents, ou via des feuilles de style externes. En apprenant à maîtriser les sélecteurs, les propriétés, et les valeurs, vous avez maintenant tout ce qu’il faut pour commencer à créer des pages web non seulement fonctionnelles, mais aussi visuellement attray
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Qu'est-ce que le CSS et pourquoi est-il important ?
Quels sont les différents types de CSS ?
Comment les sélecteurs CSS fonctionnent-ils ?
Conclusion
En découvrant les bases du CSS, vous êtes maintenant équipé pour créer des pages web esthétiques et fonctionnelles. Comment allez-vous utiliser le CSS pour transformer vos projets web?
