SCI6005 Information numérique et informatique documentaire (A2020)

Il est possible d'intégrer des règles CSS directement dans la page HTML dans la balise d'ouverture de l'élément HTML dont on veut modifier le visuel. Cela se fait en lui ajoutant un attribut style qui aura pour valeur les règles CSS désirées comme illustré ci-dessous. La couleur de la police de caractères de l'élément p y est redéfinie en argenté.

Cette méthode permet de modifier à la pièce, pour des besoins particuliers, une instance d'un élément. Elle est toutefois déconseillée lorsqu'il s'agit de définir le visuel pour toutes les instances d'un élément en particulier dans l'ensemble d'un site Web. En effet, en ce cas, il faudrait ajouter l'attribut style à chacune des instances de l'élément, ce qui représente bien du travail. De plus, si vous décidez de modifier le visuel de votre site Web, il faudra modifier toutes les valeurs des attributs style ainsi ajoutés.

Il est possible d'insérer des règles CSS dans l'entête des pages HTML (section head) à l'aide d'un élément style comme l'illustre l'exemple ci-dessous :

Cette méthode permet de modifier l'ensemble du visuel d'une page Web. Elle est à privilégier uniquement pour des cas particuliers où vous désirez, pour une page, un visuel différent du reste du site Web. Tout comme la première méthode présentée, elle est déconseillée pour définir les styles de base du site Web au complet comme il faudra faire l'insertion de l'élément style sur toutes les pages du site, ce qui peut devenir fastidieux si le site comporte plusieurs pages. De plus, si vous désirez changer le visuel de votre site Web, il faudra modifier les entêtes de toutes les pages Web.

La troisième et dernière méthode présentée est celle qui est conseillée lorsque l'on définit le visuel de base d'un site Web. Il s'agit d'inclure toutes les règles CSS dans un fichier séparé et de pointer vers ce fichier à partir des pages du site Web à l'aide d'un élément link que l'on inclut dans l'entête des pages (head) de cette manière :

On indique, dans cet élément link, le chemin vers le fichier CSS à l'aide de l'attribut href. Pour l'exemple ci-dessus, il s'agit d'un chemin relatif, comme le fichier CSS est sur le même serveur que la page HTML (ce qui est habituellement le cas). Ce fichier CSS, par rapport à la page HTML, se trouve dans un dossier css et se nomme styles.css. C'est la méthode que vous utiliserez pour le TP Web.