[CSS#2] Les titres

On voit sur beaucoup de sites des titres en haut des pages. Le plus souvent, ce sont de grandes lignes colorées avec le titre écrit par dessus. Je vais donc vous apprendre à faire pareil avec le CSS.

Ouvrez-donc votre feuille de style et ajoutez une nouvelle catégorie :

Code:

h1 {
}

Nous allons ensuite ajouter les caractéristiques entre les { } :

Code:

h1 {
color:#FFFFFF;
font-family: arial narrow;
font-size: 10pt;
}

Jusque là, il s'agit seulement de ce que nous avons pu voir dans les bases. On va donc s'occuper de notre bande colorée. Il vous suffit d'ajouter background-color comme ci-dessous :

Code:

h1 {
color:#FFFFFF;
font-family: arial narrow;
font-size: 10pt;
background-color:#000000;
}

Ou background-image: url(URL DE VOTRE IMAGE) comme ici :

Code:

h1 {
color:#FFFFFF;
font-family: arial narrow;
font-size: 10pt;
background-image: url(URL DE VOTRE IMAGE);
}

Il y a parfois quelques variantes, on peut par exemple ajouter un encadrement :
border:#940602;

Ou juste un bord de cet encadrement :
border-top:#940602; bord haut
border-bottom:#940602; bord du bas
border-left:#940602; bord gauche
border-right:#940602; bord droit

Et ajouter quelques effets à cette ligne :
border-bottom:#940602 1px dotted; la ligne sera en pointillé
border-bottom:#940602 5px solid; la ligne sera plus épaisse


Maintenant, lorsque votre titre vous plait, enregistrez votre feuille de style et, sur votre page HTML, écrivez entre les balises <h1></h1>.

(Double post pour aérer un peu ^^)

Autre genre de titre. Il s'agit d'un grand titre, sans fond, mais avec un gros trait sur le côté gauche (que vous pouvez voir ici en ce moment (non je ne fais pas ma pub )

La première étape est la même, créez une catégorie H1 (ou H2 si vous avez déjà H1). Pour un gros titre, augmentez simplement la taille de la police. Donc pour l'instant nous avons ça :

Code:

h1
{
color:#000000;
font-size:20px;
font-family:courier new;
}

Ajoutez ensuite un bord gauche, comme vu précédemment et augmentez lui sa taille :

Code:

h1
{
color:#000000;
font-size:20px;
border-left: solid 5px #000000;
font-family:courier new;
}

Pour avoir des petites majuscules, comme sur le site, il suffit d'ajouter cette caractéristique :
font-variant: small-caps;