h1 {
  text-align: center;
}





h1 {
  text-align: center;
  color: blue;
}




p > img {
  vertical-align: middle;
}





balise1 {
  background-color: white;
  color: blue;
  text-decoration: underline;
}
balise2 {
  background-color: white;
  color: blue;
  text-decoration: underline;
}



balise1, balise2 {
  background-color: white;
  color: blue;
  text-decoration: underline;
}





body > *



.exemple {
  text-decoration: underline;
}
p.exemple {
  color: red;
}
p.exemple a {
  background-color: yellow;
}





p {}
.important {}
div > p {}




=======================================================





body {
  background-color: #BADBFF; /* Fond de page bleu clair */
  margin: 0; /* Supprimer toute marge à la page : le texte colle les bordures */
}




body {
  background: #D5DEEC url('fond.png'); /* Fond de page bleu clair, avec une image de fond (bleu clair aussi) */
  font: 14px sans-serif;               /* Style et taille de la police de la page */
  margin: 1em;                         /* Marge du document HTML */
}




body {
  background: white url('katie.jpg') no-repeat 50% 50%; /* Fond blanc *non répété* et centré */
  background-attachment: fixed; /* Même si la page scroll, l'image reste au centre de l'écran.
                                   Vous pouvez tester sans : dans ce cas (et avec de grandes pages)
                                   l'image restera collée au bord/centre de la page et pas de l'écran */
}




body {
  background: #D5DEEC url('fond.png'); /* Fond de page bleu clair, avec une image de fond (bleu clair aussi) */
  font: 14px serif;                    /* Style et taille de la police de la page */
  margin: 1em;                         /* Marge du document HTML */
}
p, li {
  text-align: justify;                 /* Justifier le texte des pararaphes et des lignes de listes */
}
p:first-letter {                       /* Pour la première lettre de chaque paragraphes : */
  font-size: x-large;                  /* Utiliser une police large */
  font-weight: bold;                   /* Et grasse                 */
  color: #0000AA;                      /* De couleur bleu foncée    */
}




h1 { /** gros titre */
  font-family: serif;         /* On se permet un changement de police : pas plus de deux par page, et à utiliser avec parcimonie (c'est le cas) */
  background: #0066CC none;   /* Fond du titre bleu (et sans image de fond) */
  color: white;               /*  Donc on utilise une police blanche pour que le texte soit visible */
  border: 3px dotted #9999FF; /* On encadre le titre d'un bleu clair de 3 pixels de largeur */
  padding: 0.3em;             /* Espacement intérieur non nul pour que le texte ne colle pas à la bordure du cadre */
  text-align: center;         /* Le titre doit être centré ! */
  letter-spacing: 0.3em;      /* On espace les caractères pour que ce soit joli :-) */
}
h2 { /** Les titres de paragraphes */
  text-decoration: underline; /* On souligne ces titres */
  font-variant : small-caps   /* Et on les met en majuscules (les minuscules sont remplacées par des petites majuscules) */
  color: #000077;             /* Texte de couleur bleu très foncé, presque noir (donc lisible) */
}
h2 { /** Les sous-titres (titres de niveau 3) */
  color: #2222CC;             /* Texte de couleur bleu, plus clair que le titre h2 */
  font-style: italic;         /* Texte en italique */
  text-indent: 1em;           /* Et indenté par rapport aux autres titres et paragraphes, pour montrer la hierarchie */
}





h2 {
  margin-bottom: 0; /* Pas de marge en bas pour coller le titre au paragraphe */
  padding: 0;       /* Sinon le titre a aussi un léger espacement à gauche : on veut l'aligner */
                    /*   avec le paragraphe, qui n'a pas d'espacement. */
  color: blue;                /* Classique : couleur... */
  font: bold 14px sans-serif; /* ... et police          */
}
p {
  margin-top: 0;    /* Là aussi, pas de marge au dessus du paragraphe */
  font: 12px serif; /* Là aussi, classique */
}





li {
  list-style-image: url("dossier.png");
}






