Feuilles de styles (CSS) : mode emploi
Au vu des besoins de mon cousin, j’ai décidé d’écrire quelques tutos concernant les technologies web (php, html, css, javascript pour ne citer qu’eux).
Aujourd’hui, je vais me lancer dans un explicatif concernant les feuilles de styles (Cascading Style Sheet en anglais).
Je vous invite à en découvrir plus dans la suite…
1/ Les forces en présence :
Les feuilles de styles sont un moyen efficace d’habiller toutes ces pages web de manière homogène, de créer facilement des thèmes et d’alléger le code HTML.
Gros avantage de ces feuilles de style : Vous définissez une seule fois les propriétés (style) d’une balise HTML pour les voir s’appliquer sur toutes les occurrences de cette même balise.
Par exemple, sans CSS, pour afficher tout les liens hypertexte en couleur rouge, on écrit :
<a href= »index.html » style= »color: #ff0000″>Home</a>
et ce, pour chaque lien présent sur la page.
Avec du CSS, on écrit toujours la syntaxe classique du lien hypertexte soit :
<a href= »index.html »>Home</a>
dans le fichier HTML. Puis, on écrit dans le fichier CSS :
a{ color:#FF0000 }
Ainsi, on écrit le style une seule fois.
« C’est bien joli, je vois le principe, mais concrètement, ça ne me dérange pas de faire des copier-coller pour écrire mes liens… »
L’intérêt se trouve dans la non-répétition du style. Imaginons maintenant que votre site présente une vingtaine de liens, vous écrivez ceux-ci en utilisant la syntaxe habituelle : <a href= »"></a> et tous vos liens arboreront une belle couleur rouge.
2/ Mise en place :
La feuille de style (CSS) est un fichier portant l’extension .css (on l’aurait deviné …)
Elle doit être désignée par la page HTML via un « link » placé entre les balises <head> et </head> dont voici la syntaxe :
<link rel= »stylesheet » type= »text/css » href=monStyle.css » media= »all » />
rel= »stylesheet » nous indique que l’on charge une feuille de style.
type= »text/css » signifie qu’il s’agit d’un contenu en texte, et que c’est du css
href= »monStyle.css » est l’url du fichier
media= »all » indique que cette feuille de style sera utilisé pour tout type d’affichage (écran, imprimante, projecteur, etc …)
Maintenant, vous allez pouvoir créer votre page HTML ainsi que le fichier de style.
3/ Impose ton style !
Nous allons maintenant passer à du concret. Dans un premier temps, créons 2 fichiers :
Le premier sera notre fichier HTML, appelons-le index.html
Le second sera donc la feuille de style, appelons-la style.css
Ouvrons le fichier HTML, et écrivons une base classique :
<html>
<head>
<title>Ma page avec du CSS dedans</title>
<link rel= »stylesheet » type= »text/css » href= »style.css » media= »all » />
</head>
<body>
<h1>Je suis un titre de type H1</h1>
<ul>
<li>Les listes en gras, c’est très sympa !</li>
<li>surtout avec un texte aussi inspiré</li>
</ul>
<a href= »./ »>Cliquez-moi dessus !!!</a>
<br />
<a href= »./ »>Non, cliquez sur moi !</a>
</body>
</html>
Je pense que ce sera suffisant pour l’exemple.
Maintenant, passons au fichier CSS :
h1{color:#00FF00}
li{
font-weight:bold;
background-color:#00FF00;
color:#FF0000;
}
a{text-decoration:blink}
Voilà, pour le style.
Maintenant, afficher votre page dans le navigateur et admirez le résultat.
Je vous laisse donc sur cet exemple, et vous promet de revenir très rapidement pour la suite.
Petit message car je trouve que vous avez tres bien synthétisé les feuille de style css.
Bonne continuation
Merci, j’espère que cet article en aidera d’autres
Je voudrais changer la couleur du lien pour adresses mail. Quel est le code à insérer dans feuille de style ?
Merci d’avance
Le plus simple (en terme de compatibilité IE, etc …) est de créer une classe « mail », puis de l’habiller :
a.mail{……}
Bon courage