Comment modifier une balise en particulier ?
Agir sur toutes les balises d'un même type
Dans le fichier CSS, si on écrit :
h1 { color: blue; }
p { font-size:16px; }
Toutes les balises h1 de la page seront écrites en bleu. Tous les paragraphes seront écrit en taille 16px.
Par défaut, les règles CSS édictées pour une balise s'appliquent à toutes les balises de ce type présentes dans la page HTML.
Le créateur d'un site internet dispose d'une large gamme de balises : <h1>, <p>, <b>, <i>... Et la présentation de chacune de ces balises HTML peut être personnalisée avec des règles CSS, comme dans l'exemple ci-dessus.
Les identifiants, pour agir sur une zone précise de la page
Prenons le cas de la balise <p>. Chaque page HTML en contient généralement plusieurs, une pour chaque paragraphe de la page. Or, on a parfois besoin d'agir sur un seul de ces paragraphes ; le premier paragraphe peut par exemple servir d'introduction à la suite de la page.
Dans ce cas, il est possible de donner un identifiant à ce premier paragraphe. Cela consiste à lui attribuer un nom, choisi par le concepteur du site internet, que cette balise sera la seule à porter. Il sera ainsi possible de « reconnaître » ce paragraphe et de lui appliquer une mise en page spéciale.
Par exemple, voici un bout de code HTML où seul le premier paragraphe porte un identifiant :
<body>
<h1>Le titre de l'article</h1>
<p id=''intro'' >Voici le paragraphe qui va par la suite nous servir d'introduction. Nous souhaitons lui apporter une mise en page spéciale pour le mettre en évidence.</p>
<p>Ceci est le second paragraphe. Il constitue le reste de l'article. Comme il contient le texte « normal », nous le lui avons pas attribué d'identifiant. Il sera affiché comme tous les autres paragraphes.</p>
<p>Ceci est encore un autre paragraphe. Il termine l'article. Comme il contient du texte « normal », nous le lui avons pas attribué d'identifiant. Il sera affiché comme tous les autres paragraphes.</p>
</body>
Maintenant, dans le code CSS, nous pouvons imposer une mise en page spéciale pour le paragraphe de l'introduction :
p { color:blue; }
#intro { color:red; font-weight:bold; }
Au final, dans le navigateur internet, une personne qui consulte la page verra :
Le titre de l'article
Voici le paragraphe qui va par la suite nous servir d'introduction. Nous souhaitons lui apporter une mise en page spéciale pour le mettre en évidence.
Ceci est le second paragraphe. Il constitue le reste de l'article. Comme il contient le texte « normal », nous le lui avons pas attribué d'identifiant. Il sera affiché comme tous les autres paragraphes.
Ceci est encore un autre paragraphe. Il termine l'article. Comme il contient du texte « normal », nous le lui avons pas attribué d'identifiant. Il sera affiché comme tous les autres paragraphes.
Seul le paragraphe portant l'identifiant « intro » a été affecté par la règle CSS #intro (notez la présence du signe #).
Les classes, pour agir sur un groupe de balises
Prenons le cas de la balise <a>. Dans une page HTML, on trouve généralement plusieurs liens : les liens qui servent à construire un menu, et des liens qui peuvent être placés dans le contenu de la page.
Par exemple :
<body>
<ul>
<li><a href=''page1.html'' >lien 1</a></li>
<li><a href=''page2.html'' >lien 2</a></li>
<li><a href=''page3.html'' >lien 3</a></li>
<li><a href=''page4.html'' >lien 4</a></li>
</ul>
<p>Voici le contenu de la page. Et dans cet article, nous souhaitons présenter un nouveau site au visiteur. Voici un <a href=''http://www.autresite.com'' >lien vers ce site</a>.</p>
</body>
Graphiquement, avec les règles « par défaut » des navigateurs internet, nous voyons :
● lien 1
● lien 2
● lien 3
● lien 4
Voici le contenu de la page. Et dans cet article, nous souhaitons présenter un nouveau site au visiteur. Voici un lien vers ce site.
Si nous souhaitons personnaliser la présentation des liens du menu, mais sans modifier l'aspect de lien dans l'article, il est possible de définir une « classe CSS », c'est à dire une règle spécifique, qui va s'appliquer à quelques balises sélectionnées par le webmaster.
Pour indiquer qu'une balise fait partie d'une classe CSS, on ajoute le code suivant :
<a href=''page1.html'' class=''lien_menu'' >lien 1</a>
Ce bout de code (en vert) doit être ajouté à toutes les balises de la classe.
Contrairement à l'identifiant qui devait être unique (présent une seule fois par page), on peut utiliser une classe autant de fois qu'on le souhaite dans un même fichier HTML.
Et tout comme pour les identifiants, le nom de la classe est choisi librement par le webmaster. Évitez simplement d'utiliser des caractères spéciaux, des accents, des espaces et le tiret. Comme dans l'exemple, vous pouvez « lier » les mots avec le symbole « _ » (underscore).
Ensuite, dans le fichier CSS, il suffira de créer un groupe de règles qui s'appliqueront uniquement aux balises qui appartiennent à la classe concernée :
a { color: red; }
.lien_menu { color: green; font-size:14px; }
En CSS, le nom d'une classe est précédé d'un point. C'est ce qui sert à le différencier des identifiants (précédés d'un #).
A l'écran, les règles CSS notées ci-dessus produiront l'effet suivant :
● lien 1
● lien 2
● lien 3
● lien 4
Voici le contenu de la page. Et dans cet article, nous souhaitons présenter un nouveau site au visiteur. Voici un lien vers ce site.
Dans les pages qui suivent, chaque propriété CSS sera illustrée par un exemple de code à taper directement dans le code source de la page HTML (dans les balises ou dans le <head>) ou le fichier CSS externe.
Que sont le XHTML et le CSS ?Structure d'une page HTMLLes balises d?entête, head, title, meta...Les balises de corps de page, entre les balises bodyAjouter une image dans la page : balise img (type inline ou block) Insérer des liens : balise a (type inline)Afficher une listeConstruire des tableaux - balise tableCréer des formulaires Les balises universelles : div et spanOù placer le code CSS ?Comment modifier une balise en particulier ?Modifier l'aspect du texteGestion de l'arrière-plan (coloré ou avec des images)Mise en forme du texte : word-spacing , letter-spacing, vertical-align, text-alignMise en forme des balises de type blockLes borduresMise en forme des listesPositionner des blocs HTML à l'écranDébordement d'un bloc HTML : overflowChanger l'aspect de la souris : cursorCas pratique : mise en page à 2 ou 3 colonnesLargeur de site fixe ou variable ?Insertion d'une animation flashInsertion d'une vidéoInsérer un fichier audio
Pour plus d'informations, vous pouvez nous contacter par mail.
Tutos et cours en ligne
