Votre panier est vide.
Il est désormais temps de rentrer dans le vif du sujet !
Fonctionnement
Le but du CSS est d’affecter des propriétés à des éléments de la page afin d’altérer le style de ces mêmes éléments (couleurs, fonds…).
Un élément d’une page HTML est identifié en premier lieu par le nom de sa balise (section, body ou tout simplement div). Mais puisqu’une même balise va sûrement apparaître plusieurs fois dans votre page, on peut leur donner une seconde identification avec les attributs class et id (je ne reviendrai pas sur ce point du langage HTML !).
Ainsi, la construction d’une propriété CSS se fait en deux temps : on identifie d’abord l’élément sur lequel on veut appliquer la/les propriété(s), puis viennent la/les propriété(s).
Syntaxe du CSS
Voici la syntaxe générale d’une propriété CSS :
balise {
propriété: valeur;
}
- balise = le nom de la balise
- propriété = le nom de la propriété
- valeur = la valeur que l’on donne à cette propriété
On remarque donc qu’on commence par identifier l’élément, puis on met entre accolades les propriétés qu’on souhaite lui appliquer. Les deux points (:) séparent la propriété de sa valeur. Enfin, le couple propriété/valeur termine par un point-virgule.
L’identification peut être faite autrement en utilisant les class (précéder d’un point) ou les id (précéder d’un croisillon :« # ») :
- balise.uneClasse#unId {} : ici, la propriété s’appliquera sur la balise ayant la classe uneClasse et l’id unId. Puisqu’un id est unique, inutile de préciser la balise ou la classe, on mettra directement → #unId {}.
- .uneClasse {} : ici, la propriété s’appliquera à tous les éléments ayant cette class, quelles que soient leurs balises. Toutes les combinaisons sont possibles ! Tout dépend de ce que vous souhaitez faire.
Vous pouvez aussi mettre plusieurs éléments, séparer par des virgules.
La liaison entre le CSS et le HTML
Nous allons tout de même faire un rappel essentiel en HTML : comment dire à notre document quel style il doit adopter.
Pour cela, nous allons rajouter une ligne dans le <head> de notre document HTML qui va permettre de pointer vers notre feuille de style CSS :
<link rel="stylesheet" href="style.css"/>
L’attribut href contient le chemin relatif menant à notre feuille de style.
Et voilà ! Maintenant, la mise en page décrite dans notre CSS va s’appliquer sur notre page web à son chargement.
Les commentaires en CSS
Il est bien sûr possible d’écrire des commentaires dans ses feuilles de style qui ne seront pas pris en compte par le navigateur. Ils sont encadrés par les symboles « /* */ » :
balise {
propriété: valeur; /* ceci est un commentaire sur une ligne */
/* ceci est un commentaire
sur deux lignes */
}
-
Ajouter une remarque