Feuille de style : le CSS (Cascading Style Sheet)
Bon alors je vais expliquer un peu le CSS comme demandé par AJT ^^.
I.But du CSS (explication personnelle ^^) : séparer le style du contenu (c'est clair non ? non ? tssss)
Bon donc d'un coté on a le contenu (texte, tableaux, liens, images, etc...) et de l'autre le CSS qui lui sert a mettre le style du contenu (couleur, position, etc...)
II.Mise en place : avec Dreamweaver MX 2004 (ouais j'ai que celui là, j'ai pas encore le 8.. ) il y a vers le haut a droite un menu "Design" avec un onglet "Styles CSS", là cliquez sur "nouvelle feuille de style CSS" (c'est une petite icone avec un '+' et une feuille), là une petite fenêtre apparait, normalement il y a besoin de rien toucher ^^ (juste vérifier que c'est bien "défini dans : 'nouvelle feuille de style").
Ensuite on peut mettre le code CSS.
MAIS pour mettre les informations de base de la page html (couleur de fond, couleur du texte, taille, etc. il y a plus simple ! ^^ c'est de cliquer sur le menu "modifier" puis "proprietés de la page", et là une magnifique interface graphique vous montre tout plein d'options pour régler l'apparence de votre page web. ^^ Inconvénient : il se peut que le css soit inclus dans la page html, dans ce cas un couper-coller vers un fichier css suffit ^^.
Code:
Pour lier une feuille css a une page web, ajouter le code : <link href="ADRESSE/NOM_DE_MON.css" rel="stylesheet" type="text/css">
Et là tous les paramètres de la feuille css seront appliqués à la page HTML.
PS : on peut lier plusieurs feuilles css a la même page HTML.
III. Maintenant on code :
pour appliquer un style a toutes les balises html comme par exemple la balise <p></p> (paragraphe)
Code:
p {
/*Code CSS a rajouter ici ^^ */
text-align: center; /*c'est un exemple bien sur...*/
}
Mais par moment on ne veut pas appliquer un style a tous les paragraphes, dans ce cas on fait :
Code:
*** dans le html ***
<p class="maClasse">mon texte</p>
*** dans le css ***
.maClasse { /*le '.' est important*/
text-align: center;
}
Pour connaitre toutes les options comme text-align, il faut CHERCHER sur Internet (ou dans un livre ^^)... moi j'utilise
http://www.w3schools.com/ mais c'est loin d'être le meilleur coté clarté ^^'... Google est votre ami dans ces cas extrèmes...
Je n'ai pas tout dit : il y a encore plein de petites subtilités, mais ca ca devrait suffir pour débuter.
IV.Scénario où le CSS est super utile :
- J'ai 100 pages html qui ont toutes un fond gris et un texte jaune. ceci est codé dans le html avec un bg-color et tout...
- je veux changer la couleur de fond en (attention les yeux) : Rose !
... là il faut se coltiner a la papatte chaque fichier html pour changer la couleur de fond
Version CSS :
- J'ai 100 pages qui utilisent le fichier ahah.css
- Je modifie mon fichier ahah.css en faisant ca :
Code:
Je remplace
body {
background-color: #999999; /*c'est du gris ^^*/
}
PAR :
body {
background-color: #FF00FF; /*c'est du rose ^^*/
}
(dreamweaver vous fait les couleurs tout seul si vous êtes gentils avec lui ^^)
Et ca y est ma couleur de fond est ok sur les 100 pages HTML ^^
)
Voici le site 
