Le CSS (Cascade Style Sheet) ou « feuille de style en cascade » sont des règles écrit dans un langage, le CSS, donc, permettant à une page Web d’être stylisé. Il est le langage utilisé par les Web Designers. Il fonctionne sous la forme de règle ciblant une balise HTML et contenant un attribut et une valeur. Par exemple :

div{
      attribut: valeur;
}

Une règle est établie en plusieurs stades. Ces règles déterminent si elles sont pérennes dans le temps ou nécessite des suffixes afin d’être reconnu par votre navigateur.

Parmi les différents stades, on remarque 3 stades bien distincts:

1. Le croquis
   • Une idée
   • Editor’s Draft (ED)
2. La conception
   • First Public Working Draft (FPWD)
   • Working Draft (WD)
   • Last Call Working Draft (LCWD)
3. Les tests pour la recommandation
   • Candidate Recommandation (CR)
   • Recommandation (REC)
   • Règle adopté

Dans chaque stade, on trouve, un début (la base de travail), un stade intermédiaire (le travail en lui-même) et un stade final (avant de passer à l’étape suivante).

Les règles CSS pour être reconnu par notre page HTML doivent être intégré par 2 moyens au choix :

Pour distinguer des balises de même type, on fait appel aux « class » et aux « ID ».

Pour le W3C, la règle à respecter est :

• • Un « ID » par page
  • Plusieurs « class » sont possible.

La syntaxe est :

• • « # » devant le nom de l’ID
  • « . » devant le nom de la class

<div id="container"></div>
#container{
   ...mes règles CSS
}

Exemple avec la class « item » (déclaration en HTML puis règles CSS):

<div class="item"></div>
.item{
   ...mes règles CSS
}

Les règles CSS peuvent avoir différents poids. Les voici du plus léger au plus lourd:

• • le nom de ma balise  (0.0.0.1)
  • la classe de ma balise  (0.0.1.0)
  • l’ID de ma balise  (0.1.0.0)
  • l’attribut style de ma balise  (1.0.0.0)

Si j’ai:

• • 2 noms de balise = 0.0.0.2
  • 3 classes sur ma balise = 0.0.3.0
  • 3 ID sur ma balise = 0.3.0.0
  • Attribut style à ma balise = 1.0.0.0
  • 3 classes et un ID sur ma balise =  0.1.3.0

A partir de ceci, on peut dire:

• • 0.1.3.0 est prioritaire sur 0.0.3.0
  • 0.0.3.0 est prioritaire sur 0.0.2.0

Les selecteurs avancés permettent de faire une sélection sur une partie d’une valeur d’un attribut. Par exemple.

Je prend ce code HTML:

<div id="container">
    <div id="item-01"><a href="#">item N°01</a></div>
    <div id="item-02"><a href="#">item N°02</a></div>
    <div id="item-03"><a href="#">item N°03</a></div>
</div>

je souhaite cibler toute les div de #container commencant par « item ». J’utilise l’opérante  ^=

#container div[id^='item']{
    background-color: purple;
}

Mais si je souhaite cibler toute les div de #container finissant par « 01 ». J’utilise l’opérante  ?=

#container div[id?='01']{
    background-color: purple;
}

Dans le cas de class multiple, je peux sélectionner toutes les div contenant une class bien précise et séparé par un espace.

<div class="panier bleu boutique"></div>
<div class="produits bleu"></div>
<div class="accueil bleu menu"></div>

Voici ma règle CSS (attention pas d’espace dans la déclaration entre div & [ )

#container div[class ~='bleu']{ 
    background-color: purple; 
}

Un dernier selecteur pour « item-01 » ou « item » par exemple. Attention, ne fonctionne pas avec « item01 »

#container div[id |='item']{ 
    background-color: purple; 
}

Les pseudo class permettent de faire un sous groupe de div, par exemple

Je prend ce code HTML:

<div id="container">
    <div><a href="#">item N°01</a></div>
    <div><a href="#">item N°02</a></div>
    <div><a href="#">item N°03</a></div>
</div>

je souhaite récupérer la première DIV dans #container. N’ayant ni class et ni ID, j’utilise la pseudo class « :last-child »

#container div:first-child{
    width: 150px;
    height: 150px;
    background-color: purple;
}

Mais si je souhaite cibler la 2ème div de #container, j’utilise la pseudo class « :nth-child() »

#container div:nth-child(2){
    width: 150px;
    height: 150px;
    background-color: purple;
}

je souhaite récupérer la dernière DIV dans #container. N’ayant ni class et ni ID, j’utilise la pseudo class « :last-child »

#container div:last-child{
    width: 150px;
    height: 150px;
    background-color: purple;
}

Et pour finir, si je souhaite récupérer toute les DIV dans #container SAUF la 2ème DIV. N’ayant ni class et ni ID, j’utilise la pseudo class « :not() » couplé à « :nth-child() »

#container div:not(#container div:nth-child(2)){
    width: 150px;
    height: 150px;
    background-color: purple;
}