Les feuilles de style en cascade (CSS) sont un langage qui définit l'apparence d'une page web. Elles ajoutent de la couleur, du style et de la mise en page à la structure simple d'un site web. Tout comme vous choisissez vos vêtements pour vous sentir bien et avoir une apparence soignée, les CSS contribuent à embellir une page web. En développement web, les CSS permettent de modifier la couleur, la taille et la position du texte et des cadres sur la page. Cette leçon vous présentera les bases des CSS en termes simples. Nous découvrirons ce qu'est le CSS, son importance et son interaction avec le HTML.
CSS signifie « Cascading Style Sheets ». C'est un langage spécifique utilisé pour styliser les pages web. Imaginez CSS comme la peinture et les décorations d'un bâtiment. Ce bâtiment est en HTML, et CSS le rend plus beau. Grâce à CSS, vous pouvez modifier la couleur d'arrière-plan, les styles de police et l'espacement autour des éléments de votre page web. CSS est un outil qui aide les concepteurs web à améliorer l'apparence et le plaisir de leurs sites web.
Imaginez que vous coloriez un dessin. Les lignes du dessin sont comme la structure de base d'un site web. Le CSS est comme les crayons et les marqueurs qui donnent vie au dessin. Avec quelques règles simples, vous pouvez transformer votre dessin d'un simple dessin en un dessin coloré !
Le CSS est utilisé pour rendre les sites web attrayants et faciles à utiliser. Il sépare le style du contenu. Ainsi, les mots et les images de la page (fournis par HTML) restent inchangés, tandis que le CSS contrôle leur apparence. Lorsque vous mettez à jour le style, vous n'avez pas besoin de modifier le contenu. Cette séparation accélère le travail des développeurs web et rend les sites plus agréables à consulter.
Considérez le CSS comme la tenue que vous choisissez. Si vous portez des vêtements différents, vous aurez une apparence différente, mais vous resterez la même personne. Le CSS modifie l'apparence d'un site web sans en modifier les informations. Il est ainsi facile de mettre à jour l'intégralité du design d'un site web en modifiant un seul fichier CSS.
CSS fonctionne de concert avec HTML. HTML est la base qui définit l'emplacement des éléments sur une page web. CSS intervient ensuite pour ajouter des couleurs, des polices et du style. Lorsqu'un navigateur charge une page web, il construit d'abord la structure avec HTML, puis applique les styles définis en CSS.
CSS est écrit comme un ensemble de règles. Chaque règle est composée de deux parties : un sélecteur et un bloc de déclaration. Le sélecteur indique au navigateur l'élément HTML à styliser. Le bloc de déclaration contient une ou plusieurs déclarations. Chaque déclaration possède une propriété et une valeur. La propriété correspond à ce que vous souhaitez modifier, et la valeur indique comment le modifier.
Par exemple, pour définir la couleur d’arrière-plan de la page sur bleu clair, vous pouvez écrire une règle qui ressemble à ceci :
<code>corps {
couleur d'arrière-plan : bleu clair ;
}</code>Cette règle simple modifie l’arrière-plan de la page entière.
Une règle CSS de base suit un modèle simple. Elle affiche le sélecteur et un bloc de propriétés et de valeurs. Ce modèle se présente comme suit :
<code>sélecteur {
propriété : valeur ;
}</code>Ici, le sélecteur choisit l'élément HTML à cibler. La propriété correspond à ce que vous souhaitez modifier, et la valeur correspond à la manière dont vous souhaitez le modifier.
Par exemple, si vous voulez que tout le texte du paragraphe soit bleu, vous écrivez :
<code>p {
couleur : bleu;
}</code>Cette règle indique au navigateur Web que chaque élément <p> (paragraphe) doit avoir du texte bleu.
Les sélecteurs CSS vous permettent de choisir les éléments de votre page web qui seront affectés par les règles de style. Il existe plusieurs types de sélecteurs, chacun fonctionnant différemment.
Ces différents sélecteurs vous offrent une grande liberté pour personnaliser le style de certaines parties de votre page web. Ils vous permettent de cibler précisément les éléments et de définir leur apparence.
CSS propose de nombreuses propriétés permettant de styliser votre page web. Chaque propriété permet de modifier un aspect spécifique de l'apparence d'un élément. Voici quelques propriétés courantes :
Chaque propriété CSS est suivie d'une valeur. Par exemple, pour colorer du texte en rouge, vous pouvez écrire :
<code>p {
couleur : rouge ;
}</code>Cette règle simple impose que tous les paragraphes aient du texte rouge. La propriété color contrôle l'apparence du texte et la valeur red lui indique la couleur à utiliser.
Le terme « cascading » en CSS signifie que les styles peuvent s'appliquer d'une règle à l'autre. Si deux règles s'appliquent au même élément, l'ordre peut déterminer laquelle l'emporte. Ce principe est similaire à l'empilement de blocs, où un bloc recouvre parfois une partie d'un autre.
Une règle courante est que les styles écrits directement dans un élément HTML (appelés styles en ligne) remplacent les styles de votre fichier CSS. Une autre règle est que si un élément parent est stylisé, ses éléments enfants peuvent hériter de ce style, sauf indication contraire.
Par exemple, si vous définissez la couleur du texte d'un élément <div> sur vert, le texte à l'intérieur de l'élément <div> apparaîtra souvent également vert par héritage. Cela contribue à maintenir une conception cohérente sur une page web.
Avec CSS, vous pouvez modifier les couleurs de plusieurs façons. Vous pouvez utiliser des noms de couleurs courants comme red , blue et green . Vous pouvez également utiliser des codes hexadécimaux comme <code>#FF0000</code> pour le rouge, ou des valeurs RVB comme <code>rgb(255, 0, 0)</code>.
Les polices sont un autre élément important du CSS. Une police est comparable au style d'écriture que vous choisissez dans un carnet. En CSS, vous pouvez modifier la famille, la taille, la graisse et le style de police. Par exemple, si vous souhaitez que vos paragraphes apparaissent en Arial, vous pouvez utiliser :
<code>p {
famille de polices : Arial, sans-serif ;
}</code>Cette règle indique au navigateur d'afficher le texte dans la police Arial si elle est disponible et d'utiliser une autre police similaire si elle ne l'est pas.
Changer les couleurs et les polices avec CSS rend le texte plus facile à lire et votre page Web plus intéressante à regarder.
Le modèle de boîte CSS permet de comprendre comment les différentes parties d'un élément sont disposées sur une page. Chaque élément est comme une boîte. Le modèle de boîte est composé de quatre parties :
Imaginez une photographie. La photographie elle-même constitue le contenu. Le passe-partout qui l'entoure constitue le rembourrage. Le cadre qui maintient l'ensemble forme la bordure. Et l'espace autour du cadre forme la marge. Grâce à ce modèle, vous pouvez vous assurer que tous les éléments de votre création bénéficient d'un espace et d'un équilibre adéquats.
Le CSS ne se limite pas aux couleurs et aux polices ; il permet également d'organiser les éléments d'une page web. C'est ce qu'on appelle la mise en page et le positionnement. Avec le CSS, vous pouvez décider de l'emplacement de chaque élément sur la page.
Il existe plusieurs façons de contrôler la mise en page d'une page Web, notamment :
Utiliser ces techniques de mise en page revient à disposer des jouets sur une étagère. Vous décidez de l'emplacement de chaque jouet afin qu'ils aient tous suffisamment de place et soient bien rangés. Votre page web est ainsi plus organisée et attrayante.
Voici un exemple de la façon dont HTML et CSS fonctionnent ensemble. Cet exemple de code présente une page web simple avec quelques éléments de style :
<code><!DOCTYPE html>
<html>
<tête>
<style>
corps {
couleur d'arrière-plan : bleu clair ;
}
h1 {
couleur : bleu marine ;
taille de police : 24 px ;
}
p {
couleur : vert ;
taille de police : 18 px ;
}
</style>
</head>
<corps>
<h1>Ma première page Web</h1>
<p>Il s'agit d'une page Web simple stylisée à l'aide de CSS.</p>
</body>
</html></code>Ce code crée une page web avec un arrière-plan bleu clair. Le texte de l'en-tête est bleu marine et celui du paragraphe est vert. Le code CSS de la balise <code><style></code> montre comment les règles sont écrites et appliquées.
Vous pouvez ajouter du CSS à votre code HTML de trois manières principales. Chaque méthode a son utilité propre selon la situation :
La méthode externe est la plus courante dans le développement Web professionnel, car elle maintient le HTML propre et vous permet de mettre à jour les styles sur plusieurs pages à la fois.
CSS est très utile à bien des égards. Voici quelques avantages de son utilisation dans le développement web :
Utiliser CSS, c'est comme disposer d'une boîte à outils dédiée. Chaque outil vous permet d'améliorer facilement l'apparence de votre page web. En vous exerçant, vous découvrirez l'importance des CSS pour créer des sites web attrayants et conviviaux.
Chaque site web que vous visitez utilise CSS d'une manière ou d'une autre. De vos sites de dessins animés préférés aux pages de projets scolaires, CSS permet de créer une mise en page ludique et facile à lire. Lorsqu'une page web colorée, bien espacée et avec un texte clair, c'est CSS qui est à l'œuvre.
Pensez à la conception de sites web populaires, comme ceux dédiés aux jeux, aux dessins animés ou aux histoires en ligne. Une utilisation judicieuse des couleurs, des polices et de la mise en page contribue à rendre ces sites attrayants et attrayants. Le CSS est également utilisé dans les applications et les sites mobiles, garantissant un affichage optimal du contenu sur les grands écrans comme sur les petits téléphones.
Au quotidien, le CSS s'apparente à la décoration d'une pièce. Vous pouvez choisir un thème pour votre pièce, accrocher des tableaux colorés et disposer vos meubles avec soin. Le CSS fait de même pour les sites web. Il apporte ordre et beauté à l'espace numérique, le rendant ainsi agréable à visiter.
Voici les principaux points que nous avons appris sur CSS :
Le CSS est un élément essentiel du développement web, car il rend les sites web plus beaux et faciles à naviguer. En explorant et en créant vos propres pages web, n'oubliez pas que le CSS est votre outil d'expression créative. Amusez-vous à expérimenter avec les couleurs, les polices et les mises en page, car chaque petite modification contribue à la beauté d'un site web bien conçu.
Continuez à vous entraîner et à observer vos sites web préférés. Remarquez comment différents styles sont utilisés pour capter votre attention et créer une expérience agréable. Avec le temps, vous constaterez la puissance du CSS pour transformer de simples structures HTML en pages web visuellement attrayantes.