LES FONDATIONS DU CSS

AVANTAGES DU CSS
• Le CSS est constitué de code séparé qui améliore les possibilités du
HTML en permettant de redéfinir la façon dont fonctionnent les
balises HTML existantes.
• L'avantage par rapport à la création de nouvelles balises HTML
repose sur le fait qu'en modifiant la définition d'une seule règle CSS
centralisée, l'apparence de toutes les balises contrôlées par cette
règles est modifiée.
 OÙ ECRIRE LE CSS ?
3 possibilités :
 Dans l’élément head du document HTML
 Dans la balise ouvrante d’un élément
 Dans un fichier CSS séparé.

Il est recommandé d’utiliser la dernière méthode.

Pour lier un fichier HTML avec un fichier CSS, on écrit :

<link rel=« stylesheet » href=« fichiercss.css »/>
TYPES DE RÈGLES
Les sélecteurs sont des caractères alphanumériques
qu'identifie la règle.
 Sélecteur HTML
 La classe
 L'ID
SÉLECTEUR HTML
La partie textuelle d'une balise HTML est appelé sélecteur
 H1 est le sélecteur de <H1>
Le sélecteur est exploité pour redéfinir le style de l'affichage
de la balise.
SELECTEURS, PROPRIETES, VALEURS
 CLASS & ID
• Class et Id sont deux attributs HTML, créés pour pouvoir
appliquer différents styles à des éléments de même type.

• Class permet d’appliquer le même style à différents élément

HTML (en leur appliquant la même valeur pour l’attribut class).
ID
• Très utile pour spécifier des règles qui ne s'appliquent qu'à
un élément avec un ID unique donné défini par l'attribut id
en HTML.
• Pas plus d'un élément ne doit avoir un ID donné.
SYNTAXE CSS
• Contrairement à la syntaxe HTML, CSS n'est pas un langage
de balisage.
• Description textuelle de la syntaxe: Tout d'abord, nous
appelons le «sélecteur» puis nous ouvrons les crochets ({),
nous écrivons nos paramètres, puis nous fermons les
crochets (}).
SYNTAXE GÉNÉRALE D’ UNE CLASSE
SYNTAXE GÉNÉRALE D’ UNE ID
STYLES CSS
• Vous souvenez-vous de cette partie de mise en forme du texte en HTML? Eh
bien, CSS peut le faire aussi, d'une meilleure façon.
• Découvrons le style et la coloration du texte avec CSS:
Couleur Couleur arrière-plan Image d’arrière-plan

Taille police Nom du police Bordure

PSEUDO-CLASSES CSS
• Les pseudo-classes vont nous permettre de cibler des éléments
HTML en fonction de leur état, ou plus exactement d’appliquer des
règles CSS à des éléments HTML uniquement dans un certain
contexte (lorsqu’ils sont dans un certain état).
• Ainsi, nous allons pouvoir modifier les styles d’un lien HTML selon
que le curseur de la souris d’un visiteur soit dessus (état hover) ou
qu’il ait été déjà cliqué (état visited).
 DIV & SPAN
• Div et Span sont deux élément HTML créés, entre autres, pour
pouvoir appliquer un style à du contenu n’ayant pas de balise.

• Div et Span servent de containers mais ne possèdent aucune

valeur sémantique.
ELEMENTS DE TYPES BLOCK & INLINE
• Tout élément, en HTML, est soit un élément de type block,
soit un élément de type inline.
• Div = élément de type block
• Span = élément de type inline
 PADDING & MARGIN
•
Le padding en Css correspond aux quatre marges entre la bordure
(border) et le contenu d'un élément. On l'appelle aussi marge
intérieure et n'a d'interaction que dans le bloc.
Le margin correspond aux quatre marges entre sa bordure
extérieure et la bordure extérieure de l'élément adjacent. On l'appelle
aussi marges extérieures et n'a d'interaction qu'avec les éléments qui
l'entoure.
 CSS DISPLAY
• La propriété display définit le type d'affichage utilisée pour le
rendu d'un élément (de bloc ou en ligne) et la disposition
utilisée pour ses éléments fils : grille ou boîtes flexibles.
• Display: none=>Cet élément ainsi que ses descendants ne
seront plus annoncés par les lecteurs d'écrans.
• Display: inline=>Cet élément ainsi que ses descendants vont
être de niveau inline .
• Display: block=>Cet élément ainsi que ses descendants vont
être de niveau block .