> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > HTML / CSS > Apprenez à créer votre site web avec HTML5 et CSS3 > Les joies de la mise en forme avec CSS > Mettre en place le CSS > Lecture du tutoriel

Mettre en place le CSS

Par

Mathieu Nebra (M@teo21)

Mise à jour : 01/11/2011

Difficulté : Facile Facile

311 502 visites depuis 7 jours, dont 14 476 sur ce chapitre, classé 1/795

Nous y voici enfin.

Après avoir passé toute une première partie du cours à ne travailler que sur le HTML, nous allons maintenant découvrir le CSS que j'avais volontairement mis à l'écart.
Le CSS n'est pas plus compliqué que le HTML. Il vient le compléter pour vous permettre de mettre en forme votre page web.

Le CSS comporte beaucoup de propriétés, qui sont un peu l'équivalent des balises en HTML. Heureusement, personne ne vous demande de tout retenir par cœur et un aide-mémoire sera à votre disposition en annexe pour vous aider (aide-mémoire dont j'ai moi-même besoin, je ne retiens pas tout

).

Dans ce premier chapitre sur le CSS, nous allons voir la théorie sur le CSS : qu'est-ce que c'est ? À quoi ça ressemble ? Où est-ce qu'on écrit du code CSS ? Cette théorie n'est pas bien compliquée, mais vous devez obligatoirement la connaître car c'est la base du CSS. C'est d'ailleurs la seule chose que je vous demanderai de retenir par cœur en CSS, le reste pourra être retrouvé dans le mémo en annexe.

Allez, ne traînons pas, je vois que vous brûlez d'impatience !

Retour en haut

Sommaire du chapitre :

La petite histoire du CSS
Où écrit-on le CSS ?
Appliquer un style : sélectionner une balise
Appliquer un style : class et id
Appliquer un style : les sélecteurs avancés
Q.C.M.

Retour en haut

La petite histoire du CSS

Je vous avais averti dès le début de ce cours : nous allons apprendre deux langages. Nous avons déjà bien entamé notre découverte du HTML, même s'il reste encore de nombreuses choses à apprendre (nous y reviendrons dans quelques chapitres). En revanche, il est temps maintenant de nous intéresser au CSS.

CSS (Cascading Style Sheets), c'est cet autre langage qui vient compléter le HTML.
Vous vous souvenez de son rôle ? Gérer la mise en forme de votre site.

Petit rappel : à quoi sert CSS ?

CSS ? C'est lui qui vous permet de choisir la couleur de votre texte.
Lui qui vous permet de sélectionner la police utilisée sur votre site.
Lui encore qui permet de définir la taille du texte, les bordures, le fond...

Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit toujours visible, etc.

Souvenez-vous de ce petit schéma que nous avions vu dès le premier chapitre :

Grâce au HTML, nous avons pu rédiger le contenu de notre site, mais c'est brut de décoffrage. Le CSS le complète pour mettre tout cela en forme et donner au contenu l'apparence que l'on souhaite.

CSS : des débuts difficiles

Il faut savoir qu'au tout début du Web, CSS n'existait pas. En fait, au départ, il n'y avait que le langage HTML.
Le HTML est né en 1991, et CSS est né en 1996. Alors, vous vous dites sûrement : comment faisait-on la mise en forme de 1991 à 1996 ? Eh bien, uniquement en HTML ! Il y avait en effet des balises HTML dédiée à la mise en forme. <font color="#aab1c3"> par exemple, permettait de définir la couleur du texte.

Cependant, les pages HTML commençaient à devenir assez complexes. Il y avait de plus en plus de balises et c'était un joyeux mélange entre le fond et la forme, qui rendait la mise à jour des pages web de plus en plus complexe. C'est pour cela que l'on a créé le langage CSS.

Cependant, le CSS n'a pas été adopté par les webmasters immédiatement, loin de là. Il fallait se défaire de certaines mauvaises habitudes, et ça a pris du temps. Encore aujourd'hui on peut trouver des sites web avec des vieilles balises HTML de mise en forme qui n'existent plus, comme <font> !

