Placer le titre
Nous allons positionner le titre dans le header. Puisque les dimensions sont connues, on peut utiliser le positionnement absolu sans risque. Et on change de police, dans le même temps :
div#header {
background: #7fcf2e url(img/header.jpg) no-repeat;
color: #fff;
height: 201px;
position: relative;
}
div#header h1 {
margin: 0;
position: absolute;
bottom: 10px;
left: 30px;
font: 3em Georgia, serif;
}
Un peu d'espace
Nous allons donner un peu d'air au texte en le décollant des bordures. On peut faire cela à l'aide des marges ou des padding. Le choix va dépendre de la présence d'un arrière-plan ou non, de l'utilisation antérieure de ces propriétés, etc. À vous de voir !
div#sidebar h3,
div#footer p,
div#sidebar p {
padding: 0 10px;
}
div#content {
float: left;
width: 530px;
margin-left: 10px;
}
La police de caractères
Nous allons changer de police de caractères et opter pour une police de type sans-serif, plus agréable à lire à l'écran, par exemple : Trebuchet MS.
De plus, la police par défaut est un peu grande à mon goût. Nous allons redéfinir la taille de base des caractères pour la réduire un peu.
Pour obtenir un rendu aussi proche que possible dans les différents navigateurs, on applique la taille "de base" à body, exprimée en %. Pour les autres balises, on indique les tailles en "em". Lire aussi Typographie web : gérer la taille du texte avec les 'em'.
En utilisant la propriété raccourcie font :
body {
font: 90% "Trebuchet MS", sans-serif;
}
N'oubliez pas de préciser la famille de police à utiliser si la fonte demandée n'est pas disponible sur l'ordinateur de l'utilisateur. Il y a 5 familles de police génériques : serif, sans-serif, cursive, fantasy & monospace.
Les noms de police sont écrits entre guillemets lorsqu'ils comportent des espaces. Sinon, les guillemets ne sont pas nécessaires.
Les titres
Pour mettre les titres en évidence, nous allons leur attribuer une couleur différente, ainsi qu'une image de fond pour les titres h2 et des petites majuscules pour les titres h3.
div#content h2 {
padding-left: 35px;
background: #fff url(img/titre.png) left center no-repeat;
color: #6c0;
}
div#content h3 {
color: #c00;
font-variant: small-caps;
}
Le pied de page
Nous allons diminuer la taille de police par rapport au reste du texte, et réduire les marges :
div#footer p {
margin: 2px 0;
font-size: 0.9em;
}
Les liens hypertextes
Pour mettre en évidence les liens, on leur attribue une couleur et une police plus grasse. Le survol sera marqué par un changement de couleur.
Il est important de proposer un effet visuel plus complet qu'un simple changement de couleur pour distinguer un lien du reste du texte. C'est une histoire d'accessibilité, la perception des couleurs n'est pas la même pour tout le monde.
a {
color: #6c0;
font-weight: bold;
}
a:hover {
color: #c00;
}
Il ne reste plus qu'à faire en sorte que le rendu soit correct sous IE. (étape suivante !)