Bienvenue à ce nouveau cour 🙂 .Nous avons vu ensemble dans le tuto précédant comment ajouter du CSS dans la balise HTML. Dans ce tuto , nous allons voir comment ajouter du CSS interne dans l’entête HTML.
La deuxième façon d’écrire du code CSS va être à l’intérieur même de notre page HTML, au sein d’un élément style.
En plaçant le CSS de cette façon, le code CSS ne s’appliquera qu’aux éléments de la page HTML dans laquelle il a été écrit.
Cette méthode d’écriture du CSS n’est pas recommandée, pour des raisons de maintenance et d’organisation du code en général. Cependant, elle peut s’avérer utile pour modifier rapidement les styles d’une page HTML ou si vous n’avez pas facilement accès aux fichiers de style de votre site.
Nous voyons donc cette méthode à titre d’exemple, afin que vous sachiez l’identifier si un jour vous voyez du code CSS écrit de cette façon dans un fichier et que vous puissiez l’utiliser si vous n’avez pas d’autre choix.
Nous allons devoir ici placer notre élément style au sein de l’élément head de notre fichier HTML. Voici comment on va écrire cela en pratique :
<!DOCTYPE html>
<html>
<head>
<title>integrer CSS </title>
<style>
body{
background-color: green;}
p{
color: white ;
font-size: 20px; }
</style>
</head>
<body>
<h2>CSS : feuille de style en cascade</h2>
<p>
Permettent de générer la présentation d’une page HTML : séparer la structure (HTML) de sa présentation (CSS)
</p>
</body>
</html>Ici, nous créons un fichier HTML tout à fait classique contenant un titre h1 et une paragraphe.
Nous voulons ensuite rajouter des styles à notre page. Pour cela, nous plaçons un élément style dans l’élément head de notre page. Nous allons déclarer nos styles CSS au sein de cet élément.
Dans mon code CSS, je commence par cibler l’élément body avec le sélecteur élément du même nom et je définis une couleur de fond (background-color) orange pour cet élément. Comme l’élément body représente toute la partie visible de ma page, le fond de la page entière sera orange.
Ensuite, je définis également une couleur blanche pour le texte de mes paragraphes ainsi qu’une taille de police d’écriture de 20px.
Voici le résultat obtenu :
Avantage :
– Possibilité d’appliquer une règle sur tous les mêmes éléments d’un même document
Inconvénient :
–Ne s’applique qu’à ce document, et non au site en entier
–Il faut donc modifier le CSS sur chaque page (ex : si on a 10 pages, modifier les styles sur les 10 fichiers)
MAIS certains plugins de CMS (WordPress par exemple) mal conçus l’utilisent encore. Vous le verrez aussi dans le code de newsletters.
Dans cette partie , nous avons appris comment ajouter du CSS interne dans l’entête HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons ajouter des feuilles de style externes.