CSS¶

Cascading Style Sheets

Littéralement « Feuilles de style en cascade », utilisé pour la présentation des document HTML et XML. Elles furent introduites en 1990 et réellement prises en charge en 2000. HTML ne décrit que la structure logique (le fond) des documents, la structure physique (la forme) est spécifiée par une feuille de style en CSS.

Les avantages de leurs utilisations, en plus de respecter le standard, sont la cohérence au sein du document, au sein d’un ensemble de documents (charte graphique), la mutualisation de la feuille de style et la séparation des tâches (développeur web / graphiste).

1989-1993 Feuille de style défini par l’utilisateur
1994 -1995 Netscape apporte le support des CSS
2000 Support croissant au sein des navigateurs

Ajouter une feuille de style au document¶

Il suffit d’ajouter dans l’élément <head> d’une balise <link>.

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

Les valeurs des attributs rel et type sont fixes pour une feulle de style css. L’attribut href contient l’URL de la feuille de style. On peut avoir plusieurs feuilles de style (leurs effets se cumulent) au sein d’un même document.

Important

Comme pour le HTML, le W3C fournit un service en ligne de validation de CSS http://jigsaw.w3.org/css-validator/, son utilisation vous est vivement recommandée.

Règle¶

En CSS, la mise en forme est spécifiée par un ensemble de règles. Une règle typique est composée de trois parties :

un sélecteur,
une propriété,
une valeur

Signifie que tous les paragraphes du document prennent un taille de police de 14px.¶

p {
    font-size: 14px;
}

Sélecteur¶

Note

Les sélecteurs définissent les éléments sur lesquelles s’applique un ensemble de règles CSS.

Les sélecteurs de type¶

Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué.

Syntaxe

élément { style: propriétés; }

Sélecteur

Cibles

p {}

<h1>Quotes</h1>
<p>May the Force be with you.</p>
<img src=".." alt=".." />
<p>I'm in it for the money.</p>
<p>I find your lack of faith disturbing.</p>

img {}

<section>
    <h2>I find your lack of faith disturbing.</h2>
    <img src=".." alt=".." />
</section>
<section>
    <h2>May the Force be with you.</h2>
    <img src=".." alt=".." />
</section>

Classe et identifiant¶

HTML autorise les attributs suivant dans n’importe quelle balise :

id accepte comme valeur un nom unique (interdiction d’utiliser le même id dans un même document) ;
class accepte comme valeur une liste de noms séparés par des espaces (le même nom de classe peut être présent dans plusieurs balises).

<ol id="contents">...</ol>
<article class="post funny">...</article>
<p class="funny">...</p>

Les sélecteurs de classe¶

Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class.

Syntaxe

.nomclasse { style: propriétés; }

Sélecteur

Cibles

.red {}

<section>
    <h2 class="red">I find your lack of faith disturbing.</h2>
    <img src=".." alt=".." />
</section>
<section>
    <h2>May the Force be with you.</h2>
    <img class="red" src=".." alt=".." />
</section>

Les sélecteurs d’identifiants¶

Ce sélecteur simple permet de cibler un élément d’un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu’un seul élément pour un identifiant donné

Syntaxe

#identifiant { style: propriétés; }

Sélecteur	Cibles
#logo {}	<h1 id="logo">Star Wars</h1> <p>May the Force be with you!</p> <img src=".." alt=".." />

Le sélecteur universel¶

Ce sélecteur permet de cibler tous les nœuds d’un document.

Syntaxe

* { style: propriétés; }

Sélecteur	Cibles
* {}	<h1 id="logo">Star Wars</h1> <p>May the Force be with you!</p> <img src=".." alt=".." />

Combinaison de règles¶

Plusieurs règles similaires peuvent coexister :

p   { font-style: italic }
p   { color: blue }
h2  { font-style: italic }
h2  { color: blue }

On peut regrouper les règles ayant le même sélecteur, en séparant les couples propriété-valeur par un point-virgule (;).