CSS : le support des navigateurs

Tout comme le HTML, le CSS a évolué. Je vous avais indiqué qu'il y avait 4 versions importantes de CSS :

CSS 1
CSS 2.0
CSS 2.1
CSS 3

En fait, la version CSS 3 n'est pas encore totalement finalisée (ce n'est pas encore une version officielle). Cependant, elle est bien avancée et déjà bien supportée par de nombreux navigateurs aujourd'hui, ce qui fait qu'on peut déjà s'en servir.
Il serait dommage de passer à côté, car CSS 3 ajoute de nombreuses fonctionnalités à CSS (il y a le double de fonctionnalités par rapport à CSS 2.1 !). Nous nous baserons donc dans ce cours sur CSS 3, qui reprend et complète la plupart des fonctionnalités de CSS 2.1.

Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS et comprendre comment afficher la page.

Au début des années 2000, Internet Explorer était le navigateur le plus répandu, mais son support du CSS est resté longtemps assez médiocre (pour ne pas dire carrément mauvais

). C'était la grande époque de la version 6 (IE6), hélas encore utilisée par une petite partie des internautes aujourd'hui (heureusement, cette proportion tend à diminuer).

Depuis, de nombreux navigateurs sont arrivés et ont chahuté Internet Explorer : Mozilla Firefox bien sûr, mais aussi Google Chrome. Et je ne vous parle pas du succès des Mac et iPhone avec leur navigateur Safari. Cela a incité Microsoft a réagir, qui a publié (après une longue période d'inactivité) IE 7, puis IE 8 et IE 9. On parle déjà de IE 10.

Bon ton cours d'histoire c'est bien joli, mais en quoi ça me concerne aujourd'hui ?

Que faut-il retenir de tout ça ? Que les navigateurs ne connaissent pas toutes les propriétés CSS qui existent. Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS.

Je vais vous présenter dans ce cours un certain nombre de fonctionnalités de CSS qui ne fonctionnent pas forcément sur les navigateurs les plus vieux. Je ne peux pas l'éviter, c'est comme ça : aucun navigateur ne connaît parfaitement toutes les fonctionnalités CSS de toute façon ! Au pire, si le navigateur ne connaît pas une fonctionnalité de CSS, il l'ignore et ne met pas en forme, mais ça ne fait pas planter votre page, ce qui fait que celle-ci sera toujours lisible.

Je vous recommande fortement de mettre dans vos favoris les sites web www.caniuse.com et normansblog.de qui affichent des tables de compatibilité des fonctionnalités de HTML et CSS en fonction des différents navigateurs (et de leurs différentes versions). Regardez en particulier les tables de compatibilité pour CSS de caniuse.com.

Table de compatibilité CSS de caniuse.com

Retour en haut

Où écrit-on le CSS ?

Vous avez le choix, car on peut écrire du code en langage CSS à 3 endroits différents :

Dans un fichier .css (méthode la plus recommandée) ;
Dans l'en-tête <head> du fichier HTML ;
Directement dans les balises du fichier HTML via un attribut style (méthode la moins recommandée) ;

Je vais vous présenter ces 3 méthodes, mais sachez d'ores et déjà que la première... est la meilleure.

Dans un fichier .css (recommandé)

Comme je viens de vous le dire, le plus souvent on écrit du code CSS dans un fichier spécial ayant l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html). C'est la méthode la plus pratique et la plus flexible. Ca nous évite de tout mélanger dans un même fichier. J'utiliserai cette technique tout au long de la suite de ce cours.

Commençons à pratiquer dès maintenant ! On va partir du fichier HTML suivant :

Code : HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
    </body>
</html>

Vous noterez la ligne <link rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce fichier HTML va être associé à un fichier appelé style.css qui va gérer sa mise en forme.

Enregistrez ce fichier avec le nom que vous voulez (par exemple page.html). Pour le moment, rien d'extraordinaire à part la nouvelle balise que nous avons ajoutée.

Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Notepad++) et copiez-y ce bout de code CSS (rassurez-vous je vous expliquerai ce qu'il veut dire tout à l'heure) :

