CSS Débutants
Vous êtes ici > CSS débutants | Feuille de style de base
Feuille de style de base
Fonctionne avec :
- FireFox
- IE 5.x et +
- NS 4.x et +
- Mozilla 1.x
- Opéra 5.x et +
- Safari
Attributs utilisés :
- background-color
- color
- font-family ; font-size
- padding
- text-align ; text-decoration
Cette 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 de caractères sont ici exprimées en %, mais on peut aussi utiliser em ou px qui sont aussi des unités de longueurs relatives à privilégier, pour des raisons d'homogénéité d'affichage, aux unités absolues telles que les
pt ou les pc
html {
margin:0;
padding:0;
}
body {
background-color : white;
font-family : Verdana, Arial, Helvetica, Geneva, sans-serif;
}
p,ul,li,td {
font-size : 100%;
color : black;
}
h1 {
font-size : 200%;
color : navy;
text-align: center;
}
h2 {
font-size : 150%;
color : red;
padding-left:15px;
}
a:link {color: green; text-decoration:underline;}
a:visited {color: gray; text-decoration:underline;}
a:hover {color:red; text-decoration:none;}
Enregistrement
Enregistrer cette page "style.css", et mettre dans l'en-tête de la page html (entre les balises <head></head> ) :
<link href="style.css" rel="stylesheet" type="text/css">
Pour éviter les mauvaises surprises avec le (presque) feu NS 4.x on peut aussi à la place (cette option désactive la feuille de style avec ce navigateur) :
<style type="text/css" media="screen">@import "style.css";</style>
Le tour est joué !
Si vous désirez générer simplement une feuille de style un peu plus fournie, un générateur de feuille de style est à disposition.
Contact : pascale at mammouthland.net
