Séance 4: Le Style Avec CSS: Activité 1

SNT Thème 2 : Le Web
Séance 4 : Le style avec CSS

Objectifs :
• Distinguer ce qui relève du contenu d’une page et de son style de présentation

• Etudier, modifier une page HTML simple
Le langage CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») permet de
définir le style graphique d’une page. Un fichier CSS contient des règles de mise en forme.
Par exemple, on pourra y définir que tous les titres de niveau 1 (balise <h1>) sont de telle couleur, de
telle police, sont centrés, etc.
L’utilisation d’un fichier CSS contribue à homogénéiser la présentation d’une page Web et à séparer le
contenu de la forme. Il suffira de le relier au fichier HTML comme vous allez le voir.
Comme dans la séance n°3, allez sur le site https://replit.com/ puis cliquez ensuite sur « Log in » et
rentrez vos identifiant et mot de passe.
Activité 1 Un premier exemple

Cliquez sur le lien suivant (ou recopiez-le dans un nouvel onglet) pour ouvrir un « repl » déjà créé :
https://replit.com/@beckerg/metiersweb
Cliquez ensuite sur le bouton « Fork repl » en haut de la page pour copier ce projet sur votre compte.
Le projet est désormais copié sur votre compte et vous pouvez travailler sur la page Web, les
modifications seront automatiquement enregistrées sur votre compte.
Le projet est composé d’un fichier HTML (« index.html ») et d’une image
(« metiers_web.jpg »). Les fichiers CSS (« style.css ») et « script.js » sont
vides. L’objectif est de compléter le fichier CSS afin de mettre en forme la
page Web.
1. Cliquez sur le bouton Run ►pour voir la page Web brute (sans mise en forme).
Dans le fichier HTML (« index.html ») repérez la ligne de code suivante dans les balises d’en-tête
(<head>) :
C’est cette ligne permet d’associer le fichier « style.css » que vous allez écrire, au fichier HTML
2. Dans la fenêtre des fichiers (à gauche), ouvrez le fichier style.css en cliquant sur
puis écrivez dans ce fichier CSS le code suivant :
h1 {
text-align: center;
color: blue;
font-size: 40px;
}
h2 {
color: white;
background-color: black;
}
p {
font-family: Verdana;
}
Page 1 sur 7 Les enseignants de SNT du Lycée E. Mounier, ANGERS

Actualisez désormais la page Web en cliquant sur Run ► et admirez le résultat !

3. Qu’a permis de faire chaque ligne du code CSS de la question précédente ? Détaillez pour
chaque ligne :
Code Rôle de chaque ligne (à compléter)
h1 {
text-align: center;
color: blue;
font-size: 40px;
}
h2 {
color: white;
background-color: black;
}
p {
font-family: Verdana;
}
4. Que faudrait-il ajouter comme code pour que les titres de niveau 3 (balises <h3>) soient centrés et
de police Arial ?
Ajoutez ce code au fichier CSS, et actualisez la page Web en cliquant sur Run ► pour vérifier si
votre code est le bon. Modifiez-le si nécessaire.
5. Ajoutez le code suivant au début de votre fichier CSS (n’écrivez pas ce qui est écrit entre /* et */
que l’on appelle des commentaires, qui sont en fait des explications destinées aux humains et
qui ne sont pas pris en compte lors de l’exécution du code). Actualisez la page Web.
body {
width: 800px; /* largeur de 800 pixels */
margin: auto; /* marges automatiques pour centrer horizontalement */
background-color: #efefef; /* couleur du fond */
}
Explications du code :
• width permet de préciser la largeur d’un élément, ici 800 pixels pour le corps de la page.
• margin permet de préciser les marges, si la propriété width de l’élément est définie
alors mettre une valeur auto à margin, revient à centrer l’élément.
• background-color permet de définir la couleur du fond de l’élément. Sans entrer plus
dans les détails ici (nous y reviendrons en cours d’année), pour définir une couleur il suffit
d’écrire le symbole # suivi d’une valeur hexadécimale. Pour trouver toutes les couleurs que
vous souhaitez, il suffit de vous rendre sur le site : https://htmlcolorcodes.com/fr/, de
sélectionner une couleur et regardez le code hexadécimal correspondant après le # dans
la fenêtre de droite.
N’hésitez pas à essayer de modifier les valeurs pour observer les changements !

