16 novembre : CSS, ID et classes + la navigation du site

Dans l’exercice en cours, il vous est demandé de personnaliser les différentes parties d’un truisme. Nous avons vu pour cela, la semaine dernière qu’il était possible d’ajouter à un élément HTML un attribut id . Nous allons voir qu’il est aussi possible d’employer un autre attribut : class .

FTP

Le cours commencera par une initiation au FTP.
Un article spécifique décrit ce protocole.
Chacun recevra les informations d’accès à un espace individuel qui permettra plus facilement d’interagie avec vos pages html/css pour la suite des cours en ligne.

La présentation en vidéo

Rappel concernant les ID

Voici un code html qui contient plusieurs éléments codés avec la même balise :

<p>Absolute submission</p>
<p>can be</p>
<p>a form</p>
<p>of freedom</p>

La déclaration css p va permettre de sélectionner ces éléments, mais ils auront tous le même comportement :

p {
font-family: helvetica, dans-serif;
font-size: 28px;
}

Il est cependant possible d’atteindre facilement chacun de ces éléments en leur ajoutant un attribut id :

<p id="absolute">Absolute submission</p>
<p id="canbe">can be</p>
<p id="aform">a form</p>
<p id="freedom">of freedom</p>

Ce qui permet ensuite de les atteindre avec un sélecteur spécifique :

#absolute { color:red; }
#canbe { background-color:yellow; padding:30px; }
#aform { text-transform: uppercase; }
#freedom { font-family: courier,monospace; }

Le # signifie que l’on veut atteindre un id. #absolute signifie donc "sélectionner un élément dans la page dont l’id est "absolute".
Id signifie "identifiant", il ne peut y avoir qu’un seul élément comportant l’id "absolute" ou "canbe", etc.

Une fois l’élément sélectionné, on peut lui associer tous les comportements css nécessaire :

#absolute {
   color:#fff;
   background-color:red;
   font-weight:bold;
   letter-spacing:0.1em;
   padding:20px;
   text-transform: uppercase;
   width:800px;
   padding:30px;
   margin:40px auto;
   box-shadow:10px 10px 0 rgba(0,0,0,0.5);
   text-shadow: 2px 2px 4px #000;
   transform:skewX(-15deg) scale(1);
   letter-spacing: -0.03em;
}

Les classes

Mais une autre façon d’atteindre des éléments consiste à utiliser l’attribut classe. Pour cela, nous créons une autre page avec un autre truisme provenant de la page de l’exercice en cours.

Un article sur les id en CSS
Un article sur les classes en CSS