CSS : généralités

Les langages HTML & CSS sont complémentaires.
HTML structure le texte c'est à dire précise pour chaque élément son importance et sa nature.
CSS met en forme la page : les boites, les lignes, les caractères, les images, les liens, les tableaux, etc.

Ou écrire le CSS

CSS dans la page

Le CSS qui régit la mise en forme peut être écrit sous forme de règles de style dans la partie HEAD de la page et plus précisément à l'intérieur de la balise double SCRIPT. On parle alors de feuille de style interne.
Vocabulaire : une feuille de style est un groupe de règles de style.

Dans un fichier CSS

Imaginez que votre site comprend une centaine de page mais et que chaque page contient une feuille de style.
Imaginez maintenant que votre supérieur vous demande de modifier la largeur de la page afin qu'elle s'affiche proprement même sur de petits écrans.
Vous allez devoir modifier 100 pages !!! Un travail fastidieux qu'il aurait été facile d'éviter ...

Les règles de style applicables à toutes les pages du site doivent être écrites dans une feuille de style externe c'est à dire dans un fichier d'extension .css et qui ne contient que du code CSS.

Pour que la feuille de style externe soit prise en compte au niveau de chaque page il faudra écrire dans la partie HEAD de chaque page un lien vers le fichier CSS.
Imaginons que la feuille de style externe ait pour nom "mon_style.css" et que ce fichier soit dans le même dossier que la page web. Il faudra écrire dans chaque page web : <link rel = stylesheet href ="mon_style.css" />

Style en ligne

Exemple : dans tous les paragraphes le texte doit être justifié.
Donc dans la feuille de style il y a la règle de style suivante : p {text-align : justify; }
Mais exceptionnellement pour une poignée de paragraphes on souhaite un texte centré.
Il suffit d'écrire du CSS dans ces balises P via l'attribut style pour gérer l'exception.
Ainsi le code HTML & CSS d'un paragraphe concerné sera le suivant :

<p style ="text-align : center;">Blabla ... <br>Blabla ... <br>Blabla ... </p>

Lorsque le style est écrit dans la balise on dit qu'elle est "en ligne".
Cette méthode est à éviter car elle revient à mélanger le HTML et le CSS.
Pour gérer les exceptions il est préférable d'utiliser une classe.

La règle de style

Une feuille de style (interne ou externe) est un ensemble de règles de style.

Structure d'une règle de style

Le sélecteur indique les éléments HTML de la page concernés par la règle de style.

Chaque déclaration est de type : propriété : valeur ;

N'oubliez pas le caractère de ponctuation ; pour séparer chaque déclaration.

Exemple de règle de style

body {font-size : 12px; width : 900px ; margin : 10px auto 10px auto ; }
Cette mise en forme s'applique à la balise BODY c'est à dire la page.
Les caractères du texte auront une taille de 12 pixels ; la page aura une largeur de 900 pixels (l'écran d'un ordinateur portable fait souvent 1400 pixels).

Attention jamais d'espace entre le nombre (de pixels) et "px" !
Grâce à la troisième déclaration la page sera centrée horizontalement dans l'écran.

margin est une méga-propriété c'est à dire une propriété qui peut être suivie de plusieurs valeurs.

La syntaxe de la propriété margin : margin : marge_haut marge_droite marge_bas marge_gauche
La valeur auto pour les marges externes droite et gauche indique que c'est au navigateur de calculer ces marges pour que la page soit centrée ! Si la largeur de l'écran est 1366 il va opérer le calcul : 1366-900 = 466 donc marge gauche = marge droite = 466/2 = 233 !

Les sélecteurs

Sélecteurs simples

Prenons quelques exemples !

h1 {...} : cette règle s'applique à toutes les balises H1 de la page.

* {...} : cette règle concerne toutes les balises de la page ; * est le sélecteur universel !

h1, h2, h3 {...} : cette règle s'applique aux balises H1 et h2 et H3 de la page.

div p {... } : cette règle concerne les balise P mais pas toutes ! Seulement les balises P comprises dans le conteneur DIV quelque soit le niveau d'imbrication dans DIV (descendants directs et indirects).

div > p {...} : ne pas confondre avec la règle précédente ; ne concerne que les balises P "enfants" (descendants directs) de P.

Un peu plus compliqué

Certains éléments HTML de la page peuvent avoir l'attribut class et/ou l'attribut ID.

.info {... } : cette règle de style s'applique à toutes les éléments ayant l'attribut class ="info" quelque soit le type de balise car il s'agit d'une classe universelle.

