Qu’est-ce que le CSS | Digital Ukhti

Qu’est-ce que le CSS ?

CSS signifie Cascading Style Sheets, soit feuilles de style en cascade.

C’est le langage utilisé pour contrôler l’apparence visuelle des éléments HTML.

Avec CSS, nous pouvons modifier les couleurs, les polices, les tailles, les espaces, les fonds, les bordures et la disposition des éléments d’une page.

Une façon simple de le comprendre : HTML crée la structure de la page et CSS détermine son apparence.

HTML et CSS travaillent ensemble.

Imaginez ce titre en HTML :

<h1>Bienvenue sur mon site</h1>

Sans CSS, le navigateur utilise ses styles par défaut.

Nous pouvons le modifier avec CSS :

h1 {
font-size: 48px;
text-align: center;
}

Le contenu reste le même. Seule sa présentation change.

Comment écrire une règle CSS.

Une règle CSS de base contient un sélecteur, une propriété et une valeur.

p {
font-size: 18px;
}

Sélecteur

p indique l’élément HTML à modifier.

Propriété

font-size indique la caractéristique à modifier.

Valeur

18px indique la valeur à appliquer.

Créez votre fichier styles.css.

Retournez dans le dossier créé dans la leçon précédente :

mi-primera-web

Il devrait déjà contenir :

index.html

Créez maintenant un second fichier nommé :

styles.css

Votre projet contient désormais deux fichiers :

mi-primera-web/
├── index.html
└── styles.css

Reliez CSS à HTML.

Créer `styles.css` ne suffit pas. Il faut indiquer au document HTML d’utiliser ce fichier.

Dans <head> de `index.html`, ajoutez :

Le début de votre document ressemblera à ceci :

<head>
  <meta charset="UTF-8">
  <title>Mon premier site</title>
  <link rel="stylesheet" href="styles.css">
</head>

Si `index.html` et `styles.css` se trouvent dans le même dossier, `href="../styles.css"` suffit.

Modifiez la police et la taille du texte.

Ouvrez `styles.css` et écrivez :

body {
  font-family: Arial, sans-serif;
}

h1 {
  font-size: 48px;
}

p {
  font-size: 18px;
  line-height: 1.7;
}

Enregistrez le fichier et actualisez la page dans le navigateur.

Vous devriez déjà constater un changement d’apparence.

Ajoutez des couleurs.

CSS permet aussi de contrôler les couleurs.

body {
background: #f7f5f0;
color: #222222;
}

Dans cet exemple :

background modifie le fond de la page.

color modifie la couleur du texte.

Comprenez margin et padding.

Les espaces sont essentiels au design web.

MARGIN

Espacement extérieur.

Crée de l’espace autour d’un élément, en le séparant des autres.

PADDING

Espacement intérieur.

Crée de l’espace entre le contenu et les bordures de l’élément.

Par exemple :

section {
margin: 40px 0;
padding: 60px 30px;
}

Donnez du style à votre première page.

Nous allons appliquer plusieurs styles ensemble.

Dans `styles.css`, essayez :

body {
  margin: 0;
  padding: 60px 30px;
  font-family: Arial, sans-serif;
  background: #f7f5f0;
  color: #222222;
}

h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

h2 {
  font-size: 30px;
  margin-top: 50px;
}

p {
  max-width: 650px;
  font-size: 18px;
  line-height: 1.7;
}

Enregistrez le fichier et rechargez `index.html`.

La structure HTML créée dans la leçon précédente devrait maintenant avoir une apparence bien plus soignée.

CSS ne change pas le sens du contenu.

Ce concept est important.

Si un élément est un titre principal, il reste un h1 que CSS le rende grand, petit, noir ou d’une autre couleur.

Construisez d’abord une structure HTML correcte. Utilisez ensuite CSS pour la présenter visuellement.

Ne choisissez pas les balises HTML selon leur apparence. Utilisez-les selon le sens et la structure du contenu.

RÉSUMÉ

Ce que vous avez appris.

CSS contrôle l’apparence des éléments HTML.
Une règle CSS contient un sélecteur, une propriété et une valeur.
Les styles peuvent être enregistrés dans `styles.css`.
HTML et CSS sont reliés avec la balise link.
CSS permet de modifier les polices et les tailles.
Il permet aussi de contrôler les couleurs et les fonds.
Margin crée un espacement extérieur.
Padding crée un espacement intérieur.
HTML définit la structure et CSS sa présentation.

MISE EN PRATIQUE

Donnez du style à votre premier site.

Ouvrez le projet commencé dans la leçon précédente et effectuez ces changements :

Créez `styles.css`.
Reliez-le à `index.html`.
Modifiez la police de la page.
Modifiez la couleur du fond.
Modifiez la taille du h1.
Augmentez l’interligne des paragraphes.
Ajoutez du padding au body.

Essayez ensuite de modifier certaines valeurs. La meilleure façon de comprendre CSS est d’observer ce qui se passe lorsque vous modifiez chaque propriété.

Ne cherchez pas encore un design parfait. L’objectif est de comprendre la relation entre HTML et CSS. Nous construirons une structure beaucoup plus complète dans les prochaines leçons.

Qu’est-ce que le CSS.