Créer la feuille de style CSS
De la même manière que nous avons créé un fichier texte séparé pour le HTML, vous allez créer un fichier texte pour le CSS. Si vous avez besoin de visuels pour ce processus, veuillez consulter le premier tutoriel. Voici les étapes à suivre pour créer votre feuille de style CSS dans le Bloc-notes:
- Choisissez Fichier> Nouveau dans le Bloc-notes pour obtenir une fenêtre vide.
- Enregistrez le fichier en tant que CSS en cliquant sur Fichier <Enregistrer sous …
- Accédez au dossier my_website sur votre disque dur.
- Changez le "Type de fichier:" en "Tous les fichiers"
- Nommez votre fichier "styles.css" (laissez les guillemets) et cliquez sur Enregistrer.
Lier la feuille de style CSS à votre code HTML
Une fois que vous avez une feuille de style pour votre site Web, vous devez l'associer à la page Web elle-même. Pour ce faire, vous utilisez la balise link. Placez la balise de lien suivante n'importe où dans la liste.
balises de votre document pets.htm:
03 sur 10 Lorsque vous écrivez XHTML pour différents navigateurs, vous apprendrez notamment qu’ils semblent tous avoir des marges et des règles différentes quant à la manière dont ils affichent les choses. Le meilleur moyen de vous assurer que votre site a le même aspect dans la plupart des navigateurs est de ne pas permettre que des options telles que les marges soient configurées par défaut. Je préfère commencer mes pages dans le coin supérieur gauche, sans remplissage ni marge supplémentaire autour du texte. Même si je vais remplir le contenu, je règle les marges à zéro afin de commencer avec la même ardoise vierge. Pour ce faire, ajoutez ce qui suit à votre document styles.css: La police de caractères est souvent la première chose que vous souhaiterez modifier sur une page Web. La police par défaut sur une page Web peut être moche et correspond en fait au navigateur Web lui-même. Par conséquent, si vous ne définissez pas la police, vous ne saurez pas vraiment à quoi ressemblera votre page. En règle générale, vous modifiez la police de caractères sur les paragraphes, ou parfois sur l'ensemble du document. Pour ce site, nous allons définir la police au niveau de l’en-tête et du paragraphe. Ajoutez ce qui suit à votre document styles.css: J'ai commencé avec 1em comme taille de base pour les paragraphes et les éléments de liste, puis je l'ai utilisé pour définir la taille de mes titres. Je ne compte pas utiliser un titre plus profond que h4, mais si vous envisagez de le faire, vous voudrez également le styliser. Les couleurs par défaut des liens sont le bleu et le violet pour les liens non visités et visités. Bien que cela soit standard, il est possible que cela ne corresponde pas à la palette de couleurs de vos pages, changeons-le donc. Dans votre fichier styles.css, ajoutez les éléments suivants: J'ai mis en place trois styles de liens, le lien a: par défaut, a: visité pour la visite, je change de couleur et a: survol. Avec un: survol j'ai le lien obtenir une couleur de fond et aller en gras pour souligner que c'est un lien à cliquer. Puisque nous plaçons la section de navigation (id = "nav") en premier dans le code HTML, appelons-la d'abord. Nous devons indiquer quelle doit être sa largeur et placer une marge plus large à droite afin que le texte principal ne se heurte pas à lui. Je mets aussi une bordure autour. Ajoutez le CSS suivant à votre document styles.css: La propriété style de liste configure la liste dans la section de navigation de manière à ne pas avoir de puces ni de chiffres, et le .footer attribue à la section de droits d'auteur une taille plus petite et centrée dans la section. En positionnant votre section principale avec un positionnement absolu, vous pouvez être sûr qu'elle restera exactement là où vous le souhaitez sur votre page Web. J'ai fait le mien 800px large pour accueillir des moniteurs plus grands, mais si vous avez un moniteur plus petit, vous voudrez peut-être le rendre plus étroit. Placez les éléments suivants dans votre document styles.css: Comme j'ai déjà défini la police de paragraphe ci-dessus, je voulais donner à chaque paragraphe un petit coup de pouce supplémentaire pour le rendre meilleur. Je l'ai fait en mettant une bordure en haut qui soulignait le paragraphe plus que la seule image. Placez les éléments suivants dans votre document styles.css: J'ai décidé de le faire en tant que classe appelée "ligne supérieure" plutôt que de simplement définir tous les paragraphes de cette façon. De cette façon, si je décide d’avoir un paragraphe sans ligne jaune en haut, je peux simplement laisser le class = "topline" dans la balise de paragraphe et il n’aura pas de bordure en haut. Les images sont généralement entourées d'une bordure, elle n'est pas toujours visible sauf si l'image est un lien, mais j'aime bien avoir une classe dans ma feuille de style CSS qui désactive automatiquement la bordure.Pour cette feuille de style, j'ai créé la classe "noborder" et la plupart des images du document font partie de cette classe. L'autre partie spéciale de ces images est leur emplacement sur la page. Je voulais qu'ils fassent partie du paragraphe dans lequel ils se trouvaient sans utiliser de tableaux pour les aligner. La méthode la plus simple consiste à utiliser la propriété CSS float. Placez les éléments suivants dans votre document styles.css: Comme vous pouvez le constater, des propriétés de marge sont également définies sur les images afin de ne pas les écraser avec le texte flottant qui se trouve à côté d’elles dans les paragraphes. Une fois que vous avez sauvegardé votre CSS, vous pouvez recharger la page pets.htm dans votre navigateur Web. Votre page doit ressembler à celle présentée dans cette image, les images étant alignées et la navigation correctement placée à gauche de la page. Suivez les mêmes étapes pour toutes vos pages internes de ce site. Vous voulez avoir une page pour chaque page de votre navigation. Fixer les marges de la page
Changer la police sur la page
Rendre vos liens plus intéressants
Styliser la section de navigation
Positionner la section principale
Styliser vos paragraphes
Styliser les images
Maintenant, regardez votre page terminée
