Pour redimensionner une image, un tableau ou un bloc de texte.
Modifier la couleur, l'emplacement, la visibilité, d'un texte, d'une bordure, d'un fond de page, d'un tableau, ...
Pour ajouter une bordure à un tableau, une cellule, un texte, une image, ...
Pour modifier la police de caractère, la couleur, la taille, les marges l'espacement de lettres ... d'un texte.
Bref, pour assigner environ 300 propriétés aux objets présents dans une page web.
Il existe 3 façons d'utiliser une feuille de style:
- La méthode intraligne
- La méthode imbriquée
- La méthode liée
Vous verrez plus loin dans le module comment utiliser chacune de ces façons.
Afin de bien comprendre la structure d'une feuille de style, nous utiliserons ici la méthode des feuilles de style imbriquée.
Dans cette méthode, le code doit être inséré dans la section en-tête (HEAD /HEAD) de votre page HTML.
Le code d'une feuille de style est composée de 7 éléments :
- un sélecteur
- une accolade ouvrante
- une propriété
- le signe :
- une valeur de propritété
- le signe ;
- une accolade fermante
Voici un exemple d'une feuille de style simple:
<style>H5{color : green ;}</style>
Le résultat affichera pour tous les éléments H5 de votre page ceci : <h5>Ceci est le résultat</h5>
Ceci est le résultat
Explications :
- La balise STYLE identifie le début de la feuille de style.
- Le sélecteur utilisé H1 indique que tous les éléments de type Titre de niveau 1 seront affectés
- L'accolade ouvrante et l'accolade fermante délimitent les couples " propriété / Valeur " assignés au sélecteur désigné
- La propriété COLOR désigne : la couleur du texte
- le signe " : " signifie =
- La valeur de propriété est GREEN
- Le signe ; signifie fin de désignation de la valeur de propriété
IMPORTANT :
- Avec une feuille de style, vous ne devez pas utiliser le signe " = " , ce signe est remplacé par le signe " : "
- Le signe " ; " indique la fin désignation de la valeur de la propriété
- La balise /STYLE identifie la fin de la feuille de style.
Comment utiliser plus d'un sélecteur
Vous pouvez utiliser plus d'un sélecteur.
Dans ce cas, les sélecteurs seront séparés d'une virgule :
<style>
h1,h2,h3 {color:black; }
</style>
Cette même feuille de style aurait pu être écrite de cette façon :
<style>
h1 {color:black;}
h2 {color:black;}
h3 {color:black;}
</style>
Comment utiliser plus d'une propriété
Vous pouvez utiliser plus d'une propriété :
<style>
h1 { color : black ; background-color : red ; }
</style>
Notez le signe " ; " qui sépare la propriété COLOR (couleur du texte) de la propriété BACKGROUND-COLOR (couleur de fond )
Liste des principaux sélecteurs possibles :
body
table
td
tr
h1
h2
h3
h4
hr
p ul
li
ol
ul
div
img
span
A.link
A.hover
A.visited
...
Liste des principales " propriétés : valeur ;" possibles :
Consultez cette page afin d'obtenir une liste des propriétés CSS.
Propriétés de texte
background-color : red ;
color : green ;
font-family : Times ;
font-variant : small-caps ;
font-style : italic ;
font-size : small ;
text-align : center ;
text-decoration : underline ;
...
Propriétés de bordures
border-color : yelllow ;
border-style : double ;
border-width : medium ;
border-left-color : pink ;
...
Afin d'obtenir une liste plus complète des "Propriétés : Valeurs ", veuillez consulter la boîte à liste déroulante "Aide Css - feuilles de style" de votre barre de boutons HTML.
ou
Consulter la page Assistance et Outils dans la section Cours Css
Consultez cette page afin d'obtenir une liste des propriétés CSS.
TRAVAIL À PRODUIRE
Ajoutez une nouvelle page à votre portfolio en affichant la directive 3665
Affiche les assistants et
Inscrivez dans le champ titre : Qu'est-ce qu'une feuille de style web
Inscrivez dans le champ matière : Informatique
Inscrivez dans le champ no de la directive : 3665
Insérez dans votre page les 4 éléments suivants ;
Un titre de niveau 1 contenant un sujet de ton choix
Une division : balise<div></div> contenant un texte de ton choix relié à ton sujet
Une image reliée à ton sujet : Utilisez Google-Image afin de trouver une image correspondant à ton sujet.
Enregistrez cette image
Téléchargez ensuite l'image trouvée dans votre espace de téléchargement.
Ajoutez dans votre page un LIEN vers un site web relié à ton sujet : Utilisez Google en utilisant le mot de recherche Feuille de style.
Insérez ensuite au haut de votre page le code identifiant votre feuille de style en sélectionnant dans la boîte à liste déroulante AIDE CSS-FEUILLE DE STYLE de la barre de boutons HTML l'élément " style|/style "
À l'intérieur de cette feuille de style, ajoutez les sélecteurs pour les 4 éléments de votre page : h1, img, div, a
Exemple :
h1{}
img{}
div{}
a{}
Maintenant, en utilisant ce site ou utilisez la boîte à liste déroulante Aide Css - feuilles de style et insérez entre les accolades de chacun des sélecteurs un minimum de deux propriétés différentes pour chacun de ces sélecteurs.
et 
