Syntaxe
Les tags de structure et de mise en forme HTML sont utilisés pour créer les sélecteurs CSS, mais comme leur nombre est insuffisant pour réaliser toutes les possibilités souhaitables dans ce nouveau langage, dans la page à venir 16 vous découvrirez comment ce problème a été résolu en grande partie.
Précision importante : CSS n'est pas un langage de programmation tel que Javascript, mais un "langage dit ouvert" et à ce titre il peut s'intégrer dans d'autres langages.
Déclaration de style CSS
La définition spécifique de base vue page 3 n'appelle pour l'instant à aucun complément d'information et le moment est venu de passer aux exercices pratiques concernant la méthode interne.
Entre les tags <HEAD> et </HEAD> il faut insérer le code particulier déjà vu, pour encadrer les règles choisies:
<link rel="stylesheet"
type="text/css" href= "vert.css">
Ainsi le navigateur est informé du langage de feuilles de styles (CSS) qu'il va rencontrer : le "type" va être du "text" en langage "css".
Déclaration d'une ou plusieurs règles
Code dans HEAD
<STYLE type="text/css">
body { font-family: arial, verdana, sans-serif ; }
h4 { color: green ; }
</STYLE>
Normalement les textes avec le code H4 devraient s'inscrire en couleur ordinaire de votre page, noir dans notre cas. Mais en spécifiant dans la règle "color: green ; " il est demandé au navigateur de transcrire les textes H4 en vert. Vous venez de découvrir une "class".
A la fin des déclarations le point-virgule est facultatif de même que l'espace. Mais pourquoi pas les placer quand même, car ils ne gênent en rien et vous n'aurez pas à calculer s'il en faut ou pas.
Je ne reviendrai plus sur ces deux annotations concernant l'espace et le point-virgule.
Code source dans BODY
<h4>Les feuilles de style en cascade (Cascading Style Sheets - CSS) traitent le problème du contrôle de la mise en page, en permettant aux auteurs de créer des feuilles qui affichent des marges précises, différents styles de polices... </h4>
Résultat 1
Les feuilles de style en cascade (Cascading Style Sheets - CSS) traitent le problème du contrôle de la mise en page, en permettant aux auteurs de créer des feuilles qui affichent des marges précises, différents styles de polices...
Remarque
Vous venez de faire une avancée importante, en découvrant (dans cet exemple bien entendu) que le style de la déclaration " p " ne servait qu'à définir une police, et vous avez en sélectionnant pour ce paragraphe le sélecteur " h4 " imposé en plus la couleur verte, en gras vu que " h" est un tag HTML de titre toujours en gras. Pour le style de police il a "hérité" de body,p sujet traité page 15 plus loin.
Il est possible et recommandé surtout quand on démarre dans ce langage de présenter le source comme dans l'exemple ci-après, qui est clair et permet de modifier si besoin les divers éléments facilement repérables.
Code source "aéré"
<style type="text/css">
p
{
color: red ;
font-size: 14pt ;
background-color: #FFFFFF ;
}
</style>
Mais rien ne vous interdit de le rédiger comme présenté ci-après, en ligne.
p { color: red ; font-size: 14pt ; background-color:
#FFFFFF ; }
(Déclaration de "règle" p + les "accolades" { } + "propriété" color et font-size-font-family + la "valeur" de chaque propriété à savoir la couleur red et le corps 14 pt)
Nota : l'ordre des propriétés et valeurs dans le bloc, n'a aucune importance et vous pouvez écrire sans risque, quoique !
p {color: red ; font-size: 14pt ; background-color: #FFFFFF ; }
ou
p { font-size: 14pt ; color: red ; background-color: #FFFFFF ; }
Cependant adopter une bonne méthode au départ ne saurait vous desservir par la suite : couleur de fond, polices, corps, ... par exemple.
OK ça suit, c'est bon 
respirez doucement
Exercice pratique
Copiez le code suivant sur une feuille vierge en totalité, ou encore la partie en gras dans votre logiciel éditeur, entre <head> et </head> et la partie en rose dans votre face "éditeur" et formatez avec le code HTML de titre H4. Aux résultats ......
<HTML>
<HEAD>
<style type="text/css">
h4
{
color: green ; background-color: #FFFFFF ;
}
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h4>ça marche bien, vu que je suis en vert</h4>
</BODY>
</HTML>
Lorsqu'il y a beaucoup de règles à placer,
cette présentation dans le code source facilite la lecture et la recherche
éventuelle d'erreur.
(bis) Mais vous auriez obtenu le même résultat en alignant ainsi les codes :
<HTML>
<HEAD>
<style type="text/css">h4 { color: green ; } </style>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<h4>ça marche bien, vu que je suis en vert</h4>
</BODY>
</HTML>
Résultat de cet exercice
ça marche bien, vu que je suis en vert
oui au fait, n'oubliez pas que le texte sélectionné avec un tag H1, H2... est toujours en gras en HTM, mais vous découvrirez ultérieurement qu'il est possible de faire autrement.
Sommaire CSS... @ ... Les /*commentaires*/