6. Ajoutez le code suivant au sélecteur h2 :
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
Explications :
• padding désigne les marges intérieures d’un élément. Ici on a modifié les marges
intérieures gauche (left), haute (top) et basse (bottom) des balises <h2>.
• border-radius définit des coins arrondis pour la bordure d’un élément.
5 pixels
5 pixels
20 pixels
7. Ajoutez le code suivant au sélecteur p :
margin-left: 20px;
margin-right: 100px;
Explications : margin désigne les marges extérieures d’un élément. Ici on a modifié les marges
gauche (left) et droite (right) des balises <p>. Voir illustration :
20 pixels 100 pixels
Activité 2 Une personnalité stylée !

A vous désormais d’améliorer l’aspect graphique de la page Web sur la personnalité choisie (séance
n°3, activité 3) à l’aide d’une feuille de style CSS.
Ce travail est à rendre ! : Pour cela, il suffit de cliquer en haut à droite sur l’icône puis sur
puis copier le lien qui apparaît (CTRL + C) et

le communiquer à votre enseignant (en le copiant : CTRL + V) dans votre email ou dans l’espace de
travail SNT de votre classe sur elyco (Ressources → Thème 2 - Le Web → Séance 4 → Une
personnalité stylée).

Activité 3 Pour aller plus loin (facultatif)

Il est bien sûr impossible de lister ici toutes les possibilités offertes par le langage CSS. Dans cette
activité vous en trouverez quelques-unes parmi les plus importantes. Nous allons utiliser les fichiers
de la fin de l’activité 1 pour aller encore plus loin.
Appliquer un style : class et id

Avec ce qui a été vu dans l’activité 1, TOUS les titres h1 ont la même apparence, TOUS les
paragraphes ont la même apparence, etc.
Comment faire pour spécifier un style différent pour certains paragraphes précis ? Pour résoudre ce
problème, on peut utiliser les deux attributs suivants qui fonctionnent sur toutes les balises :
• L’attribut class ;
• L’attribut id.
On utilisera l’attribut class lorsque l’on voudra cibler plusieurs balises alors que l’attribut id ne peut
être utilisé qu’une seule fois (donc ne cibler qu’une seule balise).
Imaginons que l’on souhaite que les paragraphes sur les formations et les diplômes n’aient pas la
même allure que les autres paragraphes. On va utiliser l’attribut class en modifiant le code HTML de
la façon suivante :
On a ajouté le code class="formations_diplomes", juste après le <p et avant le >.

On vient d’associer la classe formations_diplomes à notre paragraphe. Le nom de la classe est celui
que l’on souhaite, mais il est préférable de choisir un nom représentatif pour s’y retrouver.
1. Effectuez cette modification sur chaque paragraphe concernant les formations et les diplômes.
Il faut désormais compléter le fichier CSS pour indiquer le style des paragraphes identifiés par le nom
formations_diplomes.
Pour cela, on indique dans le fichier CSS le nom de la classe en commençant par un point :
.formations_diplomes {
color: #4696a8;
text-align: justify;
}
2. Ajoutez ce code au fichier CSS, enregistrez-le et observez les changements (actualisez la page).
La valeur justify permet aux bords gauche et droit du texte d’être alignés avec les bords
gauche et droit du paragraphe.
L’attribut id fonctionne exactement de la même façon que class, mais ne peut être utilisé qu’une
seule fois. Dans le code HTML, remplacez class par id et dans le code CSS remplacez le . (point) par
#.
Imaginons que l’on souhaite modifier l’apparence uniquement du dernier paragraphe, qui est différent
de tous les autres de par son contenu.
Dans le code HTML, on ajoute un identifiant au paragraphe en question dans la balise <p> :
<p id="ressources">
Et dans le code CSS on précise son style ainsi :

