Comment appliquer un style à une Page Web ?
Apres avoir écrit un style selon la syntaxe, comment l'implanter dans un code HTML afin de voir l'effet produit par notre style.
Il y a trois façons principales d'appliquer des styles CSS :
- Dans la balise à l'intérieur du corps du code HTML ;
- Dans l'en-tête de la page HTML c'est-à-dire entre les balises <Head> et </Head> ;
- Dans un fichier CSS totalement séparée du code HTML qu'on inclura dans l'entête de la page HTML.
On peut écrire du code CSS à 3 endroits différents, selon ce qu'on préfère :
- Méthode 1 : dans un fichier .css (le moyen le plus recommandé)
- Méthode 2 : dans l'en-tête du fichier HTML
- Méthode 3 : dans les balises
Nous allons faire une description de chacune de ces techniques. Si vous ne devez en retenir qu'une, retenez la première.
I- Méthode 1 : Le code CSS dans un fichier .css totalement séparée du code HTML
La façon idéale de définir les CSS consiste à les enregistrer dans un document indépendant de vos pages HTML.
Grâce à cette méthode, toutes les pages qui font référence à cette feuille de style externe hériteront de toutes ses définitions.
Un autre intérêt de cette méthode est de pouvoir définir plusieurs feuilles de styles pour le même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le contenu est affiché (écran, imprimante, etc.). Nous reviendrons plus tard sur cet aspect.
Une page HTML peut faire référence à plusieurs feuilles de styles en même temps. Dans ce cas, les définitions contenues dans ces différentes feuilles seront combinées entre elles.
1- Quelques Avantages de cette méthode
Il y a de multiples avantages à séparer les feuilles de styles du contenu. Citons en particulier :
- La réduction de la taille des pages : Les définitions de style ne sont faites qu'une seule fois, même si elles sont utilisées plusieurs fois ;
- La réduction des temps de connexion : Les navigateurs garderont en mémoire (en cache) le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site. Seuls les contenus des pages devront être chargés au cours de la navigation ;
- Une mise à jour plus facile : Vous n'aurez besoin que de changer la feuille de style pour mettre à jour la présentation de l'ensemble de votre site ;
2- SYNTAXE
La syntaxe est la suivante :
<HTML>
<HEAD>
<Title> Titre de la page </Title>
<link rel = "stylesheet" type="text/css" media="screen" href=" URL_ fichier css" />.
</HEAD>
<BODY>
<! -- Vos balises ici --- >
</BODY>
</HTML>
Exemple : <link rel="stylesheet" type="text/css" media="screen" href="fichier.css" />.$
3- TP Créer une page web et sa feuille de style de tel sorte que tous les paragraphes de ma page web soient écrits en bleu avec une taille de 18 pixels.
Le code du style CSS sera : P { Color : Blue ; Font-size : 18 px; }
Étape 1 : Crée un dossier nommé "site".
Étape 2 : Ouvrir l'éditeur de texte et saisir le code ci dessus et enregistre dans le dossier "site" sous le nom "design.css".
Etape 3 : saisir le code HTML et enregistre dans le dossier "site" sous le nom "inex.html".
Le fichier "design.css" et "index.html" se trouvent dans le meme dossier
Etape 4 : Accéder au dossier « Mon site » et lancer la page web « index.html » et apprécier le résultat.
II- Méthode 2 : Le code CSS dans l'en-tête de la page
Il est aussi possible de taper du CSS directement à l'intérieur même du fichier HTML, entre les balises <head> </head>. Les feuilles de style dans l'entête d'une page web sont déclarées grâce à la balise <style> </style> à l'intérieur desquelles vous devez saisir votre code CSS. La syntaxe est la suivante :
Syntaxe
<HTML>
<HEAD>
<Title> Titre de la page </Title>
<STYLE type="text/css">
<!--
Définition des styles;
-->
</STYLE>
</HEAD>
<BODY>
< !-- Vos balises ici --- >
</BODY>
</HTML>
Exemple : Reprenons le TP précédent
<html >
<head>
<title> Exemple de CSS dans le header </title>
<style type="text/css">
p
{
Color : blue;
Font-size: 18 px;
}
</Style>
</Head>
<Body>
<p>
Cette page comporte du CSS directement dans le header.
</p>
</Body>
</Html>
III- Méthode 3 : Le code CSS dans une balise
Syntaxe
<HTML>
<HEAD>
<Title> Titre de la page </Title>
</HEAD>
<BODY>
<BALISE Style="propriété 1 : valeur;
Propriété 2 : valeur ;�.">
...
</BALISE>
</BODY>
</HTML>
Exemple : Reprenons le TP précédent
<Html >
<head>
<title> Exemple de CSS dans le header </title>
</head>
<Body>
<p Style=" color: blue; font-size: 18 px;" >
Cette page comporte du CSS directement dans le header.
</p>
</Body>
</Html>
A découvrir aussi
Inscrivez-vous au blog
Soyez prévenu par email des prochaines mises à jour
Rejoignez les 26 autres membres