Feuille de style CSS de base

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

Partons donc à la découverte d'une première feuille de style...

N'hésitez pas à nous faire part de votre avis sur cet article : Commentez Donner une note à l'article (3.5)

Article lu   fois.

L'auteur

Site personnel

I. Feuille de style CSS de base

I-A. Structure de base

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

 
Sélectionnez

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.

I-B. Exemple de feuille de style

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
Sélectionnez

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;
}
				
Code (X)HTML
Sélectionnez

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

I-C. Notion de cascades

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.

I-D. Enregistrement de la feuille de style

Il existe donc trois façons d'enregistrer les styles :
  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

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>) :

 
Sélectionnez

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

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) :

 
Sélectionnez

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

Le tour est joué !

Note à propos du média
Il est précisé media="all" dans les attributs de la déclaration de la feuille de style. Cela indique que cette feuille ne sera lisible par tous les types de médias (écrans, TV, imprimante...). Pour une feuille de style lisible seulement avec des écrans, on spécifiera media="screen", pour une feuille de style réservée à l'impression, ce sera media="print".
Pour plus de détails sur tous les médias déclarables, consultez ces spécifications CSS 2.1 sur les types de médias reconnus.

I-D-2. Feuille de style interne

Pour déclarer des styles qui ne s'appliqueront qu'à la page considérée, les styles sont à déclarer entre les balises suivantes :

 
Sélectionnez

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

Tout ceci est à placer, comme précédemment, entre les balises <head></head>.

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

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 :

 
Sélectionnez

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

I-E. Lectures complémentaires

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (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.