Cours CSS : définition d'un style

Définition

La syntaxe d'un style est toujours la même, elle précise la balise à laquelle le style va s'appliquer, et les différents attributs du style. Les attributs sont enfermés entre deux accolades ou 2 guillemets (précédés de Style=) selon les cas, et chacun des attributs est séparé par un point virgule. On donne la valeur de l'attribut par la syntaxe suivante "nom de l'attribut:valeur de l'attribut".

balise { propriété de style: valeur; propriété de style: valeur }

Exemple :

H3 { font-family: Arial; font-style: italic }

Donc ici, la balise H3 sera en Arial et en italique. Et dans votre document, toutes les balises <H3> auront comme style Arial et italique.

Commentaires :

Les feuilles de style portent principalement sur des balises et quelques autres éléments comme par exemple A:link pour un lien non-visité et A:visited pour un lien visité. Comme balises souvent utilisées avec des feuilles de style, on peut citer les en-têtes Hn, P, BODY...
Les propriétés de style sont entourées par des "{" et par des [ ou des parenthèses.
Le couple "propriété de style/valeur" est séparé par un double-point (:).
Chaque couple "propriété de style/valeur" est séparé par un point-virgule (;).
Il n'y a pas de limite pour le nombre de couples "propriétés de style/valeur".
L'espace entre propriétés de style et valeur n'est pas obligatoire mais aide fortement à la lisibilité du code source.
Pour la lisibilité toujours, vous pouvez écrire vos styles sur plusieurs lignes :

H3 {font-family: Arial;
font-style: italic;
font-color: green}

On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on séparera les différentes valeurs par des virgules.

H3 {font-family: Arial, Helvetica, sans-serif}

On peut attribuer un même style à plusieurs balises (séparées par des virgules).

H1, H2, H3 {font-family: Arial; font-style: italic}

Il existe 3 manières d'utiliser et d'intégrer les feuilles de style dans un document HTML, intra-lignes, globales, ou importées. Chacune de ces manières a ses avantages et ses particularités.

A l'intérieur des balises <HEAD></HEAD> : CSS Globale

Une feuille globale va se déclarer dans la tête du document, entre les balises HEAD. Elle va s'appliquer globalement à toutes les balises du document qu'elle a défini.

La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style.
L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading style sheets (css). Pour l'instant, il s'agit de la seule possibilité mais on peut prévoir à l'avenir d'autres versions de ce "langage".
La balise Html de commentaires  empêche que les browsers qui ne connaissent pas les feuilles de style, tentent d'interpréter ces instructions. Les informations à l'intérieur des tags de commentaires seront ignorées par ces browsers.
Pour vos propres commentaires à propos des feuilles de style, on utilisera la convention désormais classique (C, C++, Javascript...) de /* commentaires */.

A coté des balises : CSS Intra-lignes

Une feuille intra-ligne s'insère directement à côté de la balise qu'elle définit, elle ne constitue donc pas véritablement une feuille, simplement elle permet très localement de fixer des attributs à une partie d'un document. Sa déclaration est un peu particulière, en voici une (notez la forme Style=" "):

<HTML>
<BODY>
<H1 style="font-family: Arial; font-style: italic"> blabla </H1>
</BODY>
</HTML>

Signalons :

que le style Arial, italique n'affectera que cette seule balise H1.
que la syntaxe est légèrement différente de la précédente.
que l'écriture : <STYLE type="text/css">H1 { "font-family: Arial; font-style: italic" }</STYLE> fonctionne aussi.

Dans un document séparé : CSS importée

Une feuille liée va se déclarer à part, dans un fichier avec une extension .css qui sera mis à côté des autres documents dans le répertoire du site web. Cette feuille de style sera valable pour toutes les pages du site qui l'appelleront dans les balises HEAD. C'est un outil très puissant pour uniformiser la mise en pages d'un grand nombre de documents.

Principe :

On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit styles.css qui contiendra toutes les feuilles de style.

TD {font-family:Arial,Helvetica; font-size:10pt}

Ensuite, on crée une page soit page.htm avec dans la <HEAD> un lien vers ce fichier CSS :

Commentaires :

La balise <LINK> avertit le browser qu'il faudra réaliser un lien.
L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il y trouvera une feuille de style externe.
L'attribut type="text/css" précise que l'information est du texte et du genre cascading style sheets (css).
L'attribut classique de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier.

Nous vous informons que ce cours constitue une œuvre protégée en France par le Code de la Propriété Intellectuelle, et à l’étranger par les conventions internationales en vigueur sur le droit d’auteur. La violation de l’un des droits d’auteur de l’œuvre est un délit de contrefaçon. Il est donc interdit, à titre privé ou public, de reproduire, copier, vendre, revendre ou exploiter, que ce soit dans un but commercial ou purement gratuit, ce cours, sauf accord exprès et préalable de son auteur.

Cours CSS N°1 : définition d'un style