Intégrer du CSS dans une page html
Intégrer du CSS dans une page html
-
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
- 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.
-
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.
<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> Syntaxe
<link rel="stylesheet" type="text/css" href="style.css"><!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>