• Votre panier est vide.

  • COMPTE

Principes de base du CSS

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 le ou 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 sur possible d’écrire des commentaires dans ses feuilles de style qui ne serons 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 comentaire
    sur deux lignes */
}
TOUT VOIR Ajouter une remarque
VOUS
Ajouter votre commentaire
Culte du code | 2015-2020  (Vecteurs par Freepik, Parallax par fullvector)