Académique Documents
Professionnel Documents
Culture Documents
Une feuille de style CSS externe peut se faire avec le simple bloc-note, et il est d'usage de
lui faire porter l'extension .css (style.css par exemple). On la liera ensuite à la page HTML
à l'aide d'un link placé dans l'en-tête de la page (pas de panique ! la méthode est expliquée
en dessous). Mais on peut aussi déclarer les styles dans l'en-tête de la page, ou au sein
des balises elles-mêmes. Cela peut-être intéressant pour appliquer des styles spécifiques
et ils auront un ordre de priorité plus important. C'est ce qu'on appelle la "cascade".
N'hésitez pas à nous faire part de votre avis sur cet article : Commentez
Feuille de style CSS de base par Pascale Lambert
-2-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 24/06/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images,
etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://plambert.developpez.com/tutoriel/css/style-base/
Feuille de style CSS de base par Pascale Lambert
sélecteur {
propriété : valeur;
}
• Le sélecteur, c'est la balise (X)HTML (body, h1, p, etc.), l'identifiant (id) ou la classe (class) ;
• La propriété, c'est l'attribut qu'on veut appliquer (font, background, margin, etc.) ;
• Et enfin la valeur qui précise les caractéristiques de la propriéte.
Fonctionne avec :
• Tous les navigateurs graphiques
Propriétés utilisées :
• background-color ;
• color ;
• font-family, font-size ;
• padding ;
• text-align, text-decoration.
Cet exemple de feuille de style (encore une fois, de base) donnera une page :
• à fond blanc ;
• avec une police de caractère par défaut Verdana noire ;
• un titre de premier niveau bleu marine centré ;
• un titre de deuxième niveau rouge décalé de 15 pixels ;
• des liens passant du vert au gris avec un petit effet rouge non souligné au passage de la souris ;
• A noter que les couleur sont ici sous la forme "white, black, blue" etc. pour plus de lisibilité mais qu'il convient
plutôt d'utiliser les valeurs hexadécimales qui vont de #000000 (noir) à #ffffff (blanc).
Les tailles des polices de caractère sont ici exprimées en %, mais on peut aussi utiliser em qui est aussi une unité
de longueur relative à privilégier (pour des raisons d'homogénéité d'affichage et d'accessibilité) aux unités absolues
telles que les pt ou les px. A noter que bien que les px soient une unité relative, ils sont aussi à éviter car MSIE les
interprète comme unité absolue...
Pour que les couleurs des liens changent selon leur état (non visité, visité, actif, survolé), on utilise des pseudo-
classes qui se déclarent par :link, :visited, :active et :hover. Il est important de respecter cet ordre de déclarations.
On commence une feuille de style en général par un "reset" pour mettre toutes les marges à zéro (intérieures padding
et extérieures margin). Cela doit permettre d'avoir tous les navigateurs avec, à peu près, le même état de départ...
Code CSS
html, body {
margin: 0;
padding: 0;
}
body {
background-color: white;
font-family: Verdana, sans-serif;
font-size: 100%;
-3-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 24/06/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images,
etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://plambert.developpez.com/tutoriel/css/style-base/
Feuille de style CSS de base par Pascale Lambert
Code CSS
}
h1 {
font-size: 200%;
color: navy;
text-align: center;
}
h2 {
font-size: 150%;
color: red;
padding-left: 15px;
}
p,ul,li,td {
color: black;
}
a:link {
color: green;
text-decoration: underline;
}
a:visited {
color: gray;
}
a:active {
color:red;
}
a:hover {
color: red;
text-decoration: none;
}
Code (X)HTML
<h1>Titre principal</h1>
<h2>Sous titre</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis eget ligula quis libero mollis dapibus.
Suspendisse potenti. Nullam facilisis neque et sem.
Proin placerat adipiscing urna. Aenean sollicitudin.
Mauris lorem erat, fringilla quis, sagittis a, varius sed, nunc.
Pellentesque ligula. Nullam egestas eleifend turpis. Vivamus ac
sapien. Sed venenatis, ligula ut scelerisque vehicula,
erat tellus euismod ipsum, eget faucibus tortor arcu et lectus.
Vivamus vel purus. Fusce dignissim tortor quis diam elementum fermentum.
Mauris eleifend lorem vel arcu. Vivamus tempus
faucibus lectus. Curabitur volutpat ornare mi.
Curabitur ac libero. Sed eu elit ac metus egestas iaculis.
</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p><a href="http://http://plambert.developpez.com/">CSS Débutant sur Developpez.com</a></p>
Voir le résultat.
Pourquoi parle-t-on de "feuilles de style en cascade" (Cascading Style Sheets) ? La raison est très simple : on peut
déclarer les styles à différents endroits, et selon ces endroits ils seront plus ou moins prioritaires. On obtient donc
une cascade de styles.
1 Déclaration des styles dans une feuille de style externe : c'est de loin la meilleure chose à faire et la plus
pratique à maintenir (cf. le schéma de la page d'accueil), mais c'est celle qui a le moins de poids ;
-4-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 24/06/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images,
etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://plambert.developpez.com/tutoriel/css/style-base/
Feuille de style CSS de base par Pascale Lambert
2 Déclaration des styles en interne, dans l'en-tête de la page : à ne faire qu'avec des styles particuliers à une
page. Les styles déclarés auront plus de poids que ceux de la feuille de style externe et donc l'emporteront en
cas de conflits ;
3 Déclaration des styles en attributs des éléments HTML : à faire pour des mises en forme ponctuelles. Ces
styles l'emporteront sur tous les autres.
Il y a une 4ème possibilité, mais celle-ci est indépendante de la volonté du webmestre : ce sont les styles définis par
l'utilisateur, s'il jamais il en déclare. Ils seront interprétés en priorité, et masqueront tous les autres.
Enregistrer le code CSS dans un fichier s'appelant (par exemple) "style.css", et mettre dans l'en-tête de la page
HTML (entre les balises <head></head>) :
Pour éviter les mauvaises surprises avec quelques navigateurs antédiluviens on peut aussi à la place (cette option
désactive la feuille de style avec ces navigateurs) :
Pour déclarer des styles qui ne s'appliqueront qu'à la page considérée, les styles sont à déclarer entre les balises
suivantes :
Tout ceci est à placer, comme précédemment, entre les balises <head></head>.
De façon encore plus ponctuelle, si l'on veut attribuer un style à un seul endroit, on peut déclarer le style à l'intérieur
d'une balise HTML à l'aide de l'attribut style. Par exemple :
-5-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 24/06/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images,
etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://plambert.developpez.com/tutoriel/css/style-base/
Feuille de style CSS de base par Pascale Lambert
-6-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par
les droits d'auteur. Copyright ® 24/06/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images,
etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
https://plambert.developpez.com/tutoriel/css/style-base/