p   { font-style: italic ; color: blue }
h2  { font-style: italic ; color: blue }

On peut regrouper des règles ayant le même contenu, en séparant les sélecteurs par une virgule (,).

p, h2 { font-style: italic ; color: blue }

Multi sélecteurs¶

Sélecteur	Cibles
h1, p {}	<h1 id="logo">Star Wars</h1> <p>May the Force be with you!</p> <img src=".." alt=".." />

Longueur en CSS¶

Il existe différentes unités pour les tailles (police et boîte) en css, en voici quelques une:

Unité	Description
cm	centimètre
mm	millimètre
in	pouce (inch)
em	taille de la police courante
px	pixel CSS
vw	1% de la largeur de la fenêtre
vh	1% de la hauteur de la fenêtre

Taille en CSS¶

La taille d’un élément peut être fixée grâce aux propriétés width et height. Ces propriétés acceptent des longueurs absolues, ou en pourcentage (par rapport à l’élément englobant).

Par exemple, ce paragraphe a la propriété width: 50%, il occupe donc la moitié de la largeur de la page.

p {
    width: 50%;
}

Intervalles de taille¶

On peut également contraindre un élément de manière plus souple avec les propriétés min-width, max-width, min-height et max-height.

C’est utile lorsqu’on ne connaît pas à l’avance le contenu des éléments concernés :

feuille de style mutualisée,
contenu dynamique,
reponsive design.

Débordement¶

Si on contraint la taille d’un élement il est possible que le contenu dépasse de celui-ci.

La propriété overflow permet de paramétrer le comportement de l’élément dans cette circonstance:

visible le contenu s’affichera entièrement.
hidden ne s’affiche qu’à l’intérieur de l’élément, peut être tronqué.
scroll ne s’affiche qu’à l’intérieur de l’élément, apparition d’ascenseurs au besoin.

Propriétés des textes¶

font-style: normal|italic|oblique
font-weight: normal|bold|bolder|lighter| ou une valeur entre 100 et 900 (400 = normal)
font-variant: normal|small-caps
font-family: <police>
font-size: taille et unités

Police d’écriture¶

CSS définit des polices génériques : serif, sans-serif, cursive, fantasy, monospace

Inconvénient : leur apparence varie d’un système à l’autre (et d’un navigateur à l’autre).
Avantage : elles garantissent un affichage pas trop différent des intentions de l’auteur.

Il convient de spécifier une liste de polices, par ordre croissant de probabilité qu’elle soit disponible, et en terminant toujours pas une police générique.

font-family: MyNiftyFont, "Times New Roman", serif

Taille de police¶

La taille de police est généralement exprimée en points px :

body {  font-size: 12px; }

ou relativement à la taille de la police dans l’élément englobant.

h1 {  font-size: 150%; }

Mais toutes les unités de mesures reconnues par CSS sont en théorie utilisables.

Autres propriétés des textes¶

text-decoration: none|underline|overline|line-through|blink
text-transform: none|capitalize|uppercase|lowercase
text-align: left|center|right|justify
color: <color>
background-color: <color>

Couleur en CSS¶

