Pour réaliser des mises en page avancées et sophistiquées, les simples styles HTML ne suffisent plus. Maintenant vous devez effectivement adopter les feuilles de styles en cascade.
Ce chapitre constituera donc une présentation du langage css et vous indiquera les différentes façons de créer des feuilles de styles css avec les fonctionnalités d'un éditeur de texte comme le Notepad++ par exemple.
Les blocs de styles
Un bloc de styles permet de modifier l'apparence d'une seule page. Il s'introduit à l'aide des balises <style>...</style> dans l'en-tête de votre document (à l'intérieur du couple de tags <head>...</head> inséré entre les balises <html> et <body>).
<html>
<head>
<title>Un exemple de bloc de style</title>
<style type="text/css">
body {
font-family: arial;
color: maroon;
background-color: white;
margin-left: 100px;
}
h1 {
font-size: 20pt;
color: red;
}
h2 {
font-size: 16 pt;
color: blue
}
</style>
</head>
<body>
<h1>Exemple de style</h1>
<h2>Titre de niveau 2</h2>
Cette page contient des balises personnalisées avec une feuille de style (CSS). La déclaration se fait dans l'en-tête du document entre les balises HEAD
</body>
<html>
Ce bloc indique au navigateur l'apparence de la balise <h1> lorsqu'elle apparaît dans la page, en l'occurrence la taille des caractères a été réglée sur 20 points et leur couleur rouge. La police de la balise <h2>, quant à elle, est bleue et sa taille est de 16 points
Le reste du texte fait appel à la police Arial en couleur marron avec un arrière-plan blanc. Le paramètre TYPE, qui s'intègre dans la balise <style>, indique le langage de description de la feuille de styles qui peut être différent du CSS