p.remarque {... } : par contre cette règle de style concerne uniquement aux balises P ayant l'attribut class ="remarque" car j'ai défini ici une classe spécifique (propre à la balise P).

#entete, #pied {...} : cette règle s'applique seulement à deux éléments de la page ! l'élément ayant l'attribut id ="entete" et celui ayant l'attribut id ="pied".

Une classe peut être attribuée à plusieurs éléments de la page alors qu'un ID ne peut être attribué qu'à une seule balise.

p.info.remarque{...} : cette règle s'applique aux éléments dont l'attribut class ="info remarque" . On peut en effet affecter plusieurs classes à un élément HTML.

img + p {font-style : italic ;} : cette règle de style s'applique uniquement à la balise P qui suit une image. Donc en fait à la légende de l'image qui sera donc en italique !

[alt] {... } : cette règle de style s'applique à toutes les balise ayant l'attribut alt et quelque soit la valeur de cet attribut. Je rappelle que l'attribut alt est conseillé pour les images (balise IMG) afin d'améliorer le référencement du site.
Comme l'attribut alt est spécifique à la balise IMG j'aurais pu écrire : img [alt] {...}

Les pseudo-classes

Grâce aux pseudo-classes la mise en forme d'un élément peut changer à l'occasion d'un évènement concernant cet élément : survol, clic.
Les pseudo-classes sont apparues avec la version 2 et elles sont très pratiques car elles évitent de recourir à la programmation javaScript pour produire des effets graphiques.

a:hover{color : red; } : Utilisation de la pseudo-classe :hover qui veut dire sur survol. Donc un lien hypertexte (balise A) survolé par la souris est écrit en rouge.

img {width : 100px ;}
img:active {width : 400px; }
: Deux règles de style relatives aux images de la page ; elles sont affichées avec une largeur de 100 pixels normalement mais si clic sur l'une d'entre-elles alors la taille d'affichage de cette dernière est quadruplée !
Donc ici j'ai associé à la balise IMG la pseudo-classe :active (sur clic) pour construire le sélecteur.

Les pseudo-éléments

Les pseudo-éléments permettent de cibler certaines fractions de texte pour une mise en forme spécifique.

p:first-letter {font-size : 200% ; Float : left ; } : La première lettre de chaque paragraphe va apparaitre sous forme d'une lettrine.

p:first-line {font-weight : bold ; } : la première ligne de chaque paragraphe sera en gras.

h1:before {content : "chapitre : " ;} : Le texte de chaque balise H1 sera précédé de "chapitre :"

.ordre:after{content : "!" ;} : le texte de chaque élément affecté de la classe "ordre" sera suivi d'un point d'exclamation.

Notion d'héritage

La hiérarchie des éléments de la page

Exemple

Extraits de la partie BODY d'une page

<h1>Titre principal</h2> <div id ="entete"> <h2>Titre de l'en-tête</h2> <p>Corps du texte de la boite entete</p> ... </div> <!-- fin boite entete --> <hr> <div id ="menu"> <h2>Tite du menu</h2> <a href ="#">Lien 1 </a> ... <div id ="corps"> <h2>Titre du corps de la page</h2> <div id ="images"> <img src ="../images/latino_bikini.jpg" alt ="jolie fille" class ="grand"/> <img src ="../images/noire_bikini.jpg" alt ="jolie fille" class ="grand" /> </div> <!-- fin boite images --> <div id ="css" class ="texte"> ... </div><!-- fin boite css --> <div id ="html" class ="texte"> ... </div> <!-- fin boite html --> <div id ="divers"> <table> ... </table> <ul>Liste à  puces : ... </ul> ... </ol> </div> <!-- fin boite divers --> </div> <!-- fin boite corps --> <a href ="#">Retour haut de page </a> </body>

Analyse de cette structure

Tous les éléments de la pages sont imbriqués dans BODY. On dit que tous les éléments sont descendants de BODY.
Dans l'exemple ci-dessus les éléments DIV identifiés "entete", "menu" et "corps" ainsi que la balise H1 sont descendants directs (ou "enfants") de BODY.
Par contre les balises H2, les DIV identifiés "images", "css", "htlm" et "divers" sont incorporés dans le bloc "corps". Ce sont donc des descendants indirects de BODY (des "petits enfants").

Les balises isolées (ou simples) telles IMG,BR,HR peuvent être comprises dans une balise double (ou conteneur) mais jamais le contraire.

Notez que certaines balises ont des attributs : ici ID et/ou class.

