Vous êtes sur la page 1sur 5

Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire

Faculté de Technologie HTML 2020-2021

TP04 : HTML / CSS

Introduction
Les feuilles de styles ou CSS (Cascading Style Sheets) permettent de mettre en forme le contenu
d’une page HTML. Une feuille de styles est une série de règles.
Chaque règle est composée de deux parties :
Le sélecteur qui détermine les parties du document auxquelles le style doit s'appliquer et le bloc
de déclaration qui regroupe des combinaisons de propriétés CSS et de valeurs (une valeur par
propriété)
Exemple

Dans cet exemple h1est un sélecteur; color et text-align sont des propriétés auxquelles on
associe respectivement les valeurs gray et center.
(Titres de niveau 1 en gris et centrés) : h1 {color: gray;text-align: center;}
Il existe trois méthodes pour déclarer une feuille de style css dans une page Web:

a. Directement sous forme d'attribut dans la balise HTMLà modifier grâce à l'attribut Style. Le
code CSS sera appliqué uniquement à l'élément. De plus, cette écriture ne respecte pas l'idée
qu'il faut séparer le contenu de la mise en forme. Cette option est donc à proscrire.

Exemple: <h1 style="color: gray; text-align: center;"/>

b. Au début du document HTML (entre les balises <head> et </head> par l'intermédiaire
d'une balise <style>): le code CSS sera appliqué à l'ensemble du document.

1
Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire
Faculté de Technologie HTML 2020-2021

Exemple:

c. Par l'intermédiaire d'une feuille de style externe ayant pour extension .css. Les règles
énoncées dans la feuille de style seront appliquées à tous les documents HTML qui y seront liés
à travers la balise <link>.

Solution à recommander car elle permet une économie de code et une maintenance simplifiée.
De plus, il est possible de définir une feuille de styles par média (attribut media de la balise
<link> qui se verra affecter la valeur "screen" ou "print" pour une feuille de styles à appliquer
lors de l'impression).

Exemple:

Dans le fichier Monsite.html, nous appelons la feuille de style située dans le répertoire courant
et nommée Monfichier.css. Celle-ci sera utilisée seulement pour l'affichage à l'écran (car
l'attribut media est égal à screen).

On distingue plusieurs types de sélecteurs dont:

2
Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire
Faculté de Technologie HTML 2020-2021

 Les sélecteurs de balises: Le style sera appliqué à toutes les balises du même nom (h1,
ol, ul, p, a, etc.).
Exemple: p {text-align: justify;}Il est possible de réaliser des regroupements de
sélecteurs pour leur appliquer les mêmes règles.
Exemple:
h1, h2, p2 {
background-color:gray
;}

 Les sélecteurs d'identifiants: Le style sera appliqué à la balise dont l'identifiantest


spécifié (attributiond'un identifiant à une balise au moyen de la propriété id).
Exemple:
(balise <h2 id="remarque">) :
#remarque{color: gray;}

Mise en forme avec CSS

 Couleur(propriété color):
il existe plusieurs syntaxes pour définir une couleur. On peut utiliser un mot-clef (red,
purple,...) ou une notationRGB (Red Green Blue) (par exemple rgb(128,0,128)) ou
encore une notation hexadécimale comme #800080.

 Police (propriété font-family): arial, verdana, etc.

 •Taille(propriété font-size): La taille des caractères peut être exprimée en unité fixe
(absolue) ou en unité relative. Par exemple on peut utiliser le point (pt) ou le centimètre
(cm) ou le millimètre (mm).

 Style(propriété font-style): les valeurs peuvent être normal, italic, etc.


 Graisse(propriété font-weight): valeurs normal (graisse normale),bold (gras),lighter(un
peu moins gras) ou bolder (un peu plus gras).

3
Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire
Faculté de Technologie HTML 2020-2021

 Décoration(propriété-text-decoration):valeursunderline(souligner),
overline(surligner), linethrough(barrer une portion du texte)
 Justification(propriété text-align): valeur center, left, right, justify. •Propriété border-
style: définit le style de la bordure avec par exemple les valeurs dotted solid double
dashed;
 Propriété background-color: définit la couleur de fond.

Rendu du TP
Exercice 1
Ecrire un fichier Essai.html qui s’affichera à l’écran comme suit:

Ensuite, créer un fichier CSS, appelé "testStyle.css" qui modifiera l’apparence de cette page
Web Essai.html selon les critères suivants:
–Ajouter une couleur de fond (jaune par exemple)
–Mettre les titres de niveau 1 en rouge et en italique
–Justifier ou centrer les paragraphes–Mettre les items des listes ordonnées en bleu et non
ordonnées en vert.
Exercice 2
Soit le code HTML5 suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jaune, orange et vert</title>
</head>
4
Université SAAD DAHLEB –BLIDA TP : Technologie Web Année universitaire
Faculté de Technologie HTML 2020-2021

<body>
<main>
<header>Entête</header>
<section>Section principale</section>
<footer>Pied de page</footer>
</main>
</body>
</html>
Écrire une feuille de style CSS valide qui, appliquée à ce code, permettrait d’obtenir le
résultat ci-contre à l’écran, sachant que :
1. la page mesure 1024 pixels de largeur ;
2. la police de caractères de l’entête et du pied de page est Arial ;
3. les caractères de l’entête sont en gras et ont une taille de 3 empattements standards ;
4. la section principale mesure 350 pixels de hauteur et a une marge interne d’un
empattement standard.