Valeur de cette activité : 5 points
Compétence :
01- Ma première feuille de style (3)

A-Module 03 : CSS : 5 points - difficulté : 2

Ma première feuille de style

Présentation

Les feuilles de style peuvent simplifier votre tâche au niveau de la présentation graphique de votre page web.

Dans cette activité, vous vous servirez d'un modèle de feuille de style afin de bien comprendre la structure d'une feuille de style.

Directives

Rappel : une feuille de style est composée d'un sélecteur, d'une propriété et d'une valeur de propriété. Exemple :
Sélecteur {Propriété : Valeur ;}
H1 {COLOR:red;}


  1. Créez une nouvelle page à votre portfolio en sélectionnant l'assistant HTML et en affichant la directive 2105

  2. Affiche les assistants et

  3. Inscrivez le titre : Ma première feuille de style

  4. Inscrivez la matière : Informatique

  5. Inscrivez le no de la directive : 2105

  6. Sélectionnez le modèle Documentbase de la boîte à liste déroulante INSÉRER UN MODÈLE (Boîte rose)

  7. Enregistrez et visualisez cette page

  8. Observez que dans cette page vous avez ;
    - vos balises d'en-tête (HEAD) contenant un titre de page (TITLE)
    - votre corps de page (BODY) contenant :
    - un titre de niveau 1 dans la page (H1)
    - un titre de niveau 2 dans la page (H2)
    - un titre de niveau 3 dans la page (H3)
    - un paragraphe (P)
    - une image (IMG)
    - un lien sur texte (A)


  9. Placez votre curseur dans la section HEAD de votre document et insérez la feuille de style "Css2" à partir de la boîte à liste déroulante INSÉRER UN MODÈLE de la barre d'outil HTML (boîte rose)

  10. Visualisez votre page

  11. Observez les modifications apportées à l'apparence de votre page.

  12. Observez bien votre code afin de comprendre l'utilisation des feuilles de styles.

  13. Vous avez probablement remarqué que l'affichage de vos éléments de page a été modifié conformément à votre feuille de style:

    Ainsi :

    Les sélecteurs suivants de la feuille de style ont été utilisés :

    - body { background-color : yellow; color : black;} afin de paramétrer la couleur du texte et du fond de page
    - h1 { background-color : white ; color : red;} afin de paramétrer la balise Titre de niveau 1
    - h2 { color : blue;} afin de paramétrer la balise Titre de niveau 2
    - h3 { color : pink;} afin de paramétrer la balise Titre de niveau 3
    - p { background-color: #0000ff;} afin de paramétrer le paragraphe


  14. Afin de réaliser cette activité, consultez la liste de toutes les propriétés CSS

  15. Modifiez ensuite votre feuille de style afin de définir pour chacun des sélecteurs 3 couples propriétés:valeurs différents de votre choix.
    Exemple : h1{color:red;font-size:large;border:1px solid red;}
    Utilisez au besoin la boîte à liste déroulante AIDE-CSS-FEUILLE DE STYLE



  16. Enregistrez votre travail


  17. Affichez votre travail et apportez les corrections au besoin