Leçon 12 : La présentation (CSS)
Ne serait-ce pas super si vous pouviez donner à vos pages la présentation qu'elles méritent ?
C'est sûr, mais comment ?
Pour la présentation de votre site Web, utilisez les feuilles de style en cascade (CSS). Dans cette leçon, vous trouverez une brève introduction à CSS. Par la suite, vous pouvez apprendre CSS en entier depuis le début dans notre tutoriel CSS. Donc considérez cette leçon seulement comme une mise en appétit.
CSS est la meilleure moitié de HTML. Et pour le codage, leur statut n'est pas égal : HTML s'occupe du gros-œuvre (la structure), tandis que CSS fait les finitions (la présentation).
Comme indiqué dans la leçon 7, on peut ajouter du code CSS avec l'attribut style.
Par exemple, on peut fixer le type et le corps de la police d'un paragraphe :
Exemple 1 :
<p style="font-size:20px;">Ce texte a un corps de 20</p>
<p style="font-family:courier;">Ce texte est dans la police Courier</p>
<p style="font-size:20px; font-family:courier;">Ce texte est dans la police Courier avec un corps de 20</p>
Dans le navigateur, cela donne :
Ce texte a un corps de 20
Ce texte est dans la police Courier
Ce texte est dans la police Courier avec un corps de 20
Dans cet exemple, nous nous servons de l'attribut style pour définir le type de police à utiliser
(avec la commande font-family) et le corps de la police (avec la commande font-size).
Remarquez dans le dernier paragraphe comment nous avons fixé à la fois le type et le corps de la police avec un point-virgule de séparation.
C'est beaucoup de travail ?
Une caractéristique astucieuse de CSS est la possibilité de gérer la présentation de manière centralisée.
Au lieu d'utiliser l'attribut style dans chaque balise, on peut indiquer au navigateur en une seule fois
comment disposer le texte sur la page :
Exemple 2 :
<html>
<head>
<title>Ma première page avec CSS</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>Ma première page avec CSS</h1>
<h2>Bienvenue sur ma première page avec CSS</h2>
<p>Ici vous pouvez voir CSS à l'œuvre </p>
</body>
</html>
Dans l'exemple précédent, le code CSS a été placé dans la section « head » et il s'applique donc à la totalité de la page.
Pour ce faire, utilisez juste la balise <style type="text/css"> indiquant au navigateur qu'il s'agit de CSS.
Dans l'exemple, tous les titres de la page seront dans la police Arial avec un corps de 30px, tous les sous-titres seront dans la police Courier avec un corps de 15px, et tout le texte des paragraphes ordinaires sera dans la police "times new roman" avec un corps de 8px.
Une autre option consiste à écrire le code CSS dans un document séparé. Avec un document CSS séparé, vous pouvez gérer la présentation de plusieurs pages en même temps. Très pratique si on veut changer le type ou le corps de la police d'un grand site Web contenant des centaines ou des milliers de pages. Nous n'aborderons pas ce sujet ici mais vous pouvez le voir plus tard dans notre tutoriel CSS.
Quoi faire d'autre avec CSS ?
On peut se servir de CSS pour bien plus que définir les types et les corps des polices. Par exemple, on peut ajouter des couleurs et des arrières-plans. Voici quelques exemples à expérimenter :
<p style="color:green;">Un texte en vert</p>
<h1 style="background-color: blue;">Un titre sur fond bleu</h1>
<body style="background-image: url('http://www.html.net/logo.png');">
Essayez de placer ces exemples dans quelques pages, à écrire comme ci-dessus et à insérer dans la section « head ».
Est-ce que CSS ne concerne que les couleurs et les polices ?
Hormis ajouter une présentation tels que des couleurs, des types de polices, etc., CSS peut aussi servir à contrôler la mise en page et la présentation (les marges, le flottement, l'alignement, la largeur, la hauteur, etc.). La régulation des différents éléments par CSS permet de présenter ses pages avec élégance et précision.
Exemple 3 :
<p style="padding:25px;border:1px solid red;">J'aime CSS</p>
Dans le navigateur, cela donne :
J'aime CSS
La propriété float permet de faire flotter un élément à droite ou bien à gauche. L'exemple suivant
en illustre le principe :
Exemple 4 :
<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>
Dans le navigateur, cela donne :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...
Dans cet exemple, un élément (l'image) flotte à gauche, et l'autre (le texte) remplit l'espace ainsi libéré.
La propriété position permet de placer un élément exactement là où on veut qu'il soit dans la page :
Exemple 5 :
<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
Dans l'exemple, l'image se place à 50 pixels du bas et à 10 pixels de la droite dans le navigateur. Mais vous pouvez la placer exactement où vous voulez. Très facile et très cool, n'est-ce pas ?
Super oui ! Mais facile ?
On n'apprend pas CSS en 10 minutes. Et comme annoncé auparavant, cette leçon ne constitue qu'un bref aperçu. Vous apprendrez beaucoup plus après dans notre tutoriel CSS.
Pour l'instant, concentrons-nous sur HTML et passons à la prochaine leçon où l'on apprendra à mettre en place le site Web sur Internet sous le regard du monde entier !