Table des matières
1. Introduction à CSS ............................................................................................................................... 2
Qu'est-ce que CSS ? ............................................................................................................................. 2
Les avantages de CSS ........................................................................................................................... 2
2. Utilisation de CSS ................................................................................................................................. 2
Incorporer CSS dans une page HTML .................................................................................................. 2
Inline CSS ......................................................................................................................................... 2
Internal CSS ..................................................................................................................................... 2
External CSS ..................................................................................................................................... 2
3. Sélecteurs CSS ..................................................................................................................................... 3
Sélecteurs de balises ........................................................................................................................... 3
Sélecteurs d'ID et de classe ................................................................................................................. 3
Sélecteurs d'attributs .......................................................................................................................... 3
Sélecteurs de descendant et d'enfant ................................................................................................. 3
4. Propriétés CSS ..................................................................................................................................... 4
Les propriétés de texte........................................................................................................................ 4
Les propriétés de fond......................................................................................................................... 4
Les propriétés de bordure ................................................................................................................... 4
Les propriétés de mise en page........................................................................................................... 5
1. Introduction à CSS
Qu'est-ce que CSS ?
CSS (Cascading Style Sheets) est un langage de style utilisé pour définir la présentation et la
mise en forme des pages web. Il permet de contrôler l'apparence des éléments HTML tels que
le texte, les couleurs, les marges, les polices, etc.
Les avantages de CSS
En utilisant CSS, vous pouvez séparer le contenu HTML de la présentation, ce qui facilite la
maintenance et les modifications ultérieures. CSS permet également de rendre les pages web
plus cohérentes et plus accessibles.
2. Utilisation de CSS
Incorporer CSS dans une page HTML
Il y a trois façons d'incorporer CSS dans une page HTML : Inline, Internal et External.
Inline CSS
L'Inline CSS est ajouté directement aux balises HTML à l'aide de l'attribut style.
<p style="color: blue; font-size: 16px;">Ceci est un paragraphe en bleu
avec une taille de police de 16px.</p>
Internal CSS
L'Internal CSS est défini dans l'en-tête de la page HTML à l'aide de la balise <style>.
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
External CSS
L'External CSS est défini dans un fichier séparé avec une extension .css, et est lié à la page
HTML à l'aide de la balise <link>.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
3. Sélecteurs CSS
Sélecteurs de balises
Les sélecteurs de balises appliquent le style à toutes les occurrences de la balise spécifiée.
p {
color: blue;
font-size: 16px;
}
Sélecteurs d'ID et de classe
Les sélecteurs d'ID appliquent le style à un élément avec un attribut ID unique, tandis que les
sélecteurs de classe appliquent le style à un ou plusieurs éléments avec un attribut de classe.
#mon_id {
color: red;
}
.ma_classe {
font-size: 18px;
}
Sélecteurs d'attributs
Les sélecteurs d'attributs permettent de sélectionner des éléments en fonction de leurs
attributs.
input[type="text"] {
border: 1px solid gray;
}
Sélecteurs de descendant et d'enfant
Les sélecteurs de descendant sélectionnent un élément qui est un descendant d'un autre
élément spécifié, tandis que les sélecteurs d'enfant sélectionnent un élément qui est un enfant
direct d'un autre élément spécifié.
section p {
color: green;
}
ul > li {
list-style: square;
}
4. Propriétés CSS
Les propriétés de texte
Les propriétés de texte permettent de contrôler l'apparence du texte, telles que la couleur, la
taille, le style de police, l'espacement, etc.
p {
color: blue;
font-size: 16px;
font-family: Arial, sans-serif;
font-weight: bold;
text-align: center;
text-decoration: underline;
line-height: 1.5;
letter-spacing: 2px;
}
Les propriétés de fond
Les propriétés de fond permettent de définir la couleur et l'image de fond d'un élément.
body {
background-color: #f0f0f0;
background-image: url("fond.jpg");
background-repeat: repeat-x;
background-position: top center;
}
Les propriétés de bordure
Les propriétés de bordure permettent de définir le style, la largeur et la couleur de la bordure
d'un élément.
div {
border: 1px solid black;
border-radius: 5px;
}
Les propriétés de mise en page
Les propriétés de mise en page permettent de contrôler l'agencement des éléments sur la page,
telles que les marges, les rembourrages, les alignements, etc.
