Meriem Maaroufi 2022
Introduction au CSS
Qu'est-ce que le CSS?
Les feuilles de styles (en anglais "Cascading Style Sheets", abrégé CSS) sont un langage qui
permet de gérer la présentation d'une page Web.
Les styles permettent de définir des règles appliquées à un ou plusieurs documents
HTML. Ces règles portent sur le positionnement des éléments, l'alignement, les polices
de caractères, les couleurs, les marges et espacements, les bordures, les images de fond,
etc.
[Link] syntaxe du CSS
[Link] sélecteurs CSS
[Link] sélecteur élément CSS( p, h1,h2,li,..)
Exemple :
p {
color: red;
text-align: center;
}
2. Le sélecteur ID CSS
Le sélecteur id est utilisé pour sélectionner un élément HTML spécifique et unique.
Pour sélectionner un élément avec un id, on doit écrire le caractère (#) suivi par l’Id de
l’élément.
Exemple :
#para1 {
text-align: center;
color: red;
}
Meriem Maaroufi 2022
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
3. Le sélecteur CLASS CSS
Le sélecteur CLASS permet de sélectionner plusieurs éléments avec l’attribut CLASS.
Pour utiliser l’attribut CLASS, on doit écrire le caractère (.) suivi du nom de CLASS
Exemple :
.center {
text-align: center;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Meriem Maaroufi 2022
III. Emplacement du CSS
Il ya trois méthodes pour insérer le code CSS :
· CSS externe en utilisant un [Link]
· CSS interne en utilisant la balise <style>…</style>
· CSS en ligne
1. CSS externe
Exemple
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Le contenu du fichier CSS
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
2. CSS interne
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>
Meriem Maaroufi 2022
IV. Mise en forme du texte en CSS
Propriété Exemple
Couleur du texte : on utilise la body {
propriéte : color color: blue;
}
h1 {
color: green;
}
Alignement du texte: on utilise la h1 {
propriéte : text-align text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Décoration du texte: on utilize la h1 {
propriété :text-decoration text-decoration-line: overline;
text-decoration-color: red;
text-decoration-
style: double;
}
h2 {
text-decoration-line: line-
through;
text-decoration-color: blue;
text-decoration-style: dotted;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
text-decoration-style: dashed;
}
p {
text-decoration-line: overline
underline;
text-decoration-color: purple;
text-decoration-style: wavy;
}
Transformation du texte: on [Link]
Meriem Maaroufi 2022
utilise la propriété: {
text-transform text-transform: uppercase;
}
[Link] {
text-transform: lowercase;
}
[Link] {
text-transform: capitalize;
}
Ombre du texte h1 {
text-shadow: 2px 2px;
}
h1 {
text-shadow: 2px 2px red;
}
Font du texte : [Link] {
On trouve le style du texte avec la font-style: normal;
propriété : font-style }
[Link] {
font-style: italic;
}
[Link] {
font-style: oblique;
}
On trouve le style du texte avec la h1 {
propriété : font-size font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}