Salut très cher(e) lecteur (trice) !
CSS 3 - Declau soft
|
|
CSS : vos premiers pas.
Comment les définir ?
Très simple ! Les CSS (Cascading Style Sheets, ce qui veut dire feuilles de styles en cascade, sont utilisés pour définir la présentation des pages Web.
Grâce à eux, votre code HTML ne vous servira désormais qu'à définir la structure de vos contenus. Les CSS vous permettront de créer vos styles et le design général de votre site Internet.
Un rappel → Les styles HTML
Imaginez-vous en train de vouloir modifier le type de caractère d'une portion de texte uniquement en HTML ! Vous serez donc obligé d'utiliser la balise
, en écrivant par exemple
Pour définir la couleur de l'arrière plan et la bordure d'un tableau ainsi que le retrait (padding) de chacune de ses colonnes, vous utiliserez le code suivant :
Vous vous rendrez compte que ça vous fait trop de codes !
Tenez-vous tranquille, cette approche présente cependant plusieurs inconvénients :
● Vous devez répéter la même définition de style à chaque fois que vous souhaitez l'utiliser dans votre page où dans les diverses pages de votre site Internet
● A chaque fois que vous souhaiterez modifier ce style, vous devrez reparcourir le contenu de toutes vos pages pour mettre à jour, une par une, les diverses définitions qu'elles contiennent
● Ces répétitions augmentent la taille de vos pages
● Vos styles sont figés, le contenu se présente de la même façon pour tous les usages possibles : écran, imprimante, PDA, lecteurs vocaux, ...
|
|
|
Comment créer un site avec les CSS ?
|
Les CSS interviennent pour appliquer des styles aux éléments HTML.
Ils vous permettent de définir des propriétés de style comme la bordure, la couleur de fond, le type de caractère, ...
Allons droit au but !
Il y a trois façon de définir des styles CSS :
1- Dans le corps du code HTML
2- Dans l'en-tête de la page
3- Dans une feuille de style totalement séparée du code HTML
|
|
|
|
1- Les CSS dans le corps du code HTML (simple, mais pas idéal)
Vous pouvez définir des styles CSS directement dans la définition d'une balise HTML. Dans l'exemple ci-dessous, nous utilisons une balise
qui permet de créer une "boîte" à l'intérieur d'un contenu → Code :
Voici une méthode qui est non loin des styles définis en pur HTML. Elle présente les mêmes inconvénients.
Elle ne présente donc un intérêt que si vous êtes certain que le style défini ne sera utilisé qu'une seule et unique fois. S'il y a la moindre chance pour que vous ayez à nouveau besoin de ce style sur une page ou à plusieurs endroit d'une même page, il est grandement préférable d'utiliser l'une des deux autres méthodes proposées plus bas. Cela facilitera la maintenance et l'évolution de votre site. En tout cas, je pense bien !
2- Les CSS dans l'en-tête de la page
Plutôt que d'utiliser la méthode précédente, il est préférable de définir vos styles CSS une fois pour toute dans une section particulière de votre page Web (très souvent on utilise la section)
 .
Exemple :
Ceci veut tout simplement dire que tous les "P" ont la couleur verte, la taille 18, sont en italiques.
Tous les "STRONG" ont la couleur verte, sont en italiques, ont la taille 25, ...
Cette méthode a pour avantage de vous éviter de toujours répéter la même balise au besoin ; ainsi votre page est moins lourde.
3- Les CSS dans une feuille de style totalement séparée du code HTML
La façon idéale de définir les CSS consiste à les enregistrer dans un document indépendant de vos pages HTML. Grâce à cette méthode, toutes les pages qui font référence à cette feuille de style externe hériteront de toutes ses définitions.
Cette méthode permet également de définir plusieurs feuilles de styles pour le même contenu et de basculer d'une feuille à l'autre en fonction du support sur lequel le contenu est affiché (écran, imprimante, etc.).
Une page HTML peut faire référence à plusieurs feuilles de styles en même temps. Dans ce cas, les définitions contenues dans ces différentes feuilles seront combinées entre elles. Point à étudier plus tard, car cela constitue tout un chapitre.
Voici un exemple de styles définis dans un document séparé :
Document "mes-styles.css"
. La différence entre cette méthode et la précédente, c'est que notre feuille de style peut être utilisée par un nombre illimité de pages. Il suffira d'ajouter la 
dans ces pages pour que notre feuille de style s'y applique.
Lorsque les utilisateurs du site chargeront une page, leur navigateur ira également lire la feuille de styles à laquelle cette page fait référence. Cette feuille de style sera gardée en mémoire par le navigateur et n'aura pas besoin d'être rechargée lors de la lecture des pages suivantes. Le résultat est un gain de temps de chargement global et une économie de bande passante pour le serveur de votre site.
|
Cliquez ici pour la suite
Commentaires
Le code de Documents "mes-styles.css" s'arrête à p{
...
}
La suite est le code de Documents "ma-page.html"
Il y a de multiples avantages à séparer les feuilles de styles du contenu. Citons en particulier :
La réduction de la taille des pages : Les définitions de style de sont faites qu'une seule fois, même si elles sont utilisées plusieurs fois
La réduction des temps de connexion : Les navigateurs garderont en mémoire (en cache) le contenu de la feuille de style CSS qui s'appliquera sur toutes les pages du site. Seuls les contenus des pages devront être chargés au cours de la navigation.
Une mise à jour plus facile : Vous n'aurez besoin que de changer la feuille de style pour mettre à jour la présentation de l'ensemble de votre site
Scinder le travail de rédaction et le travail de présentation : Vous pouvez commencer à rédiger le contenu de vos pages sans vous soucier de leur présentation finale. Pensez simplement à placer correctement vos balises sémantiques (titre, sous-titres, listes, classes et ID,...). Vous pourrez travailler votre mise en page et votre design plus tard.