au sommaire
Les feuilles de stylesstyles (en anglais "Cascading Style Sheets", abrégé CSS) sont un langage qui permet de gérer la présentation d'une page Web. Le langage CSS est une recommandation du World Wide Web ConsortiumWorld Wide Web Consortium (W3C), au même titre que HTML ou XML.
Les styles permettent de définir des règles appliquées à un ou plusieurs documents HTML. Ces règles portent sur le positionnement des éléments, l'alignement, les polices de caractères, les couleurscouleurs, les marges et espacements, les bordures, les images de fond, etc.
Le but de CSS est séparer la structure d'un document HTML et sa présentation. En effet, avec HTML, on peut définir à la fois la structure (le contenu et la hiérarchie entre les différentes parties d'un document) et la présentation. Mais cela pose quelques problèmes. Avec le couple HTML/CSS, on peut créer des pages web où la structure du document se trouve dans le fichier HTML tandis que la présentation se situe dans un fichier CSS.
Avec CSS on peut par exemple définir un ensemble de règles stylistiques communes à toutes les pages d'un site internet. Cela facilite ainsi la modification de la présentation d'un site entier. CSS permet aussi de définir des règles différentes pour chaque support d'affichage (une navigateur classique, une télévision, un support mobilemobile, un lecteur braille...)). CSS permet aussi d'améliorer l'accessibilité des documents web.
De plus, CSS ajoute des fonctionnalités nouvelles par rapport à HTML au point de vue du style. En effet, HTML permet une gestion assez sommaire du style des documents.
Voici un exemple de règle CSS :
p font-color: red; font-size: 12pt
Explications : cette règle définit la couleur et la taille du texte pour les éléments <p> (paragraphes) d'un document HTML. Ainsi, tous les paragraphes auront une police de couleur rouge et une taille de 12 points.
Le CSS c'est quoi ?
Même si d'autres langages peuvent être utilisés, on trouve principalement 4 langages qui donnent au web d'aujourd'hui sa forme: HTML, CSS, Javascript et PHPPHP. HTML et CSS sont des langages descriptifs, Javascript et PHP sont des langages de programmation.
HTML et CSS servent à décrire comment une page web est présentée. HTML est le cœur du web, son ossature. Il structure les différents éléments d'une page web. CSS permet de formater ces éléments, de leur donner un style visuel.
CSS est l'abréviation de Cascading Style Sheets qui signifie feuilles de style en cascade. Le mot cascade rappelle ici que les styles peuvent être classés selon différents degrés d'importance. CSS permet donc de contrôler de manière précise comment un site web est présenté.
Les feuilles de style CSS, comment ça marche ?
"css-miami-desktop" © par geirarne
Tout comme HTML, CSS est un langage facile à prendre en main. Le style d'un document web peut être implémenté directement dans le code HTMLcode HTML ou inséré dans un document différent.
Dans la ligne
Il est possible d'appliquer du CSS directement dans la balise HTML d'un élément avec l'attribut style.
Exemple : -p style="background-color: #FFFFFF; »-Mon texte-/p-. Cet exemple applique un arrière-plan blanc au paragraphe "Mon texte".
En interne
Plutôt que de mettre un peu de CSS dans chaque balise HTML, il est possible de le réunir dans une balise -style- à l'intérieur de la balise -head- en début de document HTML.
Exemple : -style type="text/css"-p {background-color: #FFFFFF;-/style-. Ceci s'applique alors à tous les paragraphes du document.
La feuille de style en externe
À cause notamment de la taille des sites web aujourd'hui et des très nombreux styles qui peuvent apparaître, ces 2 types d'implémentation ne sont plus vraiment utilisés. En effet le style d'un site web peut contenir des centaines voire des milliers de lignes de code.
La feuille de style est la manière recommandée de formater un document HTML. On crée tout un document dédié au style et écrit en CSS, souvent appelé style.css. Il se présente ainsi :
Sélecteur {propriété: valeur; propriété: valeur; propriété: valeur;}
Sélecteur {propriété: valeur;}
Sélecteur {propriété: valeur; propriété: valeur;}
Le sélecteur est le type d'élément sur laquelle on va appliquer un style (les balises de titre et de paragraphe par exemple). La propriété est ce qui va être modifié : l'arrière-plan, une police, la largeur d'un élément.
En reprenant le même exemple que précédemment on a :
p {
background-color: #FFFFFF;
}
Le style est ensuite appliqué grâce un lien à l'intérieur de la balise -head- du document HTML. Un seul site internet peut contenir plusieurs feuilles de style si nécessaire et une seule feuille de style peut s'appliquer sur plusieurs pages. C'est la méthode la plus efficace.
À quoi sert le CSS ?
Le CSS permet donc de définir l'esthétique d'un site web. Sans CSS, une page web ne serait qu'une succession d'éléments noirs sur fond blanc les uns à la suite des autres.
C'est avec du code CSS que l'on définit par exemple :
- la police d'un texte et son aspect (couleur, taille, etc.);
- les marges et le rembourrage (padding) entourant un élément;
- l'apparence d'un menu;
- la création d'éléments géométriques;
- la mise en place de grilles d'images;
- l'ajout de bordure;
- l'applicationapplication de différents effets ou animations simples;
- le changement de présentation d'un site selon l'appareil utilisé par l'utilisateur (téléphone portable, ordinateur, tablette);
- la manière dont on navigue dans un site internet.
