img-css-width

Feuille de style CSS

Nous sommes en mesure de pla­cer des images dans la page HTML, cepen­dant nous sommes limi­tés dans la mise en forme. C’est à ce moment qu’intervient la CSS (Cas­ca­ding Style Sheet ou feuille de style en cascade).

La CSS nous per­met de créer des règles spé­ci­fiant com­ment le contenu d’un élé­ment appa­raît. Par exemple, nous pou­vons pré­ci­ser que le fond d’une page est rouge, que tous les para­graphes seront gris et avec la police de carac­tère Georgia.

Pour com­prendre com­ment fonc­tionne la CSS, il faut ima­gi­ner une boite invi­sible autour de chaque élé­ment HTML.

img-boite

En rouge, notre boîte imaginaire

Les régles CSS contrôlent la manière dont chaque boîte indi­vi­duelle et son contenu s’affiche. Elles fonc­tionnent en asso­ciant des pro­prié­tés à chaque élé­ment HTML. Une règle contient 2 par­ties : un sélec­teur et une décla­ra­tion.

Le sélec­teur déter­mine sur quel élé­ment s’appliquera la règle.

La décla­ra­tion indique com­ment l’élément s’affichera.

css01-1

Cette règle CSS indique que toutes les images auront une lar­geur de 300 pixels.

Les décla­ra­tions CSS sont com­prises entre 2 acco­lades et sont com­po­sées de 2 par­ties :
une pro­priété et une valeur, sépa­rées par un double-point. On peut pré­ci­ser plu­sieurs pro­prié­tés dans une décla­ra­tion en les sépa­rant par un point-virgule.

css02-1

La pro­priété indique l’aspect de l’élément que vous sou­hai­tez chan­ger. Par exemple, color (cou­leur), width (lar­geur), height (hau­teur),
font (police de caractères).

La valeur pré­cise le para­mètre que vous vou­lez chan­ger pour une pro­priété choisies.

Il y a plu­sieurs façons de lier des règles CSS avec une page HTML.

Feuille de style interne

html-css-style

< style >

On peut inclure une feuille de style direc­te­ment dans la page HTML. Pour cela on place les dif­fé­rentes règles entre l’élément <style>, à l’intérieur de l’élément <head> de la page.

Quand on construit un site avec plu­sieurs pages, il faut uti­li­ser une feuille de style externe.

Feuille de style externe

html-css-style

< link >

L’élément <link> peut être uti­lisé dans un docu­ment HTML pour indi­quer au navi­ga­teur où se trouve la feuille de style externe qui gère les styles de la page.
Il doit se trou­ver dans l’élément <head>.
Il pos­sède 3 attributs :

href

spé­ci­fie le che­min vers la feuille de style externe.

type

la valeur doit être text/css.

rel

La valeur doit être sty­le­sheet.

Ces 2 feuilles de style don­ne­ront le même résultat :

css-style-link-result

0