<h1 style="/* Votre style pour cette balise ici */">Titre
</h1>
Dans un CSS, on trouve 3 éléments différents :
- Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si je veux modifier l'apparence de tous les titres <h1>, je dois écrire h1
- Des propriétés CSS : les "effets de style" de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte etc etc... Il y a beaucoup de propriétés CSS et, comme je vous l'ai dit, je ne vous obligerai pas à les connaître toutes par coeur (sauf s'il me prend une envie sadique de vous faire souffrir ^^)
- Les valeurs : à chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la couleur, il faut indiquer le nom de la couleur. Pour la taille, il faut indiquer quelle taille on veut etc etc...
Schématiquement, une feuille de style CSS ressemble à ça :
Code : CSS - Afficher / masquer les numéros de ligne
-
balise1
-
{
-
propriete: valeur;
-
propriete: valeur;
-
propriete: valeur;
-
}
-
balise2
-
{
-
propriete: valeur;
-
propriete: valeur;
-
propriete: valeur;
-
propriete: valeur;
-
}
-
balise3
-
{
-
propriete: valeur;
-
}
Vous repérez sur ce schéma les balises, propriétés et valeurs dont je viens de vous parler.
Comme vous le voyez, on écrit le nom de la balise (par exemple
h1), et on ouvre des accolades pour y mettre les propriétés et valeurs que l'on veut à l'intérieur.
On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades (enfin, il faut en mettre au moins une sinon ça sert à rien ^^)
Chaque propriété est suivie du symbole "deux-points" (
:) puis de sa valeur correspondante. Enfin, chaque ligne se termine par un point-virgule (
;)
Le point-virgule n'est pas obligatoire s'il n'y a qu'une seule propriété pour la balise (comme c'est le cas pour la balise 3). Toutefois, il vaut mieux prendre l'habitude de le mettre tout le temps, c'est plus sûr
Je vous apprendrai de nombreuses propriétés dans les chapitres suivants. Pour le moment, on va en utiliser deux ou trois au hasard pour l'exemple, mais rassurez-vous : je vous les expliquerai dans les chapitres suivants plus en détail.
Supposons par exemple que je veuille modifier tous mes paragraphes pour qu'ils soient écrits en bleu, avec une taille de 18 pixels.
Je sais que tous les textes de mes paragraphes sont entre des balises <p> </p>, je vais donc écrire le code CSS suivant :
Code : CSS - Afficher / masquer les numéros de ligne
-
p
-
{
-
color: blue;
-
font-size: 18px;
-
}
Cela signifie en français : "
Je veux que tous mes paragraphes soient écrits en bleu avec une taille de 18 pixels."
Ne mettez jamais d'espace entre "18" et "px", car sinon le code CSS ne fonctionnera pas !
Enregistrez ce code CSS dans un fichier "essai.css" par exemple.
Il va falloir maintenant créer un fichier XHTML banal pour tester notre CSS. Il ne faut pas oublier de mettre la balise <link /> dont je vous ai parlé plus haut pour indiquer où se trouve notre fichier CSS.
Voici le fichier de test que j'ai créé, gardez-le dans un coin car il contient de nombreuses balises et il est probable qu'on s'en serve un moment pour les tests de nos futurs CSS :
Code : HTML - Afficher / masquer les numéros de ligne
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
-
<head>
-
<title>Page d'exemple pour tester le CSS</title>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="essai.css" />
-
</head>
-
<body>
-
<h1>Découverte du CSS</h1>
-
-
<p>
-
Bonjour !<br />
-
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour les tutoriels du <a href="http://www.siteduzero.com">Site du Zér0</a>
-
</p>
-
-
<h2>Ce n'est que du blabla</h2>
-
-
<p>
-
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
-
J'aime la choucroute en conserve.<br />
-
Vive les frites !
-
</p>
-
<p>
-
Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
-
</p>
-
</body>
-
</html>
Essayez de modifier le fichier CSS, en mettant une autre couleur ("red" pour rouge par exemple, et "24px" pour avoir un texte écrit très gros ^^).
Ce qui est génial avec le CSS, c'est que vous pouvez changer l'apparence de tous les paragraphes de vos pages d'un seul coup ! Il suffit de modifier le fichier .css et hop, les modifications sont appliquées
Pour vous entraîner, essayez d'appliquer des styles CSS aussi à d'autres balises comme les titres (h1, h2, em etc...). Ok, pour le moment je ne vous ai montré que 2 propriétés CSS, mais ça devrait vous suffire pour faire des petits tests
Appliquer un style à plusieurs balises
Prenons le code CSS suivant :
Code : CSS - Afficher / masquer les numéros de ligne
-
h1
-
{
-
color: red;
-
}
-
h2
-
{
-
color: red;
-
}
Il signifie que nos balises h1 doivent être en rouge, ainsi que nos balises h2.Oui mais voilà, c'est répétitif car c'est exactement la même chose.
Heureusement, il existe un moyen en CSS d'aller plus vite si les styles de 2 balises doivent avoir la même présentation. Il suffit de séparer les noms des balises par des virgules, comme ceci :
Code : CSS - Afficher / masquer les numéros de ligne
Cela signifie : "
Je veux que le texte de mes titres <h1> et <h2> soient écrits en rouge".
Vous pouvez indiquer autant de balises à la suite que vous le désirez. Par exemple, si vous voulez mettre en rouge vos titres, vos liens et vos citations, vous taperez :
h1, h2, a, q
C'est compris ?
Des commentaires dans du CSS
Comme en XHTML, il est possible de mettre des
commentaires. Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations pour vous, par exemple pour vous y retrouver dans un looong fichier CSS.
D'ailleurs, vous allez vous en rendre compte, en général le fichier XHTML est assez petit, et la feuille CSS assez grande (si elle contient tous les éléments de style de votre site, c'est un peu normal). Il est possible (et recommandé) de créer plusieurs fichiers CSS : un fichier pour le design, un autre pour le forum, un autre pour le menu etc etc...
... De quoi on parlait déjà ? Ah oui, les commentaires en CSS (désolé je deviens un peu gâteux :p).
Donc, pour faire un commentaire, c'est fastoche : vous tapez
/*, suivi de votre commentaire, puis
*/ pour terminer votre commentaire.
Vos commentaires peuvent être sur une ou plusieurs lignes. Par exemple :
Code : CSS - Afficher / masquer les numéros de ligne
-
/*
-
essai.css
-
---------
-
-
Par M@teo21
-
Fichier créé le 10/10/2004
-
*/
-
-
p
-
{
-
color: blue; /* Les paragraphes seront bleus */
-
font-size: 18px; /* La taille de 18 pixels me semble pas mal */
-
}
Il est probable que j'utilise pas mal de commentaires dans la suite du cours pour vous donner des explications à l'intérieur même des fichiers .css
Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes soient écrits par exemple en bleu / 18 pixels.
Comment faire pour que seulement certains paragraphes (ou certains titres, ou certaines citations) soient écrits d'une manière différente ?
On a la possibilité pour faire cela d'utiliser des attributs spéciaux qui
fonctionnent sur toutes les balises :
- L'attribut class
- L'attribut id
Nous allons voir les choses suivantes dans l'ordre :
- Ce que sont les class et id et comment s'en servir
- Les balises dites "universelles" et leur utilité
- Les imbrications de balises
Que de réjouissances en perspective !!!
Class et id
Que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence que je vous dévoilerai plus bas.
Pour le moment et pour faire simple, on ne va s'intéresser qu'à l'attribut
class.
Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image que etc...
<h1 class=""> </h1>
<p class=""></p>
<img class="" />
Oui mais que met-on comme valeur à l'attribut class ?
En fait, vous mettez un nom. Ce que vous voulez.
Les class vous permettent de
définir un style personnalisé.
Supposons que vous vouliez définir un style appelé "important" qui écrive le texte en rouge / 18 pixels. Vous rajouterez l'attribut
class="important" à chacune des balises que vous voulez modifier.
Sur cet exemple j'ai rajouté un attribut
class à un paragraphe et à la citation :
Code : HTML - Afficher / masquer les numéros de ligne
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
-
<head>
-
<title>Page d'exemple pour tester le CSS</title>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<link rel="stylesheet" media="screen" type="text/css" title="Essai 2" href="essai2.css" />
-
</head>
-
<body>
-
<h1>Découverte du CSS</h1>
-
<p>
-
Bonjour !<br />
-
Je suis une page XHTML <em>apparemment</em> banale, mais je sers en fait de test de fichier <acronym title="Cascading Style Sheets">CSS</acronym> pour les tutoriels du <a href="http://www.siteduzero.com">Site du Zér0</a>
-
</p>
-
<h2>Ce n'est que du blabla</h2>
-
<p>
-
Comme l'a dit Neil Armstrong un certain 20 juillet 1969 : <q class="important">C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q><br />
-
J'aime la choucroute en conserve.<br />
-
Vive les frites !
-
</p>
-
<p class="important">
-
Quoi, ça ne veut rien dire ce que j'écris ? On s'en fout, c'est pour tester notre fichier .css rhalala ;o)
-
</p>
-
</body>
-
</html>
Comment faire à partir de là pour dire dans le CSS : "
Je veux que toutes mes balises qui ont la class "important" soient écrits en rouge / 18 pixels" ?
C'est très simple : au lieu de mettre le nom de la balise avant les accolades (comme
p ou encore
h1), vous devez écrire un point suivi du nom de la class, comme par exemple :
.important
Ce qui nous donnerait le CSS suivant :
Code : CSS - Afficher / masquer les numéros de ligne
-
.important
-
{
-
color: red;
-
font-size: 18px;
Pratique, n'est-ce pas ?
Et l'attribut id alors ?
Lui, il fonctionne exactement de la même manière que
class, à un détail prêt : il ne peut être utilisé
qu'une fois.
Quel intérêt ? Il y en a assez peu pour tout vous dire, cela vous sera utile si vous faites du Javascript plus tard pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut
id dans le chapitre sur les liens (pour réaliser des ancres).
En pratique, nous ne mettrons des "id" que sur des éléments qui sont uniques sur votre page, comme par exemple le logo :
<img src="images/logo.png" alt="Logo du site" id="logo" />
Dans le CSS, ce n'est pas un point que vous devez mettre avant le nom de l'id, mais un dièse (
#) :
Code : CSS - Afficher / masquer les numéros de ligne
-
#logo
-
{
-
/* Mettez les propriétés CSS ici */
-
}
Je ne vous propose pas de le tester, parce que de toute façon ça fonctionne exactement comme
class.
Si vous vous emmêlez les pinceaux entre class et id (il ne devrait pas y avoir de raison, mais on sait jamais ), vous pouvez utiliser tout le temps des class car ça marchera toujours.
Pour ma part, il se peut que j'utilise des
id dans la suite de ce cours. J'ai pris l'habitude de mettre un
id plutôt qu'une
class quand je sais que je ne m'en servirai qu'une fois.
Les balises universelles
Il arrivera parfois que vous ayez besoin d'appliquer une
class (ou un
id mais c'est plus rare) à certains mots qui ne sont pas entourés par des balises.
En effet, le problème des
class c'est qu'il s'agit d'un attribut, vous ne pouvez donc en mettre que sur une balise.
Par exemple, si je veux modifier uniquement "Neil Armstrong" dans le paragraphe suivant :
Code : HTML - Afficher / masquer les numéros de ligne
-
<p>Comme l'a dit Neil Armstrong un certain 20 juillet 1969...</p>
Ca serait facile à faire s'il y avait une balise autour de "Neil Armstrong", malheureusement il n'y en a pas.Heureusement, on a inventé la balise-qui-sert-à-rien
En fait, on a inventé 2 balises qui ne servent à rien, avec une petite (mais importante !) différence entre les deux :
- <span> </span> : c'est une balise de type inline. Vous vous souvenez ce qu'est une balise inline ? C'est une balise qui se met à l'intérieur d'un paragraphe, comme <strong>, <em>, <q>. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer Neil Armstrong.
- <div> </div> : c'est une balise de type block. Comme <p>, <h1> etc... Elle crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à la ligne. C'est une balise très très utilisée pour faire un design. Nous lui dédierons d'ailleurs 2 chapitres entiers dans la partie III du cours pour vous aider à construire le design de votre site web.
Pour le moment donc, nous allons utiliser plutôt la balise <span>.On la met autour de Neil Armstrong, on lui rajoute une class, on crée le CSS et puis basta
Code : HTML - Afficher / masquer les numéros de ligne
-
<p>Comme l'a dit <span class="nom">Neil Armstrong</span> un certain 20 juillet 1969...</p>
Code : CSS - Afficher / masquer les numéros de ligne
Vous me verrez probablement réutiliser des <span> dans la suite du cours, parce qu'il faut avouer que c'est bien pratique
Imbrications de balises
Une des dernières notions "de base" que je souhaite vous enseigner sur le CSS est qu'on a la possibilité d'indiquer l'ordre d'imbrication des balises dans le CSS.
On pourrait penser que c'est encore un truc tordu inventé par des informaticiens portant des grosses lunettes... mais que nenni !
C'est en fait simple à comprendre, et surtout utile.
Nous sommes dans notre fichier CSS. Nous souhaiterions définir un style uniquement pour les balises <em> qui se trouvent
à l'intérieur d'un titre <h3>.On doit écrire ceci :
Code : CSS - Afficher / masquer les numéros de ligne
-
h3 em /* => tous les em situés à l'intérieur d'un h3 */
-
{
-
color: blue;
-
}
Comme vous le voyez, on a juste séparé les 2 noms de balises par un espace, et non pas par une virgule comme on l'a fait plus haut.
Cela signifie "
Je veux modifier le style de toutes les balises <em> situées à l'intérieur de titres <h3>". On a indiqué dans le CSS dans quel ordre devaient être imbriquées les balises.
L'ordre est très important ! Si vous aviez mis "em h3" cela aurait voulu dire "Tous les <h3> situés à l'intérieur de balises <em>".Cela est d'ailleurs impossible à faire car on ne peut pas mettre une balise de type block dans une balise de type inline.
Voici un fichier XHTML pour que vous compreniez bien comment ça fonctionne :
Code : HTML - Afficher / masquer les numéros de ligne
-
<h3>L'imbrication, c'est <em>pratique</em></h3>
-
-
<p>Cet exemple vous montre comment fonctionne l'imbrication.<br />Le mot "pratique" dans le titre sera écrit en bleu, mais pas celui-ci : <em>pratique</em>.</p>
Vous pouvez aussi mélanger des balises et des class :
p .important
Ce qui signifie : "
Toutes les class "important" contenues dans des balises <p>".
Un petit exemple tordu pour terminer en beauté :
blockquote p strong, h1 .important
Alors là, attention de ne pas tout mélanger. La virgule "coupe" la ligne en deux, elle signifie "ET". Pour bien voir que la ligne est coupée en deux, je vais colorer les deux parties :
blockquote p strong, h1 .important
Ce qui veut dire : "
Toutes les balises <strong> contenues dans un <p> elles-mêmes contenues dans un <blockquote> ET toutes les class "important" contenues dans un titre <h1>"
Il existe des possibilités plus étendues en CSS pour l'imbrication, mais à notre stade non seulement ce n'est pas très utile et ça risque de vous embrouiller, mais en plus Internet Explorer ne comprend pas ces autres notions. Bref, autant de raisons de ne pas vous proposer plus de nouveautés sur un chapitre déjà bien fourni
Que de nouveautés, que de nouveautés...
Eh oui, le CSS est un langage "à part", les règles ne sont pas les mêmes. Mais comme vous pouvez le voir, XHTML et CSS sont très liés, et on peut difficilement concevoir l'un sans l'autre 
Toutes les nouvelles notions que je vous ai apprises dans ce chapitre sont importantes, aussi prenez votre temps pour bien les assimiler. Rien ne presse, personne ne vous oblige à passer au chapitre suivant (à moins que vous ayez fait un pari stupide avec des amis du genre "Tu n'arriveras pas à apprendre à créer un site web en 2 jours" :p)
Si tant de nouveautés d'un seul coup vous font un peu peur, ne vous affolez pas pour autant : le plus dur c'est toujours d'apprendre "les bases". Or, c'est justement ce qu'on vient de faire. Tout le reste devrait couler de source à partir de maintenant
Dans le prochain chapitre, nous allons découvrir un nombre important de propriétés CSS. Car pour le moment, à part écrire notre texte en bleu avec une taille de 18 pixels, on ne sait rien faire de bien palpitant
Formatage du texte en CSS
Nous arrivons maintenant à un chapitre qui devrait beaucoup vous intéresser
Non, le "formatage du texte" n'a rien à voir avec la destruction de toutes les données présentes sur votre disque dur
Cela signifie simplement que l'on va modifier l'apparence du texte (on dit qu'on le "met en forme"). Soyez rassurés donc, à la fin de ce chapitre votre disque dur sera toujours vivant
Pas de surprise particulière : nous sommes toujours dans le CSS, et nous allons réutiliser ce que nous venons d'apprendre dans le chapitre précédent. J'espère donc, ceci dit en passant, que vous avez bien lu et compris comment on se servait d'un .css
Cette fois, on passe au concret : nous allons voir successivement comment modifier la taille du texte, changer la police, aligner le texte etc... Vous avez une foule de choses à découvrir, et afin de ne pas vous assommer d'un chapitre trop gros j'ai décidé de le scinder en 2 parties.
La bonne nouvelle, c'est qu'à la fin de ces 2 chapitres votre site commencera (enfin) à ressembler à quelque chose
Hé, mais modifier la taille du texte je sais déjà le faire ! Tu l'as expliqué dans le chapitre précédent !
En fait, dans le chapitre précédent je vous ai donné un exemple sans trop d'explications, afin d'illustrer un peu le fonctionnement d'un CSS. En réalité, les possibilités pour modifier la taille du texte sont nombreuses (et variées !).
Ce que vous savez déjà, c'est que la propriété CSS qui permet de changer la taille du texte est
font-size. Ca, ça ne change pas. Mais par contre, on peut indiquer la taille du texte de différentes manières :
En pixels : c'est une façon très précise d'indiquer la taille du texte. C'est à vous de dire combien de pixels exactement doit faire le texte.
Pour avoir un texte de 16 pixels de hauteur, vous devez écrire :
font-size:16px;
Les lettres auront une taille de 16 pixels, comme le montre l'image suivante :
Voici un exemple d'utilisation (je ne vous mets pas le fichier XHTML qui va avec, vous êtes des grands maintenant
) :
Code : CSS - Afficher / masquer les numéros de ligne
-
p
-
{
-
font-size: 14px; /* Paragraphes de 14 pixels */
-
}
-
h1
-
{
-
font-size: 22px; /* Titres de 22 pixels */
-
}