p { color: #f00 }                 /* #rgb */
p { color: #ff0000 }           /* #rrggbb */
p { color: rgb(255,0,0) }
p { color: rgb(100%, 0%, 0%) }
p { color: rgba(255, 0, 0, 0.5) }
body { background-color: #000;}

Attention

Les couleurs doivent toujours être exprimées en hexadécimal, RGB ou RGBA ! N’utilisez pas les noms des couleurs.

Des sélecteurs un peu plus complexe¶

Les sélecteurs de voisin direct¶

Le combinateur + permet de sélectionner les noeuds qui suivent immédiatement un élément donné.

Syntaxe

A + B { style: propriétés; }

Sélecteur	Cibles
h1 + p {}	<h1 id="logo">Star Wars</h1> <p>May the Force be with you!</p> <img src=".." alt=".." />

Les sélecteurs d’éléments descendants¶

Le combinateur :code:` ` (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des fils directs) d’un élément donné.

Syntaxe

A B { style: propriétés; }

Sélecteur	Cibles
section p {}	<section> <p>May the Force be with you!</p> </section> <section> <p>May the Force be with you!</p> </section>

Les sélecteurs d’éléments fils¶

Le combinateur :code`>` permet de sélectionner les noeuds qui sont des fils directs d’un élément donné

Syntaxe

A > B { style: propriétés; }

Sélecteur	Cibles
ul > li	<ul> <li>Sucre</li> <li>Miel</li> <li>Lait</li> </ul> <ol> <li>Sucre</li> <li>Miel</li> <li>Lait</li> </ol>

Encore et toujours des boîtes¶

En CSS, tout tourne autour de boîtes définir leurs tailles, leurs couleurs, leurs positions, … Les éléments HTML d’une page peuvent, pour la plupart, être vus comme des boîtes placées les unes sur les autres. C’est pour cette raison que l’architecture de CSS est principalement basée sur un modèle de boîtes.

Modèle de boîtes¶

Chacun de ces blocs prend un certain espace sur la page, de cette façon :

padding l’espace autour, proche du contenu
border la ligne qui est juste autour du padding
margin l’espace extérieur, autour de l’élément

Marge externe¶

La propriété margin définit la taille des marges sur les quatre côtés de l’élément. C’est une propriété raccourcie qui permet de manipuler les autres propriétés de marges : margin-top, margin-right, margin-bottom et margin-left.

Syntaxe

/* La propriété s'applique aux quatre côtés */
margin: 1em;
/* vertical | horizontal */
margin: 5% auto;
/* haut | horizontal | bas */
margin: 1em auto 2em;
/* haut | droit | bas | gauche */
margin: 2px 1em 0 auto;

Bordure¶

La propriété CSS border est une propriété raccourcie qui permet de définir les propriétés liées à la bordure. border peut être utilisée pour définir les valeurs de border-width, border-style et border-color.

Syntaxe

/* style */
border: solid;
/* largeur | style */
border: 2px dotted;
/* style | couleur */
border: outset #f33;
/* largeur | style | couleur */
border: medium dashed green;

Marge interne¶

La propriété padding est une propriété raccourcie qui permet de définir les différents écarts de remplissage sur les quatre côtés d’un élément (cf. les boîtes CSS). Elle synthétise padding-top, padding-right, padding-bottom, padding-left.

Syntaxe

/* On applique la même valeur aux quatre côtés */
padding: 1em;
/* vertical | horizontal */
padding: 5% 10%;
/* haut | horizontal | bas */
padding: 1em 2em 2em;
/* haut | droit | bas | gauche */
padding: 5px 1em 0 2em;

Block et Inline¶

Pou rappel, il existe deux grands types d’éléments :

Les éléments de type inline, ils s’inscrivent dans le flux du texte, leur taille est déterminée par leur contenu, les propriétés width et height sont sans effet sur eux. Exemples : a, em, strong, …
Les éléments de type block, ils sont précédés et suivis d’une séparation verticale, ils prennent toute la largeur disponible, et uniquement la hauteur nécessaire mais on peut changer leur taille avec les propriétés width et height. Exemples : p, section, h1, …

Changer le mode d’affichage¶

display : inline | block | inline-block | none;

Un élément inline-block se comporte comme un élément inline avec ses voisins (pas de séparation verticale), mais comme un élément block pour son contenu (taille ajustable).

Un élément none ne sera pas affiché. Ce mode est utile en conjonction avec la directive @media.

Coins arrondis¶

Il est possible d’arrondir les coins du bord grâce aux propriétés suivante :

border-top-left-radius (rayon)
border-top-right-radius (rayon)
border-bottom-right-radius (rayon)
border-bottom-left-radius (rayon)

ou par une propriété synthétique acceptant 1 à 4 valeurs :

border-radius (tl) (tr) (br) (bl)

Images de fond¶

Plutôt qu’une couleur de fond (background-color), on peut spécifier une image de fond pour certains éléments.

background-image : (url)
background-image: url("img/starnest.png")

Paramétrage de l’image de fond:

background-position: (position gauche) (position haut), en pixel ou en anglais (left, right, center, top, bottom)
background-attachment:
- scroll: l’image défile avec la page (par défaut)
- fixed : l’image reste fixe quand la page défile
background-repeat:
- repeat : l’image se répète en mosaïque (par défaut)
- repeat-x : l’image se répète horizontalement

Bonne pratique¶

Rappel sur les URLs¶

@startuml url

scale 2.5
skinparam backgroundcolor transparent
skinparam defaultFontName Hack

rectangle Protocole #Tomato {
rectangle "https://" #LavenderBlush
}

rectangle "Nom du serveur" #LightGreen {
rectangle "ugaritic.fr/" #LavenderBlush
}

rectangle "Nom Local de la ressource" #LightBlue {
rectangle "supports/" #LavenderBlush
}