Héritage

Héritage, c'est quoi ?

Certaines propriétés CSS peuvent être héritées c'est à dire que définies au niveau d'un élément parent elles se propagent aux descendants.

Connaissant le principe de l'héritage les feuilles de style peuvent être très succinctes !

Exemple

Extrait d'une feuille de style :

body {font-family : arial ; font-size : 12px ;} h1,h2,p, a, ul,ol,li {font-family : arial ; font-size : 12px ;}

La deuxième règle de style est totalement inutile !
En effet les balises citées dans le sélecteur de la deuxième règle (h1,h2, ... ) sont forcément descendantes de BODY puisque BODY est l'élément ancêtre. Donc ces balises héritent de BODY puisque les deux propriétés CSS citées sont transmissibles.

Attention certaines propriétés (peu nombreuses) ne peuvent être héritées par les descendants.
C'est le cas des propriétés de bordurage (border-width, border-style, border-color ou la méga propriété border).

Renoncer à l'héritage

La propagation d'une propriété aux éléments descendants n'est pas forcément souhaitable.

Exemple

Tout le code de la page doit être dans une police avec serif (ou empattements) sauf les extraits de code.

Feuille de style correspondante

body {font-family : Times New Roman,serif; } xmp {font-family : Arial, sans-serif; }

Explications

Tout le code HTML & CSS à l'intérieur du conteneur XMP n'est pas exécuté par le navigateur mais simplement affiché !
La propriété CSS font-family a pour valeur : une liste de polices ou de famille de polices ou un mélange des deux.
Il existe 3 familles de polices : serif, sans-serif,cursive.

Dans l'exemple tout le texte de la page sera en TNR (Times New Roman)ou à défaut une autre avec empattements.
Par contre le texte inclus dans le conteneur XMP qui sera affiché en Arial (ou à défaut une autre police sans empattements).

Règles de priorité

Il peut y avoir un conflit entre les différentes règles de style s'appliquant à une balise.

Exemple

Extrait de la feuille de style externe : p {color : navy; }

Extrait de la feuille de style interne (dans la page) : p {color : black; }

Code d'une balise de la page : < p style ="color : purple;"> Je porte une soutane violette ! <p >

Le texte "je porte une soutane violette !" sera t-il en bleu marine ou noir ou violet ?

Retenez : la règle en ligne est prioritaire sur la règle interne qui elle-même est prioritaire sur la règle externe !

Rappels HTML

HTML & CSS sont deux langages complémentaires. Pour maitriser CSS il faut connaitre le HTML.
Ainsi si vous ne connaissez pas les balises HTML vous ne pouvez pas imaginer les sélecteurs des règles de style CSS !
Pour bien écrire le CSS il faut bien comprendre la distinction en HTML entre balises "inline" et balises "block".
En effet certaines propriétés CSS sont spécifiques aux éléments "block". Pour prendre un seul exemple : le centrage horizontal d'un élément dans son conteneur parent n'est possible avec CSS que si l'élément en question est de type "block" !

Eléments "inline" et éléments "block"

Dans le cadre du positionnement normal dit "dans le flux" les éléments "inline" se positionnent côte à côte tandis que les éléments "block" se positionnent les uns en dessous des autres. En d'autres termes il n'y a pas de saut de ligne pour les éléments en ligne alors qu'il y en a pour les blocs.
Les éléments blocs sont appelées aussi "boites".
Les boites peuvent inclure des éléments en ligne mais l'inverse n'est pas possible !

Les balises en ligne sont : a, span, b, i, em, strong, del, td, th, img, ...
Les boites sont : h1 à h6, div, p, ol, ul, li, table, tr, ...

Le cas de IMG

La balise IMG est nativement de type "inline". Or souvent on veut qu'une image s'affiche telle une boite (avec centrage horizontal dans son parent.

Exemple

Solution

La solution est CSS !
Extrait de la feuille de style :

img.grande {width: 50%; display : block ; margin : 10px auto 10px auto ; } img.miniature{width : 15%; margin :5px ;float : left; }

Explications

Le centrage horizontal (margin : auto) d'un élément dans son parent ne peut s'appliquer qu'à un élément bloc.

Il faut donc transformer dans certains cas une image en boite (display : block).
Ici une image avec la classe "grande" sera une boite centrée horizontalement dans son parent avec une largeur égale à 50% de celle du parent. Quant à une image avec la classe "miniature", elle sera un élément "inline" positionné à gauche dans son parent avec une largeur de 15% de celle de son conteneur. Retour menu