Développement Web : "Zone Grand Débutant"


précédentsommairesuivant

III. CSS : Présentation du document

III-A. Introduction

Les trois notions fondamentales :
  • Le fichier est au format CSS ;
  • Le document est à destination de l'internaute ;
  • L'outil est un autre document (une page Web HTML).

Les CSS (Cascading Style Sheet = feuille de styles) sont des documents au format texte, tout comme le HTML. La différence est qu'une CSS n'est prévue ni pour être visualisée par l'internaute ni pour être affichée directement dans le navigateur. Une feuille de styles n'est qu'un document qui définit comment une page HTML doit être affichée. Le navigateur Web s'occupe de charger la CSS sans que l'internaute doive intervenir ; une CSS a pour vocation d'agir en arrière plan.

En utilisant des styles, il est par exemple possible de dire que tous les liens, au lieu d'être bleus ou violets comme on en a l'habitude, doivent être gris ; ou bien que le texte est toujours orange.

En fait, l'idée est que le navigateur parcourt le document HTML. Lorsqu'il rencontre une balise, il demande à la CSS de quelle manière il doit l'afficher. La CSS ne sait rien faire d'autre que dire comment doit être affiché tel ou tel élément de la page Web.

Les CSS sont l'un des éléments qui constituent le DHTML : Dynamic HTML.

III-B. Outils nécessaires

Pour créer des feuilles de style, vous pouvez utiliser les mêmes outils que pour vos documents HTML. Vous n'avez besoin de rien pour les visualiser puisque ce n'est pas l'objectif : leur utilité est d'être combinées aux documents HTML. Votre navigateur Web sait ce qu'il doit faire des CSS. N'hésitez pas à consulter notre page d'Outils CSSLes meilleurs outils pour développer en CSS.

III-C. Votre premier style

Il y a trois manières de définir des styles dans une page Web. La plus simple est d'utiliser l'attribut style de la balise que l'on veut modifier.

Exemple :
Sélectionnez
<h1 style="font-style: italic; size: 1.5em;">Titre de la page</h1>

À l'intérieur de l'attribut style, il est possible de mettre n'importe quelle quantité de propriétés CSS : zéro, une, autant que l'on veut. L'ordre dans lequel on met ces propriétés influe rarement, nous n'allons donc pas nous en occuper pour le moment.

Un style s'écrit de la manière suivante : identifiant (nom du style) suivi de deux points, de la valeur et d'un point virgule. Dans l'exemple ci-dessus, nous avons les propriétés "font-style" et "size" avec les valeurs (respectivement) "italic" et "1.5em".

L'attribut style que je viens d'utiliser peut être ajouté à n'importe quelle balise HTML.

III-D. Formation

III-D-1. Organisme de référence

L'organisme de référence est le World Wide Web Consortium (W3C).

III-D-2. Nos ressources habituelles

III-D-3. Notre sélection de cours

CSS : Notions de base

Pierre-Baptiste Naigeon vous présente son utilisation des CSS dans les pages Web avec son cours d'initiationTutoriel CSS : Notions de base.

Div et CSS : une mise en page rapide et facile

Pierre-Baptiste a également prévu pour vous un tutoriel vous enseignant à moins utiliser la balise <table> : utilisez la balise <div> pour structurer vos documents.

Écrire du bon code CSS

Adrien Pellegrini a parlé des feuilles de style dans son guide : style de programmation.


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2007 Guillaume Rossolini. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.