Les avantages des CSS

Quelle que soit la taille de votre site Web, son design évoluera avec le temps. Parce qu'ils permettent de séparer le contenu de sa présentation, les CSS représentent le moyen idéal pour permettre cette évolution sans avoir à réécrire l'ensemble de vos pages.
Accueil > introduction-css

En bref ...

Qu'est-ce (que sont) que le(s) CSS ? C'est un système destiné à mettre en forme les contenus de pages Web. La partie CSS d'un document Web se contente de définir les différents styles de textes ou de blocs qui seront utilisés pour la mise en forme tandis que la partie HTML ne contient que le texte encadré de quelques balises. Chaque style CSS se voit attribuer un nom. Pour attribuer l'un de ces styles à un segment de texte particulier, il suffit d'ajouter les attributs "class=nom_du_style" ou "id=nom_du_style" au sein de n'importe quelle balise HTML.

CSS

+

HTML

=

Résutat

.mon_style {
color: red;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
  <p class="mon_style">Texte auquel le style s'applique>  
Texte auquel le style s'applique

Que signifie le sigle CSS ? CSS est l'abréviation de "cascading style sheets" (feuilles de style en cascade). Dans le système du CSS, on crée des styles de présentation dont on définit les caractéristiques (taille et couleur du texte, par exemple). Ces définitions peuvent figurer dans un ou plusieurs documents séparés du document contenant le texte de la page. Un style défini dans un document peut être redéfini ou légèrement modifié par un autre document qui sera situé après lui dans l'ordre de lecture. Il peut également être redéfini dans une balise. Ces définitions/redéfinitions sont donc faites en "cascade".

CSS

+

HTML + CSS

=

Résutat

.mon_style {
color: red;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
  <p class="mon_style" style="color:blue" >Texte auquel les styles s'appliquent>  
Texte auquel les styles s'appliquent

Pourquoi utiliser les CSS ? Une fois votre site organisé à l'aide de CSS, il vous suffira de changer les définitions de style figurant dans une seule feuille CSS pour que l'ensemble de votre site soit mis à jour et voit sa présentation modifiée. Les CSS permettent également les présentations "alternatives" qui offrent à l'internaute le choix de l'habillage du site. En vous obligeant à structurer vos pages de façon précise, les CSS vous amènent à organiser votre site, ce qui facilitera grandement ses évolutions futures. Cette organisation facilite également l'"accessibilité" de votre site, c'est-à-dire sa navigation à travers des moyens un peu particuliers (navigation sans souris pour les handicapés moteurs, navigation à l'aide de lecteurs automatiques, pour les malvoyants, etc.)



En détail ...

Pourquoi est-il souhaitable de séparer la présentation du contenu ? L'avantage principal de cette séparation est de faciliter la maintenance du site, c'est-à-dire ses capacités d'évolution dans le temps. On peut également souhaiter :
1- Clarifier le code ou alléger la lecture du code (un code moins brouillon sera plus facile à consulter, donc à étudier, à modifier ou à transmettre à quelqu'un d'autre)
2- Faciliter la modification de la présentation ou du contenu (possibilité de travailler en équipe plus efficacement, par exemple)
3- Uniformiser la présentation sur plusieurs pages (un seul fichier CSS à modifier pour que les changements se répercutent sur l'ensemble du site)
Consulter l'article très complet du W3C du Québec à ce sujet.
On oublie cependant souvent que cette séparation n'est pas toujours possible ni souhaitable. Lire à ce sujet "Le Full CSS est-il un mythe ?".

Qu'est-ce que la sémantique ? La sémantique étudie la signification d'un discours, c'est-à-dire le sens des mots et des phrases. Dans le cadre de l'utilisation des balises HTML, la sémantique consiste à définir un sens précis à chaque balise et à utiliser chacunes d'elles en respectant strictement les usages qui leurs sont réservés. H1, strong, H3 encadrent des titres, par exemple, et vous ne devez pas utiliser ces balises pour "mettre en gras" une portion de texte qui n'est pas un titre. La balise <p> ne devrait jamais être utilisée pour créer un espace, mais uniquement pour encadrer une portion de texte indépendante, etc. Respecter la sémantique des balises, permet de structurer le document correctement, indépendamment de la forme qu'il va prendre. Ceci permet aux programmes qui traiteront l'information contenue dans la page (dont Google ou les lecteurs de pages pour handicapés, par exemple), de l'interpréter correctement, et donc de l'utiliser comme il se doit. . Le respect de cette sémantique est donc un avantage en termes d'accessibilité. Consulter l'article de OpenWeb pour en savoir plus.

Qu'est-ce que l'accessibilité d'un site Web ? Un site est dit accessible lorsqu'il est utilisable dans un grand nombre de conditions de navigation. L'accessibilité du Web intéresse aussi bien les personnes handicapées (par une inaptitude physique ou une déficience visuelle, auditive, cognitive, neurologique ou liée à la parole) que tout individu devant faire face à des difficultés liées à des aspects intrinsèques (langue maternelle, culture, tranche d'âge) ou à leur environnement (matériel et logiciel désuets, infrastructure réseau obsolète, droits réseaux limités, connexion à faible débit, contexte de navigation). Le W3C Québecpropose une réflexion détaillée sur ce thème. A lire aussi : "Accessibilité, oublions les handicapés" par cybercodeur.

Quelle est la différence entre class et ID ? Les classes sont destinées à être utilisées plusieurs fois dans le document HTML qui sera mis en forme alors que les ID ne doivent en principe être utilisés qu'une seule fois dans chaque page HTML. Pour définir une classe CSS, on ajoute un point devant son nom. Pour définir une ID, on ajoute un dièse devant son nom. A titre d'exemple :

  • On utilisera une classe pour définir un style de paragraphe.
  • On utilisera une ID pour définir la position d'un bloc particulier dans la page.

Les ID sont également pratiques pour l'utilisation de certaines fonctions des langages Javascript et Flash pour lesquels ils remplacent peu à peu l'attribut "name". On appelle dorénavant les objets et calques avec getElementById, ce qui facilite la compatibilité entre tous les navigateurs. Ajoutons enfin que l'ID peut servir d'ancre de navigation : le code <a href="#nom_du_style">Voir le bloc</a> permet de naviguer jusqu'au bloc ayant l'ID "nom_du_style".

Définition CSS

Utilisation HTML

Application

Classe

.nom_du_style
<balise class="nom_du_style">
Une seule classe peut être appliquée à plusieurs blocs dans la même page.

ID

#nom_du_style
<balise id="nom_du_style">
Un ID s'applique à un objet unique : il ne doit pas y avoir deux mêmes ID dans une page.

Qu'est-ce que le W3C ? W3C est l'abréviation de " World Wide Web Consortium". Il s'agit d'une association démocratique gérée par le Massachusetts Institute of Technology (MIT) au USA, le European Research Consortium for Informatics and Mathematics (ERCIM) en Europe et l' Université Keio au Japon. L'objectif de ce consortium est de définir les règles d'écriture des langages du Web (HTML, CSS, Javascript, etc.). Pour faire court, disons que le W3C est aux langages du Web ce que l'académie française est à la langue française.

Pourquoi faire valider ses pages Web par W3C ? Faire valider ses pages, c'est s'assurer qu'elles sont conformes aux normes édictées par le W3C. Pourquoi respecter l'orthographe et la grammaire ? Pour s'assurer qu'on sera bien compris par tout le monde. Ce n'est pas strictement indispensable, mais ça aide beaucoup !
Note : Validateur.ca permet de vérifier/valider l'ensemble de votre site en une seule opération.

Qu'est-ce qu'un "DocType" et à quoi ça sert ? Le langage HTML évolue avec les années. Le doctype d'une page Web indique aux navigateurs ou autres lecteurs de pages qu'elle est la version précise du langage utilisé afin qu'ils sachent exactement comment "comprendre" le contenu de cette page. DocType est l'abréviation de "document type", c'est-à-dire "type de document". Le doctype est une ligne qui doit être placée en tête de page, avant quoi que ce soit d'autre, et qui doit respecter une syntaxe extrêmement précise pour être valable. Le coin des experts et Alsacréations vous proposent d'autres réflexions sur ce sujet.

Qu'est-ce qu'un contener ? C'est le nom donné par les utilisateurs des forums à une balise créée dans le but de positionner une partie de page Web. Exemple :

<div id=bloc_exemple>
Exemple de texte
<img src="images/exemple-image.jpgf" alt="image" width="100" height="100">
</div>

Dans cet exemple, la balise <div> n'a d'autre but que "d'encadrer" le texte et l'image dans le but de positionner ce contenu. Cette balise ayant un "ID", on va pouvoir déplacer son contenu par une liste dattributs CSS telle que :

#bloc_exemple {position: absolute; left: 100px; top: 150px;}

Dans la plupart des cas, c'est la balise <div> qui est utilisée comme contener, mais ce terme n'est pas spécifiquement réservé à cette balise.

Des mises en page un peu maladroites peuvent aboutir à une multiplication de conteners <div> à l'intérieur d'une page. On parle alors ironiquement de "divite", comme s'il s'agissait d'une maladie.

Qu'est-ce qu'un layer (calque) ? C'est le nom donné par les utilisateurs des forums à une balise ayant l'attribut "position: absolute". Cette appellation a d'abord été utilisée par le logiciel d'édition "Dreamweaver" avant de se généraliser. On comprend le sens de cette appellation lorsque l'on réalise que des blocs positionnés en absolu peuvent se superposer les uns aux autres, tout comme des calques.

Qu'est-ce que les "pseudo-frames" (pseudo-cadres) ? Il existe un système de mise en page nommé "frames" (ou "cadres") qui permet de contruire une page Web à partir de plusieurs documents HTML. Ce système est malheureusement victime de graves inconvénients parfaitement résumés par Denis Boudreau. Les "pseudo-frames" tentent de proposer les avantages des "frames" sans en avoir les inconvénients. Le but principal d'une mise en page en "pseudo-frames" est d'avoir un menu fixe et un contenu fluide, comme sur www.rankspirit.com !

 

Apprendre les CSS en douceur
CSS-Faciles propose une initiation aux CSS en douceur,
ainsi que des exemples et une liste complète des propriétés CSS


Mise en page en CSS prêtes à l'emploi
Le site SeftHTML propose une dizaine de kits gratuits


Pour tout savoir sur les CSS
Forum CSS Le forum dont vous ne pourrez plus vous passer : Alsacreations
Démonstration utilisation CSS Le site qui a convaincu toute une génération de webmasters : CSSZenGarden
Liste des propriétés All CSS properties listed alphabetically : blooberry
A voir aussi :

Pour débutants Pour Experts

de a à z Créer un site en HTML/CSS à partir de zéro : site du zéro

trucs et astuces avancées Trucs et astuces en CSS : W3C Quebec

de a à z CSS : on reprend tout à zéro ! par Pompage

trucs et astuces de webby Les trucs et astuces de Webby

Trucs et astuces Trucs et astuces en CSS : OpenWeb

tips Astuces diverses : Slaout

Le b.a. ba Démarrer avec les CSS : MammouthLand

liste balises Toutes les balises CSS et leurs syntaxes : SelfHTML

bases Les bases du CSS : W3Schools

Définitions Les définitions du W3C

Demandez un devis à l’agence SEO.fr (15 ans d’expérience)