Vous êtes ici > CSS Débutant | Premiers pas en CSS

Premiers Pas en CSS

Principe des CSS

Le design d'un site évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut reprendre toutes les pages une à une pour modifier une police de caractère ou une couleur de fond...
Avec les "Cascading Style Sheets" (CSS), ce lourd handicap est résolu.

C'est dans la feuille de style que l'on va déclarer toute la mise en forme des pages : la couleur de fond, les polices de caractère, leurs couleurs, etc.

Balises html de base

Pour comprendre le fonctionnement du langage CSS, il est nécessaire d'avoir quelques notions en (x)html. Le html est un langage simple, fait de balises (du genre <tag>) qui ont toutes une fonction et un sens. C'est ce qu'on appelle la sémantique.
Respecter la sémantique, c'est améliorer l'accessibilité... et aussi le référencement. Cela dit, on ne perdra jamais de vue que l'humain passe avant les robots ! On fait un site pour des utilisateurs, pas pour le plaisir de se retrouver en tête de requêtes sur google.

Voici donc les quelques balises (x)html fondamentales à connaître pour comprendre la structure d'une feuille de style.

Feuille de style 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. On la liera ensuite à la page html à l'aide d'un link placé dans l'en-tête de la page.
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...

Mettre en forme un texte

Il est très important de bien choisir le formatage des polices de caractères utilisées sur une page web. En effet, pour une majorité de sites, le principal contenu est sous forme textuelle. Si ce texte est mal adapté, peu lisible, le message ne peut évidemment pas passer, quelque soit sa qualité.

Comment mettre en forme un texte grâce au CSS, quels sont les pièges à éviter ?

Gérer les marges en CSS

Pour affecter des marges aux différents éléments d'une page web, les propriétés CSS à utiliser sont margin, pour les marges extérieures, et padding pour les marges intérieures. Quand on a dit ça, on pourrait croire que ça suffit tant ça paraît simple.

En fait, ce n'est pas tout à fait vrai...

De la théorie à la pratique : tout ce que vous devez savoir sur les marges en CSS sans avoir besoin de le demander.

Résoudre les problèmes de marges en CSS

Les propriétés margin et padding ont bien été utilisées, et pourtant le rendu visuel est différent selon les navigateurs... ça part "en vrille", en particulier avec Internet Explorer. Pourquoi ?

Exposé des problèmes éventuels, précautions et solutions (non exhaustives...) pour avoir des marges similaires quelque soit le navigateur.

Sélecteurs class et id

A quoi servent les sélecteurs CSS class et id ? Tout simplement à définir des styles particuliers que l'on voudra reproduire de façon ponctuelle ou récurrente dans les pages (x)html.
Une fois que la la feuille de style de base n'a plus de secrets, il est temps de passer à la vitesse supérieure.

Les sélecteurs class et id sont incontournables et indispensables. Voyons leurs similitudes et leurs différences par deux exemples.

Mise en page full CSS

Faire une mise en page avec deux ou trois colonnes peut se faire aisément sans tableaux. Diverses techniques sont possibles. On trouve sur le net une multitude de tutoriels de webdesign sur la mise en page fluide sans tableaux, à commencer par celui du W3C et ceux de l'excellentissime Alsacréations qui propose en outre une série de gabarits forts utiles.

Ce tutoriel ne tente pas donc de réinventer la poudre, mais simplement résumer les différentes techniques possibles.

Mise en page en colonnes avec display:table

Et si pour faire de la mise en page on utilisait... des tableaux ? Quoi ? Qu'est-ce qui vous choque ? Mais oui, on peut faire de la mise en page par tableau en CSS ! Et sans qu'une balise table ne soit utilisée dans le code html...

Explications et application d'une mise en page sans tableaux... avec des tableaux ! (à moins que ce ne soit l'inverse)

Bordures CSS

Avoir des bordures pour délimiter une zone, mettre en relief une information ou pour entourer les cellules d'un tableau, est très répandu sur les pages web. Pour des bordures simples, nul besoin d'avoir recours à des images.

Border un paragraphe, une image ou un bloc d'une ou plusieurs bordures est d'une simplicité enfantine...

Image de fond

Mettre une image de fond dans une page web est un exercice très répandu. Avec tout éditeur de page html, l'option classique est de générer un code du type : <body background="images/image_de_fond.png">, auquel on peut même ajouter bgproperties="fixed" qui rend fixe l'image de fond ; mais cet attribut ne fonctionne qu'avec MSIE.

Avec les feuilles de style on peut obtenir beaucoup plus !

Effets rollover

Pour tout effet de rollover (c'est à dire de changement d'aspect d'un élément au survol de la souris), la pseudo-classe CSS à utiliser est :hover.

On fait tout avec ça : changements d'apparence de texte, de couleur de fond, d'apparition (ou de disparition) d'image, de zoom d'image, etc.

Enfin, en théorie... Car hélas MSIE n'implémente cette propriété qu'à partir de sa version 7 pour autre chose que des liens.

Ce tutoriel va donc passer en revue différentes options les plus recherchées et quelques petites choses plus "exotiques" en matière de rollover.

Aligner une image et du texte

Pour positionner une image à droite ou à gauche d'un texte, on peut bien sûr utiliser une mise en forme par tableau... Mais un tableau n'est pas fait, normalement, pour faire de la mise en page.

A l'aide du langage CSS, aligner une image et du texte est très simple grâce à la propriété CSS float qui fait "flotter" les éléments.

Puces en images

Des listes à puces avec des images sont plus attrayantes que les styles donnés par défaut (disc, circle, square). Pour cela, inutile d'incorporer une image à chaque item dans le code (x)html. Il y a beaucoup plus simple !

Grâce aux CSS, on peut automatiser facilement la mise en image des listes à puces.

Citations et retraits

Tout débutant (enfin, beaucoup...) en création de page web constate que l'utilisation balise blockquote induit un retrait du texte. Déduction : la balise blockquote est faite pour mettre un texte en retrait...

Et bien non ! Elle n'est pas du tout faite pour cela. "Quote" en anglais veut dire "citer". Cette balise doit donc être utilisée pour mettre en relief un "bloc" de citation.

Il y a d'autres méthodes pour faire des retraits que d'utiliser la balise blockquote.

Haut

Contact : pascale at mammouthland.net

Creative Commons License

En cas de reproduction (partielle ou totale) de cet article, prière de faire un lien vers la page originale : http://css.mammouthland.net/premiers-pas-en-css.php