@enduml

Le nom local a une structure hiérarchique (similaire à la structure des fichiers). Comme pour les fichiers, on peut spécifier une URL relativement à une autre.

<!-- url de base -->
src=""
<!-- la ressource kenobi dans le "répertoire" courant -->
src="kenobi"
<!-- le "répertoire" courant -->
src="."
<!-- le "répertoire" parent du "répertoire" courant
src=".."
<!-- le "répertoire" racine du serveur -->
src="/"

On peut ensuite combiner ces éléments en les séparant par un /.

Liens¶

La balise <a> transforme son contenu en lien hypertexte. Elle doit contenir un attribut href, qui contient l’URL (absolue ou relative) vers lequel dirige ce lien.

Contenu de la balise a¶

Rien n’empêche bien sûr la balise <a> de contenir d’autres balises.

Bienvenue sur
<a href="https://www.ugaritic.fr/">
    <strong>Ugaritic</strong>.info
    <img src="img/logo.png"  alt="Logo de Ugaritic.fr" />
</a>

Lien interne¶

Il peut être utile de faire pointer un lien vers un fragment particulier d’un document plutôt que vers son intégralité. Toute balise délimite une partie du document. Grâce à l’attribut id on peut cibler un élément. L’URL du fragment est constituée en concaténant : l’URL du document, le caractère #, et l’identifiant du fragment.

<a href="#sec1">Pointe vers le fragment #sec1 du document courant</a>
<a href="other.html#sec2">Pointe vers le fragment #sec2 d'un autre document</a>
<a href="https://fr.wikipedia.org/wiki/Amiens#Histoire">Pointe vers la section "Histoire" d'un article
Wikipedia</a>

<section id="sec1">
La section vers laquelle pointe le 1er lien ci-dessus.
...
</section>

Organisation des fichiers d’un site web¶

Lorsque le nombre de fichiers constituant un site croît, il devient important de penser leur organisation. Quelques conseils :

Séparer les pages HTML des fichiers « utilitaires » (feuilles de styles, images) en plaçant ces derniers dans un sous-répertoire,
Calquer la hiérarchie des répertoires sur la structure logique du site.

