Code source dans le HEAD de cette page

 

<STYLE TYPE="text/css">

body
{
font-family: verdana, arial, times, sans-serif ;
font-size:10pt ;
color: black;
background-color: #FFFFFF ;

h1
{
font-family: verdana, arial, sans-serif ;
color: green ;
font-size:12pt ;
background-color: #FFFFFF ;
}

</STYLE>

 

Rappel de la Syntaxe

 

 

---

 

Il est important de faire une pause, pour découvrir quelques notions qui ont été jusqu'ici occultées volontairement pour ne pas embrouiller les sujets abordés. D'abord il n'est pas interdit de copier au brouillon les divers blocs expliqués pour faciliter vos essais. Des tableaux sont intégrés dans ce tutoriel avec les principaux termes de la syntaxe CSS (suivant l'avancement des pages).

A retenir

H1 { color: blue ; }
H1 { font-size: 20pt ; }

est identique à


H1 { color: blue ; font-size: 20pt ; }

 

A retenir

H1 { font-family: verdana, arial, serif ; }
H2 { font-family: verdana, arial, serif ; }
H3 { font-family: verdana, arial, serif ; }

sont identiques à

H1, H2, H3 { font-family: verdana, arial, serif ; }

 

A retenir

 Si vous employez comme ci-après le tag HTML " h1 " et lui appliquez des propriétés et valeurs définies en CSS, ces dernières sont automatiquement prioritaires et appliquées.

 

Code dans le HEAD de cette page

h1 { font-family: verdana, arial, serif ; color: green ; font-size: 12pt ; background-color: #FFFFFF ; }

 

Résultat de l'exemple

h1 { font-family: verdana, arial, serif ; color: green ; font-size: 12pt ; background-color: #FFFFFF ; }

 

..... ce qui donne bien un corps de 12 pt au lieu d'un corps 20 pt qui par défaut est la valeur de H1.

 

A retenir

Si vous travaillez avec un logiciel éditeur non WYSIWYG, ne tapez pas de propriétés ou valeurs dont le mot est partagé en bout de ligne, du genre
font-
family

mais revenez à la ligne pour éviter cette coupure qui rendrait le code nul. 

 

Ecrire tout en minuscule est souvent la meilleure méthode du moins en CSS, même si je ne l'applique pas toujours à cause des exemples et des points importants à faire ressortir.

 

Vous pouvez utiliser les lettres de a à z ou de A à Z, et les chiffres de 0 à 9, plus le trait d'union et le caractère " _ ". Interdit de commencer les noms avec un chiffre ou un tiret.

---

Recommandé

 

h1{font-family:verdana,arial,times,sans-serif;color:green;font-size:12p ;}

h1 { font-family: verdana, arial, times, sans-serif ; color: green ; font-size:12pt ; }

h1
{ font-family: verdana, arial, times, sans-serif ;
color: green ;
font-size:12pt ; }

peu importe, avec espaces ou sans espaces (pas clair tout de meême dans ce cas) et avec ou sans point-virgule à la fin, le résultat est identique. Mais le dernier exemple plus aéré facilite sa lecture et mettre toujours le point-virgule final évitera d'en oublier ailleurs!

 

---

 

Attention à l'ordre des sélecteurs : important

 

<p><b class= "purple">..... texte .... </b></p> = Bon

<p><b class= "purple">.... texte .... </p></b> = Mauvais

 

 

Sommaire CSS ... @ ... La cascade et " ! important "