You are on page 1of 7

CSS : Cascading Style Sheets

Les feuilles de styles (ou CSS, Cascading Style Sheets) permettent de
créer des présentations surprenantes, des mises en pages très précises en
modifiant les balises existantes, ou en créant de nouvelles dont les
propriétés sont à votre choix.

La syntaxe
Un fichier CSS permet de changer radicalement l'affichage de plusieurs
pages
HTML.
La structure d'un fichier CSS est simple (plus que celle d'un fichier HTML).
Un fichier CSS est composé de plusieurs règles. Chaque règle permet de
changer l'affichage de plusieurs balises HTML. Les règles ont la syntaxe
suivante :

Sélecteur {
propriété-1: valeur-1;
propriété-2: valeur-2;
propriété-n: valeur-n;}
Expliquons cette structure avec quelques définitions :
 Chaque règle CSS sert à appliquer des styles à une balise
HTML, certaines balises, ou un groupe de balises ;
 Chaque règle d'un fichier CSS débute par un sélecteur. Il
s'agit de la ou les balises concernées par la règle. On y place
le nom des balises ou une expression permettant de
sélectionner les balises concernées ;
 Ensuite, entre accolades (entre {et}), on définit une liste
de déclarations
(couples
"propriété:
valeur") afin
d'appliquer
certains
effets
graphiques
aux
balises
sélectionnées. Ces déclarations sont séparées par des pointsvirgules (;).
Exemple :
h1 {

text-align: center;}

Déclaration ponctuelle
On peut se contenter d'introduire une feuille de style en tant qu'attribut à
une balise existante. Cette déclaration ponctuelle ne s'applique qu'à la
seule balise concernée. Si vous introduisez une feuille de style à une
balise <P> et qu'il y a d'autres balises <P> dans votre document, seule la
balise contenant la syntaxe de déclaration sera affectée par le nouveau
style à appliquer. Cette manière ponctuelle d'introduire une feuille de style
est utile pour un effet limité et sporadique dans une page.
Syntaxes :
<BALISE style="propriété: valeur">
<BALISE style="propriété1: valeur1; propriété2: valeur2">
Exemples :
<H1 style="color: #FF0000">
Le texte inclus dans ce conteneur <H1> sera de couleur rouge.

il ne vous reste plus qu'a utiliser la syntaxe minimale de la balise concernée (c'est-à-dire sans aucun attributs).html" style="text-decoration: none. Syntaxes: <HEAD> <STYLE type="text/css"> <!-BALISE { propriété: valeur } --> </STYLE> </HEAD> <HEAD> <STYLE type="text/css"> <!-BALISE1 { propriété: valeur } BALISE2 { propriété1: valeur1. BALISE3 { propriété: valeur } --> </STYLE> </HEAD> Exemples: <HEAD> <STYLE type="text/css"> <!-A { text-decoration: none } --> </STYLE> </HEAD> <BODY> <A HREF="home.php3 ne sera pas souligné et sera de taille 3. font-size: 3"> Le texte inclu dans ce conteneur <A> pointant vers la page menu.php3">Home Page</A> . Après la définition de la feuille de style dans le <HEAD>. <A HREF="menu. BALISE2.<P ALIGN="justify" style="color: blue"> Le texte inclu dans ce conteneur <P> sera de couleur bleu en plus d'être en alignement justifié. propriété2: valeur2 } --> </STYLE> </HEAD> <HEAD> <STYLE type="text/css"> <!-BALISE1. Avec la déclaration générale suivante. Mais il vous reste possible de rajouter des attributs à une balise dans le corps du document si vous le souhaitez. les attributs d'une balise sont définis pour toute la page courante. Déclaration générale a°) La déclaration générale d'une feuille de style s'effectue dans le conteneur <HEAD> de votre page et s'applique à tous les exemplaires de la (ou les) balise(s) concernée(s).

