Support de cours les feuilles de styles

Support de cours les feuilles de styles, tutoriel & guide de travaux pratiques CSS en pdf.

A quoi servent les feuilles de styles ?

Vous connaissez l’usage de la balise .
La balise sert à définir la police, la couleur, et la taille du texte qu’elle encadre. Si je veux que mon texte apparaisse en Arial, en rouge, en taille 12, voici ce que j’écris : Ceci est mon texte
Si en plus je souhaite que ce même texte en Arial, en rouge et en taille 12 soit en gras, en italique et souligné, je dois rajouter autour de mon texte les balises (pour le gras), (pour l’italique), (pour le souligner)
 Ceci est mon texte Cette méthode est tout à fait orthodoxe.
Elle présente néanmoins un inconvénient : imaginez que vous ayez à réaliser un site d’une dizaine de pages : à chaque fois que vous souhaiterez appliquer ce style, vous aurez à recopier tout ceci :
 texte à insérer 
Imaginez qu’après avoir recopié un certain nombre de fois ce code autour des portions de texte que vous souhaitez voir à ce format (arial, rouge, taille 12, gras, italique, souligné), vous changiez d’avis et décidiez de ne pas mettre en gras ces portions de texte. Vous devrez alors reprendre chacune des portions de texte concernées et supprimer la balise .
La feuille de styles va vous permettre de définir autant de styles que vous souhaitez et que vous pourrez alors appliquer à l’ensemble des pages web de votre site.
En outre, la feuille de styles vous permettra de décider de la couleur, de la taille, de la police etc… de vos hyperliens.
Les styles peuvent être appliqués à une page HTML de deux manières différentes:
– Style du document, déclaré dans l’en-tête, c’est-à-dire au sein des balises <HEAD> et </HEAD>. On parlera d’une feuille de styles interne.
– Style externe, déclaré dans un fichier à part dont l’extension est .css. On parlera alors d’une feuille de styles externe.
Avec le soutien de la Commission européenne

Les feuilles de styles

Les feuilles de styles internes
1. Ouvrez un éditeur de texte* et copiez le texte suivant :
<html>
<head>
<title>Feuille de style interne</title>
</head>
<body>
</body>
</html>
Enregistrez ce fichier sous « feuille_style1.html »
2. A l’intérieur de la balise <head></head>, placez le texte suivant : <style type=”text/css”></style>
C’est à l’intérieur de cette balise que nous définirons nos styles.
3. Nous allons définir un style que nous appellerons H1 :
.H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: #000099;
text-decoration: underline;
}
* sur PC : démarrer -> Programmes -> accessoires -> Bloc-notes
sur Mac : ouvrez SimpleText ou TextEdit (dans TextEdit, il peut être utile de changer les préférences -> nouveaux attributs du document -> format texte)
font-family: Arial, Helvetica, sans-serif; ==> définit la police du style
font-size: 16px; ==> définit la taille en pixels du style
font-style: italic; ==> définit le style de la police (gras ou italique)
color: #000099; ==> définit la couleur du texte (couleur exprimée en hexadécimal)
text-decoration: underline; ==> définit si le texte est souligné ou non
4. Dans la balise <style></style>, insérez le style H1, ce qui donne :
<html>
<head>
<title>Feuille de style interne</title>
<style type=”text/css”>
<!–
.H1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: italic;
color: #000099;
text-decoration: underline;
}
</style>
</head>
<body>
</body>
</html>

……..

Télécharger le cours complet

Documents pour tous

Support de cours les feuilles de styles