On a vu, dans les parties précédentes du cours, qu'un site web regroupe plusieurs pages, qui correspondent à des fichiers texte écrits en langage HTML.
Pour le rendre plus esthétique (choisir les polices, les couleurs ...), il faut ajouter un autre fichier appelée feuille de style. Il s'agit d'un fichier texte, comme pour les fichier .html, mais écrit en langage CSS avec pour extension .css.
Afin que la feuille de style .css soit appliqué à une page .html, il faut ajouter un lien dans l'en-tête de la page HTML (entre les balises<head> ... </head>).
On lie la page HTML à la feuille CSS monstyle.css avec la balise orpheline <link/> :
<link href="monstyle.css" rel="stylesheet" type="text/css"/>
L'énorme avantage de cette technique est de pouvoir lier plusieurs pages à la même feuille de style. L'habillage du site est alors homogène et facile à modifier car il suffit d'éditer seulement la feuille de style pour corriger le style de tout le site.
Travail à faire :
Reprendre le projet Batman de l'activité précédente et utiliser la balise <link/> sur les deux pages HTML pour les lier au fichier style.css déjà présent.
Observer les modifications sur les deux pages HTML.
Faire vérifier par le professeur.
Le principe du CSS est très simple : il faut d'abord sélectionner ce que l'on veut modifier (c'est le sélecteur) puis définir le style.
Voici à quoi ressemble la structure du langage CSS :
selecteur {
propriété1 : valeur1 ;
propriété2 : valeur2 ;}
Attention : Les propriétés doivent être entre des accolades après le sélecteur et une ligne de propriété doit toujours se terminer par un point-virgule.
Exemples : h1 {color : green;} signifie que tous les textes des balises <h1>, c'est-à-dire les titres, seront de couleur verte.
Il est possible de regrouper plusieurs balises avec un même sélecteur. Pour cela, elles doivent être dans une même classe. Pour associer une balise à une classe, il faut définir son attribut class="nom_classe" dans le code HTML. Le sélecteur CSS qu'il faut utiliser pour faire référence à toutes les balises d'une même classe est le nom de la classe précédé d'un point :
Exemple : .nom_classe {propriété1 : valeur1 ;}
Il est aussi possible de pointer une balise en particulier à l'aide d'un identifiant. Pour cela cette balise doit avoir l'attribut id="identifiant". Le sélecteur CSS qu'il faut utiliser pour faire référence uniquement à cette balise est l'identifiant précédé d'un dièse.
Exemple : #identifiant {propriété1 : valeur1 ;}
On peut appliquer un style lors d'un évènement.
Exemple : selecteur:hover {propriété1 : valeur1;} permet de modifier les propriétés de ce qui est survolé grâce à la pseudo-classe :hover.
Il ne faut pas hésiter à faire une recherche sur les propriétés CSS d'une balise. il y en a beaucoup ! Voici un index des propriétés CSS : sur mozilla-dev.
Les valeurs de color peuvent être un nom de couleur en anglais (black, green, red , etc. ), mais il est possible d'être plus précis en utilisant un code couleur au format : #xxxxxx.
Chacune des valeurs xx peuvent être ajustées de 00 à ff sur chacune des composantes rouge, verte et bleue. Ainsi #ff0000 est rouge, #00ff00 est vert et #0000ff est bleu.
En mélangeant ces 3 couleurs primaires, il est possible d'en obtenir d'autres : #aa00dd pour un violet, #000000 est noir, #ffffff est blanc.
Travail à faire :
Appropriez-vous les code suivant. Le code HTML est à gauche et la feuille de style en CSS, à droite. Vous pouvez afficher la page et y appliquer le style à l'aide des boutons.
Modifier le code CSS et expliquer votre modification au professeur.
Travail à faire : Seul ou par groupe de 2, selon la modalité choisie par votre professeur, vous allez devoir maintenant réaliser votre propre site web sur un thème qui vous est cher (association culturelle, club sportif, musique, artiste...).
Vous pouvez télécharger une archive reprenant l'architecture de base de votre site (les pages html, les répertoires "images" et "vidéos" ainsi que le fichier css)
Cahier des charges de votre site web :
Niveau 1 : 3 pages minimum reliées entre elles ; insertions d'images et/ou de vidéos et d'hyperliens ; bibliographie.
Niveau 2 : Identique au niveau 1, mais 4 pages minimum ; insertion d'un objet widget/script (exemple : un widget Google Maps) ; une feuille de style CSS.