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.
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.
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...
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 ?
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.
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.
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...
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.
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.
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.
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.
Contact : pascale at mammouthland.net
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
Premiers pas en CSS
- Principe des CSS
- Balises HTML de base
- Feuille de style CSS de base
- Mettre en forme un texte
- Gérer les marges en CSS
- Sélecteurs CSS class et id
- Mise en page sans tableau
- Bordures en CSS
- Image de fond en CSS
- Effets rollover en CSS
- Aligner image et texte
- Puces en images
- Citations et retraits
