Page d'accueilPlan du siteAjouter aux FavorisImprimerEnvoyer à un ami
 
Vign_css
 
 
Le CSS (Cascade Style Sheet) est un langage informatique utilisé pour définir la présentation d'un document HTML. Autrement dit, le HTML sert à écrire et à organiser le contenu, tandis que le CSS sert à le mettre en forme. C'est comme ça qu'on ajoute des couleurs, différentes tailles et polices de texte, une bordure à nos tableaux, etc. On peut aussi créer des sites à plusieurs niveaux (un texte par dessus une image, par dessus une autre image) avec les index X et Y, ce qui requiert une connaissance plus avancée du CSS dont il ne sera pas question ici. Ainsi, le CSS est très utile pour toutes sortes de choses, y compris organiser et mettre en page nos textes, paragraphes et tableaux, mais ce n'est pas là la limite de ces capacités.

On retrouve souvent le CSS dans un fichier à part portant l'extension .css. Ainsi, un site aura son ficher Index.htm ainsi que son fichier Site.css. Il est cependant possible d'intégrer le CSS directement dans le code HTML.

Avec le CSS, on crée différents styles qui seront plus tard applicables à des classes HTML. N'oubliez pas de relier votre fichier.css avec votre fichier .htm pour que ces attributs soit applicables. Vous n'avez qu'à placer une balise Link (HTML) dans la balise <head> de votre .htm, ce qui ressemblera à ceci :
<link rel="stylesheet" type="text/css" href="StyleSheet1.css">.

Vous n'aurez qu'à changer le nom du ficher.css, en gras dans l'exemple.


Voici un exemple de style CSS :
Vign_css
 
Dans la fenêtre orangée, vous avez le fichier.css.
Dans la fenêtre rosée, vous avez le fichier HTML.
Dans la fenêtre bleutée se situe le résultat.

Vous pouvez voir qu'il n'y a aucune description de texte dans la balise <p> du fichier HTML, il n'y a que son nom de classe. Toute la mise en forme du texte se situe dans le fichier .css avec le nom de classe style_txt.

Un éditeur de site comme Microsoft Visual Web Developer peut grandement vous aider avec la syntaxe CSS et les attributs possibles. Par exemple, en tapant "font", la liste des possibilités d'attribut incluant "font" apparaît (font-family, font-size, font-weight...).

Une fois l'attribut choisi et les ":" tapés, la liste des compléments d'attribut apparaît à son tour (font-style: - italic, -normal - oblique).

N'oubliez pas les ";" finaux, c'est ce qui me causait le plus de problème à mes débuts. Cette erreur est difficile à cibler car nous avons plutôt le réflexe de regarder notre code pour voir s'il est correct plutôt que sa syntaxe, mais croyez-moi, 85% du temps, votre erreur est du type : oublier le ";" ou mis un "=" à la place du ":" ou encore il vous manque le "}" pour fermer votre classe plutôt qu'une erreur de code. C'est beaucoup de petits détails au début et c'est normal, mais on s'habitue.
 

Votre site web pour
9,95 € / mois!

Nom de domaine inclus!
Créez votre
site en 10 minutes!
www.webself.net

© 2014
Créer un site avec WebSelf
Créer un site avec Webself Cit@tion - Droit du travail Random Name Generator