a                 { color: #0066CC; } /* Liens en bleu (entre clair et foncé) */
a:visited         { color: black;   } /* et en noir (comme le texte normal, mais souligné) si déjà visités */
a:hover, a:active { color: white;                /* Lors du passage de la souris ou activation, */
                    background-color: #0066CC; } /* couleur blanc sur fond bleu                 */







img {
  border: none;           /* Ne pas entourer les images, même s'ils contiennent des liens */
  vertical-align: middle; /* Dans le cas d'une icône suivie d'un texte, par exemple       */
}





table {
  width: 50%; /* La largeur c'est pour le test, mais ça montre qu'il est aussi possible de la spécifier en CSS */
  border: 1px dashed gray; /* Et on met une jolie bordure originale autour du tableau */
}
caption {
  text-align: center; /* Classique : texte centré */
  font-style: italic; /*             en italique  */
  font-weight: bold;  /*             en gras      */
  color: #0066CC;     /*             et en bleu   */
}
th { /* Préférable à thead car offre plus de possibilités */
  background-color: #D3E2ED; /* Chaque case d'en-tête aura un fond bleu */
  color: gray40;             /* Et un gris un peu plus foncé que la moyenne */
}
td {
  /*border: 1px inset gray;*/ /* Vous pouvez essayer de décommenter : cela produit un affichage classique des cases */
}





hr.f1 { /* Premier filet bleu clair */
  border: none;              /* On supprime la bordure (inset par défaut)... */
  background-color: #66A8E7; /* ... que l'on remplace par un fond bleu uni   */
  height: 1px;               /* On définit la hauteur de 1 pixel pour que le fond soit visible ! */
  width: 70%;                /* Et on précise que l'on désire un filet de longueur 70%... */
  text-align: center;        /* ... et centré, par exemple */
}
hr.f2 { /* Second filet bleu foncé, en pointillés */
  border: none;                   /* Idem : on ne veut pas des bordures... */
  border-top: 6px dashed #000099; /* ... on en veut juste UNE en pointillés, de hauteur 6 pixels */
  height: 0px;                    /* Le filet est rendu grace à la bordure haute : pas besoin du "contenu" (si on peut dire) */
  width: 80%;
  text-align: center;
}
hr.f3 { /* Troisième type de filet, avec une image de fond, cette fois */
  border: none;                         /* Encore une fois, pas de bordures */
  background-image: url('travaux.png'); /* L'image à répéter... */
  height: 4px;                          /* ... sur une hauteur de 4 pixels */
  width: 90%;
  text-align: center;
}
hr.f4 { /* Dernier filet */
  border: none;
  background: url('hr_gradiant.png') #89B5FF; /* Cette fois on veut une image (image dégradé blanc vers bleu), */
  background-repeat: no-repeat;               /* non répétée, et on poursuit avec la couleur bleu une fois l'image terminée */
  height: 2px;
}







abbr, acronym, .aide {
  border-bottom: 1px dotted #333;
  cursor: help;
}





em{ /* Dans le cas des balises em : */
  font-style: normal; /* Plus d'italique */
  text-transform: uppercase;
}
strong { /* Et si vous souhaitez appliquer ce style aux balises strong : */
  font-weight: normal; /* Plus de gras */
  text-transform: uppercase;
} /* Évitez les deux en même temps : il faut quand même reconnaitre le "degrès d'importance" de ces deux balises */
  /* Par contre, vous pouvez laisser en majuscule, mais garder le gras et l'italique */







ins { color: green; }
del { color: red; }




pre { /* Des gros passages de code */
  margin-left: 1em;             /* Petite marge à gauche */
  padding-left: 1em;            /* Et un espacement à gauche pour... epacer le texte de la bordure... */
  border-left: 1em solid green; /* ... que nous définissons justement là (un peu gros, d'ailleurs)    */
  background-color: black;      /* On ne se gène pas : Matrix rullezzzzzzzz..... */
  color: green;
  font-weight: bold;            /* Faut que ce soit visible quand même ;-) */
}
p code, li code { /* Et des petites balises, fonctions, etc... dans le texte de la page */
  background-color: #FFE9BB; /* Rien de bien secret : fond saumon (pour illustrer la possibilité d'avoir des styles différents) */
  font-weight: bold;         /*                       et texte gras */
}





kbd {
  border: 2px outset;
  padding: 2px;
  background-color: #E5E5E5;
}








/* Specify pairs of quotes for two levels in two languages */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }

/* Insert quotes before and after Q element content */
Q:before { content: open-quote }
Q:after  { content: close-quote }












a {
  color: #458EFF;
}
a:hover {
  text-decoration: none;
}
.menu {
  background-color: #458EFF;
}
.menu a {
  text-decoration: none;
  color: white;
}
.menu a:hover {
  text-decoration: underline;
}





a.lien1 {
  color: #0066cc;
  text-decoration: none;            /* Suppression du soulignement normal */
  border-bottom: 1px solid #ff8000; /* Simulation d'un soulignement dans une couleur différente */
}
a.lien2 {
  color: #8000ff;
  text-decoration: none;             /* Suppression du soulignement normal */
  border-bottom: 2px dotted #8000ff; /* Simulation d'un soulignement dans un style différent */
}
a.lien3 {
  color: #0066cc;
  text-decoration: none;             /* Suppression du soulignement normal */
  border-bottom: 3px double #0066cc; /* Simulation d'un soulignement dans un style différent */
}
a.lien1:hover,  a.lien2:hover,  a.lien3:hover,
a.lien1:active, a.lien2:active, a.lien3:active  {
  color: white;
  border-color: white; /* Seule la couleur change, la forme et la taille ne changent pas */
  background-color: #0066cc;
}


#ex-liens-2 a.ex--lien4 {
  text-decoration: none;
  color: #34558A;
  border: 1px solid transparent;     /* Les bordures droites et gauches qui apparaîtront au passage de la souris déplaceraient   */
  border-bottom: 1px dotted #458EFF; /*   le texte de deux pixels vers la droite. C'est pourquoi on les définit tout le temps à  */
}                                    /*   1 pixel mais invisibles au repos. Note : "transparent" ne fonctionne pas sous IE < 7.  */
#ex-liens-2 a.ex--lien4:hover {
  border: 1px solid #FFA713;
}


