# Web statique - Activité - Feuilles de style CSS

## Objectifs

### Objectifs pédagogiques

- Ajouter une feuille de style à notre page web
- Manipuler les sléecteurs et les propriétés
- Apprendre à utiliser le modèle de boîte
- Apprendre à manipuler les flexbox

### Objectifs techniques

- Améliorer l'aspect visuel de notre site web pour le rendre attrayant

## Validation

### Livrables

- Le code final HTML + CSS (zip)
- Le compte-rendu de l'activité

Le tout dans un répertoire avec le nom suivant `YYYY-MM-DD_TPX_NOM1_Prenom1_NOM2_Prenom2`.
- Le compte rendu peut-être livré au format Markdown ou PDF. 
- Si vous choisissez le Markdown, attention à bien livrer les éventuelles images et à la validité des lien

### Résultats attendus

- [ ] Le code est propre, correctement formaté, les variables, fonctions et paramètres sont bien nommés, les conventions sont respectées.
- [ ] La page web d'accueil affichée dans un navigateur ressemble à ceci (ou version personnalisée)

![result-tp2](./images/result-tp2.png)

### Critères d'évaluation

- 50% Technique (10pts)
    - Code fonctionnel
    - Réponses dans le compte-rendu
    - Questions orale et compréhension générale
    - Connaissance du cours
- 50% Professionnalisme (10pts)
    - Posture professionnelle durant l'activité (3pts)
    - Qualité du rendu (Compte rendu - Documentation - Code) (3pts)
    - Respect des délais/horaires (2pts)
    - Autonomie dans la progression (2pts)
- Bonus +2pts

## Étapes

### 0 - Mise en place

- Nous repartons du résultat du TP précédent. 
- Vérifiez que toutes vos modifications aient bien été commitées.
- Créez un nouveau fichier de compte-rendu.

### 1 - Un peu de style

**Objectif :** Ajouter une feuille de style

