Bienvenue à ce nouveau cour 🙂 .Nous avons vu ensemble dans le tuto précédant comment préparer notre environnement de travail. Il faut noter tout d’abord qu’il en a plusieurs méthodes pour appliquer un style CSS à un document HTML. Dans ce tuto , nous allons voir comment ajouter du CSS dans la balise HTML.
Nous pouvons écrire notre code CSS au sein de l’attribut style qu’on va ajouter à l’intérieur de la balise ouvrante des éléments HTML pour lesquels nous souhaitons modifier les styles.
Nous allons passer en valeurs des attributs « style » des déclarations CSS pour modifier certains styles précis de l’élément HTML en question. En effet, en utilisant cette méthode, les styles déclarés dans un attribut « style » ne vont s’appliquer qu’à l’élément dans lequel ils sont écrits, et c’est la raison pour laquelle nous n’allons pas avoir besoin de préciser de sélecteur ici.
Dans l’exemple ci-dessous, nous allons appliquer une couleur de fond verte à notre élément body ainsi qu’une couleur blanche , une taille de 20px au texte de notre premier paragraphe uniquement :
<!DOCTYPE html>
<html>
<head>
<title>integrer CSS </title>
</head>
<body style="background-color: green">
<h2>CSS : feuille de style en cascade</h2>
<p style="color: white ; font-size: 20px;">
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>
Cette méthode d’écriture du CSS, bien qu’elle puisse sembler pratique à priori puisqu’elle permet de n’appliquer des styles qu’à un élément en particulier plutôt qu’à tous les éléments d’un même type n’est également pas recommandée et est à éviter tant que possible pour des raisons de maintenabilité et de performance du code.
Dans cette partie , nous avons appris comment ajouter du CSS dans la balise HTML
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons ajouter du CSS interne dans l’entête HTML.