Agence creation de site internet
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
E-Commerce

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 :
 
  1. d'un côté la feuille de style (ex. : style.css) qui définie la présentation.
  2. 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>) :
<link href="style.css" rel="stylesheet" type="text/css" />
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...
Image de Modifiez votre feuille de style (style.css)
zoom sur image
Image de Modifiez votre feuille de style (style.css)
zoom sur image

Création de sites Internet
& référencement naturel

Découvrez les références de l’agence web
STUDIO VITAMINE. Des spécialistes et passionnés
Ă  votre service ! Devis gratuit.
mascotte de l'agence web STUDIO VITAMINE
l'agence web STUDIO VITAMINE