Introduction aux feuilles de style en cascades (CSS - Cascading Style Sheet)

Les feuilles de style en cascade représentent un type de langage HTML étendu qui donne un contrôle “absolu” sur l'apparence de vos pages web. Les CSS procurent une réelle rigueur typographique, un “look” et une maîtrise constante sur l'ensemble du site web. De ce fait on peut dire qu'elles donnent un pouvoir créatif à tous ceux qui n'en ont pas…Au départ du moins.

Une feuille de style en cascade est une liste de règles définies par le langage HTML. Le terme en cascade se réfère à la manière dont les règles générales des CSS s'effacent devant les règles locales. Avec les CSS, vous pouvez définir des règles générales ou locales. Comme les règles locales l'emportent toujours sur les règles générales, on s'y réfère en tant que cascade.

Il faut bien comprendre que les CSS sont un composant du DHTML (D pour dynamique), or le DHTML fait partie des spécifications du langage HTML 4.0. Ainsi on peut dire que les CSS sont des ajouts au langage HTML récent. De ce fait les CSS ne sont pas supportées sur les anciens navigateurs. Par exemple, Internet Explorer 3.0 ne reconnaîtra pas la mise en forme créée par les CSS, mais affichera le texte formaté avec le bon vieil HTML classique.

On peut créer deux types de feuilles de style avec les CSS : Des feuilles de style internes, et des feuilles de style externes. Une feuille de style interne stocke ses données dans le code HTML de la page, et n'applique des styles qu'à cette page. Une feuille de style externe est un fichier texte que l'on crée et stocke en dehors de la page HTML. Ainsi, il est plus façile d'appliquer un même style sur la majorité voire la totalité des pages du site.

On peut définir deux types de styles de CSS : Les styles personnalisés et les styles de balises HTML redéfinis. Ces deux styles peuvent être utilisés soit en interne soit en externe. La différence de ces deux styles vient du fait que lorsqu'on redéfinit les balises HTML, cela se ramène à rajouter un style à un style HTML; Alors qu'un style personnalisé est un nouveau jeu d'attributs.

1. Les styles personnalisés des CSS sont appelés des classes. Ainsi lorsqu'on définit un style personnalisé, on lui donne un nom de classe. Ce nom de classe sera utilisé pour appliquer le style à n'importe quel bloc de texte. Le résultat est que l'on peut soit appeler soit créer un style personnalisé pour n'importe quelle partie de la page, sans que le nouveau style affecte nécessairement les éléments d'une page.
2. En contraste, lorsqu'on crée un style de balises HTML en redéfinissant la manière dont les balises existantes vont être interprétées par le navigateur, on modifie des règles plutôt que d'en créer de nouvelles. Cela signifie qu'il y aura une altération de la manière dont les les balises HTML communes formatent le texte de la ou les pages. Le résultat est que si on redéfinit une balise texte <B> par exemple, tout le texte déjà mis en forme avec cette balise sera automatiquement actualisé pour refléter la nouvelle définition du style.

remarque Finalement, créer un style personnalisé ressemble à la définition d'une balise HTML personnalisée, mais avec des règles de mise en forme plus souples et donc plus faciles à maîtriser.

Supposons qu'on définisse la balise <B> afin d'obtenir un texte en bleu et d'une taille de 12 pts. Normalement, le texte contenu dans cette balise est en gras, c'est tout! Le fait de redéfinir la balise <B> ajoute de nouveaux attributs que sont la couleur bleue et la taille de 12 pts. Mais puisque les feuilles de styles sont en cascades, tout style appliqué aux balises qui se trouvent dans la balise <B> écrase le style de cette même balise <B> qui l'enferment. Par conséquent, si vous avez placé un jeu de balises <i> dans la balise <B>, et que vous avez spécifié que le texte de la balise <i> est rouge, tout texte tombant dans cette balise sera rouge et non pas bleu, en plus d'être mis en italique. LaA balise <i> écrase le contenu des balises <B> qui ont pourtant la gentillesse de l'accueillir. Cela est vrai pour n'importe quelle balise modifiée à l'aide des CSS.

Sous dreamweaver MX, dans le panneau Création se trouve la fenêtre Styles CSS. Dans le coin inférieur droit de cette fenêtre se trouve 4 petits icônes. De gauche à droite, il s'agit de :

1. Attacher une feuille de style
2. Nouveau style
3. Modifier une feuille de style
4. Supprimer style

