HTML CSS

Le style peut être ajouté à des éléments HTML de 3 façons différentes:

1ère méthode (Inline) : en utilisant un attribut de style dans des éléments HTML
2ème méthode (Interne) : en utilisant un élément <style> dans le code HTML (dans l'entête <head>)
3ème méthode (Externe) : en utilisant un ou plusieurs fichiers CSS externes

La façon la plus courante d'ajouter style est de garder les styles dans les fichiers CSS séparés.

1ère méthode : Inline

Inline est utile pour appliquer un style unique à un élément HTML unique:

Inline utilise l'attribut de style.

Ce style de ligne change la couleur du texte d'une seule position:

		<h1 style="color:blue">Je suis un titre en bleu</h1>

Voir

2ème méthode : CSS interne

Une feuille de style interne peut être utilisée pour définir un style commun à tous les éléments HTML sur une seule et même page.

Le style interne est défini dans la section <head> d'une page HTML en utilisant la balise <style>:

<!DOCTYPE html>
<html>
<head>

  <style>
  body {background-color:lightgrey;}
  h1   {color:blue;}
  p    {color:green;}
  </style>

</head>

<body>
<h1>Je suis un titre de niveau 1</h1>
<p>Je suis un paragraphe</p>
</body>

</html>

Voir

3ème méthode : CSS externe

Les feuilles de styles externes sont idéales lorsque le style est appliqué à de nombreuses pages.

Avec des feuilles de style externes, vous pouvez changer l'apparence d'un site Web entier en changeant un seul fichier !

Les styles externes sont définis dans un fichier CSS externe, puis liés à la section <head> d'une page HTML:

------------------------------
Fichier HTML : exemple012.html
------------------------------

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

<body>
<h1>Je suis un titre de niveau 1</h1>
<p>Je suis un paragraphe</p>
</body>
</html>


---------------------------
Fichier CSS : messtyles.css
---------------------------

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

Voir