#ex-def_listes dt {
  font-weight: bold;
  display: compact;
}
#ex-def_listes dd {
  margin-left: 20%;
  text-align: left;
}





h2.titre1 span {
  padding: 2px 10px 2px 5px; /* Dans l'ordre: padding-top padding-right padding-bottom padding-left */
  margin-left: 10px; /* Décaler le titre par rapport aux paragraphs normaux */
  border-left: 5px solid #458EFF;
  border-bottom: 2px dotted #458EFF;
  color: #804000;
}
h2.titre2 {
  display: inline; /* Ne plus considérer le titre comme un bloc */
  /* Après, c'est la même chose que pour titre1 : */
  margin-left: 10px;
  padding: 2px 10px 2px 5px;
  border-left: 5px solid #458EFF;
  border-bottom: 2px dotted #458EFF;
  color: #804000;
}






------------------------------------------------






/** Page : */

body {
  background: #eaeaea url('images/body.png'); /* (grille grise et blanche) */
  margin: 20px 30px; /* Donner plus de marge à gauche et à droite, et moins en haut et en bas */
  font-family: sans-serif; /* Police moderne, sans empattements, du type Times New Roman */
}

/** En-tête : */

#entete {
  background: #9f9f9f url('images/entete.png'); /* (grosse barre grise) */
  border: 1px solid black; /* Une bordure noire de 1 pixel sur tous les côtés, sauf... */
  border-bottom: none; /* ... en bas, pour ne pas faire double-emploi avec la bordure du haut de #page */
}

h1 {
  height: 58px; /* La hauteur de l'image de fond entete.png (grosse barre grise) */
  line-height: 58px; /* Centrer le texte sur toute la hauteur de l'image de fond */
  border-bottom: 1px solid black; /* L'entête est composé de deux parties : h1 et #menu, il faut donc les séparer */
  margin: 0; /* Par défaut les navigateurs assignent une marge aux titres. Ici on gère notre propre mise en page */
  text-align: center; /* Centrer le texte horizontalement sur toute la largeur de la page */
  /* Technique de substitution du texte par une image : */
  background: url('images/h1.png') 50% 50% no-repeat; /* Cette jolie image, unique et centrée, remplace le texte ennuyeux */
  text-indent: -32000px; /* On décale le titre autant que possible sur la gauche de l'écran, pour ne plus le voir */
}

