Feuilles de style en cascade (CSS ou "Cascading Style Sheets")
Je présente ce tutorial CSS pas à pas en suivant le mieux possible les recommandations du W3C, et en vous proposant de découvrir en premier les règles essentielles de ce langage de feuille de style vous permettant de structurer convenablement vos pages (positionner les éléments) .
J'ai choisi de vous conduire en premier vers la réalisation d'une série de pages simples utilisant le CSS, et devenir de plus en plus technique et spécifique vers la fin. Je pense ainsi vous encourager à maîtriser ce langage et réaliser des documents efficaces et attractifs.
Atention : pour parvenir plus facilement à ce résultat et avancer sans problème, vous trouverez des lignes sans lien hypertexte mais avec renvoi éventuel à un numéro de page plus loin. Oui il est difficile d'expliquer une règle utilisant une propriété qui n'a pas encore été vue ! D'abord l'essentiel et ensuite les détails pour faire le tour du sujet CSS.
Excusez-moi par avance si ce dossier CSS n'a pas une présentation irréprochable et un design irrésistible, mais je souhaite dans chaque page pouvoir donner les exemples correspondants aux sujets traités et à ce titre j'utilise les codes CSS correspondants en les plaçant entre les HEAD. La mise en page normale est définie pour sa part dans un fichier centralisé de CSS .
Les pages conformes aux normes du Validator CCS reçoivent le logo suivant
: 
Les pages conformes aux normes du Validator HTML reçoivent le logo suivant
: 
Je me suis autorisé une petite entorse à ces règles en gardant le scroolbar, pour la beauté de la présentation !!!
Pour bien suivre les explications faut-il préciser que la connaissance du HTML s'avère très utile pour ne pas dire indispensable, du moins pour les éléments essentiels. Mais rien ne vous interdit d'en profiter et vous documenter au dossier "Créer sa page perso" dans les premiers chapitres qui y sont consacrés et, d'une pierre deux coups !
Pour simplifier et alléger le contenu, le terme CSS sera retenu en place de "Feuilles de style" et je vous fait grâce de l'historique que vous trouverez n'importe où, sauf à savoir qu'en réalité les définitions entre les deux termes ne sont pas strictement identiques !
La version 1.0 créé et adoptée en 1996 par le W3C.
La version 2,0 celle actuellement en vigueur depuis 1998.
La version 3.0 à ce jour à l'étude par le W3C.Visualisez et retenez la signification des trois couleurs que j'utilise pour les exemples qui existent pratiquement dans chaque page, facile.... cliquez ici
Principe de base
Lorsque vous travaillez avec le code HTML, vous mettez tranquillement en forme des documents à l'aide de tags que les navigateurs interprètent pour restituer la page origine. Vous pouvez choisir la police, corps gras ou italique ... monter des cadres, des tableaux, des liens hypertexte, positionner des retraits ... et réaliser des sites fort agréables et parfois superbes. On dit que le HTML est un langage de marque logique (vous définissez logiquement le contenu d'une page à l'aide de tags )
Vous connaissez certainement l'inconvénient majeur qui existe suite aux divergences d'interprétation des navigateurs ne restituant pas à l'identique les contenus, sans oublier les "tags propriétaires" qui fonctionnent chez l'un mais pas chez l'autre. Netscape est très pointilleux alors qu'Internet Explorer est moins sévère mais vous trouverez dans un chapître adéquat les "astuces" pour limiter les distorsions de nos chers navigateurs.
Le HTML est indispensable mais ses limites peuvent freiner votre esprit de créativité et s'il devenait possible d'ajouter un "zeste" de quelque chose qui faciliterait une avancée, ce serait idéal.
Le CSS vous apporte ce "zeste" en imbriquant son langage complémentaire au HTML de base. Il est officiellement reconnu par le W3C et donc normalisé. Attention toutefois, de même que pour le javascript, il est possible d'atteindre les mêmes buts par des scripts différents, et pour ma part je vais essayer de ne pas me laisser entraîner hors des sentiers balisés.
De plus savez-vous que le CSS est la voie royale qui mène au langage DHTML (le web en mouvement) ?
Le CSS va nous aider à mettre en forme individuellement des éléments significatifs du HTML. Il en ira ainsi pour les tags par exemple : H1, H2, P .... pas compris ? pas grave ça va venir.
Attention
Conventions
Même en recherchant la clarté pour les explications à venir, je vous ai précisé mon intention de suivre les instructions officielles du W3C. Voici un exemple permettant d'afficher le logo ... lorsque le code appliqué est bon !!! (retour assuré).
De même qu'une langue s'appuie sur la grammaire, le CSS possède
sa propre "Syntaxe" et des
règles fondamentales qu'il convient d'appliquer et respecter.
Quelle que soit sa version , une feuille de style CSS énonce des règles qui sont de deux sortes : les règles-at et les jeux de règles. Pour ne pas tout embrouiller dès le départ il ne sera pour l'instant fait mention que des "jeux de règles". Il existe aussi des possibilités ou des interdictions (qui seront mentionnées ) de laisser des "blancs" entre certains codes.
 |
Règle = h2 { font-size: 16pt ; }
Le "sélecteur" en place de "tag" (balise) du code pur HTML
h2 { font-size: 16pt ; }La "déclaration" s'applique à l'ensemble
font-size: 16ptqui à son tour se compose de deux parties :
La "propriété" ici ...... h2 { font-size: 16pt ; }
La "valeur" ici ....... h2 { font-size: 16pt ; }
et enfin :
Le mot "bloc" s'applique à un ensemble précis qui pourrait se limiter à
{ font-size: 16pt ; }
Mais comme vous rencontrez { font-size: 16pt ; font-family: arial ; } soit deux déclarations ou davantage qui se suivent, on parle alors d'un bloc de déclarations.
Les "blancs" sont permis : h2{font-size:16pt;} -ou- h2 { font-size: 16pt; }
{ ..... } les "accolades" (sur Mac alt + parenthèses)
[ ] [ .. ] les "crochets" (sur Mac majuscule + Alt + parenthèse)
" : " deux-points qui séparent la propriété de sa valeur.
" ; " point-virgule placé en fin des blocs lorsqu'une déclaration en contient plusieurs, mais si la dernière déclaration peut s'en passer, sans doute le placer partout vous évitera de calculer et de l'oublier.
" . " point utilisé pour définir des classes.
< > chevrons toujours par paire.
Si le HTML supporte que certains tags comme <P> ne soient pas fermés par </P>, en CSS TOUS les sélecteurs doivent être fermés.
Trois façons de définir une feuille de style.
A - Définition spécifique (adding in line)
Une définition peut se faire individuellement pour un mot ou paragraphe de page par exemple.
<p style="font-size: 16pt ;" >
B - Méthode interne = (embedding)
La syntaxe est incorporée à chaque fichier dans un bloc <style type="text/css"> ...... </style> placé entre les tags HEAD, et qui s'applique à la seule page ainsi marquée.
C - Méthode externe = (Lenking)
Ici vous utilisez un fichier séparé indépendant qui porte l'extension .css et contient tous les codes du CSS utilisés dans toutes les pages ou entre les tags <HEAD> et </HEAD> vous avez placé une simple ligne (toujours la même) qui servira d'appel (de trait-d'union) vers ce fichier .css
Sommaire CSS ... @ ... Méthodes spécifique
