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 pour créer votre feuille de style CSS dans le Bloc-notes:
- Choisir Fichier > Nouveau dans le Bloc-notes pour obtenir une fenêtre vide
- Enregistrez le fichier au format CSS en cliquant sur Fichier < Enregistrer sous...
- Accédez au dossier my_website sur votre disque dur
- Changer la "Sauvegarder comme type:" à "Tous les fichiers"
- Nommez votre fichier "styles.css" (sans les guillemets) et cliquez sur Sauvegarder
Liez la feuille de style CSS à votre code HTML
Une fois que vous avez un feuille de style pour votre site Web, vous devrez 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 le fichier.
Corriger les marges de page
Quand tu écris XHTML pour différents navigateurs, une chose que vous apprendrez est qu'ils semblent tous avoir des marges et des règles différentes pour la façon dont ils affichent les choses. La meilleure façon de s'assurer que votre site a la même apparence dans la plupart des navigateurs est de ne pas autoriser des choses comme les marges par défaut sur le choix du navigateur.
Nous préférons commencer les pages dans le coin supérieur gauche, sans rembourrage ou marge supplémentaire entourant le texte. Même si nous allons remplir le contenu, nous mettons les marges à zéro afin que nous commencions avec la même ardoise vierge. Pour ce faire, ajoutez les éléments suivants à votre document styles.css:
html, corps {
marge: 0px ;
remplissage: 0px ;
bordure: 0px ;
à gauche: 0px ;
haut: 0px ;
}
Changer la police sur la page
La police est souvent la première chose que vous voudrez changer sur une page Web. Le défaut police sur une page Web peut être moche et dépend en fait du navigateur Web lui-même, donc si vous ne définissez pas la police, vous ne savez vraiment pas à quoi ressemblera votre page.
En règle générale, vous modifiez la police sur les paragraphes, ou parfois sur l'ensemble du document lui-même. Pour ce site, nous allons définir la police au niveau de l'en-tête et du paragraphe. Ajoutez les éléments suivants à votre document styles.css:
p, li {
police: 1em Arial, Helvetica, sans empattement ;
}
h1 {
police: 2em Arial, Helvetica, sans-serif ;
}
h2 {
police: 1.5em Arial, Helvetica, sans-serif ;
}
h3 {
police: 1,25 em Arial, Helvetica, sans empattement ;
}
Nous avons commencé avec 1em comme taille de base pour les paragraphes et les éléments de liste, puis nous l'avons utilisé pour définir la taille de mes titres. Nous ne nous attendons pas à utiliser un titre plus profond que h4, mais si vous prévoyez de le faire, vous voudrez également le styler.
Rendre vos liens plus intéressants
Les couleurs par défaut des liens sont respectivement le bleu et le violet pour les liens non visités et visités. Bien que ce soit standard, il se peut qu'il ne corresponde pas au schéma de couleurs de vos pages, alors modifions-le. Dans votre fichier styles.css, ajoutez les éléments suivants:
un lien {
famille de polices: Arial, Helvetica, sans-serif ;
couleur: #FF9900 ;
texte-décoration: soulignement ;
}
a: visité {
couleur: #FFCC66 ;
}
a: survolez {
arrière-plan: #FFFFCC ;
font-weight: gras ;
}
Nous avons mis en place trois styles de lien, le a: lien par défaut, a: visité pour quand il a été visité, nous changeons la couleur, et a: survol. Avec un: hover, le lien obtient une couleur d'arrière-plan et devient gras pour souligner qu'il s'agit d'un lien sur lequel cliquer.
Styliser la section de navigation
Puisque nous plaçons la section de navigation (id="nav") en premier dans le code HTML, stylisons-la d'abord. Nous devons indiquer sa largeur et mettre une marge plus large sur le côté droit afin que le texte principal ne se heurte pas à lui. nous aussi, mettons une bordure autour.
Ajoutez le CSS suivant à votre document styles.css:
#nav {
largeur: 225px ;
marge droite: 15 px ;
bordure: moyen solide #000000 ;
}
#nav li {
style de liste: aucun ;
}
.bas de page {
taille de la police: .75em ;
clarifier les deux;
largeur: 100 % ;
text-align: centre ;
}
La propriété list-style configure la liste à l'intérieur de la section de navigation pour qu'elle n'ait ni puces ni chiffres, et le .footer stylise la section copyright pour qu'elle soit plus petite et centrée dans la section.
Positionnement de la section principale
En positionnant votre section principale avec un positionnement absolu, vous pouvez être sûr qu'elle restera exactement là où vous voulez qu'elle reste sur votre page Web. Nous l'avons fait 800px de large pour accueillir moniteurs plus grands, mais si vous avez un moniteur plus petit, vous voudrez peut-être le rendre plus étroit.
Placez ce qui suit dans votre document styles.css:
#principale {
largeur: 800px ;
haut: 0px ;
position: absolue ;
à gauche: 250 pixels ;
}
Styliser vos paragraphes
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 faire mieux ressortir. J'ai fait cela en mettant une bordure en haut qui a mis en évidence le paragraphe plus que l'image seule.
Placez ce qui suit dans votre document styles.css:
.topline {
bordure supérieure: solide épais #FFCC00 ;
}
Nous avons décidé de le faire en tant que classe appelée "topline" plutôt que de simplement définir tous les paragraphes de cette manière. De cette façon, si nous décidons d'avoir un paragraphe sans ligne supérieure jaune, nous pouvons simplement omettre class="topline" dans la balise de paragraphe et il n'aura pas la bordure supérieure.
Styliser les images
Les images ont généralement une bordure autour d'elles, ce n'est pas toujours visible sauf si l'image est un lien, mais nous aimons avoir une classe dans le Feuille de style CSS qui désactive automatiquement la bordure. Pour cette feuille de style, nous avons 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. Nous voulions qu'ils fassent partie du paragraphe dans lequel ils se trouvaient sans utiliser de tableaux pour les aligner. La façon la plus simple de le faire est d'utiliser la propriété CSS float.
Placez ce qui suit dans votre document styles.css:
#image principale {
flotteur: gauche ;
marge droite: 5px ;
marge inférieure: 15px ;
}
.pas de frontière {
bordure: 0px aucun ;
}
Comme vous pouvez le voir, des propriétés de marge sont également définies sur les images, pour s'assurer qu'elles ne sont pas écrasées contre le texte flottant qui se trouve à côté d'elles dans les paragraphes.
Maintenant, regardez votre page terminée
Une fois que vous avez enregistré votre CSS, vous pouvez recharger la page pets.htm dans votre navigateur Web. Votre page doit ressembler à celle montrée sur cette image, avec les images alignées et la navigation placée correctement sur le côté gauche de la page.
Suivez ces mêmes étapes pour toutes vos pages internes pour ce site. Vous voulez avoir une page pour chaque page de votre navigation.