HTML5 / CSS3 Le CSS 3 2 TI 4
La petite histoire du CSS
CSS (Cascading Style Sheets), permet de choisir la couleur du texte, la
police utilisée, la taille du texte, les bordures, le fond… et de faire la
mise en page du site (menu à gauche, en-tête calé en haut, etc).
SYNTAXE : EXEMPLE:
Sélecteur 1 P{
{ Color : blue ;
propriété1 : valeur1; Font- size : 16px ;
propriété2 : valeur2; }
propriété n : valeur n;
}
Sélecteurs, propriétés et valeurs :
Un sélecteur : à quels éléments (ou type d’éléments) HTML on souhaite appliquer un style
particulier.
Exemple : pour appliquer un style à tous nos paragraphes par on utilise le sélecteur « p ».
Une propriété : un critère comme la taille d’un texte, sa police ou sa couleur par exemple.
Une valeur : détermine le comportement, par exemple bleu pour la propriété valeur.
Déclaration du CSS
On peut écrire du code en langage CSS à trois endroits différents :
• dans un fichier .css (méthode la plus recommandée) ;
• dans l'en-tête <head> du fichier HTML ;
• directement dans les balises du fichier HTML via un attribut style (méthode la
moins recommandée).
Appliquer un style
Prenons le code CSS suivant :
h1 {
color: blue;
}
em {
color: blue; }
Les titres <h1> et les textes peu
importants <em> doivent s'afficher en
bleu.
Si les deux balises doivent avoir la même présentation, il suffit de combiner la déclaration en
séparant les noms des balises par une virgule :
h1, em{
color: blue; }
Commentaires dans du CSS
Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations.
Taper /*, suivi de votre commentaire, puis */ pour terminer votre commentaire.
A.S : 2024-2025 Page 1 sur 3 Mme BRIK Olfa
HTML5 / CSS3 Le CSS 3 2 TI 4
Activité 1 : CSS
Ecrire un code HTML permettant de réaliser la page web représentée ci-dessous et
l’enregistrer sous le nom activité1 .html dans un dossier nommé css
1- Effectuer les modifications ci-dessous sur la balise p.
<p style =" color:blue; ">
Visualiser votre travail, que remarquez-vous ? ....................................................................
2- Supprimer les modifications de la q1 puis ajouter les lignes dans la balise head.
<style>
p{
color:green;
}
</style>
Visualiser votre travail, que remarquez-vous ? ............................................................
3- Déplacer le contenu de la balise style dans un nouveau fichier enregistré sous le nom
[Link] puis modifier la couleur .
4- Ajouter la ligne suivante dans la balise head.
<link rel="stylesheet" href="[Link]"/>
Visualiser votre travail, que remarquez-vous ? ..............................................................
L’attribut rel sert à préciser le style du fichier lié (dans notre cas c’est une feuille de style,
donc stylesheet en anglais). L’attribut href sert à faire le lien en soi.
5- Ajouter les lignes suivantes dans la feuille [Link] une par une pour déduire leurs
rôles
p
{ color: blue;
font-size:18px; /* (modifier par 14 puis 20 et voir les résultats)*/
text-align:justify; /* (modifier par center et left et voir les résultats)*/
font-family:sans-serif; /* (modifier par emoji et courier et voir les résultats)*/
letter-spacing: 2px; /* (modifier par 1px et 3px et voir les résultats)*/
}
A.S : 2024-2025 Page 2 sur 3 Mme BRIK Olfa
HTML5 / CSS3 Le CSS 3 2 TI 4
Activité 2 : CSS
Ajouter les propriétés suivantes dans votre dernier fichier [Link] et voir à chaque fois le
résultat puis déduire leurs rôles :
h1{
text-align:center;
font-weight :lighter ; /* essayer avec bolder*/
font-style:italic;/*essayer avec normal*/
text-decoration: underline; /*essayer avec underline double green*/
/*modifer par overline puis par none*/
text-transform: uppercase ; /*modifer par lowercase puis par capitalize */
text-shadow: red 2px 3px;
}
p{
text-indent:25px;
}
Activité 3 : CSS
1- Ajouter les propriétés suivantes dans votre dernier fichier [Link]
body{
background-color: #222;
}
2- Modifier la valeur par : background-color: rgb(139, 201, 160);
…………………………………………………………………………………………
3- Copier l’image [Link] dans votre dossier de travail puis modifier la propriété et la
valeur par background-image:url([Link]); Que constatez-vous ?
…………………………………………………………………………………………………
4- Ajouter la propriété et la valeur suivantes background-repeat : no -repeat ;
Que constatez-vous ?
…………………………………………………………………………………………………
…………………………………………………………………………………
5- Ajouter la propriété et la valeur suivantes background-size :100% ;Que constatez-
vous ?
………………………………………………………………………………………………
……………………………………………………………………………………
A.S : 2024-2025 Page 3 sur 3 Mme BRIK Olfa