Il existe plusieurs verisons de CSS :
Interne : Page des CSS avec XML
Externes :
W3 Schools, section CSS : un excellent didacticiel en anglais
HTML Help, section CSS : une autre bonne adresse
Aide Net, section CSS : un tutoriel complet, simple et pratique
Lorsqu'on conçoit des pages HTML, on utilise fréquemment les styles de titre Titre 1, Titre 2, etc.. Dans l'exemple de Titre 1, les balises sont représentées par <H1> et </H1>. les caractères sont alors écrits plus grands, mais pas forcément comme on le décide
On pourrait vouloir que tous les titres de style H1 soient écrits en rouge, taille moyenne
comme ceci
Pour ce faire, une redéfinition de la balise H1 dans la section <HEAD> de la page en question s'impose :
<head>
<STYLE TYPE="text/css">
H1
{
font-size: medium;
color: red
}
</STYLE>
</head>
<body>
<h1>Ceci est écrit en taille 15, rouge</h1>
</body>
Les différentes tailles disponibles s'échelonnent de très petits à super-extra-large, comme ceci :
xx-small
x-small
small
medium
large
x-large
xx-large
Dans l'exemple qui suit, on définit la balise prédéfinie <p> comme devant s'afficher avec un fond rouge #FF0000, et une fois dans la section <BODY>, on arrive à passer par dessus cette définition :
<head>
<STYLE TYPE="text/css">
p
{
background : #ff0000
}
</STYLE>
</head>
<body>
<p style="background: #ffffff;">fond
blanc</p>
<p>Fond rouge</p>
</body>
Par contre, si la définition du style comprend la couleur de fond, et lors de la redéfinition, on s'occuppe juste de la taille, la couleur de fond prédéfinie ET la taille immédiatement définie seront prises en compte : il n'y a pas de conflit.
Il est possible de définir ses propres styles, comme ceci :
<head>
<STYLE TYPE="text/css">
Beau
{
font-size: medium;
color: blue
}
</STYLE>
</head>
<body>
Avant<beau>Pendant</beau>après
</body>
qui donne : Avant
Il est possible d'outrepasser le bleu souligné habituel des liens hypertexte. Le code suivant définit que les liens hypertexte de la page doivent apparaître en rouge :
<head>
<STYLE TYPE="text/css">
A:link {color: red;}
</STYLE>
</head>
<body>
<p>Avant <a href="truc.htm">Pendant</a>
après </p>
</body>
On peut également déterminer l'apparence des liens hypertexte :
Lorsque le lien n'a pas encore été exploré
:
A:link
{color: red;}
Lorsque le lien a déjà été exploré
:
A:visited
{color:yellow}
Lorsqu'on a cliqué sur un lien, et qu'on clique sur "précédente"
du navigateur, le lien sur lequel on avait cliqué est "actif",
et peut avoir alors une certaine couleur :
A:active
{color:green}
Lorsque l'utilisateur passe simplement la souris par dessus le
lien :
A:hover
{color:orange}
Le soulignement des liens hypertexte n'est pas une fatalité : Il est possible de déterminer d'autres paramètres :
Aucun soulignement : none
Soulignement simple, comme on à l'habitude de le voir : underline
Barré : line-through
Surlignement (ligne de soulignement au dessus
du texte : overline (je trouve que ca amène de la confusion)
Clignotant : blink (d'après mes tests ça ne marche pas)
Voici un exemple intéressant :
- Les liens non encore visités sont rouges, non soulignés
- Lorsque l'utilisateur passe la souris par dessus : le lien est toujours rouge,
mais souligné
- Lorsque le lien a été visité, le lien devient violet
barré
<STYLE TYPE="text/css">
A:link {color :
red;
text-decoration
: none}
A:visited {color :
violet;
text-decoration
: line-through}
A:hover {color :
red;
text-decoration
: underline}
</STYLE>
Respectez cette ordre de présentation
pour éviter des erreurs d'héritage.
Il est possible de vouloir un lien hypertexte ne respectant pas ce qui a été défini en haut de la page (CSS). Il faut alors préciser l'aspect du lien hypertexte :
<a style="color:#000000;text-decoration:underline" href="unepagequelconque.htm">Allez sur la page</a>
On peut, et c'est là que se trouve la quintessence des css, faire appel à un fichier externe .css qui contient les redéfinitions des styles et les définitions des nouveaux styles
On ne peut plus simple, aucune fioriture : on redéfinit ici la balise <P> comme ayant un fond jaune :
p { background : #ffff00 }
Ici aussi, c'est très simple à comprendre . une seimple ligne, toujours la même, dans la section <HEAD> :
<head>
<link rel="stylesheet" type="text/css"
href="essai.css">
</head>
<body>
<p>Fond jaune</p>
</body>
A l'intérieur des définitions CSS, des commentaires peuvent être indiqués comme ceci :
/* ceci est un commentaire*/
xxx