Tutoriel CSS

CSS

Découvez les bases du CSS dans ce tutoriel.

HTML HTML5 Dreamweaver Bootstrap PHP

Ou insérer le code CSS ?

Dans ce tutoriel, nous allons voir où mettre notre code CSS pour qu'il soit correctement affiché et interprété.

Les différentes possibilités pour utiliser CSS

Pour mettre en forme nos éléments HTML, nous pourrons utiliser différentes possibilités.

  1. CSS stocké dans une feuille de style externe
  2. Style CSS intégré dans la page
  3. Style CSS intégré dans la balise

1. CSS stocké dans une feuille de style externe

C'est le cas, le plus intéressant !

Si vos régles ne sont pas stockées dans une feuille de style externe, en cas de modification de ces mêmes régles, votre travail va vite devenir fastidieux, surtout si elles sont présentes sur un grand nombre de page HTML.

Placer le lien vers votre feuille de style dans la balise head.

Exemple

<head>
  <link rel="stylesheet" type="text/css" href="ma_feuille_de_style.css" /> <!-- Lien vers ma feuille de style nommé ma_feuille_de_style CSS -->
</head>

Principaux attributs

Nom Détail Importance
rel rel="stylesheet" Indispensable
type type="text/css

Indique le type de document

Indispensable
href

href="ma_feuille_de_style.css"
Chemin vers votre feuille de tyle

Indispensable

2. Style CSS intégré dans la page

Nous utilisons la balise style

Dans la balise entrante, nous précisons le type avec type="text/css".

Et enfin, dans la balise sortante, nous fermons la balise style avec le caratére "/", ce qui donne </style>.

Ce code est à placer dans la balise head de votre page.

Exemple avec notre classe text-vert

<head>
<style type="text/css">
  .TexteVert { /* Classe .TexteVert */
  font-family: "Arial Black", Gadget, sans-serif; /* Police de caractére*/
  color: #9C3; /* Couleur du texte*/
  }
</style>
</head>

3. Style CSS intégré dans la balise

Nous allons utiliser l'attribut style que nous appliquons sur une balise HTML (p dans l'exemple ci dessous)
Puis entre les " " nous ajoutons notre code CSS

Exemple

Texte gras et italique sur un fond rose avec un remplissage de 5px

Code CSS à insérer dans le HTML

<p style="font-weight:bold; font-style:italic; background-color:#F9F; padding:5px"> Texte gras et italique sur un fond rose avec un remplissage de 5px </p>