Lorsqu'on clique sur modifier un feuille de style, la boîte de dialogue apparaît. 4 options sont présentes sous forme de boutons :

• Lien : Permet de lier ou d'importer une feuille de style externe.
• Nouveau : Permet de définir un des trois types de feuilles de styles.
• Modifier : Permet de modifier un style existant.
• Dupliquer : Permet de créer une copie d'un style sélectionné que l'on peut ensuite redéfinir.

Cliquez sur Nouveau : une nouvelle boite de dialogue Nouveau style apparaît. Plusieurs options sont alors proposées:

• Créer un style personnalisé (classe) : Permet de définir un nouveau style, appliquable à n'importe quelle section de texte sur une page à l'aide de l'attribut de classe. Lorsque vous sélectionnez cette option, le premier champ vous demande un nom. Tous les noms des styles personnalisés doivent commencer par un point. Il est automatiquement inséré par Dreamweaver. Ce type de style est également connu en tant que classe.
• Utiliser le Sélecteur CSS : Permet de définir une sorte de pseudo classe qui combine un style personnalisé avec une balise HTML redéfinie. Les stytles Sélecteur CSS s'appliquent uniquement à la balise <A>. De ce fait, ils ne permettent que de modifier la couleur du texte-lien quand la souris passe dessus.

Si vous sélectionner cette option, le premier champ “Nom” vous demande d'indiquer le nom du Sélecteur. Vous avez le choix parmi :

• a:active → Affecte un lien actif, qui est déclenché lorsque quelqu'un clique dessus.
• a:hover → Est déclenché quand la souris se trouve sur le lien.
• a:link → Est appliqué à n'importe quel texte-lien.
• a:visited → Affecte des liens qui ont déjà été visités.

• Définir dans : Cette option permet de décider si votre feuille de style existe dans la page en cours ou dans un fichier séparé. Lorsque vous sélectionnez un nouveau fichier feuille de style, vous créez une feuille de style externe. Si vous sélectionnez l'option “Seulement ce document”, vous créez une feuille de style interne.

Quand vous choisissez de créer un nouveau style et que vous en sélectionnez un dans les options des types de style, la boîte de dialogue Définition du style apparaît. C'est là que vous décidez de l'aspect de votre style en sélectionnant certains attributs. Cette boîte de dialogue contient huit catégories. Chacune propose de multiples options dont vous pouvez vous servir pour définir divers éléments. Celle que vous utiliserez le plus sera la catégorie “Type”. Il s'agit en fait des principales modifications que l'on peut apporter au texte. Par contre, vous n'êtes pas obligé de définir chaque option de ces catégories. Toute option laissée vierge utilisera les paramètres par défaut du navigateur.

Ainsi, lorsque vous avez définis les styles, il vous faut maintenant les appliquer. Voici comment appliquer un style :

1. Sélectionner le texte auquel vous désirez appliquer un style.
2. Choisissez Fenêtre/Styles CSS. (le panneau Styles CSS apparaît)
3. Sélectionnezr le style que vous désirez appliquer. (Le style est automatiquement appliqué)

Vous pouvez créer des feuilles de styles externes comme vous avez créé des feuilles de styles internes. La seule différence est que la feuille de style externe doit être sauvegardée dans un fichier texte séparé. Quand vous utilisez Dreamweaver pour créer une feuille de style externe, le programme établit automatiquement un lien vers les pages Web auxquelles vous désirez appliquer les définitions de style.

Pour créer une feuille de style externe, suivez les mêmes étapes que pour une feuille de style interne sauf que, dans la boîte de dialogue “Nouveau style”, vous devez sélectionner “Nouveau fichier feuille de style” au lieu de seulement ce document. Lorsque vous cliquez sur OK, une boîte de dialogue d'enregistrement apparaît. Elle vous invite à enregistrer la feuille de style sur votre disque dur en tant que fichier externe avec l'extension ”.css”.

1. Sélectionnez Fenêtre/Styles CSS. (le panneau Styles CSS apparaît)
2. Cliquez sur l'icône “Attacher une feuille de style” dans le panneau Styles CSS.
3. Après avoir localisé le fichier externe, cliquez sur le bouton “Sélectionner”. (Ouvrir pour Mac)

Ainsi, le fichier est automatiquement lié à la page. Tous les styles définis dans la feuille de style externe apparaissent maintenant dans le panneau Styles CSS.