CSS Débutants

Vous êtes ici > Index | Cours | CSS débutants

Mon intention n'est pas de faire ici un cours de référence sur les CSS (Feuilles de Style en Cascade), mais juste de regrouper les différentes astuces de code que je publie de temps en temps sur le weblog.

Pour de véritables références constructives, vous trouverez à gauche (dans la catégorie "Plus") quelques liens vers des sites sérieux et utiles pour tout apprendre sur le html, le css ou le php.

CSS, kezako ?

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 Sheet" (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.
Celle-ci sera liée à chaque page html. Ainsi, lorsqu'on en modifiera un élément, cela se répercutera immédiatement sur toutes les pages web. Puissant et pratique ;-)

Mais cela ne s'arrête pas là. Outre les couleurs et les polices, on peut aussi changer radicalement l'apparence d'un site en abandonnant la mise en page à l'aide de tableaux. Soyons clair : un tableau sert à présenter des données tabulaires -point barre-
Pour une mise en page souple et cohérente, on utilisera des "blocs" (appelés aussi "boites" ou "calques"), qui ont l'avantage de pouvoir être déplacés de gauche à droite, ou de haut en bas grâce aux CSS.

Et ce n'est pas plus difficile que d'utiliser des tableaux contrairement à ce que certains de mauvaise foi voudraient bien faire croire !
Cela dit, même si on utilise un logiciel wysiwyg tel que Dreamweaver, il convient tout de même de connaître quelques balises html, car ce sont celles-ci qui vont être indiquées dans la feuille de style.

Balises html de base

Document

<html></html> : document html
<body></body> : corps du document

Titres

<h1></h1> : titre 1er niveau
<h2></h2> : titre 2ème niveau
<h3></h3> : titre 3ème niveau (... et ainsi de suite jusqu'à 6)

Éléments de texte

<p></p> : paragraphe
<ul></ul> : liste à puce
<ol></ol> : liste numérotée
<li></li>: élement d'une liste
<a href=""></a> : lien hypertexte