Tutoriel HTML

ACCUEIL HTML Introduction HTML Éditeurs HTML HTML de base Éléments HTML Attributs HTML En-têtes HTML Paragraphes HTML Styles HTML Formatage HTML Citations HTML Commentaires HTML Couleurs HTML HTMLCSS Liens HTML Images HTML Icône de favori HTML Tableaux HTML Listes HTML Bloc HTML et Inline Cours HTML Identifiant HTML Iframes HTML HTMLJavaScript Chemins d'accès aux fichiers HTML Tête HTML Mise en page HTML HTML réactif Code informatique HTML Sémantique HTML Guide de style HTML Entités HTML Symboles HTML Émojis HTML Jeu de caractères HTML Encodage d'URL HTML HTML contre XHTML

Formulaires HTML

Formulaires HTML Attributs de formulaire HTML Éléments de formulaire HTML Types d'entrée HTML Attributs d'entrée HTML Attributs du formulaire de saisie HTML

Graphiques HTML

Canevas HTML HTML SVG

Médias HTML

Médias HTML Vidéo HTML Audio HTML Modules externes HTML YouTube HTML

API HTML

Géolocalisation HTML Glisser/déposer HTML Stockage Web HTML Travailleurs Web HTML HTML SSE

Exemples HTML

Exemples HTML Questionnaire HTML Exercices HTML Certificat HTML Résumé HTML Accessibilité HTML

Références HTML

Liste de balises HTML Attributs HTML Attributs globaux HTML Prise en charge du navigateur HTML Événements HTML Couleurs HTML Canevas HTML HTML Audio/Vidéo Doctypes HTML Jeux de caractères HTML Encodage d'URL HTML Codes de langue HTML Messagerie HTTP Méthodes HTTP Convertisseur PX en EM Raccourcis clavier

Styles HTML - CSS


CSS signifie feuilles de style en cascade.

CSS économise beaucoup de travail. Il peut contrôler la mise en page de plusieurs pages Web à la fois.


CSS = Styles et Couleurs

Manipuler du texte
Couleurs,  Boîtes


Qu'est-ce que CSS ?

Les feuilles de style en cascade (CSS) sont utilisées pour formater la mise en page d'une page Web.

Avec CSS, vous pouvez contrôler la couleur, la police, la taille du texte, l'espacement entre les éléments, la manière dont les éléments sont positionnés et disposés, les images d'arrière-plan ou les couleurs d'arrière-plan à utiliser, différents affichages pour différents appareils et tailles d'écran, et beaucoup plus!

Conseil : Le mot cascade signifie qu'un style appliqué à un élément parent s'appliquera également à tous les éléments enfants du parent. Ainsi, si vous définissez la couleur du corps du texte sur "bleu", tous les titres, paragraphes et autres éléments de texte du corps auront également la même couleur (sauf si vous spécifiez autre chose) !


Utiliser CSS

CSS peut être ajouté aux documents HTML de 3 manières :

  • Inline - en utilisant l' styleattribut à l'intérieur des éléments HTML
  • Interne - en utilisant un <style>élément dans la <head>section
  • Externe - en utilisant un <link> élément pour créer un lien vers un fichier CSS externe

La façon la plus courante d'ajouter du CSS est de conserver les styles dans des fichiers CSS externes. Cependant, dans ce didacticiel, nous utiliserons des styles en ligne et internes, car cela est plus facile à démontrer et plus facile à essayer vous-même.


CSS en ligne

Un CSS en ligne est utilisé pour appliquer un style unique à un seul élément HTML.

Un CSS en ligne utilise l' styleattribut d'un élément HTML.

L'exemple suivant définit la couleur du texte de l' <h1>élément sur bleu et la couleur du texte de l' <p>élément sur rouge :

Exemple

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


CSS interne

Un CSS interne est utilisé pour définir un style pour une seule page HTML.

