Associer une CSS à une page HTML
Définition : Feuille CSS
Une feuille de style CSS est un fichier qui peut être associé à une page HTML afin de définir des règles de mise en forme pour cette page, par exemple :
les espacements
les tailles et polices de caractères
les couleurs
...
Syntaxe :
On peut déclarer dans une page HTML quelle CSS utiliser pour réaliser la mise en forme en mobilisant l'élément <link rel="stylesheet" href="nom-du-fichier-css"> dans la partie head.
<html>
<head>
<title>...</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
...
</body>
</html>
Exemple : Fichier style.css
h1 {font-family: Times;
font-size: 16pt;
}
p {color: gray;
}
Exemple : Fichier hellohtml.html
<html>
<head>
<title>W3C Cascading Style Sheets home page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>What is CSS?</h1>
<p>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</p>
<p>These pages contain information on how to learn and use CSS and on available software. They also contain news from the CSS working group.</p>
<p><a href="https://www.w3.org/Style/CSS/Overview.en.html">[source]</a></p>
</body>
</html>
Complément : Les bases des CSS
Exercice
On souhaite créer la page HTML ci-après.
Créer le fichier HTML suivant.
<html lang="fr">
<head>
<title>PeerTube</title>
<meta charset="utf-8">
</head>
<body>
<h1>PeerTube</h1>
<p>PeerTube est un logiciel libre d'hébergement de vidéo décentralisé créé en 2015 et soutenu par Framasoft. Il fonctionne sur le principe d'une fédération d'instances hébergées par des entités autonomes. Son objectif est de fournir une solution alternative aux plateformes centralisées telles que YouTube ou Dailymotion.</p>
<h2>Fonctionnement</h2>
<p>Concrètement, une instance PeerTube se présente comme un site web.</p>
<p>Chaque instance est souvent indépendante des autres pour ce qui est de l'aspect du site, la gestion des comptes, abonnements... Elles peuvent toutefois partager les mêmes vidéos entre elles en s'accordant sur leurs conditions de diffusions, formant ainsi des fédérations.</p>
<h2>Historique</h2>
<p>En 2015, ne trouvant pas de plate-forme de remplacement à YouTube, Chocobozzz, alors étudiant, a développé un premier prototype de plateforme décentralisée. En 2017, il a été contacté par Framasoft qui, dans le cadre de sa feuille de route Contributopia, cherchait à développer une autre possibilité que les plateformes centralisées et l'a donc embauché.</p>
<h2>Crédits</h2>
<ul>
<li>Source : <a href="https://fr.wikipedia.org/wiki/PeerTube">fr.wikipedia.org/wiki/PeerTube</a></li>
<li>Licence : CC BY-SA</li>
</ul>
</body>
</html>
Créez le fichier CSS suivant et associez-le à la page HTML précédente.
body {font-family: Monospace;
}
h1, h2 {
font-family: Arial;
}
On ajoute le lien suivant dans la partie head du fichier HTML.
<link rel="stylesheet" href="style.css">
Règles CSS
Définition :
Une CSS se compose d'une liste ordonnée de règles, chaque règle comprenant :
un sélecteur qui fixe sur quels éléments HTML s'applique la règle,
un ensemble de couples propriété-valeur qui définit la valeur de la propriété.
Syntaxe :
element1 {property: value;
property: value;
...
}
element2 {...
}
Exemple :
h1 {font-family: Arial;
font-size: 150%;
margin-bottom: 10px;
}
ul {list-style-type: circle;
font-style: italic;
}
p {border: 1px dotted gray;
}
Remarque : Cascading Style Sheet
Le terme cascading signifie en cascade. En pratique cela permet de déclarer plusieurs règles les unes après les autres concernant le même élément. Les règles s'ajoutent les unes après les autres, en cas de définition contradictoire, c'est la dernière exprimée qui remporte.
Il est possible de définir une règle commune à plusieurs éléments.
Exemple :
h1 {font-family: Arial;
font-size: 150%;
}
ul {list-style-type: circle;
font-style: italic;
}
p {border: 1px dotted gray;
}
p, ul {
color: blue;
}
Complément :
Il est possible de déclarer directement le style d'une page HTML au sein de cette page (feuille de style internalisée), en utilisant la balise <style>.
developer.mozilla.org/fr/docs/Web/HTML/Element/style
Dans le cas général on préfère une déclaration externalisée qui permet la réutilisation des CSS.
L'attribut Class
Rappel :
En HTML, l'attribut class peut être ajouté à tous les éléments : il permet d'associer une catégorie logique à un élément.
Syntaxe :
<p class="nom-de-la-classe">...</p>
Exemple :
<html>
<head>
<title>W3C Cascading Style Sheets home page</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="page-title">What is CSS?</h1>
<p>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</p>
<p>These pages contain information on how to learn and use CSS and on available software. They also contain news from the CSS working group.</p>
<p class="source"><a href="https://www.w3.org/Style/CSS/Overview.en.html">[source]</a></p>
</body>
</html>
Définition :
On peut utiliser cet attribut class pour associer des styles différents à plusieurs éléments HTML identiques.
Syntaxe :
element.classe {
property: value;
...
}
Exemple :
h1 {font-family: Arial;
font-size: 150%;
}
p {font-family: Monospace;
}
p.source {
font-weight: bold;
}
Remarque :
Il est possible de définir un style commun à plusieurs éléments différents qui ont la même classe.
.classe {...
}
.page-title {font-family: Arial;
font-size: 150%;
}
Ici tous les éléments qui ont comme classe page-title activeront cette règle.
Complément : Kebab Case
On utilise la casse kebab case pour nommer les classes en HTML.
Exercice
Soit le fichier HTML suivant et la CSS associée..
<html lang="fr">
<head>
<title>Histoire de l'informatique</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Augusta Ada King, comtesse de Lovelace, dit Ada Lovelace est néele 10 décembre 1815 à Londres et morte le 27 novembre 1852 à Marylebone dans la même ville. Elle est connue pour avoir réalisé le premier véritable programme informatique, lors de son travail sur un ancêtre de l'ordinateur : la machine analytique de Charles Babbage.</p>
<p>C'est d'autant plus étonnant que... la machine de Babbage n'a jamais été terminé ! Le premier programme informatique n'était donc pas exécutable.</p>
<p>Néanmoins, ce programme est souvent considéré comme le premier véritable programme informatique au monde, car les algorithmes décrits jusque-là n'étaient pas décrits avec un formalisme, dans un langage véritablement destiné à être exécuté sur une machine. De plus, ce programme comporte selon Catherine Dufour la première boucle conditionnelle, véritable concept informatique, contrairement aux programmes séquentiels qui avaient pu être faits auparavant par Babbage, ou dans les métiers à tisser Jacquard.</p>
</body>
</html>
.wikipedia {background-color: #cef9c7
}
Les premier et troisième paragraphes sont fortement inspirés de Wikipédia. Afin de le mettre en exergue, on souhaite afficher leur fond en vert clair.
Comment obtenir ce résultat sans modifier le fichier CSS ?
On ajoute simplement l'attribut class="wikipedia" aux deux balises paragraphe dans le fichier HTML.
Usage des div et span en CSS
Rappel : div et span
Méthode :
On peut utiliser les div et span et les attributs class pour associer des règles CSS de mise en forme du type div.class.
Exemple :
<p><span class="standard-name">Cascading Style Sheets</span> (<span class="acronym">CSS</span>) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.</p>
Exemple :
.page-title {font-family: Arial;
font-size: 150%;
}
p {font-family: Monospace;
}
.standard-name {text-decoration: underline dotted;
}
.acronym {text-shadow: 1px 1px 2px yellow;
}
.source {font-weight: bold;
}
Méthode :
Pour les classes qui ne concernent que des div ou des span, il est fréquent d’omettre le nom de l'élément et d'écrire directement .class dans la CSS.
Complément : div
Complément : span
Exercice
Données
Soit les informations suivantes relatives à l'histoire de l'informatique :
- 3000 Octogone de Fuxi : Il contient les huit premiers nombres représentés sous forme binaire par des traits.
-1750 Code d'Hammourabi : Le roi de Babylone a fait graver une stèle composée d'un ensemble de sentences royales sous une forme de type « si alors ».
-330 Logique : La logique est définie par le philosophe grec Aristote.
Proposez un fichier HTML permettant d'intégrer ces informations, en utilisant uniquement des éléments div et span dans le body.
<html lang="fr">
<head>
<title>Histoire de l'informatique</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="event"><span class="date">- 3000</span> <span class="title"> Octogone de Fuxi</span> : <span class="description">Il contient les huit premiers nombres représentés sous forme binaire par des traits.</span></div>
<div class="event"><span class="date">-1750</span> <span class="title">Code d'Hammourabi</span> : <span class="description">Le roi de Babylone a fait graver une stèle composée d'un ensemble de sentences royales sous la forme : SI {personne} ET {action} ALORS {sentence}.</span></div>
<div class="event"><span class="date">-330</span> <span class="title">Logique</span> : <span class="description">La logique est définie par le philosophe grec Aristote.</span></div>
</body>
</html>
Proposez une feuille de style CSS permettant l'affichage suivant.
La couleur par défaut est gray.
Chaque événement comporte :
une bordure à gauche (border-left) grise de 2 pixels (solid gray 2px),
un décalage à gauche par rapport à cette bordure (padding-left) de la moitié de la taille de la police (0.5em),
une marge sous le bloc (margin-bottom) de la moitié de la taille de la police.
Les dates sont en gras.
Les titre sont en noir.
Les description sont en italique.
color: gray
margin-bottom: 0.5em
padding-left: 0.5em
border-left: solid gray 2px
font-weight: bold
font-style: italic
body {color: gray;
}
.event {border-left: solid gray 2px;
padding-left: 0.5em;
margin-bottom: 0.5em;
}
.date {font-weight: bold;
}
.title {color: black;
}
.description {font-style: italic;
}
Exercice
Soit le fichier HTML et la CSS associée suivants.
<html lang="fr">
<head>
<title>Histoire de l'informatique</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="event"><span class="date">- 3000</span> <span class="title"> Octogone de Fuxi</span> : <span class="description">Il contient les huit premiers nombres représentés sous forme binaire par des traits.</span></div>
<div class="event"><span class="date">-1750</span> <span class="title">Code d'Hammourabi</span> : <span class="description">Le roi de Babylone a fait graver une stèle composée d'un ensemble de sentences royales sous la forme : SI {personne} ET {action} ALORS {sentence}.</span></div>
<div class="event"><span class="date">-330</span> <span class="title">Logique</span> : <span class="description">La logique est définie par le philosophe grec Aristote.</span></div>
</body>
</html>
body {color: gray;
}
.event {border-left: solid gray 2px;
padding-left: 0.5em;
margin-bottom: 0.5em;
}
.date {font-weight: bold;
}
.title {color: black;
}
.description {font-style: italic;
}
Ajoutez un élément div qui englobe les divs de classe event. Associez-lui un id de valeur events.
<html>
<head>
<title>Histoire de l'informatique</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="events">
<div class="event"><span class="date">- 3000</span> <span class="title"> Octogone de Fuxi</span> : <span class="description">Il contient les huit premiers nombres représentés sous forme binaire par des traits.</div>
<div class="event"><span class="date">-1750</span> <span class="title">Code d'Hammourabi</span> : <span class="description">Le roi de Babylone a fait graver une stèle composée d'un ensemble de sentences royales sous la forme : SI {personne} ET {action} ALORS {sentence}.</div>
<div class="event"><span class="date">-330</span> <span class="title">Logique</span> : <span class="description">La logique est définie par le philosophe grec Aristote.</div>
</div>
</body>
</html>
Ajoutez une règle CSS pour définir le div d'id events comme un conteneur flexible (display: flex) de type ligne (flex-direction: row).
#events {display: flex;
flex-direction: row;
}