Aujourd'hui, nous allons écrire et exécuter notre premier programme CSS. Nous allons utiliser un IDE HTML comme VSCode, notepad++ ou un simple éditeur de texte.
1. Syntaxe générale du code css
La syntaxe d'un code css se declare de la façon suivante :
|
1 |
Selecteur de balise{ propriete: valeurs;} |
- Le sélécteur : C'est généralement l'élément ou la balise html auquelle on veut appliquer le style.
- La propriété : est l'attribut qu'on souhaite modifier en introduisant une valeur.
Exemple
Voici le code css permettant de mettre toutes les balises H1 en rouge et centrée:
|
1 |
H1 { color : red; text-align : center;} |
2. Insertion du code CSS interne à la page
La méthode interne à la page, encadre le code css entre les balises <style> et </style> et l'intègre directement entre les balise <head> et </head>
Exemple
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <style> h1{ color:red; text-align: center; } h2{ color:blue; } </style> <title>Exemple CSS</title> </head> <body> <h1>CSS TUTORIAL</h1> <h2>Introduction</h2> </body> </html> |
3. Insertion du code CSS externe à la page
Les feuilles de style externes sont créées dans des documents séparés avec une extension .css. Une feuille de style externe est simplement une liste de règles CSS. Il ne peut pas contenir de balises HTML. La balise , qui se place dans l'en-tête d'une page HTML, est utilisée pour créer un lien vers une feuille de style externe. Il n'y a pas de limite au nombre de feuilles de style externes qu'une seule page HTML peut utiliser. En outre, les feuilles de style externes peuvent être combinées avec des feuilles de style intégrées.
Cette méthode emagazine le code css dans un fichier dont l'extension est .css par exemple style.css et introduit dans les pages html entre les balises <head> et </head> un lien du type :
|
1 |
<link rel="stylesheet" type="text/css" href="path/style.css"/> |
path: designe le chemin vers la feuille de style css.
Younes Derfoufi
CRMEF OUJDA