Un CSS interne est défini dans la <head>section d'une page HTML, au sein d'un <style>élément.

L'exemple suivant définit la couleur du texte de TOUS les <h1>éléments (sur cette page) sur bleu et la couleur du texte de TOUS les <p>éléments sur rouge. De plus, la page s'affichera avec une couleur de fond "powderblue": 

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS externe

Une feuille de style externe est utilisée pour définir le style de nombreuses pages HTML.

Pour utiliser une feuille de style externe, ajoutez un lien vers celle-ci dans la <head>section de chaque page HTML :

Exemple

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

La feuille de style externe peut être écrite dans n'importe quel éditeur de texte. Le fichier ne doit contenir aucun code HTML et doit être enregistré avec une extension .css.

Voici à quoi ressemble le fichier "styles.css":

"styles.css":

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Astuce : Avec une feuille de style externe, vous pouvez changer l'apparence de tout un site Web, en changeant un seul fichier !


Couleurs, polices et tailles CSS

Ici, nous allons démontrer certaines propriétés CSS couramment utilisées. Vous en apprendrez plus à leur sujet plus tard.

La propriété CSS colordéfinit la couleur du texte à utiliser.

La propriété CSS font-familydéfinit la police à utiliser.

La propriété CSS font-sizedéfinit la taille du texte à utiliser.

Exemple

Utilisation des propriétés CSS color, font-family et font-size :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Bordure CSS

La propriété CSS borderdéfinit une bordure autour d'un élément HTML.

Conseil : Vous pouvez définir une bordure pour presque tous les éléments HTML.

Exemple

Utilisation de la propriété de bordure CSS : 

p {
  border: 2px solid powderblue;
}

Rembourrage CSS

La propriété CSS paddingdéfinit un rembourrage (espace) entre le texte et la bordure.

Exemple

Utilisation des propriétés CSS border et padding :

p {
  border: 2px solid powderblue;
  padding: 30px;
}

Marge CSS

La propriété CSS margindéfinit une marge (espace) à l'extérieur de la bordure.

Exemple

Utilisation des propriétés CSS border et margin :

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Lien vers le CSS externe

Les feuilles de style externes peuvent être référencées avec une URL complète ou avec un chemin relatif à la page Web en cours.

Exemple

Cet exemple utilise une URL complète pour créer un lien vers une feuille de style :

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Exemple

Cet exemple établit un lien vers une feuille de style située dans le dossier html du site Web actuel : 

<link rel="stylesheet" href="/html/styles.css">

Exemple

Cet exemple établit un lien vers une feuille de style située dans le même dossier que la page actuelle :

<link rel="stylesheet" href="styles.css">

Vous pouvez en savoir plus sur les chemins de fichiers dans le chapitre Chemins de fichiers HTML .


Résumé du chapitre

  • styleUtiliser l' attribut HTML pour le style en ligne
  • <style>Utilisez l' élément HTML pour définir le CSS interne
  • Utilisez l'élément HTML <link>pour faire référence à un fichier CSS externe
  • Utilisez l'élément HTML <head>pour stocker les éléments <style> et <link>
  • Utiliser la propriété CSS colorpour les couleurs du texte
  • Utiliser la propriété CSS font-familypour les polices de texte
  • Utiliser la propriété CSS font-sizepour les tailles de texte
  • Utiliser la propriété CSS borderpour les bordures
  • Utilisez la propriété CSS paddingpour l'espace à l'intérieur de la bordure
  • Utilisez la propriété CSS marginpour l'espace en dehors de la bordure

Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre didacticiel CSS .


Exercices HTML

Testez-vous avec des exercices

Exercer:

Utilisez CSS pour définir la couleur d'arrière-plan du document (corps) sur jaune.

<!DOCTYPE html>
<html>
<tête>
<style>

  :Jaune;

</style>
</head>
<body>

<h1>Ma page d'accueil</h1>

</body>
</html>


Balises de style HTML

Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource

Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .