Cours / Tutorials CSS - Premiers pas
Avec ce cours, le plus long de tous, on entre dans le vif du sujet. C'est peut être aussi le plus difficile à appréhender. Il est donc impératif que vous ayez bien compris, maitrisé et retenu les cours Xhtml afin de pouvoir vous concentrer sur les nouveauté : CSS
Premiers pas avec les balises
Pour commencer, nous allons intégrer les CSS dans une page Xhtml. Vous allez de suite en voir l'intérêt.
Les CSS se placent dans une balise <style>. Cette balise doit avoir l'attribut type="text/css" et se place dans le <head>.
Exemple 1 : un page simple valide Xhtml et CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Premiers pas</title>
<style type="text/css">
body
{
background-color:#e0e0e0;
font-family:Tahoma;
}
h1
{
color:#990000;
font-size:16px;
text-align:center;
}
p
{
font-size:13px;
}
</style>
</head>
<body>
<h1>Commençons en CSS</h1>
<p>Pas mal !</p>
</body>
</html>
Tapez l'exemple. En tapant, vous observez que le logiciel vous aide en vous proposant des "codes". Par exemple, au moment où vous commencez à taper "background-color", vous remarquez qu'il vous indique toutes les possibilités de code CSS et à mesure que vous avancez, il trouve ce que vous cherchez. Vous avez la possibilité de naviguer dans ces propriétés pour directement sélectionner celle que vous cherchiez. C'est ce qu'on appelle l'intellisense.
Enregistrez la page et regardez là. Vous pouvez la charger comme jusqu'ici dans le navigateur ou vous pouvez la regarder directement dans VWD en cliquant sur le mode design ou "split" qui affiche le code et le mode design. Ne vous servez de ce mode que pour vérifier ce que vous avez tapé et n'y écrivez jamais ! C'est important pour votre compréhension et pour prendre les bonnes habitudes.
Explications sur cette première page avec CSS
Vous avez vérifié le positionnement de la balise <style> qui sera toujours identique. Dans la balise <style>, nous pouvons mettre en forme tout le contenu xhtml d'une page. Les CSS sont très puissantes.
Pour mettre en forme une balise, on la note suivi de "{" et "}". Par exemple :
p { }
Toutes les CSS sont sensible à la casse. Vous devez donc bien tout écrire en minuscule.
body
Dans ce premier exemple, nous avons attribué des propriétés à la balise <body>, ce qui en revient à les appliquer à la page. La première de ces propriétés est "background-color" qui a défini une couleur de fond à notre page. Ici, un léger gris. Nous avons également décidé que la police de la page serait "tahoma".
Comme les balises à l'intérieur de la balise body héritent de ces propriétés, tous les textes de la page seront écrit avec la police Tahoma, à moins qu'on ne modifie cette propriété dans la balise souhaitée.
h1
Nous avons modifié la taille et la couleur de la balise titre <h1> et décidé de centrer le texte.
p
Nous avons juste modifié la taille du texte de paragraphe.
Note : Les bases
A l'école, vous avez tous appris à compter en base 10. Cela veut dire que dans votre tête, dans vos additions, et autres opérations mathématiques, vous avez 10 chiffres, de 0 à 9. Cependant, il existe d'autres bases.
La base 2
Vous avez probablement déjà tous entendu parler de la base 2 autrement appelée binaire. C'est celle de tous nos ordinateurs. Ils ne connaissent que deux chiffres : 0 et 1. Ils font tous leurs calculs sur cette base, un peu comme sur un boulier chinois. Compter en base 2 :
0 => 0 ; 1 => 1 ; 2 = > 10 ; 3 => 11 ; 4 => 100 ; 5 => 101 ; 6 => 111 ; etc.
En binaire, si 10 + 1 = 11, 1 + 1 = 10 ! (si vous avez compris ça, vous avez tout compris)
La base 16
La base 16, dite hexadécimale est celle qui nous intéresse sur Internet. Au lieu de n'avoir que 2 ou 10 chiffres, nous en avons 16 ! Ces derniers sont :
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f
Ainsi, en hexadécimale, 9 + 1 = a ; 8 + 3 = b; etc. !
Note : le fonctionnement des couleurs
Les couleurs sont généralement notées en commençant avec le caractère "#". S'en suivent 6 chiffres hexadécimaux, ou plutôt 3 nombres.
Sur un écran, les couleurs sont notés RVB (Rouge, Vert, Bleu). Les deux premiers caractères d'une couleur CSS indiquent donc le rouge, les deux suivant le Vert et les deux derniers le bleu.
Un rouge franc sera : ff0000
Un vert franc : 00ff00
Un bleu franc : 0000ff
Le blanc est ffffff tandis que le noir est 000000.
A vous de faire vos mélanges ! Mais ne vous inquiétez pas, ça va venir, d'autant plus que vous serez aidez pas différents logiciels et sites Internet pour vos couleurs. Nous y reviendrons.
Aparté sans importance : les couleurs écran sont à synthèse additive. Cela veut dire qu'en mélangeant toutes les couleurs, on obtient du blanc. A l'inverse, la gouache est à synthèse soustractive, en mélangeant toutes les couleurs, vous obtiendrez du marron.
Exercices à faire et refaire
Il est possible que cela vous fasse beaucoup d'un coup. Ne vous en faites pas et entrainez vous. Rien qu'avec ce que nous venons de voir, vous pouvez faire beaucoup de choses. Modifiez les différents titres que vous avez utilisés dans vos exercices xhtml (si possible, pas de copier-coller, retapez tout, y compris le Xhtml !), les balises <b>, <i>, <u>, <li>… peuvent être modifiées.
Avec "text-decoration=underline;", la balise gras soulignera. Avec "text-decoration=none;font-weight=bold;", la balise <u> deviendra un équivalent de la balise <b>, etc.
Exemple d'exercice : faire une page en modifiant l'épaisseur du texte de paragraphe, en soulignant les textes en gras, en espaçant les caractères des titres, etc. Et modifiez les couleurs !
Faites 4 ou 5 pages que vous relierez entre elle avec des liens.
Autre exercice : utisez l'intellisense pour découvrir d'autres possibilités de modification des textes. Cherchez par vous même.
Après avoir cherché par vous-même, vérifiez que vous avez bien trouvé et compris les éléments essentiels à la mise en forme de textes en jetant un oeil à l'aide suivante :
>>> Mise en forme des textes en CSS
Avant de passer à la suite, il vous faut être certain de pouvoir refaire ces exercices sans aide. Vos page doivent pouvoir passer au validateur Xhtml. Vous devez être à l'aise avec l'intellisense. Vous ne devriez pas avoir utilisé de copier-coller. C'est important parce que si ce n'est pas le cas, vous avancerez moins vite et surtout moins bien. Par contre, si c'est bien le cas, tout le reste va maintenant vous paraitre simple.