.
|-- dark_crystal
|   |-- img
|   |   `-- logo.png
|   |-- index.html
|   |-- page
|   |   |-- about.html
|   |   `-- skesis.html
|   `-- style
|       `-- style.css
`-- jurassic_park
    |-- img
    |   `-- logo.png
    |-- index.html
    |-- page
    |   |-- about.html
    |   `-- dinosaurs.html
    `-- style
        `-- style.css

Formulaires et interactivité¶

Les formulaires HTML sont un des vecteurs principaux d’interaction entre un utilisateur et un site web ou une application. Ils permettent à l’utilisateur d’envoyer des données au site web. La plupart du temps, ces données sont envoyées à des serveurs web.

Un formulaire HTML est composé d’un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle.

Champs de saisie¶

Certaines pages HTML comportent des champs permettant à l’utilisateur de saisir de l’information. La balise offrant cette possibilité est la balise <input>.

<input />

Types de champs¶

HTML offre un certain nombre de types de champs, les plus utilisés étant:

<input type="text" />
<input type="password" />
<input type="checkbox" />
<input type="radio" />
<input type="file" />
<input type="number" />
<input type="range" />

HTML5 définit d’autres types de champs (date, color, …).

Libellé¶

Les champs de saisie sont le plus souvent associés à un libellé. Ceci est représenté en ajoutant un libellé via une balise <label> avant la balise <input>.

<label>Nom : </label>
<input type="text" />

<label>Tarif réduit</label>
<input type=checkbox />

La convention consiste à:

nommer le <input> avec l’attribut id, et
lui lier le <label> avec l’attribut for.

<label for="name">Nom :</label>
<input id="name" type="text" />

<label for="firstname">Prénom</label>
<input id="firstname" type="text" />

Importance de lier le libellé au champ

L’association du libellé au champ explicite la sémantique du document, ce qui permet notamment d’améliorer :

l’ergonomie: lorsqu’on clique sur un libellé, c’est le champ qui prend le focus ;
l’accessibilité: l’adaptation du formulaire (par exemple pour un lecteur d’écran) peut se faire de manière plus pertinente.

Alternative au libellé¶

Pour les champs de type text ou password, une alternative au libellé consiste à utiliser l’attribut placeholder:

<input placeholder="identifiant" />
<input type="password" placeholder="mot de passe" />

Liste d’options¶

Un autre type de champ permet de sélectionner (ou ou plusieurs) éléments dans une liste.

<select>
    <option>Luke</option>
    <option>Leia</option>
    <option>Han</option>
    <option>Ben</option>
</select>

L’attribut multiple autorise la sélection de plusieurs éléments.

Zone de texte¶

Le champ input ne permet pas la saisie de texte sur plusieurs lignes. Pour cela, on utilise le champ textarea.

<textarea placeholder="type your message">Hello world</textarea>

Contrairement à input, textarea attend une balise fermante (car le texte contenu dans le champ est le contenu de la balise).

Boutons¶

La balise button permet de créer des boutons.

<button>Ok</button>
<button><em>Annuler</em></button>

Formulaire en HTML¶

Les champs sont généralement regroupés dans une balise form, qu’on appelle un formulaire. Cette balise requiert l’attribut action, qui contient l’URL de la ressource qui traitera les données du formulaire.

<form action="https://ingen.ugaritic.fr/form/process/">

</form>

Champs d’un formulaire¶

Pour pouvoir être traités, les champs d’un formulaire doivent tous être identifiés par un nom, porté par l’attribut name:

<form action="https://ingen.ugaritic.fr/form/process/">
    <input name="name" placeholder="identifiant">
    <input name="tel"  placeholder="n de tel">
    <button>Je m'inscris</button>
</form>

Cases à cocher et boutons radio¶

Les champs ayant le type checkbox ou radio vont souvent par groupe. Tous les membres d’un groupe ont le même nom, et se différencient par une valeur portée par un attribut value.

Pour les cases à cocher, le nom se voit affecter l’ensemble des valeurs sélectionnées. Pour les boutons radio, une seule valeur peut-être affectée (l’activation d’un bouton du groupe désactive automatiquement les autres).

Exemple de boutons radio¶

<input type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label>

<input type="radio" id="contactChoice2"
name="contact" value="telephone">
<label for="contactChoice2">Téléphone</label>

<input type="radio" id="contactChoice3"
name="contact" value="courrier">
<label for="contactChoice3">Courrier</label>

Exemple d’une case à coche¶

<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">Souhaitez-vous vous abonner à la newsletter ?</label>

Boutons et formulaires¶

Les boutons ont trois fonctionnalités possibles, portées par l’attribut type :

submit envoie les données du formulaire (défaut)
reset remet tous les champs du formulaire à leur valeur initiale
button aucun comportement par défaut

Les boutons du dernier type sont utiles en conjonction avec des scripts (hors-programme pour cette année).

<button type="submit">Valider</button>
<button type="reset">Remise à zéro</button>

Méthode HTTP¶

La balise form accepte un attribut method, qui peut prendre deux valeurs :

GET les données sont passée via l’URL (défaut),
POST les données sont passées dans la requête HTTP

La méthode GET doit être employée lorsque les données ne sont pas trop volumineuses, et surtout; lorsque le traitement des données n’a pas d’effet de bord. Dans tous les autres cas, la méthode POST doit être utilisée.

<form action="https://ingen.ugaritic.fr/form/process/" method="POST">
</form>

Envoi de fichier¶

L’emploi de <input type="file" /> pour envoyer le contenu d’un fichier nécessite deux précautions au niveau du form englobant :

method="post"}
enctype="multipart/form-data"}

sans quoi c’est le nom du fichier, et non son contenu, qui sera envoyé au serveur.

Un peu de style¶

Note

Nous avons découvert comment créer le fonds de nos documents, il est donc temps de les mettre en forme.

Un petit jeu pour commencer ?

CSS Diner Uniquement jusqu’au niveau 14.

À faire

Reprenez l’exemple de règle du TP2 et attachez le à une nouvelle feuille de style.
- Sans toucher au code HTML, ajoutez à votre feuille de style les règles qui permettront d’obtenir le résultat ci-dessous.

À faire

Reprenez le fichier précédent mettons en forme notre page d’actualités.
- Créer un fichier style.css
- Intégrer le fichier style.css dans l’entête du fichier style.html

Astuce

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

nb: un commentaire en CSS¶

/* COMMENTAIRE */

Ajoutez la règle suivante:
p{ color: red; }
- Quel est le type de sélecteur CSS utilisé ?
- Quels éléments sont ciblés par ce sélecteur ?
- Quelle est la mise en forme appliquée par ce code CSS ?
- Pourquoi est-ce une mauvaise idée d’utiliser les noms des couleurs ?
Découvrons désormais les propriétés margin/padding et border

Indication

Pensez à ajouter les codes au fur et à mesure dans votre fichier css. Si le même sélecteur CSS revient plusieurs fois dans l’énoncé c’est qu’il s’agit d’une maj de notre style pour ledit sélecteur et non pas d’un ajout dans le fichier.

Pour cette exemple pensez à avoir au moins deux paragraphes <p> dans votre fichier html.

html, body{
    background-color: #95a5a6;
}

Quelle est la mise en forme appliquée par ce code CSS ?

p{
    background-color: #2980b9;
    border: 1px solid #8e44ad;
}

Quelle est la mise en forme appliquée par ce code CSS ?

p{
    background-color: #2980b9;
    border: 1px solid #8e44ad;
    padding: 12px;
}

Que constatez vous ?
Comment se comporte la propriété padding ?

p{
    background-color: #2980b9;
    border: 1px solid #8e44ad;
    padding: 12px;
    margin: 20px;
}

Que constatez vous ?
Comment se comporte la propriété margin ?

*{
    font-size: 14px;
}

Quels sont les éléments ciblés par ce sélecteur ?
Quelle est son utilité ?

h1{
    color: red;
    background-color: orange;
    font-size: 3.4em;
}
a{
    color: green;
    text-decoration: none;
}

Quels sont les éléments ciblés par ces sélecteurs ?
Que signifie em ? Quelle est son utilité ?

a:hover{
    color: red;
    text-decoration: underline;
}

Quels éléments et à quel moment sont-ils ciblés ?
Quelle est l’utilité de la propriété text-decoration ?

<h1 id="main-title">HELLO WORLD</h1>

#main-title{
    color: blue;
}

Quelle est l’utilité des ID HTML ?
Quel élément est ciblé par ce sélecteur ?

<p class="color-red">HELLO WORLD</p>
<p class="color-red font-weight">HELLO WORLD!</p>

.font-bold{
    font-weight: bold;
}
.color-red{
    color: red;
}

Quelle est l’utilité des classes CSS ?
Quels sont les éléments ciblés par chacun de ces sélecteurs ?

ul.menu{
    text-align: center;
    list-style: none outside none;
}
ul.menu li{
    display: inline-block;
}
ul.menu li a{
}

Quelle est l’utilité de ces sélecteurs ?
Quels éléments sont ciblés par celui-ci ?
Quelle est l’utilité de la propriété list-style ? De la propriété display ? Et text-align ?

Dans votre fichier HTML complétez afin d’obtenir ceci¶

<main>
    <div class="container">
        <div class="col-70">
            <div>..</div>
        </div>
        <div class="col-30">
            <div>..</div>
        </div>
    </div>
</main>

style.css¶

.container{
}
.col{
    float: left;
}
.col-70{
    width: 70%;
}
.col-30{
    width: 30%;
}

Quel est l’intérêt de la propriété float ?
Ajouter une couleur de fond aux colonnes col-70 et col-30
Que constatez-vous ?
Quel est le souci lié au footer ?

.container:after{
    clear: both;
    display: block;
    content: "";
}

Quelle est l’utilité du sélecteur :after
Quelle est l’utilité de ce code css ?

Mise en forme d’un document¶

Note

Cet exercice a pour but de récapituler l’ensemble des premiers tps vus ensemble. Nous allons ainsi revoir HTML et CSS.

Avant de poursuivre notre découverte du monde du web, il convient de s’attarder quelque peu sur la structuration de nos projets.

Créons ensemble une structure squelette pour l’ensemble de nos projets web:

index.html , ce fichier contient comme vous le savez déjà le contenu de la page d’accueil de notre site,
un dossier imgs/ , ce dossier contiendra l’ensemble des images utilisées sur notre site,
un dossier styles/ , ce dossier contiendra le code CSS utilisé pour la mise en forme du contenu.

À faire

Nous allons créer plusieurs éléments HTML au sein de notre document:
Est-il utile de rappeler qu’il faut toujours commencer par le squelette HTML5 ?
Créer une section contenant:
- Un titre de niveau 1 avec le texte suivant: Jurassic World Evolution
- Une image avec cette ressource
- Un titre de niveau 2 avec le texte suivant: Imaginez votre propre Jurassic World
- Un titre de niveau 3 avec le texte suivant: Caractéristiques
- Une liste non ordonnée contenant les éléments suivants: Vos dinosaures, Vos choix, Vos rêves.
- Créer trois titre de niveau 3 et 3 paragraphes qui les suivent avec les contenus respectifs suivant:
  
  Ramenez les dinosaures à la vie Créez par bio-ingénierie des dinosaures qui pensent, ont des émotions et interagissent intelligemment avec le monde que vous construisez.
  
  Choisissez votre propre voie Travaillez dans l’intérêt de la science, des loisirs ou de la sécurité dans un univers incertain où la vie trouve toujours son chemin.
  
  Une nouvelle légende Jurassic Plongez dans un tout nouveau scénario qui place au bout de vos doigts des personnages emblématiques et des décennies de tradition Jurassic.
Enfin créer un lien qui renvoie vers le site officiel du jeu avec en intitulé de lien En savoir plus
Mettez en forme votre document HTML via CSS pour obtenir un résultat équivalent:
Voici les codes couleurs utilisés au sein de la feuille de style:
#001d37 #0b2849 #a8faff #00d6ea