Vous êtes sur la page 1sur 6

Lycée BOUARGOUB 3èmeSI2

CSS3
TP_0
Exercice 0  :
Compare les deux pages web ci-dessous.

page web ……………….css page web ……………….css

C’est la ………………. page web sans et avec css.

Le CSS ?
Cascading Style Sheets, c’est cet autre …………………. qui vient compléter le HTML.

C'est lui qui nous permet de choisir la couleur, la …………….., et la ……….……. de notre
texte. Lui encore qui permet de définir les bordures, les ………….…., le ……….………., etc.

Et aussi, c'est lui qui permet de faire la mise en …………………. de votre site. Nous
pourrons dire : nous voulons que notre menu soit à gauche et occupe telle largeur, que l'en-
tête de notre site soit calé en haut et qu'il soit toujours visible, etc.

Grâce au HTML, nous avons pu rédiger le ……………….. de notre site, mais il est brut de
décoffrage. Le CSS vient compléter ce code pour mettre en …………………… tout cela et
donner au contenu l'apparence que l'on souhaite.

Exercice 1  :
1. Lance l’éditeur de texte disponible puis saisis et enregistre le code html ci-dessous.

AS : 2020/2021 1 Mr RJAIBI Omar


Lycée BOUARGOUB 3èmeSI2

2. Cherche la balise qui indique que ce fichier HTML est associé à un fichier
appelé style.css  et chargé de la mise en forme.

…………………………………………………………………………………………..........
3. Crée un nouveau fichier vide dans votre éditeur de texte et saisis ce bout de code et
l’enregistre sous le non style.css dans le même dossier que ton fichier html.

signifie donc en français :

« Je veux que tous mes ………... soient écrits en


….. »

4. Ouvre maintenant ton fichier  html  dans ton navigateur pour le tester.
Regarde, c'est magique : les paragraphes sont écrits en……………….

5. Schématiquement, une feuille de style CSS ressemble donc à cela :

AS : 2020/2021 2 Mr RJAIBI Omar


Lycée BOUARGOUB 3èmeSI2
Cherche dans le web un code css de ton
choix et copie-le ci-dessous.
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........
………………………………........

Exercice 2  :
Efface le contenu du fichier style.css et essaye les codes css ci-dessous.

…………………………………………………………………………………………………
…………………………………………………………………………………………………

Exercice 3  : class et id
TOUS les paragraphes possèdent la même présentation, ils seront donc tous écrits en bleu.

1. Comment faire pour que certains paragraphes seulement soient écrits d'une manière
différente ? 

Pour résoudre ce problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur
toutes les balises.

 L’attribut ………….
 L’attribut ………….

2. Apporte les modifications nécessaires aux codes html et css puis teste le résultat.

AS : 2020/2021 3 Mr RJAIBI Omar


Lycée BOUARGOUB 3èmeSI2

Seul le paragraphe appelé introduction s’affiche en bleu.

3. Et l’attribut id ?
Il fonctionne exactement de la même manière que ...................................., à un détail près : Il
ne peut être utilisé qu'.........................................dans le code.
Lors de l’appel en css, il faudra faire précéder le nom de l' id  par un ……………..

Exemple :
Code html
………………………………………………………………………………………………..

Code css
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..

Exercice 4  : span et div


1. Je veux modifier uniquement bienvenue dans le paragraphe suivant :

Cela serait facile à faire s'il y avait une balise autour de « bienvenue », mais
malheureusement, il n'y en a pas. Par chance, on a inventé… la balise-qui-ne-sert-à-rien.
C’est la balise ……………………………………………
AS : 2020/2021 4 Mr RJAIBI Omar
Lycée BOUARGOUB 3èmeSI2
Cette balise s'utilise …………………….d'un paragraphe

2. Mets en forme le mot « bienvenue ».

Code html
………………………………………………………………………………………………..
Code css
………………………………………………………………………………………………..
………………………………………………………………………………………………..

3. Et la balise div ?
C’est une balise qui entoure un ……………….. de texte. Elle est fréquemment utilisée
dans la construction d'un design, comme nous le verrons plus tard.

4. En utilisant la balise div, place le bloc de texte qui comporte le titre et le premier
paragraphe en haut et à droite de la page, et applique une couleur de fond grise.

Code html
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..

Code css
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..
………………………………………………………………………………………………..

Exercice 0  :
Sans, avec, même, langage, police, taille, marges, fond, pages, contenu, forme.

Exercice 1  :
<link rel = "stylesheet" href = "style.css">
Paragraphes, bleu, bleu

body
{
background-color:#f1f1f1;
}

AS : 2020/2021 5 Mr RJAIBI Omar


Lycée BOUARGOUB 3èmeSI2
{
font-family:calibri;
font-size:16pt;
color:blue;
}

ul
{
list-style-type:none;
float:right;
position:absolute;
top:20px;
right:20px
}

Exercice 2  :

Si plusieurs balises doivent avoir la même mise en forme, il suffit de combiner la


déclaration en séparant les noms de balises par une virgule afin d’éviter la répétition.

AS : 2020/2021 6 Mr RJAIBI Omar