Leçon 06 Réussir son site web avec XHTML et CSS CSS, le langage de mise en page du Web 1. Insérer du code CSS...1 Dans un fichier.css...1 Dans l en-tête du fichier XHTML...3 2. Appliquer un style à des balises...3 Appliquer un style à une balise...3 Appliquer un style à plusieurs balises...4 Appliquer un style à des balises imbriquées...4 3. Appliquer un style à certaines balises...4 id : un identifiant unique...4 class : un identifiant réutilisable...5 4. Les commentaires en CSS...6 Le CSS, pour Cascading Style Sheets (Feuilles de style en cascade), n'est pas plus compliqué que le XHTML, il est juste différent car il sert à réaliser la présentation de votre page web. On dit "Feuille de style" car en règle générale, on écrit le code CSS dans un fichier à part (avec l'extension.css). C'est un fichier dans lequel on écrit l'apparence que notre site doit avoir : la couleur et la police du texte, la taille des titres, la position des menus, la couleur ou l'image de fond 1. Insérer du code CSS On peut écrire du code CSS à 3 endroits différents, selon ce qu'on préfère : Méthode A : dans un fichier.css (méthode recommandée et utilisée dans ce cours) Méthode B : dans l'en-tête du fichier XHTML Méthode C : dans les balises (non recommandé) Dans un fichier.css Le design d'un site évolue toujours au fil du temps. Le problème, lorsqu'on n'utilise pas de feuilles de style, c'est qu'il faut reprendre toutes les pages html une à une pour modifier une police de caractère ou une couleur de fond... La technique la plus courante et la plus conseillée consiste à créer un fichier spécial, avec l extension.css, pour placer le code CSS. Ce fichier, appelé feuille de style, centralise toute la mise en forme du site. En cas de changement d un paramètre dans cette feuille, la modification est répercutée automatiquement dans toutes les pages XHTML reliées à cette feuille de style. Ouvrez le logiciel Notepad++ Activez la coloration CSS en allant dans le menu Langage > CSS Vous allez changer la couleur de fond de toutes vos pages et centrer tous les paragraphes. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.1/6
Tapez le code CSS suivant : body background-color: #BEDDE4; p text-align: center; Enregistrez le fichier dans le dossier Site-nice en le nommant style.css et observez vos pages dans un navigateur. Vous observez que rien ne se passe. En effet, maintenant que le fichier CSS existe, il va falloir modifier tous les fichiers XHTML pour leur dire d utiliser le fichier style.css pour leur mise en forme. On doit pour cela rajouter la balise <link /> entre les balises <head> et </head>. Attacher un fichier CSS à un fichier XHTML <link rel="stylesheet" media="screen" type="text/css" title="titre" href="style.css" /> title : c'est le nom que vous donnez à votre feuille de style (mettez ce que vous voulez) href : c'est l'emplacement où se trouve votre feuille de style sous forme de lien relatif. SITE-NICE index contact style images pages banniere nice01 carnaval gastronomie histoire localisation -climat Vous allez attacher le fichier style.css au fichier index.html. Ouvrez dans Notepad++ le fichier index.html Ajouter entre les balises <head> le code suivant : <link rel="stylesheet" media="screen" type="text/css" title="mon style" href="style.css" /> Enregistrez la page et observez le résultat dans un navigateur. Retournez dans le fichier style.css et changez la valeur de Background-color en #EEAFC2 et la valeur de la balise p en right. Enregistrez le fichier puis observez les changements dans votre navigateur. Attachez le fichier style.css aux fichiers contact.html, carnaval.html, gastronomie.html, histoire.html et localisation-climat.html Enregistrez les pages et observez le résultat dans un navigateur. Retournez dans le fichier style.css et changez la valeur de background-color en #2f8bbc et la valeur de la balise p en center. Enregistrez le fichier puis observez les changements dans votre navigateur. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.2/6
Dans l en-tête du fichier XHTML (pour information) Une autre technique consiste à placer le code CSS à l intérieur même du fichier XHTML. Il devra être placé entre des balises spéciales <style></style> placées entre les balises <head></head>. Insérer du code CSS dans le fichier CSS <head> <title>exemple de CSS dans le header</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /* code CSS ici */ </style> </head> À retenir Il est préférable de créer un fichier.css spécialement pour le code CSS. Cela évite de dupliquer le même code CSS dans plusieurs fichiers XHTML. Vous pourrez faire changer le design du site en un clin d'œil. De plus, le fichier ne sera téléchargé qu'une seule fois pour toutes les pages de votre site, ce qui allègera la taille des fichiers.html et rendra donc votre site plus rapide! 2. Appliquer un style à des balises Dans un CSS, on trouve 3 éléments différents : Des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si on veut modifier l'apparence de tous les titres <h1>, je dois écrire h1. Des propriétés CSS : les "effets de style" de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte,... Il y a beaucoup de propriétés CSS et il ne faut hésiter à utiliser un aide-mémoire. Les valeurs : à chaque propriété CSS on doit indiquer une valeur. Par exemple, pour la couleur, il faut indiquer le nom de la couleur, pour la taille, il faut indiquer quelle taille on veut,... Chaque valeur est fermée par un point-virgule ; Appliquer un style à une balise Appliquer un style à une balise balise Vous souhaitez aligner à gauche et mettre en rouge tous les titres de niveau 1. Ouvrez dans Notepad++ la feuille de style style.css Pour aligner à gauche et mettre en rouge les titres <h1> seulement, ajoutez à votre feuille de style le code suivant : h1 text-align: left; color: #b3181c; Enregistrez la feuille de style style.css et observez dans votre navigateur et après actualisation les changements dans vos pages. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.3/6
Appliquer un style à plusieurs balises Il est possible d appliquer un même style à plusieurs balises à la fois. Pour faire cela, il suffit de séparer les noms des balises par des virgules. Appliquer un style à plusieurs balises balise1, balise2, balise3 Vous souhaitez mettre en forme les titres de niveau 2 comme les titres de niveau 1. Modifiez votre feuille de style style.css de la façon suivante : h1, h2 text-align: left; color: #b3181c; changements dans vos pages. Appliquer un style à des balises imbriquées Le CSS permet de définir des règles encore plus précises. Vous pouvez appliquer un style à des balises imbriquées (balise imbriquée = une balise qui en contient une autre). Pour faire cela, il suffit de séparer le nom des balises par un espace. Appliquer un style à des balises imbriquées balisea baliseb Cela signifie que le style sera appliqué au contenu de la baliseb située dans la balisea. 3. Appliquer un style à certaines balises Vous avez vu comment changer l apparence de toutes les balises d un même type (par exemple, tous les paragraphes). Comment faire pour changer l apparence, par exemple, de certains paragraphes en particulier ou de certains titres seulement? Pour appliquer un style CSS à une balise précise, il faut identifier ces balises en leur donnant un nom. On a la possibilité pour faire cela d'utiliser des attributs spéciaux qui fonctionnent sur toutes les balises : L'attribut class L'attribut id id : un identifiant unique L attribut id sert à donner un nom unique dans toute la page à une balise. Par conséquent, vous ne devez pas donner deux fois le même nom à deux balises d une même page. Donner un nom unique à une balise (XHTML) <balise id="nom_balise"> Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.4/6
Dans la feuille de style, le symbole dièse # permet d indiquer que l on parle d une balise ayant un nom précis (identifiée par l attribut id). Appliquer un style à une balise nommée par l attribut id (CSS) #nom_balise /* Propriétés CSS ici */ Vous souhaitez aligner à droite la barre de navigation sur toutes les pages. Pour cela, vous nommerez ce paragraphe puis vous lui affecterez un style particulier : Modifiez dans Notepad++ tous les fichiers en nommant le paragraphe contenant la barre de navigation barre-navigation : Enregistrez la page. <p id="barre-navigation"> <a href="index.html">accueil</a> [ ] </p> Modifiez votre feuille de style style.css en rajoutant le style : #barre-navigation text-align: right; color: white; changements dans vos pages. class : un identifiant réutilisable L attribut class sert également à donner un nom à la différence près qu on peut donner le même nom à autant de balises que l on veut. Donner un nom réutilisable à une balise (XHTML) <balise class="nom_balise"> Dans la feuille de style, le point. permet d indiquer que l on parle d une balise ayant un nom précis (identifiée par l attribut class). Appliquer un style à une balise nommée par l attribut class (CSS).nom_balise /* Propriétés CSS ici */ Vous souhaitez écrire en gras et en blanc deux phrases de la page d accueil. Pour cela, vous nommerez ces deux parties puis vous leur affecterez le style voulu : Modifiez dans Notepad++ le fichier index.html en nommant le paragraphe Vous y trouverez [ ] de Nice et le paragraphe Vous pourrez également [ ] en cliquant ici! accroche : <p class="accroche">vous y trouverez quelques informations sur la ville de Nice :</p> <p class="accroche">vous pourrez également nous contacter pour nous faire part de toutes vos remarques.</p> Enregistrez la page. Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.5/6
Modifiez votre feuille de style style.css en rajoutant le style :.accroche font-weight: bold; color: white; changements dans votre page index.html. Remarque Remarque Il est conseillé de nommer les balises en utilisant dans vos attributs id et class des noms clairs et intelligibles. N oubliez pas qu un nom ne doit pas comporter d accent ou d espace (utilisez le trait-bas _) et privilégiez l utilisation de lettres minuscules. Plusieurs class pour une balise Il est possible de donner plusieurs class à une même balise. Il vous suffit pour cela de séparer les noms des classes par un espace dans le code XHTML. Ex. <balise class="classe1 classe2"> 4. Les commentaires en CSS Il est possible, comme en XHTML, d insérer des commentaires. Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations pour vous, par exemple pour vous y retrouver dans un long fichier CSS. Il faut utiliser /* pour indiquer le début d un commentaire et */ pour en indiquer la fin. Commentaire CSS /* commentaire */ Modifiez votre feuille de style style.css en rajoutant avant le style.accroche le commentaire suivant : /* Ceci est un identifiant réutilisable */ changements dans votre page index.html (aucun normalement). Frédéric PERRET Réussir son site web avec XHTML et CSS leçon 06 p.6/6