Un des concepts majeurs des feuilles de style est contenu dans son nom : CSS pour « Cascading Style Sheets » soit « feuilles de style en cascade ». L’avantage de l’utilisation d’un fichier CSS pour la mise en forme d’un site réside, par exemple, dans la possibilité d’agir sur le rendu visuel de tous les titres du site en une seule fois en modifiants une seule partie du fichier CSS. Sans ce fichier CSS, il serait nécessaire de modifier chaque titre de chaque page du site (difficilement envisageable pour les énormes sites de plusieurs milliers de pages).
Une feuille de style CSS est un complément indispensable à un fichier HTML pour aboutir à la conception d’une page web.
Interprétée par le navigateur, elle permet la transformation du contenu brut du fichier HTML en page agréable à regarder ou à imprimer.
Comme avec le langage HTML, la feuille de style CSS n’est rien de plus qu’un fichier en texte brut, parfaitement lisible par le moindre éditeur de texte. Plus encore que pour HTML, le CSS est extrêmement simple à lire : color : red ; background-color : yellow ; donnera à l’élément concerné une couleur rouge et un arrière plan jaune. Cependant, comme pour tous les langages du web qui sont interprétés coté internaute, par les navigateurs, il peut y avoir de leur un problème d’interprétation ou de respect des standards, qu’ils soient nouveaux ou anciens et donc des différences de rendu visuel.
Enfin, l’intérêt de la feuille de style CSS réside aussi dans les possibilités de spécifier quelques critères d’application des styles. C’est la clef principale du « Responsive design », c’est-à-dire l’art d’adapter la présentation d’une page web HTML à l’écran sur lequel elle est regardée , en fonction en particulier du nombre de pixels disponibles en largeur et hauteur.
Créer et lier la feuille de style à une page HTML
La création d’une feuille de style reste une opération très simple. À l’aide d’un éditeur de code (dans notre cas Dreamwaver), Il suffi de créer un nouveau document et de choisir le format CSS. Une fois le fichier créé, il nous suffi de le sauvegardé dans le dossier destiné à héberger l’ensemble des éléments de style en respectant les standards du web pour le nommer (pas d’espace, pas d’accent, pas de caractères spéciaux et présence de l’extention .css).
Une fois l’opération de création du document effectué, il nous faudra créer une liaison entre notre page HTML et la feuille de style. Cette opération ne nécessitera qu’une simple ligne de code basée sur la balise HTML auto-fermante <link /> et ses attributs entre les balises <head> et </head> de notre page.
Dans l’illustration ci-dessus, nous pouvons voir la balise <link /> et les attribut obligatoires et nécessaires au bon fonctionnement de la liaison avec la feuille de style. Il est important de respecter la ponctuation et la bonne orthographe de chaque attributs.
- href : Correspond à l’URL de notre feuille de style. Cet URL sera de type relatif et s’appuiera sur la structure hiérarchique des dossiers composant notre site.
- type : Permet de spécifier le type de document, ici nous avons un document rédigé en texte brut basé sur la syntaxe du code CSS.
- rel : Défini la relation entre la page HTML et le document cité. La valeur donnée à cette relation est « stylesheet » (feuille de style).
Exemple concret
N.D.L.R. : Nous nous appuyons sur la structure hiérarchique d’un dossier de site comme présenté dans l’article « Bien organiser son site web ».
Dans le code suivant, nous allons importer une feuille de style nommée « mon-style.css », situé dans le dossier « styles » présent à la racine du site, depuis une page HTML.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de ma page</title>
<link href="styles/mon-style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<!-- Contenu de ma page -->
</body>
</html>