Mise en place des CSS

Définition

Les CSS (en anglais Cascading Style Sheets, autrement dit Feuilles de style en cascade) sont un langage de programmation qui permet la mise en forme du contenu HTML. Leur rôle est comparable aux feuilles de style que vous pouvez connaître en mise en page, dans Word ou InDesign.

Les règles de mise en forme sont regroupées dans un fichier nommé Feuille de style et portant le suffixe .css

Où placer des règles de style?

Les règles de style sont la plupart du temps placées dans un fichier externe au format CSS. Cela permet d'associer ce fichier à plusieurs pages HTML, qui répondent à la même mise en forme. Du coup, toute modification du fichier CSS est automatiquement appliquée à toutes les pagesHTML liées. Toutes les règles CSS peuvent se répartir dans plusieurs fichiers CSS et une page HTML peut être liée à plusieurs feuilles de style à la fois.

Il est égalemenrt possible de placer des règles CSS à l'intérieur d'une page HTML. Elles ne seront valables que pour cette page. C'est intéressant pour des pages à la mise en forme isolée, une page d'accueil par rapport au reste d'un site par exemple. Dans ce cas, le code CSS se place automatiquement danbs la partie <head> de la page.

Enfin, il est possible de spécifier une règle extrêmement ponctuelle directement en attribut d'une balise, relativement à un élément spécifique du contenu.

http://css.developpez.com/tutoriels/premiers-pas/#LII

http://www.siteduzero.com/tutoriel-3-13517-mettre-en-place-le-css.html#ss_part_1

Créer un fichier externe css

Deux méthodes pour créer un fichier CSS externe. Ce type de fichier est traditionnellement rangé dans un dossier nommé "css" au premier niveau du dossier racine local.

1. Menu Fichier > Nouveau… > CSS. Il faut alors enregistrer le fichier créé dans le dossier racine.

2. Créer une nouvelle règle et créer le fichier CSS en même temps. Dans la Palette Styles CSS, cliquer sur le bouton +, Nouvelle règle de CSS.

Une nouvelle fenêtre s'affiche. En bas, dans le Menu "Définition de règle", choisir "Nouveau fichier…". Il vous est demandé de nommer le fichier et de l'enregistre dans le dossier racine local. À ce stade, il est d'usage de créer un dossier CSS dans lequel les Feuilles de style seront enregistrées. Ne pas oublier le suffixe .css dans le nom du fichier.

Voici le résultat dans la palette Styles CSS :

Dans le code de la page, dans la partie >head>, le code liant la feuille de style à la page est le suivant :

<link href="file:///joujou/Users/doubleg/Sites/site_dsaa_martiniere/0_cours/css/styles_monsite.css" rel="stylesheet" type="text/css" />

Sélecteurs css

Le plus important, lorsque l'on crée une règle CSS est de savoir à quelle sélection, ou sélecteur, on applique cette règle. Il y a principalement trois types de sélecteurs.

1. Sélecteur de balise. Il s'agit de modifier le comportement d'une balise en particulier dans une page. La première d'entre-elles est la page elle-même, soit la balise body. Choisir nouvelle règle dans la Palette Style CSS, puis dérouler le menu Type de sélecteur. Choisir balise et dans la zone "Nom du sélecteur" taper une balise ou en choisir une dans lle menu local proposé.

2. Sélecteur de type ID. Il s'agit de nommer un élément HTML de manière unique. Ce peut être un titre, une zone, un paragraphe, etc.. Ce nom apparaîtra ensuite précédé du signe #. Il ne peut être utilisé qu'une seule fois dans une page. Une règle appliquée à un ID ne s'appliquera donc qu'à cet élément précisément.

3. Sélecteur de type classe. Choisir le nom que vous voulez donner à cette classe. Le nom ser anesuite précédé d'un point. La règle est définie mais pas appliquée. Il faut ensuite réaliser une sélection dans le contenu, un mot dans un paragraphe par exemple, puis à partir de la Palette Propriétés, appliquer la règle depuis la zone Classe. Une classe peut être appliquée à une sélection autant de fois qu'on le souhaite sur une page. C'est le cas par exemple du code sur cette page (voir plus haut).

http://www.zonecss.fr/courscss/cours_feuille_css_33.html

ou plus complet :

http://www.yoyodesign.org/doc/w3c/css2/selector.html