Code : CSS

p
{
    color: blue;
}

Pour activer la coloration du code dans Notepad++, allez dans le menu Langage > C > CSS.

Enregistrez le fichier en lui donnant un nom qui se termine par .css, comme style.css. Placez ce fichier .css dans le même dossier que votre fichier .html.

Dans Notepad++, vous devriez voir quelque chose comme ça :

Dans votre explorateur de fichiers, vous devriez les voir placés côte à côte. D'un côté le .html, de l'autre le .css :

Fichiers HTML et CSS dans l'explorateur de fichiers

Ouvrez maintenant votre fichier page.html dans votre navigateur pour l'essayer, comme vous le faites d'habitude. Regardez, c'est magique : vos paragraphes sont écrits en bleu !

Essayer !

Il est inutile d'ouvrir directement le fichier style.css dans le navigateur. Il faut ouvrir le fichier page.html (il fera automatiquement appel au fichier style.css).

Dans l'en-tête <head> du fichier HTML

Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head>.

Voici comment on peut obtenir exactement le même résultat avec un seul fichier .html qui contient le code CSS :

Code : HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            p
            {
                color: blue;
            }
        </style>
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p>Bonjour et bienvenue sur mon site !</p>
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
    </body>
</html>

Testez, vous verrez que le résultat est le même :

Essayer !

Directement dans les balises (non recommandé)

Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insèrerez votre code CSS directement dans cet attribut :

Code : HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p style="color: blue;">Bonjour et bienvenue sur mon site !</p>
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
    </body>
</html>

Cette fois, seule la balise du premier paragraphe qui contient le code CSS sera colorée en bleu :

Essayer !

Quelle méthode choisir ?

Je trouve que la première méthode que tu recommandes est plus compliquée que les deux autres ! Pourquoi nous conseilles-tu de créer 2 fichiers, j'étais bien moi avec juste un fichier .html !

Je vous recommande fortement de prendre l'habitude de travailler avec la première méthode parce que c'est celle utilisée par la majorité des webmasters... Pourquoi ?

Pour le moment, vous faites vos tests dans un seul fichier HTML. Cependant, votre site sera plus tard constitué de plusieurs pages HTML, on est d'accord ?
Imaginez : si vous placez le code CSS directement dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML de votre site ! Et si demain vous changez d'avis, par exemple si vous voulez que vos paragraphes soient écrits en rouge et non en bleu, il faudra modifier chaque fichier HTML un à un !

Le code CSS est répété dans chaque fichier HTML : pas pratique !

Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire cette instruction qu'une seule fois pour tout votre site !

Le code CSS est indiqué une fois pour toute dans un fichier CSS

Le code CSS est indiqué une fois pour toutes dans un fichier CSS : c'est plus simple !

Retour en haut

Appliquer un style : sélectionner une balise

Maintenant que nous savons où placer le code CSS, intéressons-nous à ce code de plus près. Je vous ai donné, sans vous l'expliquer, un premier bout de code CSS :

Code : CSS

p
{
    color: blue;
}

