Des notes destinées à éclaircir certains points
ou à apporter d'intéressants suppléments d'information
sont programmées en JavaScriipt
pour apparaître lorsqu'on passe le curseur de souris
sur des icônes telles que           

Pour des raisons de sécurité,
certains lecteurs ont validé l'option de bloquage des sctipts
sur leur navigateur.

C'est votre cas puisque vous voyez apparaître cette note.
C'est bien dommage...
Car des précieuses informations, aidant à comprendre,
à se repérer, à étendre ses connaissances sont alors perdues.
Ainsi que les réponses aux exercices,

AUTORISEZ DONC VOTRE NAVIGATEUR A OUVRIR CES SCRIPTS !
Ce site ne poursuit aucun objectif commercial !
Il ne relève aucune information.
Loin de là !
Son seul but est de mettre bénévolement des informations
à la portée du public intéressé

Feuilles de style CSS
( Cascading Style Sheets)
1° Définitions

Accueil
du Site
Choix par Menu ou Parcours Séquentiel
  
Avant :
Sommeire CSS
Suite :
Classes de styles

 

Feuilles de style CSS (Cascadable Style Sheets)

  1. STYLES
    Ce sont les diverses manières de présenter les textes à l'écran.
    Polices de caractères, taille, italique, gras, couleur, barrés. etc .

    Ajoutons l'alignement à gauche, centré, à droite. Et bien d'autres caractéristiques du genre...

  2. DEFINITIONS LOCALES
    Jusqu'à l'avènement des pages de style CSS,
    on définissait les styles par codage HTML de base :

    • Soit pour chaque portion de texte :
      Ex : <FONT face="Courrier New" size="4" color:red">Portion de Texte</FONT>

    • Soit dans les balises :
      <P align=left>Texte....</P>

      HTML natif nous permet de fixer ainsi les styles individuellement pour chaque page HTML et chaque passage de texte...

Or, dans le cas d'un site Internet, par exemple, il est bon que les tyles de toutes les pages présentent une certaine unité.

