COMPETENCE 2 : TRAITER DES SITUATIONS RELATIVES AUX
LANGAGES INFORMATIQUES
LE LANGAGE DE DESCRIPTION DE PAGE (HTML, CSS)
THEME :
LEÇON 2 : LANGAGE CSS3 : FEUILLE DE STYLE
I. LES GENERALITES SUR LE LANGAGE CSS
1. Historique
CSS (Cascading Style Sheets) a été créé au milieu des années 1990. Son introduction a comblé un besoin
de mise en forme des documents HTML, qui n'étaient à l'origine qu'un simple langage de balisage sans
styles. Le CSS a été standardisé par le W3C (World Wide Web Consortium) et a été largement adopté
par les navigateurs dans les années suivantes, permettant aux développeurs de séparer le contenu de la
présentation.
2. Définition
CSS, ou Cascading Style Sheets, est un langage de programmation utilisé pour décrire la présentation et
le design des documents électroniques, en particulier des pages web. Il permet de définir des règles de
style pour des éléments ou groupes d'éléments spécifiques, et s'adapte également en fonction du type de
média et des capacités des dispositifs de restitution.
Trois manières d’intégrer le CSS :
• En ligne : via l’attribut style dans les balises HTML.
• Interne : dans une balise <style> dans le <head>.
• Externe : dans un fichier .css lié avec <link>.
3. Notion de selecteur
Les sélecteurs en CSS sont des expressions qui permettent de cibler des éléments HTML sur une page
web afin d'appliquer des règles de style. Ils déterminent précisément les éléments sur lesquels les règles
CSS vont s'appliquer, que ce soit par type, classe, ID ou d'autres attributs.
Quelques sélecteurs simples :
• Sélecteur d’élément : cible une balise HTML.
h1 {
color : blue;
}
• Sélecteur de classe : cible un groupe d’éléments avec un attribut class.
.highlight {
background-color : yellow;
}
• Sélecteur d’identifiant : cible un élément unique avec un attribut id.
#main-title {
font-size : 24px;
}
• Sélecteur universel : cible tous les éléments.
*{
Margin : 0;
Padding : 0;
}
4. La notion de pseudo-classe et de pseudo-élément
En CSS, une pseudo-classe est un sélecteur qui cible des éléments lorsqu'ils se trouvent dans un état
particulier, comme lorsqu'un élément est cliqué ou survolé. Elle est définie par un nom précédé de deux
points (:). Par exemple, :hover applique des styles à un élément lorsque la souris le survole.
D'autre part, un pseudo-élément permet de styliser une sous-partie d'un élément, comme la première lettre
ou la première ligne d'un texte. Il est défini par un mot clé précédé de deux points, tel que ::first-
letter ou ::before.
Exemple : survol de la souris (:hover).
a:hover {
color: red;
}
Exemple : la première lettre d’un paragraphe (::first-letter).
p::first-letter {
font-size: 2em;
color: green;
}
Quelques pseudo-classes simples :
• :focus : élément actif (comme un champ de formulaire).
• :nth-child(n) : éléments à une position précise.
Quelques pseudo-éléments simples :
• ::first-line : première ligne d’un texte.
• ::before : ajoute un contenu avant un élément.
• ::after : ajoute un contenu après un élément.
5. La notion de propriétés
Les propriétés en CSS sont des instructions qui permettent de modifier l'apparence et le style
des éléments HTML. Elles sont utilisées pour définir des aspects spécifiques comme la
couleur, la taille, la police, l'espacement, etc.
Quelques propriétés simples de texte :
• color : couleur du texte.
• font-size : taille de la police.
• text-align : alignement du texte (left, center, right).
• text-decoration : ajout de soulignement, barré, etc.
h1 {
text-decoration : underline;
}
Quelques propriétés simples de fond :
• background-color : couleur de fond.
• background-image : image de fond.
• background-repeat : répétition de l’image (no-repeat, repeat-x).
body {
background-color: lightblue;
background-image: url('[Link]');
background-repeat: no-repeat;
}
Quelques propriétés simples d’ombre et de transparence :
• box-shadow : ajoute une ombre à un élément.
div {
box-shadow: 2px 2px 5px grey;
}
• opacity : ajuste la transparence (valeurs entre 0 et 1).
img {
opacity : 0.5;
}
Quelques propriétés simples de bordure :
• border : style, largeur et couleur de la bordure.
• border-radius : arrondi des angles.
button {
border: 2px solid black;
border-radius: 5px;
}
Quelques propriétés simples de marge :
• margin : espace externe autour d’un élément.
• margin-left, margin-right, etc. : marges spécifiques.
p{
margin : 20px;
}
Quelques propriétés simples de liste :
• list-style-type : définit le type de puces (circle, square, none).
• list-style-image : remplace les puces par une image.
ul {
list-style-type: square;
}