Feuille de style CSS de base

Pour chaque déclaration, la structure est toujours la même :

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.

• Tous les navigateurs graphiques

• 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...

html, body {
    margin: 0;
    padding: 0;
}
body {
    background-color: white; 
    font-family: Verdana, sans-serif; 
    font-size: 100%;
}
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;
}

<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 ;
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.

1. dans une feuille de style externe ;
2. dans une feuille de style interne ;
3. dans le code au sein des balises HTML.

I-D-1. Feuille de style externe▲

<link href="style.css" rel="stylesheet" media="all" type="text/css">

<style type="text/css" media="all">@import "style.css";</style>

I-D-2. Feuille de style interne▲

<style type="text/css" media="screen">
....
</style>

I-D-3. Styles CSS dans le code HTML ("inline")▲

<p style="text-align:center; color:red">lorem ipsum</p>

• Une feuille de style pour l'impression (OpenWeb)