Votre fichier styles.css donnera une plus belle apparence à vos trois pages HTML. Avec un peu de recherche et d’exploration, vous les doterez d’une présentation plus attrayante!
Nous avons joué avec le code CSS sur le site CodePen.io. Nous avons entre autres vu comment changer la couleur de police, la couleur d’arrière-plan, la famille, la taille et la graisse de la police de caractères, ainsi que comment cibler un élément HTML tel que le body, les titres, les paragraphes, les figures et images, ou comment isoler certains éléments en leur attribuant une classe (class) ou un identifiant (id).
Si vous avez créé votre fichier CSS avec Notepad++, voyez comment téléverser votre fichier sur le serveur à l’article précédent sur le HTML. Si vous préférez créer votre fichier CSS directement sur le serveur, suivez la procédure ci-dessous.
Créer votre fichier styles.css sur le serveur web
Pour créer votre fichier styles.css directement sur le serveur web, suivez les étapes suivantes :
- connectez-vous au cPanel de votre serveur web (billet remis en classe);
- cliquez sur Gestionnaire de fichier;
- double-cliquez sur le dossier pfi pour y accéder;
- dans le menu, cliquez sur +Fichier;
- nommez votre fichier styles.css et cliquez sur Create New File;
- cliquez sur le nouveau fichier styles.css, puis sur Modifier;
- cliquez sur Edit dans la boite de dialogue qui apparait;
- suivez les consignes de la PFI pour appliquer les styles requis;
- référez-vous à l’Introduction aux CSS que nous avons vues dans le cours, ainsi que les articles d’introduction sur le site de Mozilla.org : CSS : Feuilles de style en cascade et Premiers pas avec CSS.
- inspirez-vous de quelques pens tagués « CSS » sur CodePen.io au besoin;
- assurez-vous de bien lier vos pages à votre fichier CSS à l’aide de la balise <link rel= »stylesheet » href= »styles.css »> dans l’entête de vos trois pages;
- testez votre site en ouvrant votre site à l’adresse utilisateur.pourleweb.ca/pfi dans Firefox ou Chrome;
- assurez-vous que les trois fichiers sont mis en forme par votre fichier CSS.
Des questions?
Utilisez la boite de commentaires ci-dessous pour m’en faire part. Il me fera plaisir de vous répondre et de clarifier les procédures en cas de besoin!