Introduction au Cascading Style Sheets – CSS

Lorsque vous développez votre site Internet, il est coutume de dissocier le langage HTML, qui permet d’afficher du contenu Web, et le langage CSS qui quant à lui permet de personnaliser graphiquement vos pages Web. Nous allons aujourd’hui nous intéresser de plus prêt au CSS et commencer par voir comment cela fonctionne

Le Cascading Style Sheets (CSS), ou Feuilles de Styles en Cascade, en est actuellement à sa troisième version. C’est un langage de programmation Web qui permet de mettre en page du code HTML. Il faut donc comprendre que le contenu et le design d’un site Internet sont traité avec deux langages différents. Nous allons ici faire une première approche du CSS pour comprendre comment il s’associe au HTML.

 

Préparation

Avant de commencer, nous allons créer un dossier nommé CSS1 dans lequel nous ajouterons deux fichiers : index.html et main.css.
N’oubliez pas que pour créer vos fichiers, vous devez créer un fichier .txt (index.txt et main.txt), puis changer les extensions. Pour faire cela sous Windows, je vous invite à regarder le tutoriel Changer mes extensions de fichier sous Windows.

Créez le dossier « CSS1 »

PrtScr capture

 

Créez deux fichiers texte (.txt)

CSS1

 

CSS1_2

 

 

Puis changez leurs noms et extensions :

CSS1_3

 

Vous constaterez dès lors que les icônes des fichiers auront changé. (ici l’icône du fichier CSS est modifié par Dreamweaver)

 

Ouvrez ensuite vos fichiers dans Notepad++ ou l’IDE de votre choix. (un IDE est un logiciel qui permet de coder).

 

Lier le fichier HTML et le fichier CSS

Pour que le code CSS s’applique sur le code HTML, il faut lier les deux fichiers. Cela se passe dans le fichier HTML entre les balises d’ouverture et de fermeture <head></head>. Nous allons y déclarer le fichier CSS en indiquant le chemin vers le fichier CSS depuis le fichier HTML. A noter qu’il est possible, bien entendu, de déclarer plusieurs fichiers CSS.

Il faut donc saisir le code suivant dans le fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Introduction au CSS</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

La balise link permet donc de lier un fichier HTML avec un fichier CSS. La balise link est une balise auto-fermante. Cela signifie que la balise se ferme elle-même sans avoir besoin d’ajouter une balise fermante du type <title></title>.

L’attribut href, permet d’indiquer le chemin vers le fichier CSS à lier. Ce chemin doit être inscrit entre guillemets. Dans notre exemple, le chemin indique qu’il faut pointer vers le fichier main.css qui se trouve dans le même dossier que le fichier index.html.

Si nous avions placé le fichier css dans un dossier « css » lui même placé au même endroit que le fichier index.html, nous aurions saisi href= »css/main.css ».

Si nous avions souhaité faire appel à un fichier à la racine de votre site Internet, nous aurions saisi href= »/main.css ».

Si nous avions souhaité faire appel à un fichier placé au dessus du dossier dans lequel est stocké le fichier index.html, nous aurions saisi href= »../main.css »

Ce type de chemin sont des chemins relatifs, à contrario des chemins absolus qui sont du type href= »https://rollingbox.com/main.css ». Les chemins absolus contiennent donc les noms de domaine. Ces chemins ont l’inconvénient de ne pas être flexible. Si le site change de nom de domaine, par exemple, il va falloir modifier l’ensemble des liens CSS du site Internet.

Les attributs rel= »stylesheet » et type= »text/css » permettent d’indiquer au navigateur le type de fichier et le langage qui le compose.

Nous allons tester le bon fonctionnement en faisant un petit test. Nous allons ajouter une couleur de fond à notre page index.html. Pour ce faire, rendez-vous sur le fichier main.css et saisissez le code suivant :

body {
background:blue;
}

Vous devez alors avoir un fond bleu sur votre page :

Introduction au CSS - Google Chrome

 

 

La structure du code CSS

Comme tous langages, le code CSS a sa propre structuration. Les saisies ci-dessous ne sont pas réelles mais indicatives. Elles sont expliquées juste après. Elle est ici simple :

cible {
propriété:valeur;
}

Cible => permet de cibler le contenu

Propriété => permet d’appliquer un style au contenu (couleur, graisse de police, tailles…)

Valeur => Donne la valeur du style à appliquer (bleu, rouge, vert, 10px, bold…)

Il faut fermer le couple propriété: valeur avec le « ; »

 

Cibler les contenus à personnaliser graphiquement

Trois manières permettent de cibler le contenu que vous souhaitez personnaliser.

 

Cibler les balises

CSS permet de cibler directement toutes les balises d’une page. Pour ce faire, il faut déclarer les balises dans le fichiers CSS et saisir les propriétés et leurs valeurs pour modifier le contenu.

Fichier index.html

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Introduction au CSS</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<p>paragraphe 1</p>
<p>paragraphe 2</p>
<p>paragraphe 3</p>

</body>
</html>

Fichier main.css

body {
background:#dddddd;
}

p {
background:#ffffff;
}

 

Dans notre exemple, nous ciblons deux balises html de la page index.html : <body> et <p>. Nous appliquons des couleurs de fond, gris pour le body, et donc la page, et blanc pour toutes les balises p.

Introduction au CSS - Google Chrome_3

 

Il est aussi possible de cibler une balise insérée dans une autre. Nous allons ici modifier la couleur du texte du paragraphe 2.

Pour commencer, nous allons ajouter les balises <span> autour du texte du paragraphe 2 :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Introduction au CSS</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<p>paragraphe 1</p>
<p><span>paragraphe 2</span></p>
<p>paragraphe 3</p>

