Skip to Content

Débuter en CSS (Cascading Style Sheets)

Pour bien comprendre l’utilité et la pratique du CSS, il faut assimiler
les principes de conception des sites modernes :

  1. Séparation du contenu et de la forme
  2. Prendre en compte la maintenance du site dés la conception
  3. faire un code xhtml sémantiquement correct
  4. Prendre en compte les contraintes d’accéssibilité pour tous les
    navigateurs, tous les systèmes et toutes les personnes.

Le XHTML 1.0

Le contenu est obtenu par le langage title="eXtensible HyperText Markup Language">XHTML, mariage
du title="HyperText Markup Language">HTML et du xml:lang="en" lang="en"
title="eXtensible Markup Language ">XML
, il est composé comme
suit :

Déclaration XML
<?xml version="1.0" encoding="ISO-8859-15"?>
Déclaration de la title="Document Type Definition">DTD, qui décrit comment utiliser
les balises
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Contenu du site

...

>body>

...

Nous venons de voir la structure initial d’une page écrit en xhtml
1.0 strict
, il existe d’autre DTD utilisable pour la réalisation
d’une page HTML, la DTD la plus utilisée semble être le HTML 4.01.

voici un exemple de source :

Source de la page affichant la DTD

Pour la suite du tutoriel, je vais parler de balise, d’élément ou
d’attribut, afin d’être clair et que tout le monde parle le même langage, je
vais expliquer les définitions :

Eléments
title, body, p >> le terme élément
est générique
Balise
<title> : balise ouvrante
de l’élément title

</p> : balise fermante de
l’élément p

Attribut
src, alt, title sont les attributs de
moi      />

Une fois déterminé selon quel référence nous allons coder, nous pouvons
passer à la réalisation du code en xhtml, celui-ci est régit par quelques
principes élémentaires :

  1. les balises sont toutes en minuscules
  2. Toutes les balises ouvertes doivent être fermées :
    ... |

    ...

    | ...

    | etc
  3. Seules quelques balises dites "orphelines" existent :

    le retour chariot :

    la ligne horizontale :


    les images :

  4. Respecter la sémantique des balises, ne pas aller vers la facilitée en
    détournant une balise hors de sa fonction initiale
    (blockquote, ...)
  5. Le décor est fait avec les feuilles de styles (CSS)

voici un exemple de code source d’une page en XHTML :

Vue du code source en .PiNG

Le Cascading Style Sheet

La définition du CSS

(selon fr.wikipedia.org)

Le langage CSS (Cascading Style Sheets : feuilles de
style en cascade
) est utilisé pour décrire la présentation d’un document
structuré, écrit en HTML ou en XML, et c’est le World Wide Web Consortium
(W3C) qui en a la direction.

CSS est principalement utilisé pour définir les couleurs, les polices, le
rendu, et d’autres caractéristiques d’un document, ...

Ainsi, les avantages des feuilles de style sont multiples :

* Toute l’architecture visuelle d’un document réside dans un seul fichier,
et peut donc être mise à jour facilement.

* Un même document peut donner le choix entre plusieurs feuilles de style
(impression ou lecture à l’écran par exemple). Certains navigateurs web
permettent d’accéder facilement à un choix de feuilles de style.

* Le code HTML est considérablement réduit en taille et en complexité,
puisqu’il ne contient plus de balise de présentation.

Introduction à CSS2

Pour bien comprendre la suite, nous allons parler le même langage en
CSS.

voici un exemple de règle CSS :

h1 {

color: blue;

}

Une règle CSS est constituée de 5 caractéristiques indispensables :

  1. le sélecteur

    h1

  2. une parenthèse ouvrante

  3. la déclaration

    color: blue

    celle-ci se compose elle aussi en 2(deux) parties

    • une propriété

      color

    • une valeur

      blue

  4. fin de la déclaration

    point virgule ;

  5. une parenthèse fermante

Soit pour faire simple et clair, le modèle d’une règle CSS est écrit comme
suit :

Sélecteur {

propriété n: valeur n;

propriété n: valeur n;

}

Nous allons commencer par un petit document HTML, sans style, nommé href="./cssexemple/exemple00.html">exemple00.html

