Scribd
Importer
11 vues2 pages

Création et style CSS pour HTML

Ce document présente des exercices pour créer et modifier une feuille de style CSS afin d'améliorer l'apparence des pages HTML. Les activités incluent la modification des couleurs des titres et des paragraphes, l'ajout de marges, la définition d'une couleur de fond, ainsi que l'insertion d'images et de liens avec des styles spécifiques. Les étudiants sont guidés pour lier le fichier CSS à leur document HTML et observer les changements dans un navigateur.

Transféré par

Isabelle Pinaudeau
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
11 vues2 pages

Création et style CSS pour HTML

Ce document présente des exercices pour créer et modifier une feuille de style CSS afin d'améliorer l'apparence des pages HTML. Les activités incluent la modification des couleurs des titres et des paragraphes, l'ajout de marges, la définition d'une couleur de fond, ainsi que l'insertion d'images et de liens avec des styles spécifiques. Les étudiants sont guidés pour lier le fichier CSS à leur document HTML et observer les changements dans un navigateur.

Transféré par

Isabelle Pinaudeau
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Thème 2 – Web SNT – 2nde

II/ Créer une feuille de style en CSS


Activité 3 – Mettre du style ! Création du fichier CSS
Vous l’avez remarqué, les pages écrites en HTML dans le chapitre précédent sont très Exercice 1 : modification d’une feuille de style
rudimentaires, manquent de couleurs et adoptent une mise en page désastreuse. Au début du Modifier le fichier CSS de façon à faire apparaître les titres en bleu et les paragraphes en
noir (ou encore aux couleurs de votre choix !).
Web, il était courant de voir des pages écrites de la façon suivante :
Exercice 2 : des marges : margin !
Notre texte est pour l’instant beaucoup trop proche des bords de la fenêtre : nous
aimerions le doter de marges (margin en anglais).
CSS permet d’appliquer des marges aux éléments de notre choix. Par exemple, pour
obtenir des titres <h1>, de couleur bleu, avec des marges de 20 pixels :

Modifier le fichier CSS de l’exercice précédent, pour appliquer des marges de 20 pixels,
aux titres de niveau h1 et aux paragraphes p.

Exercice 3 : ajouter une couleur de fond à la page


Pour obtenir un fond de couleur, nous devrons, dans la feuille de style, définir la propriété
Cela aboutit très vite à un code illisible mais très rudimentaire, impossible à maintenir et background de la balise correspondant à l’intégralité de la page : body .
réexploiter, avec un mélange permanent du fond et de la forme. Par exemple :
Le langage CSS (Cascading Style Sheets ou feuilles de style en cascade) permet de remédier à
ce problème :

1. Choisissez une couleur de fond à l’adresse suivante :


[Link]
2. Modifier votre fichier CSS de façon à obtenir un fond coloré.

Exercice 5 : des images et des liens


I/ Lien du fichier CSS dans le fichier HTML 1. Insérer une image et un lien dans votre page.
2. Définir les propriétés graphiques des balises <img> et <a> dans la feuille de style pour
Pour appliquer les propriétés définies dans une feuille [Link], à un fichier obtenir un rendu harmonieux.
3. Nous aimerions que le lien devienne rouge lorsqu’il est survolé par la souris. Essayer de
03_un_peu_de_style.html :
définir la propriété CSS suivante, et observer l’effet après avoir ré-actualisé l’onglet :
 Nous travaillerons sur les deux fichiers [Link] et 03_un_peu_de_style.html
 Placer le fichier [Link] dans le même répertoire que le fichier 03_un_peu_de_style.html,
 Ouvrir ces deux fichiers dans Notepad++.
 Ouvrir le fichier html dans Firefox.
 Pour indiquer à 03_un_peu_de_style.html, où se trouve le fichier de style, insérer la balise ci-
dessous dans la partie <head> </head> du fichier HTML :

 Actualisez la page web pour voir les changements.

Vous aimerez peut-être aussi