Feuilles de style CSS

1. Les langages du web : le HTML et les CSS

Depuis la version 4 de l’HTML (décembre 1999), le W3C propose les feuilles de style en cascade, les Cascading Style Sheet (CSS). Le but est de bien séparer le contenu, décrit par le HTML, de la mise en forme et de la mise en page, décrites par les feuilles de style. Au lancement des CSS, les navigateurs ont eu « du mal » à bien interpréter et à afficher correctement les feuilles de style. Actuellement, la situation s’est nettement améliorée, même si elle n’est pas encore parfaite.

Aujourd’hui, l’objectif de tout créateur de site web est de créer des sites respectueux des standards en utilisant au mieux le meilleur de la technologie : le HTML et les CSS.

Dreamweaver vous permet d’utiliser pleinement les dernières versions des langages fondateurs que sont l’HTML5 et les CSS3. Nous l’avons vu dans le chapitre précédent, vous devez « juste » bien déclarer le doctype, la DTD HTML5.

2. Pourquoi utiliser les CSS ?

Utiliser les CSS n’a que des avantages :

1. Où enregistrer les feuilles de style ?

Pour enregistrer vos styles, vous avez deux solutions principales. La première est d’enregistrer les styles dans le document HTML qui doit utiliser ces styles. Dans ce cas, la « portée » d’utilisation des styles est limitée à cette page HTML exclusivement. La deuxième possibilité est d’enregistrer les styles dans un document CSS (l’extension du fichier sera .css). Dans ce cas, vous allez pouvoir lier toutes les pages HTML que vous voulez à ce fichier CSS. La « portée » d’utilisation des styles est dans ce cas la plus importante : c’est le site entier qui va pouvoir utiliser le même fichier CSS.

2. Connaître les sélecteurs

Les feuilles de style utilisent ce qui s’appelle des « sélecteurs ». Un sélecteur indique à quel élément HTML s’applique tel ou tel style.

Vous pouvez créer un style qui pourra s’appliquer à n’importe quel élément HTML. Ce sont les sélecteurs de classe. Vous nommez le style, vous définissez ses propriétés de mise en forme et vous l’appliquez aux éléments HTML que vous voulez : sélection de mots, paragraphe, en-tête, cellule de tableau, image...

Vous pouvez redéfinir...

1. Créer un sélecteur CSS

Voyons comment créer une classe simple qui sera enregistrée dans le fichier HTML.

1. Créer le fichier CSS et un sélecteur

Dans le même document HTML que précédemment, voyons comment créer un sélecteur d’éléments dans un fichier CSS extérieur au fichier HTML. Nous allons d’abord créer le fichier CSS externe et la liaison avec le fichier HTML va se faire automatiquement. Puis nous créerons un sélecteur dans ce fichier CSS externe.

1. Sélectionner la bonne source

L’onglet Sources du panneau CSS Designer vous permet de visualiser vos sources de styles CSS.

Dans cet exemple, nous avons une source interne avec des styles enregistrés dans la page HTML. C’est l’indication de la source <style>.

Nous avons deux sources externes, deux fichiers CSS liés à cette page HTML. Ce sont les fichiers new-styles.css et styles-perso.css.

2. Supprimer une source externe

À tout moment, vous pouvez supprimer une source de styles CSS, que cette source soit interne, les styles CSS sont enregistrés dans le fichier HTML ou qu’elle soit externe, avec un fichier CSS lié.

1. Ajouter un nouveau sélecteur

Voyons comment ajouter un nouveau sélecteur CSS à la source interne de notre fichier HTML vide de toute règle CSS. Ce nouveau style sera enregistré dans le fichier HTML.

2. Modifier un sélecteur

Pour modifier un sélecteur vous devez sélectionner d’abord son contexte de création, c’est-à-dire sa source et sa requête multimédia et ensuite vous pouvez sélectionner le sélecteur à modifier.

1. Appliquer un sélecteur d’élément

Les sélecteurs d’élément permettent de modifier la mise en forme d’un élément HTML existant. Cela veut dire que dès que vous allez utiliser un élément HTML dont vous avez modifié la mise en forme, l’application du style va se faire automatiquement.

Dans cet exemple, nous avons un style avec le sélecteur d’élément h2, qui est enregistré dans le fichier HTML. Dans la page HTML, le titre « Lorem ipsum dolor sit amet » utilise le Format de texte En-tête 2, qui correspond à l’élément HTML <h2>. L’application de la mise en forme se fait automatiquement. Ce n’est pas à vous de l’appliquer.

2. Appliquer un sélecteur de classe à un texte

Pour les sélecteurs de classe, c’est bien à vous de les appliquer. Quand vous souhaitez appliquer un style à un format de texte, c’est-à-dire à un élément HTML « conteneur » de texte (paragraphe, en-têtes, paragraphe de citation, listes et texte préformaté), il vous suffit d’avoir le point d’insertion qui clignote dans le texte concerné. Autrement dit : un clic suffit dans le texte.

Dans cet exemple, le point d’insertion clignote dans le paragraphe de texte :

1. Ajouter une propriété

Utilisez le panneau CSS Designer pour ajouter des propriétés au sélecteur CSS sélectionné. Les propriétés CSS sont classées par thème et accessibles par quatre boutons. Vous avez dans l’ordre : Disposition, Texte, Bordure, Arrière-plan et Plus.

2. Ajouter manuellement une propriété

Vous avez la possibilité d’ajouter « manuellement » une propriété CSS à un sélecteur. C’est très utile dans le cas où vous connaissez le nom exact de la propriété, cela permet d’aller plus vite que de la chercher dans la liste globale des styles, et dans le cas où c’est une nouvelle propriété non encore implémentée...