Skip to content

SNT - Seconde - le web avec CSS

Travail demandé

Partie 1

Dans cette partie vous allez modifier votre site web précédent en ajoutant une feuille de style.
Rappel: une feuille de style est la description de la mise en page d'un site web, elle décrit les couleurs, la position des éléments et des effets de style comme le rendu lors de survols d'éléments par exemple.

Question 1: mise en place d'un fichier de style

  • Regarder la vidéo de mise en place d'un projet CSS, cliquez-ici .
    Résumé:
  • Effectuer la copie de votre premier site web (le projet ne doit pas être ouvert dans netbeans).
  • Ouvrir la copie de votre site.
  • Ajouter au dossier SiteRoot un fichier css que vous nommerez mystyle.css

  • Ajouter dans la partie head de la page index.html le lien vers le fichier CSS: 

        <link rel="stylesheet" href="mystyle.css" />

  • Ajouter aussi ce lien dans la partie head de votre autre page (ou de vos autres pages ).

Question 2: migration des styles des balises de vos pages hml

  • Regarder la vidéo sur la migration d'un style, cliquez-ici .
  • Migrer vos styles vers le fichier css puis supprimer l'attribut style et son contenu de les balises de vos fichiers html.

Partie 2

Dans cette partie vous allez appliquer des effets de style qui répondront aux questions ci-dessous:
Comment faire pour que certains éléments soient décorés différement d'autres éléments du même type ( par exemple un paragraphe avec un texte bleu et un autre paragraphe avec un texte rouge) ?
Comment faire pour qu'un lien change d'apparence quand on le survole?
Comment faire pour qu'une page se présente avec des colonnes ?

Question 3: les classes et les ID

  • Lire le chapitre du dossier ressources sur les classes et les id.

  • Ajouter ou modifier le style de deux balises ( <div>, <p>, <h1>, <h2>, etc..) avec un id pour leur donner une apparence différente.

Question 4: les pseudo-classes

  • Lire le chapitre du dossier ressources sur les pseudo-classes.

  • Ajouter ou modifier un lien pour qu'il change d'apparence lors d'un survol.

Question 5: les balises structurantes

  • Lire le chapitre du dossier ressources sur les balises structurantes.
  • Créer une page ou modifier une de vos pages pour avoir un affichage du contenu sur 3 colonnes.