```admonish travail
1. Créer un nouveau fichier nommé `style.css` dans votre projet
2. Ajouter le contenu suivant dans le fichier :
    ~~~css
    h1 {
        color: blue; 
    }
    ~~~
3. Ajouter la ligne suivante dans la section `head` de votre fichier `index.html`
    ~~~html
    <link rel="stylesheet" href="style.css">
    ~~~
4. Vérifier que le titre de votre site s'affiche désormais en bleu.
5. Vous pouvez mettre une couleur plus agréable (par exemple : `#213C54`)
5. Faire un nouveau commit (après avoir complété votre compte-rendu).
```

```admonish note title="Dans le compte rendu"
1. Que fait la ligne `<link rel="stylesheet" href="style.css">` ?
1. Pourquoi on ajoute cette ligne dans la section `<head>` ?
1. Expliquer ce qu'est une feuille de style à l'aide de la [documentation](https://developer.mozilla.org/fr/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content).
2. Dans l'exemple de `style.css`, dites quel élément est :
    - le sélecteur
    - la propriété
    - la valeur de propriété
3. En CSS, expliquer ce que sont 
    - les sélecteurs, 
    - les propriétés 
    - les valeurs de propriétés
```

### 2 - Un peu plus de style

**Objectif :** Compléter le style de votre site web avec la feuille de style CSS

```admonish travail
#### Sélection par type de balise
1. Utilisez la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/text-align) pour centrer le titre de votre page
1. Utilisez la [documentation de Mozilla](https://developer.mozilla.org/fr/docs/Web/CSS/font-family) pour que la police par défaut de votre page soit `Helvetica`

#### Sélection par balise encapsulée
1. Encapsulez les liens vers les autres pages dans une balise `<nav>` (en HTML).
1. Utilisez la documentation pour changer le style des liens inclus dans `<nav>` vers les autres pages du site. 
    - Ils devront s'afficher en `#1565c0`
    - Ils ne devront plus être soulignés
    - Il devront s'afficher en un peu plus grand que le reste

#### Sélection par `id`
1. Ajoutez l'attribut `id="devise"` au paragraphe de la devise du cabinet (dans le html)
1. Utilisez cet attribut dans un sélecteur CSS pour centrer la phrase sous le titre et mettre le texte en italique (propriété `font-style`). Aidez-vous de la [documentation](https://developer.mozilla.org/fr/docs/Web/CSS/Reference#s%C3%A9lecteurs).

#### Sélection par classe
1. Dans le HTML, encapsulez le texte de description ainsi que l'image dans une balise `<section>`. Ajoutez l'attribut `class="description"` à la section.
1. Modifiez la couleur de fond de cette zone pour avoir `#EAC194`

#### Sélection par pseudo-classe
1. Changez la couleur des liens de navigation vers les autres pages du site **uniquement** lorsque le curseur de la souris passe au-dessus. Il devront s'afficher en `#005f99`.

1. Faites un nouveau commit (après avoir complété votre compte-rendu).
```

```admonish note title="Dans le compte rendu"
1. Expliquez comment selectionner
    - par type d'élément
    - par classe
    - par id
    - quand on survole avec la souris
2. Expliquez 3 **propriétés** que vous avez utilisées (donnez leur nom et leur rôle)
3. Expliquez la différence entre la taille en `rem` et en `px`. Pour un site accessible, qui s'adapte aux préférences des utilisateurs, quelle notation allez-vous préférer ?
```

### 3 - Une boîte autour de la description du site

**Objectif** : Manipuler les boîtes (box model) en CSS pour gérer la description et l’image, ainsi que leurs marges et paddings.

```admonish travail
2. Dans le fichier CSS, ajoutez des règles pour `.description` :

    - Ajoutez une bordure continue de 2px `#8396a8`
    - Ajoutez un padding de 20px pour créer un espace intérieur.
    - Ajoutez une marge de 30px en haut et en bas.
    - Fixez une largeur maximale de 800px.
    - Centrez la boîte horizontalement avec `margin-left` et `margin-right` automatiques.

3. Pour l’image dans `.description img`, ajoutez :

    - Une bordure continue de 1px solid `#8396a8`.
    - Arrondissez les angles à l'aide de `border-radius`.

5. Faites un commit avec vos modifications après avoir mis à jour votre compte rendu.
```

```admonish note title="Dans le compte rendu"
1. Expliquez ce qu’est le modèle de boîte CSS (box model).
2. Quelle différence y a-t-il entre la marge (`margin`) et le remplissage (`padding`) ?
    - N'hésitez pas à expérimenter à l'aide d'une bordure visible sur l'image et en changeant les valeurs des propriétés
3. Quelle propriété CSS permet de centrer une boîte horizontalement ?
```

### 4 - Menu de navigation flexible

**Objectif** : Utiliser Flexbox pour agencer les liens de navigation horizontalement et gérer les espaces entre eux.

```admonish travail
Pour cette étape, utilisez la documentation suivante : [Concepts de base pour Flexbox](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)

1. Dans le CSS : activez flexbox dans la liste incluse dans la balise `<nav>`
2. Centrez horizontalement les liens de la liste avec `justify-content`
3. Ajoutez un écart (`gap`) entre les éléments de la liste.
4. Retirez les puces de la liste, pour un effet plus moderne (propriété `list-style`)
5. Faites un commit avec vos modifications après avoir mis à jour votre compte rendu.
```

```admonish note title="Dans le compte-rendu"
1. Quelles sont les propriétés Flexbox utilisées dans cette étape et à quoi servent-elles ?
2. Qu’est-ce que la propriété `gap` apporte par rapport aux marges classiques ?
3. Pourquoi utiliser Flexbox plutôt qu’un simple affichage en ligne (`inline`) pour la navigation ?
```

## Pour aller plus loin

### Bonus - Style

**Objectif**: Améliorez le style de la page pour lui donner un rendu plus personnel. N'hésitez pas à fouiller la documentation et à expérimenter