Editer le avec votre éditeur de texte préféré :

Linux / *nix
vi, emacs, Jedit, Kwrite

...

Windows
HTML-Kit, Blocs Notes

...

Mac OS
 ???

...

Vous devez voir ceci :

Vu du code source avec jEdit sous Linux />

Les curieux et les attentifs ont sûrement déjà remarqué la présence de la
déclaration XML et de la DTD ;o), mais il y a autre chose et c’est cela qui
nous intéresse ici.

Compris dans l’élément head, on peut voir deux choses :

  1. la présence de l’élément title, les balises encadrent le
    texte qui s’affiche dans la barre de menu du navigateur
  2. la présence de la balise

       title="" />

    l’élément link spécifie :

    • le type de lien (rel="stylesheet") : vers une feuille de style
    • la localisation de celle-ci (href="CSS/style01.css") : fichier
      ’style01.css’ dans le répertoire ’CSS’
    • le type de la feuille de style liée (type="text/css")
    • le choix du support de média (media="screen, projection") : il
      existe d’autre média que nous verrons plus tard.

    Le principal avantage à spécifier sa feuille de style externe avec
    l’élément link, est la souplesse d’utilisation, on peut
    ainsi modifier plusieurs pages HTML sans en modifier la source.

Nous allons donc créer une feuille de style, je vous conseille pour
débuter de télécharger un éditeur de CSS, comme tout logiciel ce choix vous
appartient :

Linux
cssed, un
éditeur de css en phase de développement mais très prometteur (version
0.2.1)

c’est le seul éditeur de CSS sous GNU/Linux à ma connaissance, mais
je peux me tromper donc si vous en connaissez un autre pour Linux,
dites le moi ^_^.

Windows
Top Style lite
3.10
, un éditeur gratuit et vraiment efficace de chez Bradbury
Software.

Il existe d’autres éditeurs pour Windows mais je trouve que celui
-ci est le plus simple.

Un bref tutoriel à CSS2

Commençons par créer le fichier CSS, nommons le : style01.css

Pour styler la page HTML, le sélecteur CSS doit appeler l’élément HTML,
c.a.d. :

Dans l’exemple de la page HTML exemple.html,

En HTML :


Fichier d’exemple

En CSS :

h1 {

color: red;

border-bottom: thin solid Navy;

}

Dans cette exemple, le et/ou les attributs h1 seront de
couleur rouge (color : Red ;) et aurons une bordure fine entière Bleu marine
(border-bottom : thin solid Navy ;)

Stylons notre page HTML

Il n’existe pas de régle ou de norme pour l’organisation d’une feuille de
style, par habitude et aussi dans le soucis de pouvoir me relire plus tard,
je fais mes feuilles selon un schéma simple :

Exemple d’une feuille de style :

/*

* @ nom : style01.css

* @ site : http://www.monsite.fr

* @ auteur : marc Poiroud

* @ contact : marciun@free.fr

* @ licence : Creative Commons

* date de création : juillet 2004

* date de MAJ : 2004-07-27

*/

/*style des éléments */

html, body {}

h1, h2, h3, hn {}

p {}

a {}

a:hover {}

...

/*style de l'entete*/

.class p {}

...

/*style colonne droite*/

.classtruc h5 {}

...

/*style cadre article*/

#idmachin {}

...

/*pied de page*/

.pied a {}

...

Pour allez plus loin dans la réalisation de feuille de style, je joins 2 sites qui permetterons à tous de mieux maîtriser la rédaction d’une feuille de style

CSS débutants
Un site d’une trés grande qualité pédagogique, bien fait, clair, bref LE site pour bien commencer en douceur ...
OpenWeb
Ce site est LA seul référence à avoir en tête pour faire un site conforme aux standards du web. Écris par des grands noms du web francophone, il est indispensable de le connaître.
Fichier attachéTaille
DTD01.png84.33 Ko
source02.png113.46 Ko
source03.png42.45 Ko

Commentaires

> Editer des CSS avec Mac OS X

Bonjour,

Parmi les éditeurs de texte utilisables sous Mac OS X on peut citer :

 vi, emacs, pico
 TextEdit, SubEthaEdit (mon préféré)

Voilà.