</body>
</html>

Enfin, nous allons cibler la balise span et modifier la couleur du texte du paragraphe :

body {
background:#dddddd;
}

p {
background:#ffffff;
}

p span {
color:red;
}

Introduction au CSS - Google Chrome_4

 

Cibler les identifiants

Dans une page HTML, il est possible d’allouer un identifiant à une balise pour diverses raisons (CSS, JavaScript…). Une règle première quant aux identifiants est qu’ils doivent-être uniques dans une page. Voyons ci-dessous comment cibler un identifiant :

Fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Introduction au CSS</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1 id="titre-page">Le titre de ma page HTML/CSS</h1>

</body>
</html>

 

Fichier main.css

body {
background:#dddddd;
}

#titre-page {
background:#ffffff;
border:solid 1px #aaaaaa;
font-size:30px;
color:blue;
}

Nous avons ici ciblé l’identifiant « titre-page » et appliqué un fond de couleur blanc, un trait de bordure gris, une taille de police de 30px et enfin une couleur de texte bleue. Notez bien ici, que dans le fichier CSS, l’identifiant est précédé par  » #  » (un dièse) en préfixe du nom.

Introduction au CSS - Google Chrome_5

Comme pour les balises, il est possible de cibler un identifiant inséré dans un autre. Pour le démontrer, nous allons changer la couleur du mot page dans notre titre :

Fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Introduction au CSS</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1 id="titre-page">Le titre de ma <span id="mot-rouge">page</span> HTML/CSS</h1>

</body>
</html>

 

Fichier main.css :

body {
background:#dddddd;
}

#titre-page {
background:#ffffff;
border:solid 1px #aaaaaa;
font-size:30px;
color:blue;
}

#titre-page #mot-rouge {
color:red;
}

 

Voici donc le résultat :

Introduction au CSS - Google Chrome_6

 

Cibler les classes

Comme pour les identifiants, il est possible d’ajouter une classe à des balises HTML. Contrairement aux identifiants, ces classes ne sont pas obligatoirement uniques dans une page. On peut ainsi créer des styles identiques à appliquer à plusieurs contenus dans une page.

Fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Introduction au CSS</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1 class="titre-page">Le titre de ma page HTML/CSS</h1>

</body>
</html>

 

Fichier main.css :

body {
background:#dddddd;
}

.titre-page {
background:#ffffff;
border:solid 1px #aaaaaa;
font-size:30px;
color:blue;
}

Nous avons ici appliqué les mêmes propriétés et valeurs que lorsque nous avions ciblé l’identifiant. Nous avons utilisé à la place une classe. Il faut noter qu’ici, dans le fichier CSS, pour cibler une classe, nous utilisons  » .  » (un point) en préfixe du nom.

Introduction au CSS - Google Chrome_5

 

 

Comme pour les balises et les identifiants, il est possible de cibler une classe à l’intérieur d’une autre classe :

Fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Introduction au CSS</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1 class="titre-page">Le titre de ma <span class="mot-rouge">page</span> HTML/CSS</h1>

</body>
</html>

 

Fichier main.css :

body {
background:#dddddd;
}

.titre-page {
background:#ffffff;
border:solid 1px #aaaaaa;
font-size:30px;
color:blue;
}

.titre-page .mot-rouge {
color:red;
}

 

En voici de nouveau le résultat :

Introduction au CSS - Google Chrome_6

 

Mélanger les manières de cibler les contenus

Il est possible d’utiliser toutes les manières citées ci-dessus pour cibler des contenus d’une page. En voici quelques exemples :

Cibler toutes les balises header, p et footer d’un contenu ayant l’identifiant #parent :

Fichier index.html :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Introduction au CSS</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

<article id="parent">
<header>
<h2>Titre de mon article</h2>
</header>
<p>
Ici un paragraphe avec pleins de mots. J'en ai beaucoup en tete, voir meme un peu trop, je ne vais donc pas tous les citer. Je crois meme qu'il y en a ici suffisamment. Ici un paragraphe avec pleins de mots. J'en ai beaucoup en tete, voir meme un peu trop, je ne vais donc pas tous les citer. Je crois meme qu'il y en a ici suffisamment. Ici un paragraphe avec pleins de mots. J'en ai beaucoup en tete, voir meme un peu trop, je ne vais donc pas tous les citer. Je crois meme qu'il y en a ici suffisamment.
</p>
<p>
Ici un paragraphe avec pleins de mots. J'en ai beaucoup en tete, voir meme un peu trop, je ne vais donc pas tous les citer. Je crois meme qu'il y en a ici suffisamment.
</p>
<footer>
Auteur : JCVD
</footer>
</article>

</body>
</html>

Fichier main.css :

body {
background:#dddddd;
}

#parent {
background:#fff;
border:solid 1px #aaa;
padding:20px;
}

#parent header h2 {
background:#f1f1f1;
color:blue;
font-size:30px;
padding:10px
}

#parent p {
text-align:justify;
font-size:16px;
color:#404040;
}

#parent footer {
padding:5px;
background:#f1f1f1;
text-align:right;
color:#aaa;
font-size:14px;
}

En voici le résultat :

Introduction au CSS - Google Chrome

 

Voilà, je vous laisse ici. N’hésitez pas à poser des questions si ce n’est pas clair, à donner vos observations et à tester de votre côté pour progresser ! N’hésitez pas non plus à partager si vous avez apprécié cet article 🙂 .

 

A vos claviers !!!

Publié le : 12 octobre 2014

Articles relatifs