Thème 1 - Web

Écrire du CSS

Avoir du style CSS

Habillage d'un site

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 les fichiers .html, mais écrit en langage CSS avec l'extension .css.

Afin de lier la feuille de style .css à une page .html, il faut ajouter la balise orpheline <link/> ci-contre dans l'entête de la page (entre les balises <head>...</head>).

<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.
Question 1/4 : ✓
Mémorisation 0x - Réussite 0/0
Le langage CSS a été développé pour :
Cocher la bonne réponse.

Principes du CSS

Le sélecteur désigne la cible sur laquelle vous souhaitez appliquer des propriétés.
Attention : Les propriétés sont listées entre des accolades après le sélecteur et chaque ligne se termine par un point-virgule. 

selecteur {
    propriété1 : valeur1 ;
    propriété2 : valeur2 ;
}
Les différents sélecteursExplication
nom_de_balise{
    propriété1 : valeur1 ;}
 Il est possible de cibler toutes les balises d'un même type tout simplement en mettant son nom.
Exemple :
h1 {color : green;} signifie que tous les textes des balises <h1>, c'est-à-dire les titres, seront vert. 
.nom_classe {
    propriété1 : valeur1 ;}
 Il est possible de cibler plusieurs balises avec un même sélecteur.
Pour cela, elles doivent être dans une même classe et posséder l'attribut class="nom_classe".
Le sélecteur CSS d'une classe commence par un . point.
Exemple :
.bouton {background-color : red;} signifie que toutes les balises ayant la classe "bouton" auront un fond rouge. 
#nom_identifiant {
    propriété1 : valeur1 ;}
 Il est aussi possible de pointer une balise bien précise à l'aide d'un identifiant.
Pour cela cette balise doit avoir l'attribut id="nom_identifiant". Le sélecteur CSS d'un identifiant commence par un # dièse.
Exemple :
#titre-principal {font-size : 20px;} signifie que le contenu de la seule balise ayant l'identifiant "titre-principal" sera écrit en taille de police 20 pixels. 
selecteur:hover {
    propriété1 : valeur1 ;}
 		On peut appliquer un style lors d'un évènement.
Par exemple :hover permet d'appliquer le style seulement quand la cible est survolée par la souris. On parle de pseudo-classe :hover.
Il y en a beaucoup ! Voici un index des propriétés CSS sur mozilla-dev.
Question 1/2 : ✓
Mémorisation 0x - Réussite 0/0
Que réalise ces lignes de code CSS ?
p {background-color:blue;}
a {color:red;}
p {color:red;}
Pacer les bons éléments dans les bons groupes sans forcément tous les placer.

Codes couleurs

En CSS, la propriété color peut être un nom de couleur (black, green, red , etc. ) mais il est possible d'être plus précis en utilisant un code couleur au format hexadécimal : #XXXXXX.
Chacune des valeurs XX correspondant au rouge #00FF00, au vert #00FF00 et au bleu #00FF00 peuvent être ajustées de 00 (c'est éteint) à FF (c'est à fond).

En mélangeant ces 3 couleurs primaires, il est possible d'en obtenir des millions :

Question 1/2 : ✓
Mémorisation 0x - Réussite 0/0
Associer chaque couleur au bon code hexadécimal ?
#FF0000
#000000
#FFFFFF
#00FF00
#0000FF
Glisser-déposer pour former les bonnes paires.
Exercice 1 : En modifiant les codes CSS et HTML ci-dessous :
1 - Afficher le titre principal en bleu.
color:blue;

2 - Supprimer le fond gris du deuxième paragraphe.
L'attribut CSS pour modifier la couleur de fond est : background-color.

3 - Dans le deuxième paragraphe, faire en sorte que seulement le sigle "CSS" soit en gras.
Utilisez la balise <span> pour cibler seulement le sigle CSS.

4 - Faire en sorte que les boutons changent de taille lorsqu'ils sont survolés par la souris.
Utiliser le pseudo sélecteur :hover.

5 - Modifier le message affiché lorsqu'on clique sur le bouton "Ok".
Modifier le code javascript de l'attribut onclick.

6 - Faire valider par le professeur.