HTML (HyperText Markup Language) est un langage de balisage permettant de définir la structure de pages web.
L'extension d'un fichier HTML est .html ou .html.
CSS (Cascading Style Sheet) est un langage de mise en forme permettant de définir le style des éléments HTML.
L'extension d'un fichier CSS est .css.
Voici la structure d'un fichier HTML basique :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
La première instruction <!doctype html> indique la version de HTML utilisée. Pour HTML5, la version actuelle, on utilisera toujours cette notation.
On ouvre ensuite une balise <html> qui indique le début du document, que l'on fermera tout à la fin avec </html>.
La balise <head> contient des données qui ne sont pas affichées sur la page web : les méta-données. C'est aussi ici qu'on importera nos feuilles de style (CSS).
Voici une liste non exhaustive de balises <meta> à connaître :
<title></title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">viewport).<meta name="description" content="">
La balise <body> accueillera enfin le contenu visible du document HTML.
Les éléments HTML servent à structurer votre page. Il en existe deux grandes catégories : les blocs et les éléments en ligne.
Certains éléments ont également une fonction sémantique, et les utiliser à bon escient favorisera le référencement naturel de votre site.
Les éléments de type "bloc" sont utilisés pour structurer le document. Ils se placent par défaut les uns en-dessous des autres.
| Balise | Fonction sémantique |
|---|---|
div | Élément générique sans fonction particulière |
p | Paragraphe |
h1 | Titre de premier niveau |
h2 | Titre de deuxième niveau |
h3 | Titre de troisième niveau |
h4 | Titre de quatrième niveau |
h5 | Titre de cinquième niveau |
h6 | Titre de sixième niveau |
ul | Liste non ordonnée |
ol | Liste ordonnée |
li | Élément de liste |
table | Tableau |
main | Contenu principal de la page |
section | Section de page, groupe d'éléments |
nav | Groupe d'éléments de navigation |
header | En-tête |
footer | Pied de page |
article | Article, contenu indépendant dans le document |
aside | Aparté, contenu n'ayant pas de rapport direct avec le document |
blockquote | Citation |
figure | Indique un média, une image, ou un schéma |
Les deux exemples ci-dessous sont strictement identiques en termes de mise en page. Le second utilise en revanche un balisage plus logique d'un point de vue sémantique.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ma première page</title>
</head>
<body>
<ul>
<li>Accueil</li>
<li>À propos</li>
<li>Contact</li>
</ul>
<h1>Titre de ma page</h1>
<h2>Titre de section</h2>
<p>“Lorem ipsum dolor sit amet.”</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ma première page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Accueil</li>
<li>À propos</li>
<li>Contact</li>
</ul>
</nav>
<h1>Titre de ma page</h1>
</header>
<section>
<h2>Titre de section</h2>
<blockquote>
<p>“Lorem ipsum dolor sit amet.”</p>
</blockquote>
</section>
</body>
</html>
header, nav et section pour regrouper nos éléments de façon logique, et la balise blockquote pour indiquer qu'un texte est une citation.Les éléments en ligne sont généralement utilisés à l'intérieur d'un texte pour mettre en forme certains éléments ou pour insérer des liens hypertextes.
| Balise | Fonction sémantique |
|---|---|
span | Élément générique sans fonction particulière |
strong | Indique un élément important dans un texte, en gras |
em | Indique un élément en emphase dans un texte, en italique |
a | Permet de créer des liens hypertextes vers d'autres pages web |
button | Bouton |
label | Libellé d'un élément de formulaire |
sup | Exposant (x2) |
sub | Indice (x2) |
code | Ligne de code |
cite | Auteur d'une citation |
Certains éléments ne peuvent pas accueillir de contenus et n'ont par conséquent pas de balise de fermeture.
| Balise | Fonction |
|---|---|
br | Retour à la ligne |
img | Image |
input | Élément de formulaire |
hr | Barre de séparation horizontale |
meta | Méta-description |
link | Définit une ressource externe, généralement une feuille de style |
Ces listes ne sont pas exhaustives et présentent les éléments les plus fréquemment utilisés.
Retrouvez la liste complète des éléments HTML sur le Mozilla Developer Network.
Un attribut est une information placée à l'intérieur de la balise ouvrante pour paramétrer l'élément. Un attribut doit toujours avoir un nom et une valeur, représentés de la façon suivante : attribut="valeur"
Les quatre attributs suivants sont des attributs génériques qui fonctionnent sur (presque) tous les éléments HTML :
| Attribut | Fonction |
|---|---|
id | Définit un identifiant unique |
class | Définit une ou plusieurs classe(s) CSS, séparées par des espaces |
style | Définit une liste de styles CSS |
title | Définit un titre |
On utilisera par exemple la notation suivante pour attribuer l'identifiant menu-principal et la classe menu à un élément de navigation :
<nav id="menu-principal" class="menu">
<!-- Code HTML du menu -->
</nav>
D'autres attributs existent et sont spécifiques à certaines balises, comme l'attribut alt qui permet de définir un texte alternatif pour une image.
Un lien hypertexte est défini par la balise <a>. Le contenu placé entre la balise ouvrante et la balise fermante sera cliquable et renverra vers le contenu indiqué dans l'attribut href.
Vous pouvez également préciser dans quelle fenêtre ouvrir le lien avec l'attribut target.
Plusieurs valeurs sont possibles mais seule la valeur _blank, qui permet d'ouvrir le lien dans une nouvelle fenêtre, est couramment utilisée.
| Attribut | Fonction |
|---|---|
href | Définit la destination du lien |
target | Définit la cible du lien (_self par défaut, _blank pour une nouvelle fenêtre) |
L'attribut href peut contenir un lien absolu, un lien relatif ou une ancre.
http:// ou https://# suivi de l'identifiant du bloc pour créer un lien direct vers cet élément dans la page<a href="https://google.com" target="_blank">
Aller sur Google
</a>
Une balise <a> ne contient pas obligatoirement du texte. Elle peut contenir n'importe quel autre élément HTML à l'exception d'une autre balise <a>.
Pour afficher une image dans un document HTML, on utilise la balise <img>. Il s'agit d'un élément simple qui ne dispose donc pas de balise fermante.
| Attribut | Fonction |
|---|---|
src | Définit la source de l'image |
alt | Définit un texte alternatif affiché si la source est introuvable |
width | Définit la largeur de l'image en pixels |
height | Définit la hauteur de l'image en pixels |
Comme pour le lien, la source de l'image peut être définie de façon absolue ou relative.
<img src="https://via.placeholder.com/150" width="150" height="150" alt="Image d'exemple">
Le langage CSS vous permet d'appliquer des styles à vos éléments HTML à l'aide de propriétés. Il en existe une multitude qui permettent de modifier les tailles, les positions, les couleurs, les bordures, etc.
Vous pouvez attribuer des styles à un élément en utilisant l'attribut HTML style. La nomenclature consiste à séparer les propriétés par des point-virgules de la façon suivante propriete1: valeur; propriete2: valeur;
<p style="text-align: center; color: red;">
Lorem ipsum
</p>
En règle générale, on évite cependant au maximum d'appliquer des styles de cette façon afin de ne pas dupliquer inutilement du code.
La meilleure solution consiste à créer une feuille de style contenant des règles que l'on appliquera à des éléments du même type à l'aide de sélecteurs.
Une règle est construite de la façon suivante :
selecteur {
propriete: valeur;
}
Pour utiliser du CSS dans un document HTML, deux possibilités existent :
<style> dans l'élément <head>.css et l'importer à l'aide d'une balise <link>
La deuxième solution est bien sûr recommandée puisqu'elle permet d'éviter de mieux organiser son code.
En admettant que votre fichier CSS se nomme style.css et qu'il soit situé dans le même répertoire que votre document HTML, il suffira d'ajouter la ligne suivante dans l'élément <head> de votre document :
<link rel="stylesheet" href="style.css">
Vous pouvez importer autant de feuilles de style que nécessaire en utilisant plusieurs éléments <link>.
Pour définir une règle CSS, on commence par déterminer le(s) élément(s) ciblé(s) à l'aide d'un sélecteur.
Pour définir le style d'un élément HTML, par exemple une balise <p>, il suffit d'indiquer simplement le nom de l'élément p comme sélecteur.
Pour sélectionner une classe, on précédera son nom d'un point . et pour un identifiant, on précédera son nom d'un dièse #.
element.classe#identifiantOn peut ensuite combiner ces sélecteurs avec des opérateurs pour construire des règles plus précises.
Voici un tableau récapitulatif des sélecteurs les plus courants :
| Sélecteur | Exemple | Description |
|---|---|---|
* | * | Sélectionne tous les éléments |
element | p | Sélectionne tous les éléments <p> |
element, element | h1, h2 | Sélectionne tous les éléments <h1> et les éléments <h2> |
element element | section h2 | Sélectionne tous les éléments <h2> se trouvant à l'intérieur d'un élément <section> |
element > element | section > h2 | Sélectionne tous les éléments <h2> se trouvant directement à l'intérieur d'un élément <section> |
element + element | p + h2 | Sélectionne tous les éléments <h2> se trouvant juste après un élément <p> |
.classe | .box | Sélectionne tous les éléments ayant la classe box |
.classe1.classe2 | .box.button | Sélectionne tous les éléments ayant à la fois la classe box et la classe button |
element.classe | a.button | Sélectionne tous les éléments <a> ayant la classe button |
#identifiant | #menu | Sélectionne l'élément ayant l'id menu |
On peut combiner ces opérateurs à l'infini et créer des règles complexes. On peut par exemple écrire cette règle :
#container div.box > a.button.is-primary {
/* ... */
}
<a> ayant les classes button et is-primary, directement à l'intérieur d'éléments <div> ayant la classe box, à l'intérieur de l'élément qui a l'identifiant container
Pour cibler un état spécifique d'un sélecteur, on peut se servir des pseudo-classes. Une pseudo-classe est un mot-clé précédé par deux-points : ajouté à la fin du sélecteur. Les pseudo-classes suivantes sont fréquemment utilisées :
| Sélecteur | Exemple | Description |
|---|---|---|
:hover | a:hover | Sélectionne les éléménts <a> survolés par la souris |
:active | a:active | Sélectionne les éléménts <a> cliqués |
:checked | input:checked | Sélectionne les éléménts <input> cochés (pour les checkboxes) |
:disabled | input:disabled | Sélectionne les éléménts <input> désactivés |
:required | input:required | Sélectionne les éléménts <input> requis |
:focus | input:focus | Sélectionne les éléménts <input> actifs |
:first-child | p:first-child | Sélectionne les éléménts <p> qui sont en première position de leurs parents |
:last-child | p:last-child | Sélectionne les éléménts <p> qui sont en dernière position de leurs parents |
:only-child | p:only-child | Sélectionne les éléménts <p> qui sont seuls à l'intérieur de leurs parents |
:nth-child(n) | p:nth-child(4) | Sélectionne les éléménts <p> qui sont en 4ème position dans leurs parents |
:not(selecteur) | a:not(.button) | Sélectionne les éléménts <a> qui n'ont pas la classe button |
Il existe une multitude de propriétés dont vous pouvez trouver la liste complète sur le site W3Schools.
Nous verrons ici les plus utiles et les plus communes d'entre elles.
La propriété color permet de changer la couleur du texte à l'intérieur d'un élément. La propriété background-color change la couleur de fond de l'élément.
Une couleur est définie par son code hexadécimal, RGB, RGBA, HSL, HSLA ou l'une des 140 couleurs nommées.
<div style="color: darkblue;">
darkblue
</div>
<div style="color: #EE964B;">
#EE964B
</div>
<div style="background-color: rgb(40,175,176); color: white;">
rgb(40,175,176)
</div>
<div style="background-color: hsl(334,91%,40%); color: white;">
hsl(334,91%,40%)
</div>
| Propriété | Valeurs possibles | Description |
|---|---|---|
font-family | font | Nom de la police de caractères |
font-size | size | Taille de police |
font-weight | normal bold bolder lighter 100—900 | Graisse de police |
font-style | normal italic oblique | Style de police |
La propriété font-family permet d'indiquer plusieurs valeurs séparées par des virgules. La première police renseignée sera alors utilisée en priorité, et les autres seront désignées comme polices de "secours" au cas où la principale serait introuvable.
html {
font-family: Roboto, Arial, sans-serif;
}
Il convient de toujours indiquer serif ou sans-serif en dernier recours pour laisser le système utiliser sa police avec ou sans empattements par défaut.
La propriété font-weight dispose de valeurs prédéfinies. Vous pouvez également utiliser des multiples de 100 qui correspondent aux graisses suivantes :
Les tailles de typographies peuvent utiliser différentes unités. Pour un usage web, l'unité de base est le pixel, symbolisé px.
Pour les typographies, une bonne pratique est d'utiliser les unités em et rem.
L'unité em est relative à l'élément parent tandis que rem est relative à la racine du document, soit l'élément <html>.
html {
font-size: 12px;
}
section {
font-size: 1.5rem; /* 18px */
}
section h2 {
font-size: 2em; /* 36px */
}
section p {
font-size: 1rem; /* 12px */
}
Il est préférable d'utiliser le rem pour éviter toute confusion. Vous n'aurez alors qu'à définir votre taille de texte courant pour l'élément html et utiliser des multiples de cette valeur partout ailleurs.
| Propriété | Valeurs possibles | Description |
|---|---|---|
text-align | left center right justify | Alignement du texte |
text-decoration | none underline overline line-through | Soulignement du texte |
text-transform | none capitalize uppercase lowercase | Transformation du texte |
text-shadow | none x y blur color | Ombrage du texte |
Notez bien que la propriété text-align n'a d'effet que sur les éléments en ligne. Par conséquent, les enfants de types bloc ou flex ne seront pas affectés par l'alignement.
| Propriété | Valeurs possibles | Description |
|---|---|---|
margin | size auto | Marges extérieures |
padding | size | Marges intérieures |
border | size type color | Bordures |
border-radius | size | Arrondi de la bordure |
box-sizing | content-box border-box | Prise en compte du padding et des bordures dans la taille de l'élément |
La propriété margin détermine les marges extérieures autour d'un élement, la propriété padding détermine ses marges intérieures et la propriété border ses bordures.
Pour chacune de ces propriétés, on peut préciser un côté spécifique en ajoutant le suffixe -top, -left, -bottom ou -right.
Les propriétés margin, padding et border sont des raccourcis pour définir les valeurs pour les quatre côtés :
margin : margin-top margin-right margin-bottom margin-leftpadding : padding-top padding-right padding-bottom padding-leftborder : border-top border-right border-bottom margin-leftOn peut utiliser ces raccourcis de plusieurs façons :
top et bottom et la seconde pour left et righttop, right, bottom, left (sens des aiguilles d'une montre).box {
/* 20px de chaque côté */
margin: 20px;
}
.box {
/* 20px en haut et en bas */
/* 0 à gauche et à droite */
margin: 20px 0;
}
.box {
/* 20px en haut */
/* 0 à droite */
/* 10px en bas */
/* 5px à gauche bas */
margin: 20px 0 10px 5px;
}
Les propriétés margin peuvent recevoir la valeur auto pour déterminer automatiquement les marges en fonction de l'espace disponible dans le bloc parent. Si la valeur auto n'a aucun effet en haut et en bas, elle est utilisée à gauche et à droite pour centrer l'élément à l'intérieur de son parent.
body {
border: 1px solid red;
}
.box {
width: 40px;
height: 40px;
background-color: blue;
/* 20px en haut et en bas */
/* Automatique à gauche et à droite */
margin: 20px auto;
}
Le padding fonctionne exactement pareil que les marges extérieures mais agira sur les marges intérieures.
La propriété border prend trois valeurs : l'épaisseur de la bordure, sa forme et sa couleur. Il s'agit en réalité d'un raccourci pour définir en une seule fois les propriétés border-width, border-style et border-color. Les deux règles suivantes sont ainsi identiques :
.box {
border: 2px solid #ffcc00;
}
.box {
border-width: 2px;
border-style: solid;
border-color: #ffcc00;
}
La propriété border est elle-même un raccourci pour spécifier en une seule fois les propriétés border-top, border-left, border-bottom et border-right.
Par défaut, si vous attribuez du padding ou des bordures à un élément de taille fixe, celles-ci s'ajouteront à la taille totale de votre élément. Pour éviter cela, vous devez utiliser la propriété box-sizing avec la valeur border-box.
Dans l'exemple ci-dessous, l'élément .box a une largeur de 100% et des marges intérieures de 20px. Par défaut, le padding est ajouté à la largeur du bloc qui est donc large de 100% + 40px. Par conséquent, le bloc dépasse de son conteneur.
body {
border: 1px solid red;
}
.box {
width: 100%;
background-color: lightblue;
padding: 20px;
}
En ajoutant la propriété box-sizing avec la valeur border-box, on indique que le padding doit être comptabilisé dans la largeur totale de l'élément.
body {
border: 1px solid red;
}
.box {
width: 100%;
background-color: lightblue;
padding: 20px;
box-sizing: border-box;
}
Par défaut, tous les éléments HTML sont positionnés de façon relative, les uns par rapport aux autres. La propriété position permet de modifier ce comportement.
| Valeur | Description |
|---|---|
static | Valeur par défaut |
relative | Identique à la valeur static |
absolute | L'élément est positionné par rapport à son premier élément parent non statique |
fixed | L'élément est positionné par rapport à la fenêtre |
Un élément positionné avec les valeurs absolute ou fixed est indépendant du reste de la page. Les éléments qui le suivent dans le document ne prendront pas en compte ses dimensions et passeront en-dessous. Il pourra ensuite être positionné en utilisant les propriétés top, left, bottom et right.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Position absolue - Exemple</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="beige">
<p>Lorem ipsum dolor sit amet.</p>
</section>
<section class="pink">
<div class="square"></div>
</section>
</body>
</html>
Dans l'exemple ci-dessus, nous avons créé deux sections dont l'une contient un carré. En CSS, nous déclarons les règles suivantes pour donner au carré une largeur et une hauteur de 40px et une couleur de fond bleue :
section {
height: 150px;
}
section.beige {
background-color: beige;
}
section.pink {
background-color: pink;
}
.square {
width: 40px;
height: 40px;
background-color: blue;
}
Lorem ipsum dolor sit amet
Si l'on positionne le carré bleu de façon absolue avec des valeurs de 10px en haut et à gauche, celui-ci se positionnera par rapport à l'élément body, et non à l'élément <section> parent.
section {
height: 150px;
}
section.beige {
background-color: beige;
}
section.pink {
background-color: pink;
}
.square {
position: absolute;
top: 10px;
left: 10px;
width: 40px;
height: 40px;
background-color: blue;
}
Lorem ipsum dolor sit amet
Un élément positionné de façon absolue prend en effet pour référence son premier élément parent non statique. Pour que le carré soit placé à 10px en haut à gauche de la section rose, il faut définir cette dernière comme étant en position relative.
section {
height: 150px;
}
section.beige {
background-color: beige;
}
section.pink {
position: relative;
background-color: pink;
}
.square {
position: absolute;
top: 10px;
left: 10px;
width: 40px;
height: 40px;
background-color: blue;
}
Lorem ipsum dolor sit amet
La propriété display permet de modifier l'affichage d'un élément. Il existe une multitude de valeurs possibles mais retenez surtout les suivantes :
| Valeur | Description |
|---|---|
block | Affiche l'élément comme un bloc |
inline | Affiche l'élément comme un élément en ligne |
flex | Affiche l'élément comme un conteneur flexible |
none | Masque l'élément |
La valeur flex indique que l'élément sélectionné est un conteneur flexible. Il sera alors possible d'utiliser les propriétés suivantes qui permettront d'indiquer comment ses enfants directs de placeront les uns par rapport aux autres :
| Propriété | Valeurs possibles | Description |
|---|---|---|
flex-direction | row row-reverse column column-reverse | Direction des éléments |
flex-wrap | nowrap wrap wrap-reverse | Détermine si les éléments s'affichent sur une seule ligne ou s'ils retournent à la ligne quand l'espace manque |
justify-content | flex-start flex-end center space-between space-around space-evenly | Définit l'alignement des éléments par rapport à l'axe principal |
align-items | flex-start flex-end center stretch baseline | Définit l'alignement des éléments par rapport à l'axe secondaire |
align-content | flex-start flex-end center stretch baseline | Définit l'alignement des lignes d'éléments par rapport à l'axe secondaire lorsque les éléments sont sur plusieurs lignes |
Le site CSS Tricks a rédigé un article très détaillé et illustré sur l'utilisation des conteneurs flexibles.
Guide d'utilisation de Flexbox sur CSS Tricks
La propriété transition permet de créer des interpolations sur les changements de valeur de certaines propriétés d'un élément.
Les transitions sont souvent utilisées pour adoucir un changement de style lors du passage de la souris sur un élément. Dans ce cas précis, il suffit de définir les styles de base de l'élément et ceux au passage de la souris avec le sélecteur :hover, puis d'ajouter la propriété transition à l'élément avec pour valeur le nom de la propriété à interpoler suivi de la durée de la transition.
Voici un exemple très simple de transition sur la propriété background-color avec une durée d'une seconde :
.button {
display: inline-block;
background-color: pink;
padding: 5px 15px;
border-radius: 4px;
transition: background-color 1s;
}
.button:hover {
background-color: lightblue;
}
Vous pouvez attribuer des transitions sur plusieurs propriétés en les séparant par des virgules.
.button {
display: inline-block;
background-color: pink;
padding: 5px 15px;
border-radius: 4px;
transition: background-color 500ms, border-radius 2s;
}
.button:hover {
background-color: lightblue;
border-radius: 20px;
}
Plus simple encore, vous pouvez utiliser le mot-clé all pour interpoler toutes les propriétés altérées :
.button {
display: inline-block;
background-color: pink;
padding: 5px 15px;
border-radius: 4px;
transition: all 1s;
}
.button:hover {
background-color: lightblue;
padding: 5px 25px;
border-radius: 20px;
}
Certaines propriétés ne supportent pas les transitions. Par exemple, il est impossible d'interpoler un changement de display, de position, de font-family, etc.
Les media queries sont des instructions qui permettent d'associer des règles CSS à des supports. On peut par exemple les utiliser pour indiquer qu'un groupe de règles ne concerne que la version imprimée du document, ou bien qu'un autre groupe ne concerne que les écrans dont la taille est inférieure à 800px.
La définition d'une media query commence toujours par le mot-clé @media suivi du type de support ciblé. La plupart du temps, on utilisera le support screen à moins que l'on souhaite cibler une version imprimée (print) ou, encore moins fréquent, un téléviseur (tv).
@media print {
html {
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
}
On peut ensuite ajouter des règles supplémentaires en utilisant l'opérateur and. Généralement, les media queries étant utilisées pour gérer le responsive, ces règles supplémentaires concernent des tailles d'écrans. On utilise pour cela min-width et max-width de la façon suivante :
.flex-container {
display: flex;
flex-direction: row;
}
@media screen and (max-width: 720px) {
.flex-container {
flex-direction: column;
}
}
flex-container sont affichés en colonne sur les écrans de largeur inférieure à 720pxLe site Alsacréations a rédigé un article très détaillé au sujet des media queries.
Les media queries CSS3 sur Alsacréations