Les Feuilles de Style en Cascade CSS

Cascading Style Sheet Objectif : sparation du contenu de la prsentation On dfinit un style de 3 manires diffrentes :

Comme attribut dans une balise HTML <balise style= > A laide dune balise spciale dans len-tte <Style type= text/css > </style> Dans un fichier externe quon peut appeler dans len-tte de la page HTML: <link rel= stylesheet type= text/css href= adresse-fichier >

Le Style comme attribut dans une balise

On peut associer directement dans le code HTML une balise un style. Il sera appliqu directement seulement aux lments concerns par cette balise. lattribut sera crit : style= ppt1=val1; ppt2 =val2; Exemple : <p style= color=blue; text-align=right >Ceci est un exemple</p>

Style li une ou plusieurs balises (1)

Sa dfinition se fait dans lentte de la page HTML ou dans un fichier externe. La dfinition se fait comme suit :

Slecteur {ppt1:val1; ppt2:val2; }

Le slecteur permet de spcifier la ou les balises concernes par ce style.

A chaque apparition de du nom de la balise dans le code HTML le style sera appliqu aux lments de cette balise

La proprit comme par exemple la taille, la couleur, le fond, la bordure, lemplacement, A chaque proprit on affecte une valeur

Style li une ou plusieurs balises (2)

Slcteur destin un type de balise :

NomBalise { ppt:val; ppt:val; } Exemple P{color=green; text-align=center ; backgroundcolor=yellow;} Destin toutes les balises. Nom_Balise1, Nom_Balise2; {ppt:val; } Nom_Balise1 Nom_Balise2 {ppt:val; } Exemple : P Strong {color:blue} Tout texte gras dans 1 paragraphe apparatra en bleu

Le slecteur universel : * {ppt=val; }

Slecteur pour plusieurs types de balises en mme temps :

Slecteur destin aux balises imbriques :

Dfinition dune classe de style

Sa dfinition se fait dans lentte de la page HTML ou dans un fichier externe. La dfinition se fait comme suit :

Slecteur {ppt1:val1; ppt2:val2; }

Le slecteur ici est un identificateur dfini par lutilisateur pour dissocier le style dune balise. Le slecteur scrit :

.identificateur Nom_balise.identificateur .identificateur par exemple : .txt_bleu {color:blue;} Nom_balise.identificateur par exemple : P.txt_noir {color:black;}

Le slecteur scrit :

Application dune classe de style

Lutilisation dune classe de style dans une page Web se fait dans les balises On rajoute lattribut class la balise concerne On affecte cet attribut le nom attribu lors de la dfinition Exemple :

<H1 class= txt_bleu > <P class= txt_noir > la classe text_noir ne peut tre applique qu des balises P (voir sa dfinition)

Pour lappliquer un bloc du code HTML, on utilise la balise <DIV> Pour lappliquer des lments sans balises, on utilise la balise <span>