Debutant : Creez votre premiere page web

Thèmes associés : Feuilles de style css et exemple feuille de style css et feuille de style css, une feuille de style css. Feuille de style css html ! . Liens associés : feuille de style css et feuille de style css

Modifiez votre feuille de style (style.css)

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.

h1{

}

Ci-dessous, le style appliqué à la balise <h1> contenant différentes présentations.

h1{

font-family:"trebuchet ms"; /* famille de police "trebuchet ms" */

font-size:22px;/* taille de police de 22 pixels */

color:#252525;/* couleur de police noir (#252525=noir) */

text-align:center; /* aligner le texte à gauche */

margin-bottom:20px; /* ajouter une marge sous le texte de 20 pixels */

}

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...