Introduction aux CSS

Fri, 15 Jun 2012 02:41:00 -0400

Les CSS ( Cascading Style Sheets ou Feuilles de style en cascade ) sont maintenant très répandues sur le web, favorisant le développement de nombreux sites web. En effet, outre le fait de rendre vos pages web bien plus attrayantes et stylées, les CSS vous permettent de modifier rapidement l’aspect de votre site, ou de développer des pages très rapidement, tout en respectant des règles précises pour votre mise en page.

// Pourquoi utiliser les CSS ?

Une première question se pose évidemment. Pourquoi utiliser les CSS alors qu’on peut tout simplement utiliser les balises et attributs de l’ html? Il est vrai qu’il est tout à fait possible de créer un site sans l’aide des CSS, mais il est clair que ce sera un travail bien plus fastidieux qu’il n’y parait.

Imaginez-vous heureux possesseur d’un site très populaire, composé de pages contenant un lot d’information très important. Ayant de plus en plus de succès, vous décidez alors de pratiquer une refonte complète de votre mise en page : changer la couleur des titres, la taille du texte, … Imaginez donc le travail extrêmement pénible consistant à changer les attributs de centaines de balises. Ayant déjà tenté l’expérience, je peux vous assurer que ce n’est pas la joie ! Mais grâce aux CSS, cette opération ne prendra que quelques secondes au lieu de plusieurs heures.

De plus, les CSS sont bien plus puissantes que les simples attributs de l’ html. Il est par exemple possible de définir la taille de son texte en points, les couleurs des différents cotés de vos tableaux, l’espacement du texte, et bien plus encore. Tout çela se fait extrêmement facilement et surtout, très rapidement.

// Premier essai.

Pour commencer avec les CSS, nous allons créer un style CSS. Ce style va nous permettre, de définir un style à respecter pour une balise particulière. Dans notre cas, cette balise sera <span>. Donc à chaque fois vous utiliserez la balise <span> dans votre page, les propriétés du style css y seront appliquées.

Voici la déclaration de style qui est à faire entre les balises <head> de votre page web, et se trouver entre des balises de <style> :

- Explications: Qu’ avons-nous fait? Et bien c’est simple ! Nous avons précisé que chaque fois que l’on utilisera la balise <span> , le texte contenu entre ces deux balises aura une police Verdana , aura une taille de 12pt et sera écrit en gras.

Si vous changez donc de mise en page, il vous suffira de modifier votre CSS pour changer l’aspect de tous vos textes se trouvent entre des balises <span>.

Pour bien s’y retrouver dans les CSS, il est important de coller un nom sur chaque chose.

Le sélecteur est donc span. La déclaration est composée de deux choses : la propriété, et la valeur.

La propriété est toujours suivie de deux points ( : ). Ensuite vient la valeur, que l’on donne à la propriété. Chaque valeur est suivie d’un point-virgule( ; ). Ce point-virgule signifie que la déclaration est finie.

Il peut évidemment y avoir plusieurs déclarations pour un seul sélecteur.

// Les feuilles de style externes.

Le principe des feuilles de style externes est simple : un fichier .css unique à toutes vos pages qui vous permettra de modifier vos valeurs pour toutes les pages de votre site d’un seul coup. En effet, vous pouver créer une feuille de style unique pour tout votre site web, ce qui est un gain de temps considérable !

Pour se faire, ils vous faut placer votre code qui se trouve normalement entre les balises <style> , dans un fichier du nom de votre choix , et ayant pour extension .css . Ce fichier doit etre vierge au départ, il ne doit contenir aucunes balises html classiques.

Pour appeller ce fichier depuis votre page web, c’est très simple ! Il vous faut utiliser la syntaxe ci-dessous, entre les balises <head> :

// Conclusion.

Grâce aux CSS, vous pouvez créer des mises en page bien plus attrayantes, et surtout beaucoup plus facile à gérer ( surtout si vous utilisez les feuilles de style externes ). Les modifications apportées à vos pages seront mises en oeuvre si rapidement que vous vous demanderz comment vous aviez pu faire sans !

Il est évident que les CSS est un outil très puissant. Nous verrons d’ailleurs tout leur potentiel dans nos prochains tutoriaux dédiés à ce sujet.

Les feuilles de style CSS

Introduction aux CSS