Définir ces styles page par page, balise par balise, portion par portion de texte
est un travail délicat, fastidieux, peu efficient.

  1. Défintions par CSS

    On peut définir des styles en une seule fois pour l'ensemble d'un site (ou d'un ensemble de pages)
    sur un unique fichier dit "feuille de styles", ex : MonFichierDeStyles.CSS.

    Cette feuille de styles pourra être importée dans chaque page où elle sera utile, par une simple ligne de code placée dans l'en-tête.
    <HEAD>...</HEAD>.
    Exemple qui sera expliqué plus loin :

    //.......................
    <HEAD>
    //.......................
    <LINK HREF="../../Communs/css/MonFichierDeStyles.css" REL="stylesheet" TYPE="text/css">
    //.......................
    </HEAD>
    //.......................

Technique particulièrement efficace, surtout quand on veut changer en bloc tout ou partie des styles du site entier.
Il suffira, dans ce cas, de les modifier une fois seulement sur l'unique feuille de styles concernée.

Comme l'importation des tyles par les fichiers concernés se fait simplement par le nom du fichier MonFichierDeStyles.CSS , il n'y aura rien à changer sur aucune page du site.
Elles adopteront immédiatement et automatiquement les nouveaux styles.

Génial non ?
Passons aux essais...

Première étape : Nouveaux styles définis localement

Avant d'exporter les styles dans un fichier CSS,
nous allons les définir localement.

Etape importante dans la mise au point des pages de styles
puisqu'ils sont modifiables sur le fichier même qui les utilse.

Nous verrons qu'il est très facile de les exporter ensuite dans une feuille CSS.

Pour commencer par un exemple,
nous allons changer les styles des balises de titres d'en-tête H1, H2, H3, etc.
lesquelles, jusqu'ici, présentaient des styles de texte immuables que voici :

TitreH1

TitreH2

TitreH3

etc

Dans le code ci-dessous repérez la zone des déclarations de styles locaux.
Elle est située dans l'en-tête <HEAD>...</HEAD>
colorée en marron pour la distinguer.
Code du fichier : "EssaisStyl01.htm"

<HTML>
<HEAD>
 <TITLE>Réattributions de styles</TITLE>

 <STYLE type="text/css">
 H1 {color:red;  font-family:Georgia; font-size: 21px; font-style: italic; font-weight: bold;}
 H2 {color:blue; font-family:Verdana; font-size: 16px; font-style: normal; font-weight: normal;}
 H3 {color:brown;font-family:Times;   font-size: 14px; font-style: oblique;font-weight: lighter;}
 
 MONSTYLE{color:green;font-familly:Arial;font-size:30px;font-style:normal; font-weight=normal;}
 
 </STYLE>

</HEAD>

<BODY> <!-- Applications des anciennes balises qui portent automatiquemen les nouveaux styles -->
<H1>Nouveau style de H1 !</H1>
<H2>Nouveau Style de H2 !</H2>
<H3>Nouveau Style de H3 !</H3>
<MONSTYLE>Et même avec MONSTYLE !</MONSTYLE>
</BODY>
</HTML>

Cliquer ici pour lancer : "EssaisStyl01.htm" :

On voit dans cet exemple qu'il est même tout à fait possible de créer sons style personnel.
Encore faudra-t-il que le nom que vous lui donnez n'entre pas en conflit avec d'autres identificateurs existants !
Observez bien la manière dont on définit un style
H3 {color:brown;font-family:Times;font-size:14px;font-style:oblique;font-weight:lighter;}

BALISE { attibut:valeur ; attribut:valeur ; etc...}

Les défintions locales des styles sont insérées dans l'en-tête <HEAD>...</HEAD>
entre deux nouvelles balises <STYLE type="text/css">...</STYLE>

Feuilles de style CSS


Une fois la mise au point faite sur un fichier HTML quelconque :

  1. On groupe ces styles dans une feulle de styles CSS externe.
  2. On importe ce fichier de styles dans les fichiers HTML concernés.

Plaçons la séquence de code suivante :
 H1 {color:red; font-family:Georgia; font-size: 21px; font-style: italic; font-weight: bold;}
 H2 {color:blue;font-family:Verdana; font-size: 16px; font-style: normal; font-weight: normal;}
 H3 {color:brown;font-family:Times;font-size:14px;font-style:oblique;font-weight:lighter;}
 MONSTYLE{color:green;font-familly:Arial;font-size:30px;font-style:normal; font-weight=normal;}
...dans un fichier CSS que je nomme : Styles01.css


Appel de ce fichier par la page HTML concernée.
Code du fichier : "EssaisStyl02.htm"

<HTML>
<HEAD>
<TITLE>Réattributions de styles 2°</TITLE>
<LINK HREF="Styles01.css" REL="stylesheet" TYPE="text/css">
</HEAD>

<BODY>
<H1>Nouveau style de H1 !</H1>
<H2>Nouveau Style de H2 !</H2>
<H3>Nouveau Style de H2 !</H3>
<MONSTYLE>Et même avec MONSTYLE !</MONSTYLE>
</BODY>
</HTML>

Notez bien l'appel d'importation de la feuille de styles "Styles01.css"
en marron dans le code ci-dessus.

Elle se fait par la balise <LINK="HREF="URLduFichier.css"="stylesheet" TYPE="text/css">

Cliquer ici pour lancer "EssaisStyl02.htm"
Vois voyez que le résultat est identique à celui de "EssaisStyl01.htm"

Intérêt des feuilles de style CSS

Généralement, les feuilles de style contiennent de très nombreux styles pour un grand nombre de balises.

Une seule ligne de code placée dans l'en-tête :
<LINK HREF="StylesDeMonSite.css" REL="stylesheet" TYPE="text/css">
suffit à rappeler toute une collection de modifications de style longuement mises au point une fois pour toutes.

C'est aussi le moyen de changer la présentation de toutes les pages du site
en ne modifiant qu'un seul fichier : le fichier de styles CSS.
 

Le voccabulaire CSS.

Reprenons notre exemple ci-dessus.

<STYLE type="text/css">
 H1 {color:red;  font-family:Georgia; font-size: 21px; font-style: italic; font-weight: bold;}
 H2 {color:blue; font-family:Verdana; font-size: 16px; font-style: normal; font-weight: normal;}
 H3 {color:brown;font-family:Times;   font-size: 14px; font-style: oblique;font-weight: lighter;}
 MONSTYLE{color:green;font-familly:Arial;font-size:30px;font-style:normal; font-weight=normal;}
 </STYLE>

Une feuille de style est composée de règles ( rules )

Exemple de règle :
H1{font-family : Verdana ; font-size : 14pt ; font-weight : bold ; color : red }

Chaque règle est constituée par :

  • Un SÉLECTEUR ( selector ). H1 est le sélecteur de la règle en exemple
  • Une suite de DÉCLARATIONS de style entre accolades. {...}
  • Chaque déclaration est composée d'un couple d'éléments : attribut : valeur séparés par deux points.
    attribut ( attribute) : valeur ( value)
  • font-family : Verdana est l'une des déclarations
  • font-size : 14pt est une autre déclaration
  • font-family est un attribut ( attribute ) comme font-size, font-weight, color, etc.
  • Verdana est une valeur ( value ) au même titre que 14pt, bold, red, etc.

Pour les feuilles de style internes (locales)

  1. Les règles doivent être groupées entre les balises
    <STYLE type="text/css"> ... </STYLE>

  2. L'ensemble doit se trouver dans la section :
    <HEAD> ... </HEAD>

Pour les feuilles de style externes

Importées d'un fichier mettons : "MonFichierDeStyles.CSS"

Le fichier HTML qui les importe ces styles doit contenir :
<LINK HREF="URL" REL="stylesheet" TYPE="text/css">
entre les balises <HEAD>...</HEAD>

"URL" étant l'adresse de MonFichierDeStyles.CSS
Ele peut prendre par exemple la forme de
"http://www.SiteMachin/Communs/css/MonFichierDeStyles.CSS"

Ou, si cette feuille est dans le même site que le fichier HTML qui l'importe
".../.../Communs/css/MonFichierDeStyles.CSS"
C'est encore un exemple !
Ces exemples montrent comment on peut modifier le rendu des balises traditionnelles.
Mais les CSS permettent d'aller beaucoup plus loin... voyez la suite.


Choix par Menu ou Parcours Séquentiel
  
Avant :
Sommeire CSS
Suite :
Classes de styles

 
Rubriques connexes

Feuilles de style : début.
Styles locaux
Styles de texte
Positionnement
Classes
Sommaire cours CSS
Sommaire cours HTML
Références CSS de www.w3.org
Sommaire

du Site