Contre-Attaque: Localisation et utilisation du Css

Afin de pouvoir personnaliser les themes de notre Blog, je vais rappeller quelques principes simples d'utilisation du Css

<html>

<head>

<style>
#balise1 {
propriété: valeur;
}

.balise2 {
propriété: valeur;
propriété:valeur;
}
</style>

</head>

<body>
<div id="balise1">ce sur quoi porte la balise1</div>
<div class="balise2>ce sur quoi porte la balise2</div>
</body>

</html>

On trouve le Css entre les balises <style> et </style>
Le Html se trouve lui entre les balises <Body> et </Body>

Il faut noter un difference d'ecriture entre les balises 1 et 2.
D'abord dans leur expression Css,

la balise1 est précédée d'un diese (#)
la balise2 est précédée d'un point (.)

Dans la partie Html, on les appel donc de facon différentes,

la balise1 est la valeur d'un attribut id,

alors que la balise2 est la valeur d'un attribut class.

La différence entre un attribut id et un attribut class, est que l'attribut id est amenée a etre appelée un nombre reduit de fois (voir unique), comme par exemple l'en-tete (header), le corps (body) ou le pied de la page (footer), alors qu'un attribut class peut etre appelé un nombre plus important de fois comme par exemple les paragraphes (p) et les titres (h1, h2...etc)

Voyons maintenant, pour etre complet, la difference entre une balise <div> et une balise <span>

Une balise div est ce qu'on appelle une balise block, elle est utilisé pour créer un nouveau bloc dans la page, et entraine automatiquement un retour a la ligne, les balises <p> <h1> <blocquote> sont des balises block;

la balise span est une balise inline: c' est une balise qui s'utilise a l'interieur d'un paragraphe comme par exemple <stong> <underline> <font>

Les balises div et span sont souvent utilisées parce qu'elle peuvent prendre un grand nombre d'attributs...

Les balises Css peuvent aussi bien etre des balises classiques <p> <h1>, que des balises que l'on crée pour nous faciliter la vie, par exemple un des moyen d'accentuer un mot ou une phrase est d'utiliser la balise <strong>, mais cela nous renforce le texte en gras, alors si je prefere mettre le texte en bleu et le souligner a chaque fois que j'accentue un texte je cree une balise Css que j'appel par exemple "accentuer" ce qui nous donne

.accentuer [
color: blue;
text-decoration: underline;
}

j'ai mis un point (.), parce que la balise risque de me servir plusieurs fois, c'est donc la valeur d'un attribut class; et il est fort probable que je l'utilise a l'interieur d'un paragraphe je l'appel donc avec une balise span que j'ecris

<span class="accentuer">

dans un exemple cela donnerait

<p>
Ceci est un petit texte pour mettre en evidence l'utilisation du <span class="accentuer">Css</span>au niveau des themes de nos espaces
</p>

d'ou

Ceci est un petit texte pour mettre en evidence l'utilisation du Css au niveau des themes de nos espaces

Il ne faut pas se fier a cet exemple simple que l'on aurait tout simplement pu coder avec un attribut de style de la façon suivante

<p>
Ceci est un petit texte pour mettre en evidence l'utilisation du <font style="color:blue; text-decoration:underline">Css</font>au niveau des themes de nos espaces
</p>

On serait arrivé au meme résultat, mais l'intéret du Css, c'est de pouvoir "régulièrement" changer de theme sans avoir a retoucher chaque billet, ainsi imaginons que j'ai l'idée saugrenue de colorer tout mon texte en bleu et de le souligner, ou alors plus probable, que je decide de mettre mes liens hypertexte en bleu, on ne pourrait plus faire la difference avec le texte précédemment accentué

J'ai par exemple crée pour cet espace, une balise Css pour l'ecriture des codes, afin qu'ils soient en noir de police Arial, de la facon suivante

.code{
color:black;
font-family:Arial;
}

Ce qui signifie que si un jour je choisi un arriere plan noir, il me suffira de changer la ligne color:black; en color:white; pour ecrire en blanc tous les codes de mon blog...