Description des feuilles de style en cascade

Les feuilles de style en cascade (.CSS) regroupent des règles de mise en forme qui déterminent l'aspect du contenu d'une page Web. Lorsque vous utilisez CSS pour formater une page, vous séparez le contenu de sa présentation. Le contenu de votre page (le code HTML) réside dans le fichier HTML, tandis que les règles CSS qui définissent la présentation du code résident dans un autre fichier (une feuille de style externe) ou dans une autre partie du document HTML (généralement dans la section head). CSS permet de contrôler de façon précise et souple l'aspect de la page, tant en termes de précision de l'emplacement des éléments, qu'en termes de choix de polices et de styles spécifiques.

Les feuilles de style CSS permettent de contrôler de nombreuses propriétés qui ne sont pas accessibles directement avec le code HTML. Par exemple, vous pouvez spécifier différentes tailles et unités de police (pixels, points, etc.) pour le texte sélectionné. En utilisant CSS et en définissant les tailles de police en pixels, vous garantissez un traitement plus homogène de la présentation et de l'aspect de votre page dans différents navigateurs.

Outre la mise en forme du texte, CSS permet de gérer le format et le positionnement des blocs d'éléments d'une page Web. Vous pouvez ainsi définir des marges et des bordures pour des blocs, faire flotter du texte autour d'un autre texte, etc.

Une règle de formatage CSS se compose de deux entités : le sélecteur et la déclaration. Le sélecteur est un terme (tel que P, H1, un nom de classe ou une id) qui identifie l'élément formaté, tandis que la déclaration définit les éléments du style. Dans l'exemple suivant, H1 correspond au sélecteur et tout ce qui est placé entre les accolades ({}) correspond à la déclaration :

H1 {
font-size: 16 px;
font-family: Helvetica;
font-weight:bold;

}

La déclaration est composée de deux entités : la propriété (par exemple, font-family) et la valeur (par exemple, Helvetica). Dans la règle CSS précédente, un style particulier a été créé pour les balises H1 : le texte de toutes les balises H1 liées à ce style sera associé à une police Helvetica, d'une taille de 16 pixels et en gras.

Le terme en cascade signifie qu'il est possible d'appliquer plusieurs feuilles de style à un même élément. Vous pouvez, par exemple, créer une règle CSS pour définir la couleur et une autre pour les marges, puis les appliquer toutes les deux au même texte sur une page. Les styles définis « sont appliqués en cascade » aux éléments de votre page Web, créant pour finir la conception désirée.

CSS présente l'avantage majeur d'être facilement mis à jour. Lorsque vous modifiez une règle CSS en un emplacement, la mise en forme de tous les documents utilisant ce style reflète automatiquement le nouveau style.

Vous pouvez définir les types de styles suivants dans Dreamweaver :

• Les règles CSS personnalisées, également appelées styles de classe, définissent les attributs de styles d'une plage ou d'un bloc de texte. (voir Application d'un style de classe).
• Les styles appliqués aux balises HTML redéfinissent le formatage de ces balises, par exemple h1. Lorsque vous créez ou modifiez un style CSS pour la balise h1, tout le texte formaté à l'aide de cette balise h1 est immédiatement modifié en conséquence.
• Les styles des sélecteurs CSS (styles avancés) redéfinissent le formatage d'une combinaison particulière d'éléments, ou pour les autres formes de sélecteur autorisées par le code CSS (par exemple, le sélecteur td h2 s'applique lorsque l'en-tête h2 figure dans une cellule de tableau.) Les styles avancées permettent également de redéfinir le formatage des balises qui contiennent un attribut id (par exemple, les styles définis par #monStyle s'appliquent à toutes les balises qui contiennent la paire attribut-valeur id="monStyle").

Les règles CSS peuvent résider aux emplacements suivants :

Les feuilles de style CSS externes regroupent des règles CSS enregistrées dans un fichier .css externe distinct (pas dans un fichier HTML). Ce fichier est lié à une ou plusieurs pages d'un site Web à l'aide d'un lien situé dans la section head d'un document.

Les feuilles de style CSS internes (ou incorporées) regroupent les règles CSS incluses dans une balise style de la section head d'un document HTML.

Les styles en ligne sont définis avec des instances spécifiques de balises dans un document HTML.

Dreamweaver reconnaît les styles définis dans des documents existants, pour peu qu'ils soient conformes aux recommandations des feuilles de style CSS.

La mise en forme HTML manuelle peut remplacer le formatage de la feuille de styles CSS. Pour permettre aux règles CSS de contrôler totalement la mise en forme d'un paragraphe, vous devez supprimer tout le formatage manuel du code HTML.

Dreamweaver restitue la plupart des attributs de style appliqués directement dans la fenêtre du document. Vous pouvez également afficher un aperçu des styles appliqués au document dans une fenêtre de navigateur. Certains attributs de style CSS s'affichent différemment dans Microsoft Internet Explorer, Netscape Navigator, Opera et Apple Safari ou ne sont encore pris en charge par aucun navigateur.