.com">Ecrivez-moi vite !</A> <A HREF="link.html">Visitez mes amis !</A> </BODY> Ecrivez-moi vite ! Visitez mes amis ! Si vous spécifiez la syntaxe class="identifiant" dans votre balise dans le <BODY>. si vous n'insérez pas cette syntaxe. text-align: center } --> </STYLE> </HEAD> <BODY> <FONT FACE="Arial"> <P>Le <I>CyberZoïde<I> Qui Frétille </P> </BODY> Le CyberZoïde Qui Frétille b°) On peut définir un élément CLASS pour que la balise ne soit affectée des nouveaux attributs définis dans le <HEAD> qu'à la demande explicite dans la balise concernée. Syntaxe : <HEAD> <STYLE type="text/css"> <!-BALISE. Au contraire. le navigateur ne tiendra pas compte de la feuille de style pour l'occurrence qui ne contient pas class="identifiant". alors la feuille de style déclarée dans le <HEAD> sera prise en compte lors de cette occurrence de la balise.toto { text-decoration: none } --> </STYLE> </HEAD> <BODY> <A class="toto" HREF="mailto:cyberzoide@chezmoi.identifiant { propriété: valeur } --> </STYLE> </HEAD> <BODY> <BALISE class="identifiant"> </BODY> Exemple: <HEAD> <STYLE type="text/css"> <!-A.</BODY> Home Page <HEAD> <STYLE type="text/css"> <!-I { font-family: Times New Roman } P { color: #0000FF.

</P> </BODY> L'eau mouille. sans hérédité. associé dans le <BODY> à une balise sous la forme d'une propriété force les propriétés de la balise. l'élément ID permet d'affecter une feuille de style très librement à toutes les balises que l'on souhaite et ce. </P> <FONT id="zizitop" FACE="Arial" SIZE=5>Oui oui au pays des rêves. font-weight: 900 } --> </STYLE> </HEAD> <BODY> <P id="zizitop">L'eau mouille. </P> <A id="zizitop">Le feu brûle. Le feu brûle. ici. Déclaration externe Utiliser une feuille de style non déclarée sur la page web en cours suppose qu'un fichier au format texte d'extension . Oui oui au pays des rêves. Mais cet élément.c°) Une troisième façon de déclarer de manière générale une feuille de style est de procéder avec l'élément ID. Alors que les deux méthodes précédentes de déclaration générale de feuille de style ne s'appliquait qu'aux balises dûment spécifiées durant la déclaration. Syntaxe: <HEAD> <STYLE type="text/css"> <!-#identifiant { propriété: valeur } --> </STYLE> </HEAD> <BODY> <BALISE id="identifiant"> </BODY> Exemple: <HEAD> <STYLE type="text/css"> <!-#zizitop { color: #FF0000. Syntaxe : <HEAD> <STYLE type="text/css"> @import url(adresse) </STYLE> </HEAD> Exemples: .CSS contienne la déclaration de type générale. Cet élément ID regroupe un ensemble de propriétés et de valeurs définis dans le <HEAD> dont la déclaration est indépendante de quelconque balise spécifique.

projection Pour les projecteurs.developpez./styles/style3.css) </STYLE> </HEAD> <HEAD> <STYLE type="text/css"> @import url(http://cyberzoide. Valeur Description all Indifféremment pour tous les matériels de visualisation des pages web.css" rel="stylesheet" type="text/css"> </HEAD> <HEAD> <LINK href="http://cyberzoide.com/styles/style3. print Pour le matériel d'impression.css) </STYLE> </HEAD> Il est possible de procéder autrement : Syntaxe : <HEAD> <LINK href="adresse" rel="stylesheet" type="text/css"> </HEAD> Exemples : <HEAD> <LINK href=".. Syntaxe : <HEAD> <STYLE type="text/css" media="valeur"> . handheld Pour les gadgets miniatures de type PC de poche. aural Pour les synthétiseurs vocaux. Par défaut.com/styles/toto. braille Pour le matériel pour aveugles.developpez. screen Pour tous les écrans standards../styles/toto.css" rel="stylesheet" type="text/css"> </HEAD> Personnaliser l'outil de visualisation La balise <STYLE> possède un autre attribut : MEDIA qui permet d'affecter une feuille de style différente à chaque outil de visualisation différent.<HEAD> <STYLE type="text/css"> @import url(. tty Pour la télévision ou assimilés (en basse résolution).

cm (cm). 100 à 900 letter-spacing normal. Espacement des lettres. color nom ou valeur hexadécimale Couleur texte du font-family Nom de la police souhaitée Police caractère. oblique font-weight lighter. normal (par défaut). de font-size smaller. small. la la . italic. xx-small. Taille de ou taille spécifiée avec l'unité en pixel police. Propriété Valeur Descrption backgroundimage adresse d'un fichier image Image de fond. light. border-color nom ou valeur hexadécimale Couleur de la bordure. large. x-large. color: blue. font-size: 2 } --> </STYLE> </HEAD> Diverses propriétés et valeurs Voici un tableau qui regroupe un certain nombre de propriétés ainsi que les valeurs associées. (px). ou valeur en point (pt) Style de police. point (pt). x-small. Epaisseur des bolder. bord. mm (mm).<!-BALISE { propriété: valeur } --> </STYLE> </HEAD> Exemple : <HEAD> <STYLE type="text/css" media="handheld"> <!-P { text-align: left. ou épaisseur en centaine de caractères. pourcentage (%) font-style normal. font-size: 3 } --> </STYLE> <STYLE type="text/css" media="screen"> <!-P { text-align: justify. larger. xx-large. medium. color: black.

overline. ou bottom) de des text-align left. uppercase Casse texte. text-transform capitalize. right. underline Lignement texte. justify Alignement du texte.line-height valeur en pixels (px) ou pourcentage Hauteur (%) ligne. right. text-indent valeur en pixels (px) ou en pourcentage Retrait de la (%) première ligne. du du . lowercase. center. Margin-? (?= valeur en pixels (px) ou en pourcentage Epaisseur left. textdecoration line-through. top (%) marges. none. none.