#ressources {
margin-top: 30px;
padding-top: 20px;

border-top: solid 1px black; /*ajout d'une bordure en haut*/

}
3. Ajoutez cela aux codes HTML et CSS et n’oubliez pas d’enregistrer. Observez les changements.
Les balises universelles : <span> et <div>

Ce sont deux balises très utilisées (principalement la balise <div>). Elles n’ont aucune signification
particulière mais servent à organiser la page et à faire des choses que l’on ne pourrait pas faire avec
les attributs class et id.
Par exemple, imaginons que nous voulions modifier uniquement le mot « SNT » dans le
paragraphe suivant :
<p>La SNT, pour comprendre les technologies du numérique.</p>
Nous ne pouvons pas le faire avec class ou id car ces attributs doivent s’appliquer à une balise et qu’il
n’y en a pas pour encadrer le mot « SNT ». C’est pour ce genre de choses qu’ont été inventées ces
deux balises universelles. Il n’y a qu’une différence minime (mais significative !) entre les deux :
• La balise <span> est de type « inline » (= en ligne) qui sont des balises dont le contenu se
place les uns à côtés des autres sur la page Web (sur la même ligne).
On va l’utiliser au sein d’un paragraphe de texte pour sélectionner des mots.
• La balise <div> est de type « block » qui sont des balises qui créent des blocs qui sont
placés les uns en-dessous des autres dans la page.
Ici nous allons utiliser la balise <span> pour modifier le mot « SNT ». Il suffit de l’insérer autour du
mot de la façon suivante :
<p>La <span class="mot">SNT</span>, pour comprendre les technologies du
numérique.</p>
et on crée le code CSS suivant pour que ce mot devienne rouge et fasse 20 pixels de haut.
.mot {
color: red;
font-size: 20px;
}
Vous avez remarqué qu’il faut attribuer une classe (ou un id) à la balise <span> de façon à pouvoir lui
appliquer un style CSS en utilisant le nom de la classe (ici mot).
4. Utilisez la balise <span> pour que la première lettre de chaque métier apparaisse dans une
couleur grise (#bbbbbb par exemple) avec une taille de police de 40 pixels.
La balise <div> permet d’encadrer tout un bloc que l’on souhaite transformer. Généralement, il
permet d’encadrer une ou plusieurs balises pour appliquer un style à l’ensemble de ces balises.
Imaginons que nous souhaitions appliquer un style à tout le texte décrivant un métier. Ce texte est
composé d’un paragraphe, puis d’un titre et enfin d’un autre paragraphe.

Tout
ce
texte
On va encadrer ces trois éléments avec une balise <div> de la façon suivante :
<div class="description_metier">
<p>...</p>
<h3>...</h3>
<p class="formations_diplomes">
...</p>
</div>
Et on définit son style CSS de la façon suivante :
.description_metier {
margin-left: 15px; /* marge extérieure gauche */
margin-right: 15px; /* marge extérieure droite */
padding: 10px; /* marges intérieures */
background-color: white; /* couleur du fond */
border: solid 7px #bbbbbb; /* bordure (type, épaisseur, couleur) */
border-radius: 30px; /* angles arrondis */
}
5. Utilisez ce code et appliquez ce style à chacun des métiers de votre page Web. Observez le
résultat.
La balise <div> permet également de centrer facilement une image. Il suffit d’encadrer cette image
par une balise <div> de la façon suivante :
<div class="image_centre">
<img src="metiers_web.jpg" alt="image d'illustration des métiers du web">
</div>
Et d’appliquer le code CSS suivant :
.image_centre {
text-align: center;
}
6. Ajoutez ce code aux fichiers HTML et CSS et observez le résultat.
Créer des apparences dynamiques
Il est possible de modifier l’apparence d’éléments grâce à CSS. On utilise pour cela des pseudo-
formats (ce nom n’a pas beaucoup d’importance).

Le pseudo-format sans doute le plus utilisé s’appelle :hover qui signifie « survoler ». On va l’utiliser
pour modifier des apparences au survol de certains éléments.
Par exemple, si on souhaite modifier l’apparence des titres <h3> lors du survol de la souris, il suffit
d’ajouter au code CSS :
h2:hover {
color: white;
background-color: gray;
}
7. Ajoutez ce code au fichier CSS et observez le résultat.
En pratique, la pseudo-classe :hover est surtout utilisée au survol des liens. Rendez-vous par
exemple sur le site : https://www.alsacreations.com/ et observez les changements d’apparence des
éléments lors du survol de la souris.
Les liens sont par défaut colorés et soulignés. Si on souhaite par exemple que les liens ne soient pas
soulignés et qu’ils deviennent rouges au survol de la souris, il suffit d’ajouter au code CSS les lignes
suivantes :
/* liens non survolés */

a {
text-decoration: none; /* pour ne pas souligner les liens hypertextes */
}
/* liens survolés */
a:hover {
color: red; /* pour colorier en rouge lors du survol */
}
8. Ajoutez ces lignes au code CSS puis actualisez la page Web.
Références :
• Réalisez votre site web avec HTML 5 et CSS 3, Mathieu Nebra, OpenClassrooms,
EYROLLES ;
• Cours OpenClassrooms : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-
votre-site-web-avec-html5-et-css3

Séance 4: Le Style Avec CSS: Activité 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Séance 4: Le Style Avec CSS: Activité 1

Transféré par

Droits d'auteur :

Formats disponibles

SNT Thème 2 : Le Web

Séance 4 : Le style avec CSS

• Distinguer ce qui relève du contenu d’une page et de son style de présentation

Activité 1 Un premier exemple

Page 1 sur 7 Les enseignants de SNT du Lycée E. Mounier, ANGERS

Actualisez désormais la page Web en cliquant sur Run ► et admirez le résultat !

Page 2 sur 7 Les enseignants de SNT du Lycée E. Mounier, ANGERS

6. Ajoutez le code suivant au sélecteur h2 :

7. Ajoutez le code suivant au sélecteur p :

20 pixels 100 pixels

Activité 2 Une personnalité stylée !

puis copier le lien qui apparaît (CTRL + C) et

Page 3 sur 7 Les enseignants de SNT du Lycée E. Mounier, ANGERS

Activité 3 Pour aller plus loin (facultatif)

Appliquer un style : class et id

On a ajouté le code class="formations_diplomes", juste après le <p et avant le >.

Et dans le code CSS on précise son style ainsi :

Page 4 sur 7 Les enseignants de SNT du Lycée E. Mounier, ANGERS

border-top: solid 1px black; /*ajout d'une bordure en haut*/

Les balises universelles : <span> et <div>

Page 5 sur 7 Les enseignants de SNT du Lycée E. Mounier, ANGERS

Et on définit son style CSS de la façon suivante :

Et d’appliquer le code CSS suivant :

6. Ajoutez ce code aux fichiers HTML et CSS et observez le résultat.

Créer des apparences dynamiques

Page 6 sur 7 Les enseignants de SNT du Lycée E. Mounier, ANGERS

7. Ajoutez ce code au fichier CSS et observez le résultat.

/* liens non survolés */

8. Ajoutez ces lignes au code CSS puis actualisez la page Web.

Page 7 sur 7 Les enseignants de SNT du Lycée E. Mounier, ANGERS

Vous aimerez peut-être aussi

border-top: solid 1px black; /ajout d'une bordure en haut/