6.1 - A quoi sert le CSS ?
Une
feuille de style CSS (
Cascading Style Sheets ou feuille de style en cascade) permet de définir une présentation (ou mise en forme) avec des couleurs, des dimensions, des polices d'écritures et même le positionnement de certains conteneurs... La présentation d'une page web est ainsi séparée de sa structure :
- d'un côté la feuille de style (ex. : style.css) qui définie la présentation.
- de l'autre le fichier HTML (ex. : index.html) qui défini la structure.
Dans votre page HTML, vous devez appeler votre feuille de style via le code suivant
(code à insérer dans les balises <head></head>) :
Par exemple, dans votre fichier style.css, vous trouverez différents styles appliqués à la balise <h1>. Si vous modifiez sa couleur, celle-ci changera sur l'ensemble des balises <h1> de toutes les pages de votre site.
6.2 - Description d'un style CSS
Nous allons vous décrire le fonctionnement d'un style CSS appliqué à la balise <h1>.
- Dans le fichier style.css :
Ci-dessous, le style appliqué à la balise <h1> vide.
Ci-dessous, le style appliqué à la balise <h1> contenant différentes présentations.
Le texte dans les balises /*texte*/ est un commentaire. Il n'agit a aucun moment sur votre site.
Le texte en rose peut être modifié, il représente la valeur d'un style.
Vous pouvez ajouter d'autres éléments comme par exemple : margin-left:30px; (pour ajouter une marge à gauche de 30px).
6.3 - Modifiez vos titres et articles
Ouvrez votre feuille de style (style.css) dans votre bloc note. Rendez-vous à la ligne h1{
Modifiez la couleur de votre titre en remplaçant #252525 par #FF0000 (rouge).
Actualisez la page index.html (ou contact.html) dans votre navigateur Internet. Le titre dans la balise <h1> est maintenant rouge sur vos deux pages.
Modifiez maintenant la taille du titre en remplaçant "font-size: 22px;" par "font-size: 15px;". Actualisez vos pages, vous verrez que la taille du texte est maintenant en 15 pixels, donc plus petite.
Modifiez maintenant l'emplacement de votre titre en remplaçant "text-align:center;" par "text-align:left;". Le titre est maintenant placé à gauche de votre site.
Vous pouvez faire pareil avec la balise <h2>, .titreSite, .slogan...