Dans un code CSS comme celui-ci, 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 paragraphes <p>, je dois écrire p.
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. 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 cœur (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.

Schématiquement, une feuille de style CSS ressemble donc à ça :

Code : CSS

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. Chaque propriété est suivie du symbole "deux-points" (:) puis de sa valeur correspondante. Enfin, chaque ligne se termine par un point-virgule (;).

Je vous apprendrai de nombreuses propriétés dans les chapitres suivants. Pour le moment, on va juste changer la couleur pour s'entraîner dans nos exemples.

Le code CSS que nous avons utilisé jusqu'ici :

Code : CSS

p
{
    color: blue;
}

... signifie donc en français : "Je veux que tous mes paragraphes soient écrits en bleu.". Il donne ce résultat à l'écran :

Essayez de changer le nom de la balise affectée par le code CSS. Par exemple, si j'écris h1, c'est le titre qui sera écrit en bleu. Modifiez votre fichier style.css comme ceci :

Code : CSS

h1
{
    color: blue;
}

Maintenant, ouvrez à nouveau votre page HTML (souvenez-vous, on ouvre la page HTML dans le navigateur, pas le fichier CSS !) : vous devriez voir son titre s'afficher en bleu !

Appliquer un style à plusieurs balises

Prenons le code CSS suivant :

Code : CSS

h1
{
   color: blue;
}

em
{
   color: blue;
}

Il signifie que nos titres <h1> et nos textes importants <em> doivent s'afficher en bleu. Par contre, c'est un peu répétitif, vous ne trouvez pas ?

Heureusement, il existe un moyen en CSS d'aller plus vite si les 2 balises doivent avoir la même présentation. Il suffit de combiner la déclaration en séparant les noms des balises par une virgule comme ceci :

Code : CSS

h1, em
{
   color: blue;
}

Cela signifie : "Je veux que le texte de mes <h1> et <em> soit écrit en bleu".

Vous pouvez indiquer autant de balises à la suite que vous le désirez.

Des commentaires dans du CSS

Comme en HTML, 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 HTML 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). Notez qu'il est possible de créer plusieurs fichiers CSS pour son site si vous ressentez le besoin de séparer un peu votre code CSS (en fonction des différentes sections de votre site par exemple).

... De quoi on parlait déjà ? Ah oui, les commentaires en CSS.

Donc, pour faire un commentaire, c'est facile ! Tapez /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être écrits sur une ou plusieurs lignes. Par exemple :

Code : CSS

/*
style.css
---------
 
Par Mathieu Nebra
*/
 
p
{
   color: blue; /* Les paragraphes seront bleus */
}

Il est possible que j'utilise les commentaires dans la suite du cours pour vous donner des explications à l'intérieur même des fichiers .css.

Retour en haut

Appliquer un style : class et id

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.
Comment faire pour que seulement certains paragraphes soient écrits d'une manière différente ? On pourrait placer notre code CSS dans un attribut style sur la balise que l'on vise (c'est la technique que je vous ai présentée un peu plus tôt), mais comme je vous l'ai dit ce n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe).

Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :

L'attribut class
L'attribut 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, etc.

Code : HTML

1
2
3

<h1 class=""> </h1>
<p class=""></p>
<img class="" />

Oui mais que met-on comme valeur à l'attribut class ?

En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, tant que le nom commence par une lettre.

Par exemple, je vais donner la classe introduction à mon premier paragraphe :

Code : HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Premiers tests du CSS</title>
    </head>

    <body>
        <h1>Mon super site</h1>
        
        <p class="introduction">Bonjour et bienvenue sur mon site !</p>
        <p>Pour le moment, mon site est un peu <em>vide</em>. Patientez encore un peu !</p>
    </body>
</html>

Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom : introduction. Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : "Je veux que seules les balises qui ont comme nom introduction soient affichées en bleu".

Pour faire ça en CSS, indiquez le nom de votre classe en commençant par un point, comme ceci :

Code : CSS

.introduction
{
   color: blue;
}

Testez le résultat : seul votre paragraphe appelé "introduction" va s'afficher en bleu !

Seul le premier paragraphe s'affiche en bleu

Et l'attribut id alors ?

Lui, il fonctionne exactement de la même manière que class, à un détail près : il ne peut être utilisé qu'une fois dans le code.

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 :

Code : HTML

1	<img src="images/logo.png" alt="Logo du site" id="logo" />

Si vous utilisez des id, dans le CSS il faudra faire précéder le nom de l'id par un dièse (#) :

Code : CSS

#logo
{
    /* Indiquez les propriétés CSS ici */
}

Je ne vous propose pas de le tester, ça fonctionne exactement comme class.

Si vous vous emmêlez les pinceaux entre class et id retenez que 2 balises peuvent avoir le même nom avec l'attribut class. Un nom d'id doit en revanche être unique dans la page HTML.

Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id) à certains mots qui ne sont pas à l'origine entourés par des balises.

En effet, le problème de 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 "bienvenue" dans le paragraphe suivant :

Code : HTML

1	<p>Bonjour et bienvenue sur mon site !</p>

