Pour réaliser des mises en page avancées et sophistiquées, les simples styles HTML ne suffisent plus. Maintenant vous devez effectivement adopter les feuilles de styles en cascade.
Ce chapitre constituera donc une présentation du langage css et vous indiquera les différentes façons de créer des feuilles de styles css avec les fonctionnalités d'un éditeur de texte comme le Notepad++ par exemple.
Travailler avec des classes
Si vous utiliser des styles différents pour un même tags, vous pouvez adopter les classes et des ID. Ils représentent des définitions de style distinctes (plusieurs séries de propriétés entourées d'une paire d'accolades) qui pourront s'appliquer à une seule balise.
Pour ajouter une classe dans votre feuille de styles, choisissez un nom et faites-le précéder d'un point (.).
Déclarez ensuite vos propriétés comme d'habitude. Voici un exemple de définition de style pour le tag <h1> accompagné d'une alternative :
Pour être bref, sachez que l'utilisation des ID s'accommode parfaitement des langages de script pour des animations, entre autres. Mais si vous vous contentez d'intégrer dans vos présentations de simples feuilles de styles, les classes feront l'affaire.
Mais supposons maintenant que vous voulez décaler légèrement le texte en rouge pour mieux le distinguer des autres blocs. Rien de plus simple, nous avons inséré une nouvelle balise : <div>. Elle permet de définir un nouveau style pour une section de votre page uniquement. Comme vous l'avez compris, les instructions contenues dans ce tag seront interprétées prioritairement par les navigateurs:
<div style="margin-left: 40px">
<h2>Ce bloc a été défini avec un style à part, qui ne fait pas partie de la déclaration principale</h2>
</div>
Ces quelques lignes de code placent le paragraphe à 40 pixels de la marge de gauche, tandis que toutes les autres sections utilisent la valeur définie dans le fichier style.css, en l'occurence 30 pixels.
En fait, cette manipulation d'élément dans une page HTML avec les feuilles de styles porte un nom : c'est le positionement absolu. Désormais, vous pouvez définir exactement l'emplacement de chaque objet dans la fenêtre des navigateurs qui afficheront votre page.
Notez enfin qu'il existe une commande semblable à la balise <div>, qui est la balise <span>. Elle n'est utilisée toutefois pour des petites portions de la page : des mots ou des lettres, par exemple. Ici, le terme "grand" s'affiche en italique, en bleu et avec une police de 30 points :
