Concevoir un site en CSS

CSS : vos premiers pas

Qu'est-ce que c'est ? Comment les utiliser ?

Les CSS (Cascading Style Sheets, c'est à dire "feuilles de styles en cascade") sont utilisés pour définir la présentation des pages Web.

Grâce à eux, votre code HTML ne vous servira désormais qu'à définir la structure de vos contenus. Les CSS vous permettront de créer vos styles et le design général de votre site Internet.

Quelques définitions

Code HTML : Le code HTML permet de décrire à la fois le contenu et la forme d'une page Web. Un site Web est un ensemble de pages codées en HTML. Balise HTML : Il s'agit des codes qui vous permettent de structurer le contenu d'une page HTML. Citons, par exemple, les balises <p>, <h1>, <h2>, <h3>, <strong> ou <em>.

La plupart des balises vont par paires, avec une «balise ouvrante» et une «balise fermante». (par exemple <p> et </p>).

Elément HTML : Ce terme désigne une portion de contenu située à l'intérieur d'une paire de balises. Par exemple : <p>Ceci est un paragraphe</p>

C'est l'ensemble de ce groupe (balises + contenu) qui est appelé "élément".

Attribut : Un attribut est placé dans une balise HTML ouvrante. Il change la présentation du contenu de l'élément correspondant. Par exemple :
<p align="right">

La syntaxe d'un attribut comprend toujours le nom de l'attribut, suivi du signe = , et de la valeur de l'attribut.

L'utilisation des CSS permet de diminuer l'utilisation des attributs, voire de les éliminer totalement, ce qui a pour avantage de scinder le contenu de sa mise en forme.

Propriété : Les propriétés sont aux CSS ce que les attributs sont au HTML. Elles possèdent souvent bien plus de valeurs possibles que l'attribut HTML équivalent.

Par exemple : la propriété CSS "border" comporte de trés nombreuses déclinaisons (border-width, border-color, border-style, etc.) permettant de définir la couleur, l'épaisseur et l'apparence de chaque côté d'un bloc. L'attribut HTML "border" comporte bien moins de souplesse.

Attention : la syntaxe d'une propriété CSS n'est pas forcément la même que celle de l'attribut HTML équivalent. Par exemple, en CSS en écrit border-color:blue; alors qu'en HTML on écrit bordercolor="blue"

Calque : Ce terme ("calque" en français, "layer" en anglais) a été inventé par les concepteurs du logiciel de mise en page "Dreamweaver" pour désigner un bloc ayant la propriété "position:absolute".

Cette propriété permet en effet de superposer plusieurs blocs HTML exactement comme on pourrait le faire avec des calques.

Parents et enfants : Dans le cadre du langage HTML, ces termes servent à désigner des élements emboîtés les uns dans les autres.

Dans la construction suivante, par exemple :

<div>
    <p>
       bla,bla
    </p>
</div>

on dira que l'élément <div> est le parent de l'élément <p> tandis que l'élément <p> est l'enfant de l'élément <div>.

Bloc : Ce terme s'applique à une catégorie d'éléments HTML . Il s'oppose à l'expression "en-ligne" et désigne les éléments pouvait être positionnés avec les propriétés "top","left", "right", "bottom", ou dimensionnés avec les propriétés "width" et "height".

Par exemple : <p> et <div> définissent des blocs alors que <strong> et <em> définissent des éléments en ligne.

Nous approfondissons ces notions dans notre page Styles de Blocs
et styles en ligne

Conteneur : Ce terme peut s'appliquer à n'importe quel bloc utilisé dans le but de positionner une portion du contenu (texte et/ou images) dans une page, au moment de la création de votre site Internet.

On l'utilise pour désigner un bloc "parent" comportant plusieurs blocs "enfants"

Mots clés
de cette page

Conception de sites Web, Design de sites, langage HTML, Création de sites Web.

Les styles HTML

Si vous souhaitez modifier le type de caractère d'une portion de texte sans l'aide des CSS, vous devez utiliser la balise <font>, en écrivant par exemple <font face="Times">.

Pour définir la couleur de l'arrière plan et la bordure d'un tableau ainsi que le retrait (padding) de chacune de ses colonnes, vous utiliserez le code suivant :

<table border="1" bgcolor="silver" cellpadding="3" cellspacing="0">

Cette approche présente cependant plusieurs inconvénients :

  1. Vous devez répéter la même définition de style à chaque fois que vous souhaitez l'utiliser dans votre page où dans les diverses pages de votre site Internet
  2. A chaque fois que vous souhaiterez modifier ce style, vous devrez reparcourir le contenu de toutes vos pages pour mettre à jour, une par une, les diverses définitions qu'elles contiennent
  3. Ces répétitions augmentent la taille de vos pages
  4. Vos styles sont figés, le contenu se présentent de la même façon pour tous les usages possibles : écran, imprimante, PDA, lecteurs vocaux,...

Comment créer un site avec les CSS

Les CSS représentent une nouvelle façon d'appliquer des styles aux éléments HTML.

Ils vous permettent de définir d'importe quelle propriété de style comme la bordure, la couleur de fond, le type de caractère, l'espace entre les lettres, etc. (nous reviendront plus tard sur la manière d'y parvenir).

Il y a trois façon de définir des styles CSS :

  1. Dans le corps du code HTML
  2. Dans l'en-tête de la page
  3. Dans une feuille de style totalement séparée du code HTML
1- Les CSS dans le corps du code HTML (simple, mais pas idéal)

Vous pouvez définir des styles CSS directement dans la définition d'une balise HTML. Dans l'exemple ci-dessous, nous utilisons une balise <div> qui permet de créer une "boîte" à l'intérieur d'un contenu :

Code :

<div style="background-color:orange; border:1px solid black; color:yellow; font-size:150%; padding:1em;"> Cette balise div a du style !</div>

Ce qui donne :

Cette balise div a du style !

Cette approche est très proche des styles définis en pur HTML. Elle présente les mêmes inconvénients.

Elle ne présente donc un intérêt que si vous êtes certain que le style défini ne sera utilisé qu'une seule et unique fois. S'il y a la moindre chance pour que vous ayez à nouveau besoin de ce style sur une page ou à plusieurs endroit d'une même page, il est grandement préférable utiliser l'une des deux autres méthodes proposées plus bas. Cela facilitera la maintenance et l'évolution de votre site.

2- Les CSS dans l'en-tête de la page

Plutôt que d'utiliser la méthode précédente, il est préférable de définir vos styles CSS une fois pour toute dans une section particulière de votre page Web (on utilise habituellement la section <head>).

Exemple :

<head>
<style type="text/css">
  div {
    
background-color:#339;
    
color:#fff;
    
padding:15px;
    border-bottom:5px solid red;
    margin-bottom:15px;
      }
</style>
</head>

<body>
<div>
Cette phrase est présentée en fonction du style défini dans l'en-tête
</div>
<div>
Cette phrase aussi, et pourtant le style n'a été défini qu'une fois !
</div>
</body>

Ce qui donne :

Cette phrase est présentée en fonction du style défini dans l'en-tête
Cette phrase aussi, et pourtant le style n'a été défini qu'une fois !

Avec cette nouvelle façon de procéder, vous n'avez besoin de définir votre style qu'une seule fois. Dans notre exemple, le style défini s'appliquera automatiquement à toutes les balises <div> de la page.

Cette méthode, vous poermet d'appliquer le même style plusieurs fois dans la même page, mais pas à plusieurs pages d'un coup. Pour aller plus loin dans la standardisation de votre site, vous devrez utiliser la troisième méthode.

3- Les CSS dans une feuille de style totalement séparée du code HTML

La façon idéale de définir les CSS consiste à les enregistrer dans un document indépendant de vos pages HTML. Grâce à cette méthode, toutes les pages qui font référence à cette feuille de style externe hériteront de toutes ses définitions.

Cette méthode permet également de définir plusieurs feuilles de styles pour le même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le contenu est affiché (écran, imprimante, etc.). Nous reviendrons plus tard sur cet aspect.

Une page HTML peut faire référence à plusieurs feuilles de styles en même temps. Dans ce cas, les définitions contenues dans ces différentes feuilles seront combinées entre elles. Nous examinerons ce point dans notre chapitre Héritages et cascades.

Voici un exemple de styles définis dans un document séparé :

Document "mes-styles.css"

body {
  background-color:#ccf;
  letter-spacing:.1em;
}
p {
  font-style:italic;
  font-family:times,serif;
}

Document "ma-page.html"

<head>
<link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" />
</head>

<body>
<p>Voici un exemple de paragraphe.</p>
<p>Et voici un deuxième paragraphe.</p>
</body>

Et voici le résultat :

Voici un exemple de paragraphe.

Et voici un deuxième paragraphe.

Comme dans la méthode précédente (CSS dans l'en-tête de la page), le style n'a été défini qu'une seule fois et peut être utilisé plusieurs fois. La différence entre cette méthode et la précédente, c'est que notre feuille de style peut être utilisée par un nombre illimité de pages. Il suffira d'ajouter la mention <link href="mes-styles.css" media="all" rel="stylesheet" type="text/css" /> dans ces pages pour que notre feuille de style s'y applique.

Lorsque les utilisateurs du site chargeront une page, leur navigateur ira également lire la feuille de styles à laquelle cette page fait référence. Cette feuille de style sera gardée en mémoire par le navigateur et n'aura pas besoin d'être rechargée lors de la lecture des pages suivantes. Le résultat est un gain de temps de chargement global et une économie de bande passante pour le serveur de votre site.

La méthode "<link href=..." permet également de mettre en place plusieurs feuilles de styles destinées aux différents media (imprimante, navigateurs de PDA, etc...).

Vous pouvez en effet souhaiter mettre en place une présentation particulière (sans les menus, par exemple) destinée à l'impression de vos documents. Voici une liste des valeurs les plus couramment utilisées pour link :

<link href="general.css" rel="stylesheet" type="text/css" media="all"> Remplacez "general.css" par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style commune à tous les media.
<link href="ecran.css" rel="stylesheet" type="text/css" media="screen, projection"> Remplacez "ecran.css" par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux écrans.
<link href="mobile.css" rel="stylesheet" type="text/css" media="handheld"> Remplacez "mobile.css" par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux PDA et téléphones mobiles.
<link href="impression.css" rel="stylesheet" type="text/css" media="print"> Remplacez "impression.css" par le nom que vous souhaitez donner à votre feuille de style. Cette définition vous permettra de mettre en place une feuille de style destinée aux imprimantes.

Note : Le site blog-and-blues pourra vous apporter des détails sur ces sélecteur de media.

Pour clore ce chapitre, précisons enfin que la déclaration "<link href=..." n'est pas la seule façon de faire appel à une feuille de style séparée. On peut également utiliser la formulation suivante :

Cette définition de style est à placer dans la section <head> de votre page.

<style type="text/css">
  @import url(styles.css) all;
</style>

 

Vous devrez remplacer "styles.css" par le nom que vous souhaitez donner à votre feuille de style. Vous pouvez également remplacer "all" par le type de media auquel se destine votre feuille de style.

Le résultat sera exactement le même que si vous aviez déclaré <link href="styles.css" media="all" rel="stylesheet" type="text/css" />, à deux nuances prés :

Note : à lire aussi "link ou @import ?" proposé par Alsacreations.

4- Avantages des feuilles de styles séparées

Il y a de multiples avantages à séparer les feuilles de styles du contenu. Citons en particulier :

  1. La réduction de la taille des pages : Les définitions de style de sont faites qu'une seule fois, même si elles sont utilisées plusieurs fois
  2. La réduction des temps de connexion : Les navigateurs garderont en mémoire (en cache) le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site. Seuls les contenus des pages devront être chargés au cours de la navigation.
  3. Une mise à jour plus facile : Vous n'aurez besoin que de changer la feuille de style pour mettre à jour la présentation de l'ensemble de votre site
  4. Scinder le travail de rédaction et le travail de présentation : Vous pouvez commencer à rédiger le contenu de vos pages sans vous soucier de leur présentation finale. Pensez simplement à placer correctement vos balises sémantiques (titre, sous-titres, listes, classes et ID,...). Vous pourrez travailler votre mise en page et votre design plus tard.

Comment les CSS s'appliquent aux éléments HTML

Quelques règles suffisent pour pouvoir séparer le contenu et sa présentation. L'essentiel est de comprendre comment établir le lien entre un style et la phrase à laquelle s'applique le style. Ce mécanisme est heureusement assez simple :

1- Comment appliquer un style aux balises HTML standards

Avec les CSS, vous pouvez changer la présentation de toutes les balises HTML standards. Il vous suffit de spécifier le nom de la balise et de faire figurer vos définitions comme suit :

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

p {
  font-weight:bold;
  line-height:1.3em;
}

 

<p>Ce style va s'appliquer à moi car je suis un paragraphe.</p>

<div>Mais il n'appliquera pas à moi.</div>

Le code ci-dessus aura pour effet de mettre en gras et d'augmenter la hauteur de ligne de tous les paragraphes

La syntaxe générale de définition est la suivante :

  1. Préciser le nom de la balise en premier
  2. Encadrer les définitions par des accolades{ }
  3. Placer un point virgule ; derrière chaque définition
2- Comment utiliser des classes pour appliquer un style

Vous pouvez attribuer à chaque élément HTML une ou plusieurs classes. C'est vous qui définirez le nom de ces classes et qui déciderez de leurs styles.

Les styles définis dans les classes remplaceront les styles "normaux" des éléments auxquels ils s'appliquent.

Pour créer une classe, vous devez simplement faire figurer son nom précédé d'un point. Pour éviter toute ambiguïté, votre nom de classe ne doit pas comporter d'espace.

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

.mon-style {
  color:red;
}

 

Pour appliquer le style défini dans votre classe à un élément, ajouter la mention class="nom-du style" dans la définition de la balise :

<p class="mon-style">Le style s'applique à ce paragraphe </p>

<p>Mais pas à celui-là</p>

Cette façon de procéder est très pratique car elle permet d'appliquer les réglages de votre classes et de nombreux éléments, même s'ils ne sont pas du même type :

<p class="mon-style">Le style peut s'appliquer à ce paragraphe </p>

<div class="mon-style">Et aussi à cette balise ! </div>

3- Les éléments HTML peuvent avoir plusieurs classes

Chaque élément HTML peut avoir aucune, une ou plusieurs classes. Pour appliquer plusieurs classes au même élément, précisez simplement la liste de classes en séparant leurs noms par un espace :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

.mon-style1 {
  
color:yellow;
}
.mon-style2 {
  background-color:#A0A0A0;
  font-weight:bold;
}

<p class="mon-style1 mon-style2">Les styles des deux classes s'appliquent à ce paragraphe</p>

<p class="mon-style2">Alors que ce paragraphe n'a qu'une seule classe </p>

4- Comment utiliser des "ID" pour appliquer un style

Les éléments HTML peuvent se voir attribuer un "ID" (identification) en plus ou à la place d'une classe.

Le principe de l'ID est très similaire à celui de la classe à une exception prés :

Vous pourriez parfaitement vous contenter d'utiliser les classes pour tous vos styles et oublier complètement l'existence des ID. Leur utilisation permet simplement de clarifier les choses et de mieux structurer vos pages :

Pour créer un ID, vous devez simplement faire figurer son nom précédé d'un dièse #. Pour éviter toute ambiguïté, votre nom d'ID ne doit pas comporter d'espace.

Cette définition de style est à placer dans une feuille de styles ou dans la section <head> de votre page.

#mon-style {
  
color:red;
}

 

Pour appliquer le style défini dans votre ID à un élément, ajouter la mention ID="nom-du style" dans la définition de la balise :

<p ID="mon-style">Le style s'applique à ce paragraphe </p>

<p>Mais pas à celui-là</p>

Priorité des styles, les uns par rapports aux autres

1- Styles par défaut, styles standards, classes et ID

Par défaut, chaque type de balise à une présentation particulière dans chaque navigateur. Si vous n'avez défini aucun style particulier pour la balise <p>, il est possible que le texte contenu dans ces balises ne se présente pas exactement de la même façon dans Internet Explorer et dans FireFox, par exemple.

Lorsque vous définissez vous-même le style d'une balise standard avec une définition telle que p {blablabla}, vous obligez tous les navigateurs à afficher votre texte de la même façon (la votre !).

Si vous attribuez une classe à un paragraphe, les styles que vous aurez définis dans cette classe remplaceront également les styles standards du paragraphe et seront même prioritaires par rapports aux styles que vous aurez définis sous la forme p {blablabla}.

Si vous attribuez un ID à un paragraphe, les styles définis dans l'ID seront prioritaires par rapport à tous les autres styles pouvant s'appliquer à ce paragraphe.

Si vous définissez deux fois le même style dans 2 classes différentes et que les 2 classes s'appliquent à la même balise, c'est la dernière classe citées dans la déclaration class="classe1 classe2" qui sera prioritaire.

Si vous définissez 2 fois le même style pour la même balise standard, la même classe ou le même ID, c'est la dernière définition qui sera prioritaire.

En résumé, voici l'ordre des priorités (ceci est valable pour toutes les balises HTML) :

  1. Style standard défini par le navigateur
  2. Style standard redéfini en CSS (la dernière définition est prioritaire)
  3. Style de classe CSS (la dernière définition est prioritaire)
  4. Style d'ID (la dernière définition est prioritaire)

Exemple 1 :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

.mon-style1 {
  
color:brown;
  
font-weight:bold;
}
.mon-style2 {
  
color:green;
}

Résultat : <p class="mon-style1 mon-style2">Ce paragraphe s'affiche en vert parce que le style "mon-style2" est le dernier à s'appliquer</p>

Exemple 2 :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

p {
  
color:brown;
}
.mon-style {
  
color:green;
  
font-weight:bold;
}

Résultat : <p class="mon-style">Ce paragraphe s'affiche en vert parce que la classe est prioritaire par rapport au style standard de la balise</p>

Exemple 3 :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

.mon-style {
  
color:brown;
  
font-weight:bold;
}
.mon-style {
  
color:green;
}

Résultat : <p class="mon-style">Ce paragraphe s'affiche en vert parce que c'est la dernière (re)définition de style qui est prioritaire </p>

Exemple 4 :

Cette définition de styles est à placer dans une feuille de styles ou dans la section <head> de votre page.

#mon-style1{
  color:green;
}
.mon-style2 {
  color:brown;
  
font-weight:bold;
}

Résultat : <p id="mon-style1" class="mon-style2">Ce paragraphe s'affiche en vert parce que l'ID est prioritaire sur la classe </p>

6- Emboîtement de balises

Dans un cas d'emboîtement de balises tel que celui-ci :

<body>
  <div>
    <p>

      bla bla bla

    </p>
  </div>
</body>

Les différents styles attribués aux balises <body>, <div> et <p> vont se combiner pour définir quel sont les styles définitifs qui seront appliqués au texte "bla bla bla".

Si le même style est défini, puis redéfini dans ces différentes balises (la couleur du texte, par exemple), c'est la dernière définition qui l'emportera sur les autres.

Si un style particulier n'est défini que dans <body> il doit logiquement s'appliquer à l'ensemble du contenu de <body>.

En vérité, certains styles (tels que le couleur, par exemple) se transmettent automatiquement aux balises emboîtées, tandis que d'autres (tels que les marges, par exemple) ne se transmettent pas. Lorsqu'ils se transmettent, on dira que le contenu des balises <div> et <p> aura "hérité" des propriétés de <body>.

Ce phénomène est décrit en détail dans la page Héritages et cascades.



 


Le copyright de cette page appartient à css-faciles.

This work is licensed under a Creative Commons License.
Pour plus de détail sur ce copyright,
consultez notre page consacrée aux droits de copie.


Valid HTML 4.01 Transitional - Vérifier l'orthographe avec RankSpirit et "BonPatron"
Dans cette page :
Raccourcis
Contact liens d'évitement et raccourcis clavier Droits de copie Accueil Imprimer
Aller au menu