Découvez les bases du CSS dans ce tutoriel.
Dans ce tutoriel, nous allons voir où mettre notre code CSS pour qu'il soit correctement affiché et interprété.
Pour mettre en forme nos éléments HTML, nous pourrons utiliser différentes possibilités.
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.
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" |
Indispensable |
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>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>