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 a organiser le contenu, tandis que le CSS sert à le mettre en forme. C'est comme ça qu'on ajoute des couleurs, différentes grosseurs et polices de textes, 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égré le css directement dans le code HTML.
Avec le CSS, on créer différents styles qui seront plus tard applicables à des classes HTML. N'oubliez pas de reliés 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 :
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 Develloper ici présent peut grandement vous aider avec la syntaxe CSS et les attributs possibles. Par exemple, en tapant "font", une liste des possibilités d'attribut incluant "font" apparait (font-family, font-size, font-weight...).
Une fois votre attribut choisi et vos ":" tapés, la liste des compléments d'attributs apparait à 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 dure à ciblée 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 très confu au début et c'est normal, mais on s'habitue.
| Votre site web pour
9,95 € / mois !
Nom de domaine inclus !
Emails inclus ! Créer votre
site en 10 minutes !
www.webself.net
|