Nous avons pu voir dans un précédent article comment construire une page web avec le langage HTML. Nous allons voir dans cet article comment lui donner du style avec un langage adapté, le CSS.
Le CSS (Cascading Style Sheets ou Feuille de style en cascade) permet de définir la présentation des document HTML et XML.
Avant d’aller plus loin, il est fortement conseillé d’avoir lu l‘article sur l’HTML.
Le style, la base…
Reprenons donc une structure basique de document HTML :
< !-- fichier index.html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
<link rel= « stylesheet » href= « ./css/style.css » >
</head>
<body>
<h1>Mon premier site web!</h1>
</body>
</html>
La ligne qui nous intéresse ici, est celle-ci :
<link rel= « stylesheet » href= » ./css/style.css » >. Cette ligne de code, permet de dire au document HTML qu’un fichier CSS se trouve dans le répertoire css et son nom est style.css. C’est dans ce document que nous allons définir la présentation de notre document.
Admettons que nous voulions changer la couleur de fond de notre page web, pour la mettre en rouge. Le principe est le suivant : depuis la feuille de style, nous devons sélectionner l’élément HTML que nous voulons modifier, puis y définir des styles.
< !-- fichier css/style.css →
body {
background : red ;
}
Sauvegardez le fichier, puis retourner sur votre navigateur et rafraichissez… Magie !
C’est finalement assez simple de définir une présentation pour un document :
- on définit quel élément nous voulons modifier
- entre accolades, on inscrit les différentes propriétés que l’on souhaite attribuer à l’élément.
Un autre exemple, avec notre balise de titre <h1>, nous allons changer la couleur du texte :
< !-- fichier css/style.css →
h1 {
color: white ;
}
Sauvegardez le fichier, puis retournez sur votre navigateur et rafraichissez… Magie !
Le style, avec classe…
Il paraît évident que dans un même document HTML nous pouvons avoir plusieurs fois le même élément, par exemple dans un article, nous avons plusieurs balises <p> qui vont contenir tous les paragraphes. Alors comment faire pour en modifier qu’un seul ?
Reprenons notre document HTML :
< !-- fichier index.html -->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>Mon premier site web!</h1>
<p>Mon premier paragraphe</p>
<p>Mon deuxieme paragraphe</p>
</body>
</html>
L’idée est de pouvoir modifier le style du second paragraphe, sans modifier le premier. Pour cela, nous utiliserons l’attribut class des éléments HTML, comme ceci :
< !-- fichier index.html -->
....
<body>
....
<p class="modifier">Mon deuxieme paragraphe</p>
</body>
</html>
< !-- fichier css/style.css →
body {
background : red ;
}
h1 {
color: white ;
}
.modifier {
background : black ;
color : white ;
}
Nous avons donc rajouté une classe au paragraphe que nous voulions modifier. Si vous allez sur votre navigateur et que vous rafraîchissez vous pourrez voir les modifications.
Il existe énormément de sélecteurs en CSS. Pour en savoir plus, je vous conseille les sites suivants :
Vous pouvez faire des essais sur votre blog. En effet, avec le rôle Administrateur, dans Tableau de bord / Apparence, il existe une entrée « Modifier le CSS ». Vous pouvez ajouter le code nécessaire pour modifier l’apparence de votre blog, visualiser en aperçu ce que cela donnerait et enregistrer si cela vous convient. En cas d’erreur, il vous suffit d’effacer la ou les lignes correspondantes pour retrouver l’apparence d’origine.