/** Menu principal : */

#menu {
  background: black url('images/menu.png'); /* (barre noire, avec un bandeau à rayures noir et orange juste en dessous) */
  list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */
  margin: 0; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */
  padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
  height: 29px; /* Hauteur de l'image menu.png */
}

#menu li {
  float: left; /* Afin que chaque élément de la liste se positionne juste à droite de l'élément précédent, et non en dessous */
  margin: 0 2px; /* Espacer horizontalement chaque bouton à l'intérieur du menu */
}

#menu a {
  display: block; /* Afin de pouvoir assigner une hauteur au lien (la hauteur étant définir dans la règle "#menu span") */
  text-decoration: none; /* Pas de soulignement des liens dans le menu, ils sont déjà identifiables en tant que liens par le visiteur */
  color: #ffb400; /* Le texte est orange */
  background: url('images/menu-lien.png'); /* Bande noir, mais devenant orange lorsque décalée vers le haut */
  cursor: pointer; /* Curseur en forme de main, pour résoudre un bug sous IE, causé lors du changement du lien en affichage bloc, quelques lignes plus haut */
}

#menu span { /* Ce span permet au menu survolé d'avoir un reflet de lumière sur sa droite */
  display: block; /* Afin de pouvoir assigner une hauteur à cet élément (voir ci-dessous) */
  height: 21px; /* Hauteur de l'image menu-lien.png, divisé par 2 */
  line-height: 21px; /* Centrer le texte verticalement sur la barre noire */
  padding: 0 10px; /* Espacement intérieur du bouton à gauche et à droite, pour plus d'aération */
  background: url('images/menu-lien-droite.png') 100% 0 no-repeat; /* Une seule occurrence de l'image de fond, et aligné tout à droite */
}

#menu a:hover, /* Au survol de la souris */
#menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
  color: black; /* Le fond devient orange, donc le texte doit être noir pour être visible */
  background-color: #ffb400; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */
  background-position: 0 -21px; /* =42 (la hauteur de l'image) / 2 : remonte l'image de fond de moitié vers le haut pour révéler sa partie orange */
}

#menu a:hover span, /* Au survol de la souris */
#menu a:focus span, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#menu a:active span /* Lorsque le lien a le focus, sous Internet Explorer */
{
  background-position: 100% -21px; /* =42 (la hauteur de l'image) / 2 ; mais toujours aligné à droite */
}

#menu .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */
  font-weight: bold; /* Gras... */
  text-decoration: underline; /* ... et souligné */
}

/** Page : */

#page {
  background: white url('images/sous-menu.png') repeat-y; /* Technique des colonnes factices : le menu de gauche a un fond sur toute la hauteur de la page */
  border: 1px solid black; /* Encadrer toute la page par une bordure noire de 1 pixel */
}

/** Sous-menu : */

#sous-menu {
  background: black url('images/sous-menu.png') repeat-y; /* Fond noir si images non chargées, mais il faut remettre l'image de fond de #page */
  float: left; /* Colonne de gauche sur la page */
  width: 198px; /* Largeur de l'image sous-menu-lien.png */
  list-style: none; /* On ne veut plus que les lignes de la liste aient de puces */
  margin: 0; /* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */
  padding: 0; /* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
}

#sous-menu a {
  display: block; /* Afin de pouvoir assigner une hauteur au lien (voir la règle "#menu span") */
  height: 22px; /* Hauteur de l'image sous-menu-lien.png, divisé par 2 (car elle représente deux états : normal et survolé) */
  line-height: 22px; /* Centrer le texte verticalement sur la ligne */
  background: url('images/sous-menu-lien.png'); /* Fond du sous-menu, mais devenant orange lorsque l'image est décalée vers le bas */
  text-align: center; /* Centrer le texte sur la colonne du sous-menu */
  text-decoration: none; /* Pas de soulignement des liens dans le sous-menu, ils sont déjà identifiables en tant que liens par le visiteur */
  color: #ffb400; /* Le texte est orange */
  margin: 2px 0; /* Espacer verticalement chaque bouton à l'intérieur du sous-menu */
}

