Introduction au Web, HTML / CSS, JS –

Partie 4
Objectif : définir des zones dans la page pour appliquer des styles CSS

...avec un jeu pour maitriser les sélecteurs...

Détails :

* Zones de la page

Créer une division contenant un paragraphe :

<div>
<p>Voici un paragraphe très intéressant
inscrit dans une boîte avec une ombre.</p>
</div>

Est-ce qu'on voir quelque chose autour du paragraphe ?

Une division sert surtout à définir une zone, de type bloc, à laquelle on va appliquer un style
via CSS. Il faut d'abord lui donner un type (une classe) ou un nom :

remplacer <div> par <div class="shadowbox"> puis, dans la partie CSS, définir le style de la
classe "shadowbox" :

.shadowbox {
width: 15em;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
padding: 8px 12px;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}

Créer des paragraphes contenant des "span" :

<p>Ajouter le <span class="ingredient">basilic</span>, les <span

class="ingredient">pignons</span> et l'<span class="ingredient">ail</span> dans un mixeur
et les mixer.</p>
<p>Ajouter petit à petit l'<span class="ingredient">huile d'olive</span> en faisant tourner
lentement le mixeur.</p>

Span est aussi une balise qui n'affiche rien en soi mais définit une zone, ici "en ligne", à
laquelle on va appliquer un style via CSS.

Dans la partie CSS, ajouter :

.ingredient {
color: #f00;
}
* Sélecteurs .shadowbox et .ingredient sont des sélecteurs : les styles définis s'appliquent à
toutes les zones de type "shadowbox" ou "ingredient".

Si on veut appliquer un style à un élément en particulier, il faut l'identifier de manière unique,

et utiliser un autre type de sélecteur : #id

Par exemple :

remplacer <span class="ingredient">ail</span>

par <span class="ingredient" id="piquant">ail</span>

et ajouter, dans la partie CSS

#piquant {
font-size: 40px;
}

Pour maîtriser les sélecteurs, faire le jeu "CSS Diner" https://flukeout.github.io/