Voici un exemple de section optionelle. Elles contiennent des explications supplémentaires du langage HTML et du code CSS des exemples. L'icone “alerte!” qui les précède indique que la section contient des informations plus avancéees que le reste.
(Languages: en es it nl pt sr )
Ce court tutoriel est destiné à ceux qui commencent à utiliser CSS et n'ont jamais écrit de feuille de style CSS.
Il n'explique pas CSS en profondeur. Il explique comment créer un fichier HTML, un fichier CSS et comment les faire fonctionner ensemble. Après cela, vous pourrez lire d'autres tutoriels afin d'ajouter plus de caractéristiques à vos fichiers HTML et CSS. Ou bien vous pouvez utiliser un éditeur HTML ou CSS afin de mettre en place des sites complexes.
A la fin de ce tutoriel, vous aurez fait un fichier HTML qui ressemble à cela:
Page HTML résultante, couleurs et disposition effectuées avec CSS.
Notez que je ne prétends pas que c'est joli ☺
Voici un exemple de section optionelle. Elles contiennent des explications supplémentaires du langage HTML et du code CSS des exemples. L'icone “alerte!” qui les précède indique que la section contient des informations plus avancéees que le reste.
Pour ce tutoriel, je vous recommande d'utiliser des outils simples comme Blocnote (Windows), TextEdit (Mac) ou KEdit (KDE). Une fois que vous aurez intégré ces principes, vous pourrez facilement utiliser des outils plus avancés, ou des logiciels commerciaux tels que Style Master, Dreamweaver ou GoLive. Cependant pour votre première feuille de style CSS, il vaut mieux que vous ne soyiez pas distrait par de nombreuses caractéristiques avancées.
N'utilisez pas un logiciel de traitement de texte, tels que Microsoft Word ou OpenOffice, car ils produisent des fichiers qu'un navigateur Web ne sait pas lire. Pour HTML et CSS, nous voulons de simples fichiers texte.
L'étape 1 est d'ouvrir votre éditeur de texte (Notepad, TextEdit, KEdit, etc., quel que soit votre éditeur favori), de commencer avec une fenêtre vide et de taper ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> </head> <body> <!-- Site navigation menu --> <ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a> </ul> <!-- Main content --> <h1>My first styled page</h1> <p>Welcome to my styled page! <p>It lacks images, but at least it has style. And it has links, even if they don't go anywhere… <p>There should be more here, but I don't know what yet. <!-- Sign and date the page, it's only polite! --> <address>Made 5 April 2004<br> by myself.</address> </body> </html>
En fait, vous n'avez pas à le taper: vous pouvez le copier et coller depuis cette page Web dans votre éditeur.
La première ligne du fichier HTML ci-dessus dit au navigateur de quel type d'HTML il s'agit (DOCTYPE signifie DOCument TYPE). Dans ce cas, il s'agit de la version 4.01 d'HTML.
Les mots à l'intérieur de < et > sont nommés balises et comme vous pouvez le voir, le document est contenu à l'intérieur des balises <html> et </html>. Entre <head> et </head> se trouve la place pour des informations variées qui ne sont pas affichées à l'écran. A ce stade, il contient le titre du document, mais plus tard, nous y ajouterons la feuille de style CSS.
Le <body> est l'emplacement du texte à proprement parler de notre document. En principe, tout ce qui s'y trouve sera affiché, à l'exception du texte contenu entre <!-- et -->, qui sert de commentaire pour nous-même. Le navigateur ignorera ce texte.
Parmi les balises de l'exemple, <ul> introduit une “Liste non ordonnée”, c'est à dire une liste dans laquelle les éléments ne sont pas numérotés. La balise <li> est le début d'un “élément de liste ”. Le <p> est un “paragraphe”. Et le <a> est une “ancre”, ce qui crée un hyperlien.
L'éditeur KEdit affichant le code source HTML.
Si vous désirez connaître la signification du contenu d'un <…>, je vous recommande de commencer avec Getting started with
HTML. Mais permettez-moi de vous livrer quelques mots sur la structure de la page HTML en exemple.
Notez que je n'ai pas fermé les éléments “li” et “p”. En langage HTML (mais pas en XHTML), il est permis d'omettre les balises </li> et </p>, ce que j'ai fait la, afin de rendre le texte un peu plus facile a lire. Mais vous pouvez les ajouter, si vous préférez.
Admettons qu'il s'agira d'une page d'un site Web contenant plusieurs pages similaires. Comme dans beaucoup de pages Web actuelles, celle-ci a un menu avec des liens vers d'autres pages de notre site hypothétique, un contenu unique ainsi qu'une signature.
Sélectionnez maintenant “Sauver-sous…” depuis votre menu Fichier, naviguez vers le répertoire/dossier où vous voulez sauver votre fichier (le Bureau est tout à fait convenable) et sauvez le fichier sous le nom “mypage.html”. Ne fermez pas l'éditeur car nous en aurons encore besoin.
(Si vous utilisez TextEdit sur Mac, il vous faudra d'abord dire à TextEdit qu'il s'agit vraiment de texte simple, pour ceci, allez au menu Format et sélectionnez “Make plain text”. Lorsque vous sauvez le fichier, TextEdit propose d'ajouter l'extension “.txt” à ce fichier en texte simple. Choisissez “Don't append.” Parfois le Mac essaie d'être intelligent…)
Ensuite, ouvrez le fichier dans un navigateur. Vous pouvez faire cela comme suit: cherchez le fichier avec votre explorateur de fichiers (Explorateur Windows, Finder ou Konqueror) et cliquez ou double-cliquez sur le fichier “mypage.html”. Il devrait s'ouvrir dans votre navigateur Web par défaut. (Si ce n'est pas le cas, ouvrez votre navigateur et cliquez-déplacez le fichier dans le navigateur.)
Comme vous pouvez le voir, la page est assez ennuyeuse…
Vous voyez probablement du texte noir sur un fond blanc, mais cela dépend de la façon dont le navigateur est configuré. Une manière simple de rendre la page plus stylée et d'y ajouter des couleurs. (Laissez votre navigateur ouvert, nous l'utiliserons à nouveau plus tard.)
Nous allons commencer avec une feuille de style intégrée dans le fichier HTML. Par la suite, nous mettrons le HTML et le CSS dans des fichiers séparés. Sséparer les fichiers est une bonne chose car cela vous permet facilement d'utiliser la même feuille de style sur plusieurs fichiers HTML: il vous suffit d'écrire votre feuille de style une fois. Mais pour cette étape, nous écrirons tout dans notre seul fichier.
Nous devons ajouter un élément <style> au fichier HTML. La feuille de style sera dans cet élément. Retournez à la fenêtre de votre éditeur et ajoutez les cinq lignes suivantes dans la partie head de votre fichier HTML. Les lignes à ajouter sont affichées en rouge (lignes 5 à 9).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[etc.]
La première ligne indique qu'il s'agit d'une feuille de style et qu'elle est écrite en CSS (“text/css”). La seconde ligne indique que nous ajoutons du style à l'élément “body”. La troisième ligne indique que la couleur du texte sera le violet, et la ligne suivante que le fond aura comme couleur une sorte de jaune verdâtre.
Les feuilles de style en CSS sont constituées de règles. Chacune des règles est en trois partie:
L'exemple montre que les règles peuvent être combinées. Nous avonsparamétré deux propriétés, donc nous aurions pu en faire deux règles séparées:
body { color: purple }
body { background-color: #d8da3d }
mais puisque les deux règles affectent le corps (“body”), nous avons indiqué “body” une seule fois et mis les propriétés et valeurs ensemble. Pour en savoir plus sur les sélecteurs, se reporter au chapitre 2 de Lie & Bos.
Le fond de l'élément “body” sera également le fond de tout le document. Nous n'avons pas donné aux autres éléments (p, li, address…) de valeur explicite sur le fond, donc par défaut, ils n'en auront pas (ou plutôt: ils seront transparents). La propriété 'color' détermine la couleur du texte de l'élément “body”, mais tous les autres éléments dans le corps hériteront de cette couleur, à moins qu'une autre soit spécifié (Nous ajouterons d'autres couleurs plus tard.)
Sauvez maintenant ce fichier (utilisez “Sauver” depuis le menu Fichier) et retournez à la fenêtre de votre navigateur. Si vous pressez l'icone “Recharger”, l'affichage devrait changer de la page “ennuyeuse” à une page coloré (mais certes toujours ennuyeuse). A part la liste de liens en haut, le texte devrait maintenant être violet sur un fond jaune verdâtre.
Voici comment un navigateur affiche la page maintenant que des couleurs ont été ajoutéees.
En CSS, les couleurs peuvent être spécifiées de plusieurs manières. Cet exemple en montre deux: par nom (“purple”) et par code hexadécimal (“#d8da3d”). Il y a à peu prè 140 noms de couleurs. Les codes hexadécimaux permettent plus de 16 millions de couleurs. Adding a touch of
style fournit plus d'explications à propos de ces codes.
Une autre chose simple à faire est de distinguer les fontes des différents éléments de la page. Choisissons la fonte “Georgia”, sauf pour le texte des titres de type h1 pour lesquels nous choisirons la fonte “Helvetica.”
Sur le Web, vous ne pouvez jamais être sûr des fontes qu'auront vos lecteurs sur leurs ordinateurs, donc nous ajouterons des alternatives: si Georgia n'est pas disponible,Times New Roman ou Times iront très bien, et si ces deux-la sont également indisponibles, le navigateur pourra utiliser une autre fonte dans la famille serifs. Si Helvetica est absente, Geneva, Arial and SunSans-Regular sont assez similaire en forme, et si aucune de celles-ci ne fonctionne, le navigateur pourra choisir une autre fonte sans serif.
Dans votre éditeur de texte, ajoutez les lignes suivantes (lignes 7-8 et 11-13):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[etc.]
Si vous sauvez à nouveau et pressez “Recharger” dans le navigateur, vous devriez voir des fontes différentes pour le titre et le reste du texte.
Maintenant le texte principal a une fonte différente de celle du titre.
La liste en haut de la page HTML est sensée devenir un menu de navigation. Beaucoup de sites Web ont une sorte de menu en haut ou sur le côté de la page, et notre page devrait en avoir un aussi. Nous le mettrons du côté gauche, parce que c'est un peu plus intéressant qu'en haut…
Le menu est déjà dans la page HTML. Il s'agit de la liste <ul> en haut. Les liens à l'intérieur ne fonctionnent pas, puisque notre “site Web” consiste en une seule page, jusqu'à présent, donc ceci importe peu. Dans un site Web réel, il ne devrait pas y avoir de liens cassé, évidemment.
Nous devons donc déplacer la liste à gauche, et le reste du texte un petit peu à droite, pour faire de la place pour notre menu. Les propriétés CSS que nous utiliserons pour cela sont 'padding-left' (pour déplacer le text du corp) et 'position', 'left' et 'top' (pour déplacer le menu).
Il y a d'autres manières de le faire. Si vous recherchez “column” ou “layout” dans la page Learning CSS, vous trouverez plusieurs modèles prêt à l'emploi. Mais cette manière convient à nos besoins.
Dans la fenêtre d'édition, ajoutez les lignes suivantes au fichier HTML (lignes 7 et 12-16):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[etc.]
Si vous sauvez encore et rechargez la page dans votre navigateur, vous devriez maintenant avoir la liste de liens à gauche du texte principal. C'est déjà bien plus intéressant, n'est-ce pas?
Le texte principal a été déplacé à droite et la liste de liens est maintenant à sa gauche au lieu d'être au-dessus.
'position: absolute' précise que l'élément ul est positionné de façon indépendante de tout texte qui vient avant ou apr`s dans le document, et 'left' et 'top' indiquent quelle est cette position. Dans ce cas, 2em depuis le haut et 1em depuis le côté gauche de cette fenêtre.
'2em' signifie 2 fois la taille de la fonte courante. C'est à dire que si le menu est affiché avec une fonte de 12 points, '2em' font 24 points. L'unité 'em' est très utile en CSS puisqu'elle peut s'adapter automatiquement à la fonte que le lecteur utilise. La plupart des navigateurs ont un menu pour agrandir et réduire la taille de fonte: vous pouvez l'essayer et voir comment la taille du menu augmente dès que la fonte grossit, ce qui n'aurait pas été le cas si nous avions utilisé une taille en pixels à la place.
Le menu de navigation ressemble toujours a une liste au lieu d'un menu. Ajoutons un peu de style. Nous allons supprimer les points de la liste et déplacer les éléments à gauche, à l'endroit où étaient les points. Nous allons aussi donner à chaque élément son propre fond blanc ainsi qu'un carré noir. (Pourquoi? Aucune raison en particulier, si ce n'est que l'on peut le faire.)
Nous n'avons pas déterminé quelle couleur auront les liens, alors nous ajouterons cela également: bleur pour les liens que l'utilisateur n'a pas encore vu et violet pour les liens déjà visités (lignes 13-15 et 23-33):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
[etc.]
Traditionellement, les navigateurs montrent les hyperliens soulignés et en couleurs. Habituellement, les couleurs sont similaires à celles que nous avons spécifiés;es ici: bleu pour les liens vers des pages qui n'ont pas encore été visité (ou visité il y a longtemps), violet pour les pages qui ont été déjà visitées.
En HTML, les hyperliens sont créés avec l'élément <a>, donc pour préciser la couleur, nous devons ajouter une règle de style pour “a”. Afin de différencier les liens visités et les liens non visités, CSS propose deux “pseudo-classes” (:link et :visited). Elles sont appelées “pseudo-classes” pour les distinguer des classes
attributs, qui apparaissent directement dans le HTML, c'est à dire, la classe class="navbar" dans notre exemple.
L'ajout final à notre feuille de style est une ligne horizontale pour séparer le texte de la signature en bas. Nous utiliserons 'border-top' afin d'ajouter une ligne en pointillé au-dessus de l'élément <address> (lignes 34-37):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
[etc.]
Notre style est désormais terminé. Maintenant, penchons-nous sur comment faire de notre feuille de style un fichier à part, de sorte que d'autres pages peuvent partager le même style.
Nous disponsons d'un fichier HTML avec une feuille de style intégrée. Mais si notre site se développe, nous voulons probablement que plusieurs pages partagent le même style. Il existe une meilleure méthode que de copier la feuille de style dans chaque page: si nous mettons la feuille de style dans un fichier à part, toutes les pages peuvent pointer sur celui-ci.
Pour créer un fichier de feuille de style, nous devons créer un autre fichier texte vide. Vous pouvez sélectionner “Nouveau” depuis le menu Fichier de votre éditeur pour obtenir une fenêtre vide. (Si vous utilisez TextEdit, n'oubliez pas de forcer le texte simple à nouveau, en utilisant le menu Format.)
Ensuite, coupez et collez le contenu de l'élément <style> depuis le fichier HTML vers la nouvelle fenêtre. Ne copiez pas les 'éléments <style> et </style>. Ils appartiennent au langage HTML, pas à CSS. Dans la nouvelle fenêtre d'édition, vous devriez maintenant avoir la feuille de style complète:
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Choisissez “Sauver-sous…” depuis le menu Fichier, assurez-vous que vous êtes dans le même répertoire/dossier où vous avez enregistré le fichier mypage.html, et sauvez la feuille de style sous le nom “mystyle.css”.
Revenez maintenant à la fenêtre contenant le code HTML. Supprimez tout depuis la balise <style> jusqu'après la balise </style> et remplacez par l'élément <link> comme suit (ligne 5):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> [etc.]
Ceci indiquera au navigateur que la feuille de style se trouve dans le fichier nommé “mystyle.css” et puisqu'aucun répertoire n'est mentionné, le navigateur regardera dans le même répertoire que le fichier HTML.
Si vous sauvez votre fichier HTML et le rechargez dans votre navigateur, vous ne devriez voir aucun changement: la page a toujours le même style, mais celui-ci provient maintenant d'un fichier externe.
Le résultat final
L'étape suivante est d'enregistrer les deux fichiers mypage.html et mystyle.css sur votre site Web. (Probablement après les avoir modifié un peu au préalable…) Mais cela dépend entièment de votre fournisseur d'accès Internet.
Pour une introduction à CSS, lire le chapitre 2 de Lie & Bos, ou Dave Raggett's intro to CSS (Introduction à CSS par Dave Raggett).
Vous trouverez d'autres informations, ainsi que d'autres tutoriels à la page learning CSS (Apprendre CSS).