#sous-menu a:hover, /* Au survol de la souris */
#sous-menu a:focus, /* Lorsque le lien a le focus, sous Firefox et autres navigateurs */
#sous-menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
  color: black; /* Le fond devient orange, donc le texte doit être noir pour être visible */
  background-color: #ffb400; /* L'image de fond reste inchangée, mais si l'image n'a pas été chargée, s'assurer qu'il y ait un effet visible */
  background-position: 0 -22px; /* =44 (la hauteur de l'image) / 2 : remonte l'image de fond de moitié vers le haut pour révéler sa partie orange */
}

#sous-menu .actuel { /* Indique au visiteur que ce lien est en fait la page actuellement affichée */
  font-weight: bold; /* Gras... */
  text-decoration: underline; /* ... et souligné */
}

/** Contenu : */

#contenu {
  margin: 10px 10px 10px 209px; /* 209px = 198px (largeur du menu) + 1 (bordure droite du menu) + 10 (la marge que l'on veut donner au contenu) */
}

p {
  text-align: justify; /* Un long texte justifié est plus agréable à l'œil */
}

/** Pied : */

#pied {
  clear: both; /* Si le menu de gauche est plus haut que le contenu de la page, s'assurer de positionner le pied juste en dessous du menu */
  border-top: 1px solid black; /* Séparer le pied du contenu de la page */
  background: #9f9f9f url('images/pied.png'); /* (bandeau à rayures noir et orange, avec une barre grise juste en dessous) */
  font-size: 12px; /* Un peut moins que les 19 pixels de line-height */
  padding-top: 9px; /* = 8 (la hauteur de la partie hachurée noir / orange) + 1 (bordure noire) */
  height: 38px; /* = 47 (hauteur de pied.png) - 9 (le padding-top que l'on vient de définir ci-dessus) */
  line-height: 19px; /* = 38 (hauteur définie ci-dessus) / 2 (on veut deux lignes de texte dans le pied de page) */
  text-align: center; /* Center le texte horizontalement sur tout le pied de page */
  color: #444444; /* Texte gris foncé, se fondant avec le fond gris clair : moins lisible, car ce paragraphe est moins important */
}

#pied a {
  color: black; /* Les liens du pied de page doivent ressortir du reste du pied de page. C'est chose faite avec des liens noirs */
}

/** Impression : */

@media print {
  #menu, #sous-menu { /* Les menus et sous-menus ne servent à rien sur une feuille                     */
    display: none;    /* (en effet, on ne peut malheureusement pas les cliquer, c'est assez ballot !)  */
  }

  body {
    background: none; /* Enlever l'image de fond en forme de "grille" (au cas où le visiteur ai activé l'impression des images de fond) */
  }
  
  h1 {
    background-image: none; /* On remet le texte à la place de l'image, car par défaut, les images de fond ne sont pas imprimées */
    text-indent: 0; /* Annule la technique de remplacement de texte par une image, le texte redevient visible */
  }

  #page {
    background: none; /* Enlever l'image de fond simulant le sous-menu de gauche, car on a caché ce sous-menu */
    border: none; /* Ne plus entourer le contenu avec une bordure noire. Cela est moche sur une page imprimée, */
  }               /* et il n'y a plus besoin de séparation car on a enlevé l'image de fond en forme de grille  */

  #contenu {
    margin: 0; /* Ne plus faire de place pour le menu de gauche, qui est supprimé                             */
  }            /* De plus, les 10px de marge ne sont plus nécessaire car on a enlevé les bordures de la page, */
               /* et les feuilles imprimées ont déjà une marge                                                */
  #pied {
    border: 1px solid black; /* Les bordures bas, droite et gauche étaient réalisées par la bordure de la page             */
  }                          /* Hors, on l'a enlevée la bordure de la page. Entourer tout le pied par une nouvelle bordure */
}



/** Avec la bordure de 1px sur la page, IE démarre l'image de fond juste sous la bordure
    au lieu de commencer l'image juste après la bordure.
    On remédie à ça avec une règle spécialement conçue pour IE : */

#entete {
  background-position: 0 1px;
}

#page {
  background-position: 1px 0;
}