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 »
Créez deux fichiers texte (.txt)
Puis changez leurs noms et extensions :
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 :
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.
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;
} 
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.
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 :
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.
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 :
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 :
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 !!!
Partager la publication "Introduction au Cascading Style Sheets – CSS"
