Design numérique

Parmi les attributs HTML, deux d'entre eux, de type universel (applicapbles à toutes les balises) se révèlent particulirement utiles au moment d'entreprendre le style CSS d'une page HTML: il s'agit des class et des id.

L'attribut class

L'attribut class est un attribut HTML qui sert à constituer des familles, des groupes d'éléments, différents de ceux déjà constitués par les balises (plus petits ou contenant des balises différentes). Il sert notemment lorsque l'on veut donner un style CSS commun à des éléments dont les balises diffèrent, mais pas seulement : il est également possible de manipuler ces groupes avec d'autres langages de programmation comme Javascript. Une même classe est par définition applicable à plusieurs éléments, et un même élément peut appartenir à plusieurs groupes et donc, avoir plusieurs classes. Lorsque l'on utilise plusieurs classes sur un même élément, celles-ci sont séparées par des espaces. L'attribut class s'utilise ainsi en HTML :

   <section class="projects"> 
           <div class="project">
                Un élément avec la classe project.
            </div>
            <div class="project">
                Un autre élément avec la classe project.
            </div>
            <div class="project drawing">
                Un autre élément avec la classe project et avec la classe drawing.
            </div>
            <div class="drawing">
                Un autre élément avec la classe drawing.
            </div>
   </section>

Une fois ces classes définies dans la page HTML, il est possible de les utiliser pour donner un style identiques à ces éléments en CSS. Le caractère point '.' (full stop) sert à appeller les classes en CSS. On l'utilise ainsi :

 .nom-de-la-classe{ 
}

Un point, puis le nom de la classe utilisé dans le html sans espaces car l'espace a un sens différent en CSS (sélécteur de descendance).


Style les éléments avec la classe project:

.project{
    background: yellow;
}

Style les éléments avec la classe drawing:

.drawing{
    border: solid 3px blue;
}

L’attribut id

L'attribut id est un attribut qui sert à donner un identifiant unique à un élément HTML, de manière à pouvoir le sélectionner. Les id, contrairement aux classes, sont uniques dans toute une page HTML et ne doivent en aucun cas être attribués à plusieurs éléments.


L'attribut id s'utilise ainsi en HTML:

<div id="firstProject">
    Un élément avec l’id firstProject.
</div>
<div id="secondProject">
    Un autre élément avec l’id secondProject.
</div>
<div id="thirdProject">
    Un autre élément avec l’id thirdProject.
</div>

Une fois les id définis dans les pages HTML, il est possible de les utiliser pour donner un style particulier, unique, à un élément. Le sélecteur CSS qui correspond aux id est le hashtag, #. On l'utilise ainsi:

#nom-de-lid{
}

Un hashtag, puis le nom de l'id utilisé dans le html sans espaces. Style l'élément avec l'id firstProject:

#firstProject{
    background: yellow;
}

Style l'élément avec l'id secondProject

#secondProject{
    background: pink;
}

Combiner les sélecteurs

Il est bien sûr possible de combiner les sélecteurs, notemment afin de pouvoir croiser les différentes commandes de style CSS.


Par exemple:

<div class="project" id="firstProject">
    Un élément avec la classe project et l’id firstProject.
</div>
<div class="project" id="secondProject">
    Un autre élément avec la classe project et l’id firstProject.
</div>
<div class="project drawing" id="thirdProject">
    Un autre élément avec la classe project et avec la classe drawing et l’id thirdProject.
</div>

Style les éléments de type div avec la classe project:

div.project{
    border: solid 3px blue;
}

Style les éléments de type div avec la classe project et l’id firstProject:

div.project#firstProject{
    border: solid 3px blue;
}

Style les éléments avec la classe project ET la classe drawing:

.drawing.project{
    color: green;
}

Grouper les sélecteurs

Attribuer une même série de commandes à plusieurs sélecteurs, grâce au groupeur d'éléments, la virgule. L'exemple suivant style les éléments avec la classe project OU la classe drawing OU de type div:

div,
.drawing,
.project{
    color: green;
}

Sélectionner les descendants d’éléments

Il est possible de sélectionner les descendants d'un élément grâce au sélecteur de descendance, l'espace. Par exemple, le code suivant style les éléments ayant la classe project ET un parent avec la classe projects.

.projects .project{
    color: green;
}

Il existe d’autres sélecteurs qui permettent par exemple de sélectionner le descedant direct, l’élément suivant, les éléments suivants... Retrouvez la liste complète des sélecteurs sur la page developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors.

La spécificité

Les sélecteurs CSS n'ont pas tous la même spécificité et donc la même importance. Plus ils sont spécifiques, plus ils sont importants. Concrètement, cela signifie qu'une commande donnée à un sélecteur plus fort sera pritotaire sur l'ordre de lecture habituel de lecture du code par le logiciel.


Dans l'ordre:


Id > Class > Type


Les id sont prioritaires sur les classes qui sont prioritaires sur les types.


Exemple:

<div class="project" id="firstProject">
    Un élément avec la classe <em>project</em> et l’id <em>firstProject</em>.
</div>

#firstProject{
    background: red;
}
.project{
    background: pink;
}
div{
    background: yellow;
}