You are on page 1of 6

Les Feuilles de Style en Cascade CSS

Y

Cascading Style Sheet Objectif : séparation du contenu de la présentation On définit un style de 3 manières différentes : Comme attribut dans une balise HTML <balise style=« … »>

Y

Y

Y

A l’aide d’une balise spéciale dans l’en-tête <Style type=« text/css »> … </style>
Y

Dans un fichier externe qu’on peut appeler dans l’en-tête de la page HTML: <link rel=« stylesheet » type=« text/css » href=« adresse-fichier »>
Y

text-align=right »>Ceci est un exemple</p> Y Y Y . Il sera appliqué directement seulement aux éléments concernés par cette balise. ppté2 =val2.Le Style comme attribut dans une balise Y On peut associer directement dans le code HTML à une balise un style. … » Exemple : <p style=« color=blue. l’attribut sera écrit : style=« ppté1=val1.

Style lié à une ou plusieurs balises (1) • • Sa définition se fait dans l’entête de la page HTML ou dans un fichier externe. la couleur. … A chaque propriété on affecte une valeur . la bordure. le fond. La définition se fait comme suit : – Sélecteur {ppté1:val1. – A chaque apparition de du nom de la balise dans le code HTML le style sera appliqué aux éléments de cette balise • • La propriété comme par exemple la taille. l’emplacement. …} • Le sélecteur permet de spécifier la ou les balises concernées par ce style. ppté2:val2.

…} Exemple : P Strong {color:blue} Tout texte gras dans 1 paragraphe apparaîtra en bleu • Le sélecteur universel : * {ppté=val.Style lié à une ou plusieurs balises (2) • Sélécteur destiné à un type de balise : – – NomBalise { ppté:val. …} – • Sélecteur pour plusieurs types de balises en même temps : – • Sélecteur destiné aux balises imbriquées : – – . … {ppté:val. …} Nom_Balise1 Nom_Balise2 {ppté:val. …} Exemple P{color=green.} Destiné à toutes les balises. Nom_Balise1. backgroundcolor=yellow. Nom_Balise2. ppté:val. text-align=center .

Le sélecteur s’écrit : – – • .identificateur par exemple : P.txt_bleu {color:blue.} Nom_balise.txt_noir {color:black. • La définition se fait comme suit : – Sélecteur {ppté1:val1.Définition d’une classe de style • Sa définition se fait dans l’entête de la page HTML ou dans un fichier externe.identificateur par exemple : .identificateur Nom_balise.} • Le sélecteur s’écrit : – – . …} • Le sélecteur ici est un identificateur défini par l’utilisateur pour dissocier le style d’une balise. ppté2:val2.identificateur .

on utilise la balise <DIV> Pour l’appliquer à des éléments sans balises.Application d’une classe de style • L’utilisation d’une classe de style dans une page Web se fait dans les balises • • • On rajoute l’attribut class à la balise concernée On affecte à cet attribut le nom attribué lors de la définition Exemple : – – <H1 class=« txt_bleu »>… <P class=« txt_noir »>… la classe text_noir ne peut être appliquée qu’à des balises P (voir sa définition) • • Pour l’appliquer à un bloc du code HTML. on utilise la balise <span> .