Coco Chanel a dit un jour : « La mode se démode, le style jamais. »
Bien que Coco parlait principalement des vêtements que nous accrochons dans nos placards, je dirais aussi que le style est plus que de la mode.
Par exemple, avez-vous déjà visité un site web et pensé : « mince, c'est un beau site web » ? Il y a de fortes chances que ce site élégant ait été créé grâce au CSS.
Qu'est-ce que le CSS ?
CSS signifie Cascading Style Sheets et décrit comment les éléments HTML doivent être affichés à l'écran car il contrôle la mise en page de plusieurs pages web à la fois.
Vous pouvez avoir l'impression que le CSS et le codage peuvent être intimidants, surtout lorsque vous vous attaquez à la création de sites web en général. Croyez-moi, je le pensais aussi à un moment donné. Continuez à lire et je parie que vous serez prêt à ajouter un style sérieux à votre site web avant même de vous en rendre compte.
Intéressé par l'apprentissage de quelque chose de spécifique sur le CSS ? Passez directement à :
Qu'est-ce que le CSS ?
Pour comprendre ce qu'est le CSS, il est préférable d'expliquer comment le CSS et le HTML sont utilisés ensemble. HTML a été créé pour décrire le contenu des pages web, comme les titres et les paragraphes, et permettre l'intégration d'images et de vidéos. D'autre part, le CSS spécifie le style du document, qui inclut les mises en page, les couleurs et les polices.
Si vous pensez à votre site web comme à une maison que vous construisez, le HTML est le placoplâtre et le CSS est la peinture vive et éclatante que vous utilisez sur nos murs pour ajouter du flair.
Comment fonctionne le CSS ?
Le CSS interagit avec les éléments HTML sur les pages web pour les faire apparaître d'une certaine manière. Par exemple, si vous voulez rendre un paragraphe en gras et de couleur violette, vous l'écririez ainsi :
p {color:purple; font-weight:bold;}
Le p dans cet exemple s'alignera avec le code HTML <p> et le changera pour qu'il apparaisse en gras et violet.
Comme le HTML, le CSS est écrit en texte simple dans un éditeur de texte ou un document sur un ordinateur. Vous pouvez ajouter ce code à vos pages HTML en utilisant soit du CSS externe, interne ou en ligne.
Externe
Le CSS externe est enregistré sous forme de fichiers .css et peut être utilisé pour déterminer l'apparence de l'ensemble du site web avec un seul fichier. Pour l'utiliser, vos fichiers .html doivent inclure une section d'en-tête qui lie à la feuille externe. Cela ressemblerait à ceci :
<head>
<link rel=”stylesheet” type=”text/css” href=thestyleofmysite.css”>
</head>
Dans ce cas, thestyleofmysite.css est la feuille de style externe. Externe est la méthode efficace pour implémenter le CSS sur un site web, de plus il est facile de suivre et d'implémenter le style.
Interne
Interne est des instructions CSS écrites directement dans l'en-tête de la page .html. Vous voulez emprunter cette voie si une page de votre site web va avoir son propre look unique séparé du reste de votre site.
<head>
<style>
body {background-color:orange;}
p {font-size:24px; color:white;}
</style>
</head>
Cette page aura un fond orange avec des paragraphes de taille 24 points et une police blanche.
En ligne
Lorsque vous utilisez en ligne, des extraits de CSS sont écrits directement dans le code HTML et appliqués à une seule ligne de code.
<h2 style=”font-size:22px;color:green;”>Ceci est un titre.</h2>
Cette ligne de code rend un titre spécifique sur une page .html vert et en police de 22 points.
| En relation: Découvrez ces conseils de codage pour débutants ! |
Vous voulez en savoir plus sur Logiciel de création de sites web ? Découvrez les produits Constructeur de site web.
Syntaxe CSS
Le code réel du CSS est appelé Syntaxe CSS, et il se compose d'un ensemble de règles composé d'un sélecteur et d'un bloc de déclaration.
Un sélecteur pointe vers l'élément HTML que vous souhaitez styliser. Dans l'exemple ci-dessus, c'est le h1.
Le bloc de déclaration contient une ou plusieurs déclarations séparées par des points-virgules. Dans le bloc se trouvent une propriété et une valeur séparées par un deux-points. Ces blocs sont entourés de crochets.
Une propriété est ce qui détaille les changements comme la taille de la police ou la couleur. La valeur est le paramètre de la propriété, donc la taille et la couleur de la police spécifiques.
La syntaxe CSS ci-dessus définira votre titre H1 pour être de couleur rouge et une taille de police de 14.
Il existe également des syntaxes appelées sélecteurs de groupe. Vous utiliseriez un sélecteur de groupe lorsque vous avez plusieurs éléments que vous souhaitez avoir le même style. Donc, si vous voulez que tous vos titres après votre H1 soient centrés, bleus et de taille de police 12, vous utiliseriez un sélecteur de groupe qui ressemble à :
h2, h3, h4 {text-align:center; color:blue; font-size:12px;}
Propriétés CSS courantes
Il existe une longue liste de propriétés CSS que vous pouvez utiliser pour ajouter du style aux pages web. Ci-dessous se trouvent les propriétés CSS courantes que vous trouverez vous-même en train d'utiliser à plusieurs reprises.
Ajoutez du style avec le CSS
Assurez-vous que votre site web n'est en rien basique lorsque vous ajoutez du CSS à sa mise en forme. En changeant la couleur de la police ou en ajoutant une bordure, vous pouvez faire en sorte que votre page web se démarque de la foule lorsque vous utilisez le CSS. N'ayez pas peur de retrousser vos manches et de vous lancer pour voir de quoi parlait Coco Chanel.
Maintenant que vous avez répondu à certaines questions sur le CSS, répondez à d'autres questions qui vous préoccupent sur la création de sites web, comme qu'est-ce que JavaScript et pourquoi vous devriez apprendre à coder.
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