Ça serait facile à faire s'il y avait une balise autour de "bienvenue", malheureusement il n'y en a pas. Heureusement, on a inventé... la balise-qui-sert-à-rien.

En fait, on a inventé 2 balises dites universelles qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important par exemple). Il y a une petite (mais importante !) différence entre ces deux balises :

<span> </span> : c'est une balise de type inline. C'est une balise que l'on place au sein d'un paragraphe de texte, pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe, et c'est celle dont nous allons nous servir pour colorer "bienvenue".
<div> </div> : c'est une balise de type block qui entoure un bloc de texte. Les balises de la même famille sont <p>, <h1>, etc. Ces balises ont quelque chose en commun : elles créent un nouveau "bloc" dans la page, et provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons plus tard.

Pour le moment donc, nous allons utiliser plutôt la balise <span>. On la met autour de "bienvenue", on lui rajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !

Code : HTML

1	<p>Bonjour et <span class="salutations">bienvenue</span> sur mon site !</p>

Code : CSS

.salutations
{
   color: blue;
}

Retour en haut

Appliquer un style : les sélecteurs avancés

En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit "sélectionner") les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Vous en avez déjà utilisé un peu plus tôt dans ce chapitre, résumons-les pour commencer.

Les sélecteurs que vous connaissez déjà

Ces sélecteurs, que nous avons vus précédemment, sont de loin les plus couramment utilisés. Il faut les connaître par coeur. Commençons par la base de la base :

Code : CSS

p
{

}

... signifie "Je veux affecter tous les paragraphes". Après, c'est à vous de dire ce que vous faites à ces paragraphes (vous les écrivez en bleu par exemple).

Nous avons aussi vu :

Code : CSS

h1, em
{

}

... qui signifie "Tous les titres et textes importants". Nous avons sélectionné deux balises d'un coup.

Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom grâce aux attributs class et id :

Code : CSS

.class
{

}

#id
{

}

Vous savez quoi ? Il existe des dizaines d'autres façons de cibler des balises en CSS ! Nous n'allons pas toutes les voir, car il y en a beaucoup et certaines sont complexes, mais voici déjà de quoi vous permettre d'être plus efficaces en CSS !

Les sélecteurs avancés

* : sélecteur universel

Code : CSS

*
{

}

Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.

A B : une balise contenue dans une autre

Code : CSS

h3 em
{

}

Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3>. Notez qu'il n'y a pas de virgule entre les deux noms de balise.

Exemple de code HTML correspondant :

Code : HTML

1	<h3>Titre avec <em>texte important</em></h3>

A + B : une balise qui en suit une autre

Code : CSS

h3 + p
{

}

Sélectionne la première balise <p> située après un titre <h3>.

Exemple :

Code : HTML

1
2
3

<h3>Titre</h3>

<p>Paragraphe</p>

A[attribut] : une balise qui possède un attribut

Code : CSS

a[title]
{

}

Sélectionne tous les liens <a> qui possèdent un attribut title.

Exemple :

Code : HTML

1	<a href="http://site.com" title="Infobulle">

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

Code : CSS

a[title="Cliquez ici"]
{

}

Idem, mais l'attribut doit en plus avoir exactement pour valeur "Cliquez ici".

Exemple :

Code : HTML

1	<a href="http://site.com" title="Cliquez ici">

A[attribut*="Valeur"] : une balise, un attribut et une valeur

Code : CSS

a[title*="ici"]
{

}

Idem, l'attribut doit cette fois contenir dans sa valeur le mot "ici" (peu importe sa position).

Exemple :

Code : HTML

1	<a href="http://site.com" title="Quelque part par ici">

D’autres sélecteurs existent !

Je ne vous ai présenté qu'une partie des sélecteurs CSS ici, mais sachez qu'il en existe beaucoup d'autres. Si vous voulez une liste complète, vous pouvez vous renseigner directement à la source : sur le site du W3C ! C'est très complet.

Sachez que nous découvrirons certains de ces autres sélecteurs dans la suite de ce cours !

Retour en haut

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, HTML 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"

).

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, on ne sait rien faire de bien palpitant. :lol: