Il fut un temps où le style d’une page Web était directement dicté par le HTML.

Mélanger la structure de la page et son apparence est rapidement apparue comme une pratique peu lisible, et surtout particulièrement handicapante pour modifier l’ensemble des pages d’un site.

Car si je détermine que ma page 1 a un fond bleu et que je fabrique 100 pages partant de ce principe, ça signifie qu’au moment de modifier le fond, il faudra que je revienne sur chacune des 100 pages. Pénible, non ?

STYLE DE FEUILLES EN CASCADE

Le plus simple est donc de définir un style séparément, puis de l’appliquer à toute nouvelle page.

Pour cela, on fabrique un nouveau fichier nommé « style » par exemple, et on lui affuble l’extension « .css ». Pourquoi CSS ? Parce que c’est l’acronyme de Cascading Style Sheets (style de feuilles en cascade).

Sur chaque page, dans la partie HEAD (voir l’article sur le HTML) de ma page, il suffit d’ajouter un lien (invisible pour l’internaute) vers cette page.

Ainsi, si je veux modifier mon fond bleu, il suffit de le modifier une seule et unique fois pour que toutes les pages soient changées en un éclair.

Voici la démonstration pratique en créant une feuille de style.

Commençons par ouvrir un éditeur de texte (« bloc-notes » sous Windows, « textedit » pour Mac ou, mieux, un éditeur spécialisé comme « Sublime Text 3 ») et saisir :

body { background:blue; color:white; }
Nous avons indiqué un texte blanc sur un fond bleu.

Enregistrons ce fichier dans un dossier « monsite ». Il manque alors le fichier HTML qui va appeler le style. Je vous propose de reprendre le code du précèdent article, le document nommé « mapage.html » avec quelques ajouts, comme l’intégration du style.

<!doctype html>
<html>

<head>

<meta charset="UTF-8">
<title>Ma page Web stylisée</title>

<link rel="stylesheet" href="style.css" type="text/css" media="all" />

</head>

<body>

<div>

<p>Voici du contenu texte.</p>

</div>

<p>Voici un autre contenu de type texte.</p>

</body>

</html>
La balise meta « charset » sert à afficher correctement les caractères sur la page, tels que les accents.

Voilà, en ouvrant ma page dans votre navigateur, au lieu d’une page blanche, on se retrouve avec une page bleue.

Ça permet de bien comprendre le principe, mais le résultat n’est pas terrible (c’est le moins que l’on puisse dire !).

Exercice CSS 1

PERSONNALISATION AVANCÉE

Voyons si on peut améliorer ça 😉

Imaginons un texte gris foncé, sur un fond vert, le tout dans une page avec un fond imaginé. Pour montrer toute la puissance du CSS, nous allons ajouter une légère transparence sur le cadre contenant le texte.

De même, voyons comment il est possible d’agir différemment sur deux zones de texte.

Exercice CSS 2

Voici le code source (uniquement dans notre fichier de style) :

body {

background:url('file:///Users/netprog/Desktop/monsite/image/fond-netprog.jpg');
}

p {

color:red;

}

div {

background-color: rgba(154, 205, 50, 0.3);
width:40%;
height:150px;
padding:20px;

}

div p {

color:#333333;
font-size:20px;

}

Gestion des couleurs

Cet exemple montre bien qu’on peut obtenir des couleurs de 3 façons :

  1. Par le nom de la couleur (en anglais)
  2. Par un code de type RGB
  3. Par un code de type hexadécimal

Vous vous apercevrez que le nom des couleurs est assez limité en terme de possibilité et de nuance.

Avec le RGB (« Red Green Blue ») et l’hexadécimal on peut aller beaucoup plus loin en contrôlant les 255 nuances de rouge, de vert et de bleu.

Gestion des formes

Une forme peut avoir une longueur et une hauteur définies en pourcentage ou un pixel notamment.

Il est aussi possible d’ajouter une marge externe (margin) et une marge interne (padding).

Gestion des polices

On peut bien évidemment régler la taille, mais aussi le type de police.

Ne chargez pas des polices trop exotiques. En général, on utilise les plus connues (Arial, etc.). Mais il est possible de faire appel à une bibliothèque de polices (ce que propose Google Fonts).
Une méthode plus simple consiste à transformer un texte en image (généralement plus utilisée pour les logos notamment).

SOUPLESSE DU CSS

Le CSS permet, comme nous venons de le voir, de créer un « habillage » du site et des pages, dans un ensemble appelé généralement « template » (HTML + CSS + Javascript).

Mais il est aussi possible d’injecter du style directement dans une page.

Pratique assez mal vue pas les moteurs de recherche ! À utiliser si nécessaire avec parcimonie.

Soit dans la page, généralement dans la partie HEAD :

<head>

<style>

body { background : red; }

</style>

</head>

Soit directement dans une balise dans le BODY :

<body>

<div style=" background : red; ">Ce bloc a un fond rouge.</div>

</body>

LES BIBLIOTHÈQUES DE STYLE

Le HTML et le CSS sont des langages assez simples à prendre en main. Mais ça demande pas mal de temps à consacrer pour obtenir ce que l’on souhaite. Et encore, je n’ai pas abordé le Javascript qui est autrement plus difficile !

Le Javascript est un langage de programmation qui permet de créer des effets dans le site (afficher-masquer un bloc par exemple).

Et il manque un point crucial : rendre le style du site compatible sur ordinateur et sur mobile. Cela s’appelle le Responsive Design.

Un site « non responsive » est mal vu par les moteurs de recherche.

Heureusement, il existe des solutions toutes prêtes. Il suffit juste de les employer correctement et on gagne alors un temps fou de développement 😉

Logo Bootstrap (avec oiseau Twitter)

Parmi ces solutions « responsive« , je peux vous parler de Bootstrap créé par Twitter. Il est très apprécié des développeurs, notamment pour ses fonctionnalités LESS et SASS… dont je ne parlerai pas ici car nous ne sommes que dans la rubrique « éclairage », rappelez-vous 😉

 

 

<!DOCTYPE html>
<html>

<head>

<!-- Tout ce qui se trouve entre ces symboles est un commentaire "invisible" pour les visiteurs de votre site -->

<!-- Quelques METAS utiles au style et au formatage du texte -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Titre de la page (ne pas oublier la "meta description" !!) -->
<title>Template Bootstrap</title>

<!-- On charge le style Bootstrap via Internet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<!-- Pour Internet Explorer qui nous enquiquine toujours ! ^^' -->
<!-- [if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body>

<h1>Template Bootstrap</h1>

<!-- On charge jQuery (fonctions javascript) depuis Internet -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- On charge la seconde partie (javascript) indispensable pour les effets Bootstrap  -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

</html>

Si tout ce que j’ai écrit jusqu’ici vous paraît compliqué, sachez que nous n’en sommes encore qu’à la surface 🙂

Avant d’aborder les langages de programmation (beaucoup plus durs à utiliser), il existe des thèmes déjà fabriqués et des outils (CMS) pour simplifier la création. Même si vous en avez entendu parler, il serait bon d’aborder la notion du site statique et site dynamique.