Objectifs
- Connaitre trois méthodes différentes pour ajouter des éléments de style à votre page web.
Introduction
- Les feuilles de style ou CSS (Cascading Style Sheets) sont indispensables pour les documents HTML.
- Il existe trois méthodes pour utiliser et intégrer les feuilles de style dans un document HTML
- intra-lignes,
- globales,
- importées.
- Chacune de ces manières a ses avantages et ses particularités.
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.
- Cette méthode peut être utilisée de deux façons différentes.
- Soit
- Ou
<BODY> <H1 style="font-family: Arial; font-style: italic">Je suis un text Arial italique</H1> </BODY><BODY> <STYLE type="text/css"> <H1 { "font-family: Arial; font-style: italic" }>Je suis un text Arial italique </STYLE> </BODY> - C’est la méthode la plus simple, mais peut-être la moins bonne, car elle ne peut s’appliquer qu’à un seul contenu entre deux balises et n’autorise pas l’utilisation des attributs de balises de types classes « class » ou identifiants « id ».
CSS importée (méthode conseillée)
<link>est une balise HTML qui n'est pas uniquement prévue pour lier des feuilles de styles, mais qui peut aussi faire référence à d'autres pages HTML sur le site, liées par une hiérarchie.- Cette méthode consiste à créer une feuille liée à part, dans un fichier avec une extension .css qui sera mis à côté des autres documents dans le répertoire du site web.
- Le fichier contenant les instructions CSS (fichier .css, ou feuille de style CSS) doit être lié à toutes les pages HTML auxquelles on veut en changer l'affichage. Syntaxe
<link rel="stylesheet" type="text/css" href="style.css">CSS Globale
- A l'intérieur des balises
<HEAD></HEAD>: CSS Globale - Les feuilles de style d'une page web sont déclarées grâce à la balise STYLE, au sein des balise <HEAD> et </HEAD>.
- Cette seconde méthode est plus évoluée. Les règles CSS sont regroupées dans l'entête de la page HTML.
<!DOCTYPE html> <html> <head> <title>Titre de l'onglet de ma page</title> <style type="text/css"> h1 { color: red; } h2 { color: blue; } </style> </head> <body> <h1>Titre de ma page</h1> <h2>Titre de paragraphe</h2 > </body> </html>- A l'intérieur des balises