Un tutoriel rapide sur le langage de conception du web.
CSS (Cascading Style Sheets) est ce qui rend les pages Web attrayantes et présentables. C'est un élément essentiel du développement Web moderne et une compétence indispensable pour tout concepteur et développeur Web.
Dans cet article, je vais vous donner une introduction rapide pour vous aider à démarrer avec CSS.
Je suppose que vous avez une compréhension de base du HTML, mais à part cela, il n'y a pas de prérequis pour ce tutoriel.
Commencer
Commençons par apprendre comment nous pouvons inclure CSS dans nos projets. Il y a généralement trois façons de procéder.
1. CSS en ligne
Tout d'abord, nous pouvons inclure du CSS directement dans nos éléments HTML. Pour cela, nous utilisons l' styleattribut, puis nous lui fournissons des propriétés.
1<h1 style="color: blue"> Hello world! </h1>
Ici, nous lui donnons la propriété de color et définissons la valeur sur blue, ce qui donne ce qui suit :
Nous pouvons également définir plusieurs propriétés à l'intérieur de la stylebalise si nous le voulions. Cependant, je ne veux pas continuer sur cette voie, car les choses commencent à se compliquer si notre HTML est encombré de beaucoup de CSS à l'intérieur.
C'est pourquoi la deuxième méthode pour inclure CSS a été introduite.
2. CSS interne
L'autre façon d'inclure CSS consiste à utiliser l' styleélément dans la headsection du document HTML. C'est ce qu'on appelle le style interne.
1<head> 2 <style> 3 h1 { 4 color: blue; 5 } 6 </style> 7</head>
Dans l'élément de style, nous pouvons donner le style à nos éléments HTML en sélectionnant le ou les éléments et en fournissant des attributs de style. Tout comme nous avons appliqué la colorpropriété à l' h1élément ci-dessus.
3. CSS externe
La troisième façon, et la plus recommandée, d'inclure du CSS consiste à utiliser une feuille de style externe. Nous créons une feuille de style avec une .cssextension et incluons son lien dans le document HTML, comme ceci :
1<head> 2 <link rel="stylesheet" href="style.css"> 3</head>
Cette feuille de style peut également être importée dans d'autres HTMLfichiers, ce qui est idéal pour la réutilisation.
Sélecteurs CSS
Comme nous l'avons vu précédemment, CSS est un langage de conception utilisé pour styliser les éléments HTML. Et pour styliser les éléments, vous devez d'abord les sélectionner. Vous avez déjà vu un aperçu de la façon dont cela fonctionne, mais approfondissons un peu les sélecteurs CSS et examinons trois façons différentes de sélectionner des éléments HTML.
1. Élément
La première façon de sélectionner un élément HTML consiste simplement à utiliser le nom, ce que nous avons fait ci-dessus. Voyons voir comment ça fonctionne:
1h1 { 2 font-size: 20px; 3} 4p { 5 color: green; 6} 7div { 8 margin: 10px; 9}
L'exemple ci-dessus est presque explicite. Nous sélectionnons différents éléments comme h1, p, divet leur donnons différents attributs de style. Le font-sizecontrôle la taille du texte, colordéfinit la couleur du texte et marginajoute un espacement autour de l'élément.
2. Classe
Une autre façon de sélectionner des éléments HTML consiste à utiliser l'attribut class. En HTML, nous pouvons attribuer différentes classes à nos éléments. Chaque élément peut avoir plusieurs classes, et chaque classe peut également être appliquée à plusieurs éléments.
Voyons-le en action :
1<div class='container'> 2 <h1> This is heading </h1> 3</div>
1.container { 2 margin: 10px; 3}
Dans le code ci-dessus, nous avons attribué la classe de containerà l'élément div. Dans la feuille de style, nous sélectionnons notre classe en utilisant le .classNameformat et en lui donnant une 10pxmarge.
3. ID
Comme les classes, nous pouvons également utiliser des identifiants pour sélectionner des éléments HTML et leur appliquer un style. La seule différence entre la classe et l'ID est qu'un ID ne peut être attribué qu'à un seul élément HTML.
1<div> 2 <p id='para1'> This is a paragraph </p> 3</div>
1#para1 { 2 color: green; 3 font-size: 16px; 4}
L'exemple ci-dessus montre comment nous attribuons un ID à l'élément de paragraphe et utilisons ensuite le sélecteur d'ID dans la feuille de style pour sélectionner le paragraphe et lui appliquer le style.
Polices et couleurs
CSS nous offre littéralement des centaines d'options pour jouer avec les polices et les couleurs et rendre nos éléments HTML jolis. Nous pouvons choisir parmi deux types de noms de famille de polices :
1. Famille générique : un groupe de familles de polices avec un aspect similaire (comme 'Serif' ou 'Monospace')
2. Famille de polices : une famille de polices spécifique (comme « Times New Roman » ou « Arial »)
Pour les couleurs, nous pouvons utiliser des noms de couleurs prédéfinis ou des valeurs RVB, HEX, HSL, RGBA, HSLA.
1<div class='container'> 2 <h1 class='heading1'> 3 CSS is Coooooool!!!! 4 </h1> 5</div>
1.container { 2 width: 500px; 3 height: 100px; 4 background-color: lightcyan; 5 text-align: center; 6} 7 8.heading1 { 9 font-family: 'Courier New'; 10 color: tomato; 11}
Comme vous pouvez le voir dans l'exemple ci-dessus, nous avons un élément div avec la classe container. À l'intérieur de cette div, il y a une h1balise avec du texte à l'intérieur.
Dans la feuille de style, nous sélectionnons la classe de conteneur et définissons ses width, height, background-coloret text-align.
Enfin, nous sélectionnons la .heading1classe - qui est appliquée à la h1balise - et lui donnons les attributs de font-familyet color.