Lilapuce
 

exercices (lundi 19 novembre 2007)

Html - Css [3]

Premier aperçu des CSS

Suite de l’exercice précédent dans lequel étaient présentées les rudiments du code HTML.

Passons, maintenant aux styles.

Mais avant, permettez-moi cette petite mis en garde.

Comme vous pourrez le constater, la maîtrise des CSS est beaucoup moins intuitive que ce que l’on a coutume de lire ici ou là. Bref, autant vous dire tout de suite que si vous cherchez à faire le tour de la question, il va falloir vous armer de patience et de détermination (surtout, comme c’est le cas dans notre atelier, si vous n’avez pas d’expérience de codage informatique).

Vous ne trouverez pas, ici, une liste exhaustive des instructions CSS. Je suis convaincu qu’il a des choses plus intéressantes à faire dans la vie que de se gaver au CSS et, surtout, je pense que ce serait la pire méthode d’apprentissage.

Je m’en tiendrai donc à vous présenter les instructions qui me semblent les plus importantes et quelques trucs essentiels à connaître pour l’usage courant des CSS. Si vous souhaitez allez plus loin, consultez Internet, notamment à partir de la rubrique lien de lilapuce. Le Web regorge de sites qui abordent la question en long, en large et en travers …

Après cette première approche (ce support et le suivant) vous serez mieux armés pour personnaliser les modèles de votre blog ou CMS et vous découvrirez peut-être comme moi, que les CSS…Ah Oui !! C’est vraiment génial ! Ultime précision : contrairement à ce que pourrait laisser croire une image quelque peut éthérée trouvée çà et là sur le Web, vous pouvez utiliser les CSS tout en appréciant – sans exclusive - la viande, le matérialisme, le rock ’n’ roll ou la polka, et l’urbanité.

Let’s go :

Affichez TopStyle et ouvrez votre fichier styles.css

Regardons précisément comment nous avions fait pour passer le « titre de niveau 3 » en couleur.

Je tape le code correspondant à la balise de titre de niveau 3 en HTML : h3

Attention, vous remarquez, que je n’ai pas tapé <h3>. En effet, dans un fichier CSS, vous ne devez pas taper les balises. Il faut juste indiquer l’élément HTML auquel vous faîtes référence. On dit que h3 est, ici, un sélecteur.

Après avoir saisi h3, je tape un espace (facultatif, uniquement par souci de clarté du code) puis, une accolade ouvrante (obligatoire, par contre). Immédiatement, TopStyle affiche l’accolade fermante. CSS fait partie de ces langages informatiques dont certaines instructions sont encadrées par des paires d’accolades.

Par ailleurs, vous remarquez que le programme affiche un assistant qui permet de sélectionner les différentes règles CCS. Il y en a beaucoup, non ?

Je commence à taper “color”. Dès les premières lettres de l’expression, l’assistant surligne, dans la liste, la propriété color. Je double-clique dessus.

Vous constatez (ci-dessous) que TopStyle a inséré l’instruction color: entre la paire d’accolade. Remarquez les deux points (en bleu). Cela indique qu’en l’état, le style n’est pas défini.

Il va donc falloir indiquer une couleur précise.

Cela tombe bien, l’assistant indique désormais un sélecteur de couleur. Soit je clique sur Choose color… soit je sélectionne une couleur dans la liste. C’est ce second choix qui est retenu : je double-clique sur Maroon.

TopStyle insère la valeur Maroon, suivie d’un point virgule (en bleu). J’enregistre mon fichier style.css.

Je récapitule :

- Ci-dessus, nous avons vu que le fichier styles.css permet de définir des styles ; c’est-à-dire des options de mise en forme d’une page HTML (couleur, dimensions, etc.). En particulier, je viens d’effectuer un test pour modifier l’apparence des titres de niveaux 3. Pour cela, j’ai déclaré un sélecteur h3, pour lequel j’ai défini une propriété color de valeur maroon

- Dans le fichier index.html ci-dessous, en (ligne 7) il y a une instruction qui permet de relier cette page au styles :

<link rel="stylesheet" href="styles.css" type="text/css">

Puis, lignes 20 et 29, nous repérons les titres de niveaux trois, indiqués grâce aux balises <h3> </h3> (vous aurez bientôt votre support HTML, comme promis).

- Et enfin, le résultat dans le navigateur :

Lisez le support suivant. Vous y trouverez quelques précisions sur CSS...