TP2 et Cours Les langages du Web : CSS

Pour tout ce qui concerne la mise en page et l'aspect "décoratif" d'une page Web (on parle du "style" de la page), on utilisera le CSS (Cascading Style Sheets). CSS permet de choisir la couleur du texte, de sélectionner la police utilisée, de définir la taille du texte, les bordures, le fond… de placer un menu, de demander à ce qu'il soit toujours visible ou non, de modifier l'aspect des liens, etc.

1. Mise en place du CSS.

Il existe différentes façons d'écrire du CSS, la méthode la plus courante consiste à écrire le code CSS dans un fichier texte (comme pour HTML) avec l'extension .css et on ce fichier "à côté" du fichier HTML. Il reste ensuite à indiquer au document HTML l'existence de ce ficher css grâce à la balise <link>, comme par exemple :

<link rel="stylesheet" href="style.css" />

On place cette balise dans la partie head du document HTML.

Pour faire au plus simple, nous utiliserons, comme pour HTML l'application capytale via Atrium. Avec cette application, une fenêtre est dédiée à l'écriture du CSS, il n'est alors pas nécessaire de créer un fichier à part (l'application s'en charge elle-même) ni même de déclarer la feuille de style dans l'en-tête HTML avec la balise<link>. Pour autant, nous le ferons tout de même.

2. Modifier le style d'une page web.

Comme pour le TP précédent, ouvrir Capytale et utiliser le code : fb95-1164654

Copier les lignes suivantes dans la partie HTML :

<!DOCTYPE html>
<html lang="fr">    
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Mon site</title>
    </head>
    <body>
        <h1> Hello world !</h1>
        <p>Ceci est le premier paragraphe.</p>
        <p>Ceci est le second paragraphe.</p>
    </body>
</html>

Puis les lignes suivantes dans la partie CSS :

html {
     background-color : black;
}

body {
     background-color: grey;
     margin: 1%;
     border: 2px solid darkred;
}

h1 {
   color : blue;
   font-size : 3em;
   text-align : center;
}

Vous remarquez que l'affichage de la page a été modifié, que ce soit l'aspect du titre principal h1 ou de la page elle-même, plusieurs éléments ont été modifiés.

Dans cet exemple, les propriétés text-align, color et font-size sont appliquées au contenu de tous les éléments h1. Pour les éléments de body, ce sont les propriétés background-color, margin et border qui sont appliquées.

VOCABULAIRE ET SYNTAXE À CONNAÎTRE :

En CSS, on parle de sélecteurs (et non de balises, le sélecteur CSS doit correspondre à une balise HTML).

La syntaxe est :

selecteur{
propriétéCSS: valeur;
}

Il existe des dizaines de propriétés CSS, le but de ce cours n'est pas de donner un catalogue de ces propriétés mais juste un petit aperçu de CSS.

Remarque : Pour les propriétés qui utilisent de la couleur, comme color ou background-color, on peut indiquer la couleur choisie en tapant son nom (en anglais) ou bien en utilisant son code hexadécimal (qui est beaucoup plus précis), pour cela, vous pouvez consulter le site : https://htmlcolorcodes.com/fr

À FAIRE :

Modifier le code CSS pour changer la couleur du fond et des bordures et la taille des caractères affichés.

3. Un peu de finesse…

Appliquer et définir un style est donc assez simple mais il y a un gros défaut : on applique le même style à TOUS les éléments de la page HTML. Par exemple, tous les paragaphes p possèderont la même présentation si on ajoute des propriétés au sélecteur p.

Pour résoudre le problème, on utilise des attributs "globaux" qui fonctionnent sur toutes les balises : l'attribut class et l'attribut id.

Par soucis de simplification, nous utiliserons uniquement l'attribut id.

Chaque id doit être unique dans une page, on utilise ce sélecteur pour appliquer des styles précis en ne ciblant qu'un seul élément HTML.

Par exemple :

Pour le fichier HTML, modifier la ligne : <p>Ceci est le second paragraphe.</p> par :

<p id='bleu'>Ceci est le second paragraphe.</p>

Pour le fichier CSS, ajouter la ligne :

#bleu { color:blue; }

Attention le # est OBLIGATOIRE devant nom du sélecteur pour indiquer à CSS qu'il s'agit de cibler un id.

4. À faire vous-même.

Copier/coller les codes HTML et CSS suivants dans capytale, puis modifier les 2 fichiers pour obtenir, comme dans le tp précédent, une page web de votre choix mais cette fois avec un style personnel (et non plus seulement le style appliqué par défaut par le navigateur).

HTML :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <title>Ma page web de...</title>
    </head>
    <body>
        <header>
            <h1>Titre principal</h1>
        </header>
            <nav>
                <ul>
                    <li><a href="...">lien1</a></li>
                    <li><a href="...">lien2</a></li>
                    <li><a href="...">lien3</a></li>
                </ul>
            </nav>
        <section>
            <h2>Titre2.1</h2>
        </section>
        <section>
            <h2>Titre2.2</h2>
        </section>
    </body>
</html>

CSS :

html{
    background-color: white;
}

body{
    background-color: white;
    margin-left: 5%;
    margin-right: 5%;
}

header{
    /* image noel.jpg à copier dans le meme dossier que ce fichier */
    background-image:url("https://t3.ftcdn.net/jpg/01/26/92/24/360_F_126922415_zeSJu27Wxco80G5c9ocf5hD87eSMnNtd.jpg");
    border: 2px solid lightgrey;
    height: 300px;
    border-bottom: none;
}

h1{
    padding-left: 2%;
    color: darkred;
    text-transform: uppercase;
}

section{
    border: 2px solid lightgrey;
    min-height: 200px;
    margin-top: 20px;
    background-color: ivory;
}

/* menu de navigation */
nav{ 
    border: 2px solid lightgrey;
    background-color: ivory;
}

/* liste du menu de navigation */
nav li{
    display : inline;
    margin-left : 30px;
    margin-right : 30px;
    
}

/* liens des listes */
li a{
    text-decoration: none;
    color : black;
    font-size : 1.2em;
}

/* suvol des liens des listes */
li a:hover{
    color : red;
}