la cabane  •  le Livre d'or  •  la boîte à idées

Cerisier du Japon Prunus serrulata.jpg Astuce du mois, interview... Venez lire le numéro 4 de la Gazette de Vikidia ! Moi, je suis une star, une vraie de vraie ...

Feuilles de style en cascade

« Feuilles de style en cascade » expliqué aux enfants par Vikidia, l’encyclopédie junior
(Redirigé depuis CSS)
Aller à : Navigation, rechercher

Le CSS (Cascading Style Sheets : Feuilles de style en cascade) est un code informatique utilisé pour mettre en forme les pages XML, dont le HTML, célèbre langage d'écriture de pages Web.

Tout comme le HTML et bien plus encore, le xHTML, le CSS est validé par le W3C, le World Wide Web Consortium.

Depuis sa création vers 1990, quasiment tous les sites web l'utilisent. En effet, sans CSS, un site internet n'est qu'une page écrite noir sur blanc sans aucune couleur et aucune mise en forme.

Syntaxe du CSS[modifier]

Du code CSS se place dans un fichier .css. Dans celui-ci, on mettra un code du genre (notez les commentaires entre /* et */) :

/* Ici nous désignons la balise a (celle de lien) :
   Le style sera appliqué à tous les textes dans une balise <a>. */
a
{
   color: #0000ff;
   text-decoration: underline;
}
 
/* Ici nous désignons un élément html par son id avec le sélecteur `#`. 
   Exemple de balise : <span id="lien>blablabla</span> */
#lien
{
   color: #0000ff;
   text-decoration: underline;
}
 
/* Enfin nous désignons ici un élément par son attribut class avec le sélecteur `.`.
   Exemple de balise : <span class="lien">blablabla</span>. */
.lien
{
   color: #0000ff;
   text-decoration: underline;
}
 
/* Il existe beaucoup d'autres sélecteurs */

Comme vous le voyez, on désigne couramment un élément XML par sa balise (pas de sélecteur), par son id (sélecteur #) ou par sa classe (sélecteur.). Il existe beaucoup d'autres sélecteurs moins usités.
Une fois l'élément sélectionné, on place entre deux accolades les styles sous la forme propriété:contenu.

Beaucoup de propriétés[modifier]

Il existe énormément de propriétés CSS. Cependant, nous n'en détaillerons que quelques-unes ici.

color[modifier]

Celle-ci change la couleur du texte. Elle peut être indiquée de plusieurs manières :

  • Par un nom de couleur en anglais. Exemple : white, black, blue, red, green, ... mais il n'y en a que 16.
  • Par un code héxadécimal. Exemple : #000000, #ffffff, #0000ff, #ff0000, #00ff00, ...
  • Par un code couleur RVB. Exemple : rgb (0, 0, 0) ; rgb (0, 0, 255) ; rgb (255, 215, 0) ;...

background-color[modifier]

Change la couleur de fond du texte.
La couleur se définit de la même manière que pour la propriété color.

text-decoration[modifier]

Ajoute une décoration au texte. Celle-ci peut valoir underline (souligné), overline (ligne au dessus), none (pas de décoration), ...

Langages de programmation.svg
Les langages de l’informatique
Tux.svg Portail de l'informatique - Histoire, logiciels, Internet...