Lier le CSS au HTML
Article écrit par : sandy
Catégorie(s) de cet article : - La conception de site web
Mot(s)-clef(s) de cet article : - CSS
Introduction
Cet article part du principe que vous connaissez les bases du HTML avant de vous lancer dans le CSS.
Avec le HTML, vous avez pu positionner des éléments comme du texte, des titres, des images, etc.
C'est le principal, mais avouez que ce n'est pas très joli. Avec le CSS, nous allons pouvoir mettre un peu de « peps » dans tout cela.
Emplacement du CSS
Où allons-nous bien pouvoir placer le CSS ? Il y a trois possibilités :
- Directement dans le HTML ;
- Via une balise spéciale dans le HTML ;
- Via un fichier externe.
Directement dans le HTML
Dans ce cas de figure, on va pouvoir indiquer le style directement sur une balise de conteneur, comme une « div » ou une balise de structure comme « p » par exemple. Admettons que nous ayons un paragraphe sur lequel nous voulons mettre un style, comme une couleur spéciale, on peut directement mettre le style sur la balise comme ceci :
<p style="....">Le texte que je veux mettre en couleur</p>
Comme vous pouvez le constater, on va avoir la balise « style » puis le signe « égal » puis on ouvrira les guillemets. Le style sera propre à la balise « p » et à rien d'autre.
Cela peut paraître pratique puisque vous avez le style directement sur la balise, pas la peine de la chercher dans des fichiers et vous êtes sûr du style. Mais cette façon de procéder ne permet pas d'utiliser certains sélecteurs ou pseudo-classes comme « hover » permettant de changer de style quand on passe le pointeur de la souris sur un lien.
Et puis vous allez devoir répéter les sempiternels même lignes de code pour chaque élément ; Cela va vite devenir lassant.
Cette méthode n'est d'ailleurs pas recommandée. Il est bon de la connaître, cela peut être utile pour des exercices ou des bouts de code à tester, mais rien d'autre.
Via une balise spéciale
On va utiliser une balise « <style> » que l'on placera généralement, soit dans le « head », soit dans le « footer ».
<head>
<style>
Votre code CSS
</style>
</head>
C'est déjà plus acceptable que la méthode précédente, mais que se passe-t-il si vous avez plus d'un fichier pour votre HTML ? Vous allez dupliquer les lignes de code si vous voulez la même couleur de paragraphe pour les deux pages ? He oui, n'oubliez pas, qui dit deux pages HTML dit deux fichiers et donc, on double, triple, etc le code CSS ?
Comme la solution précédente, c'est une méthode valable uniquement pour des exercices ou pour tester un bout de code.
Via un fichier externe
C'est la meilleure façon de procéder.
On va créer un fichier avec l'extension « .css ». Cela peut être « style.css » (que l'on retrouve dans beaucoup de tutoriels) ou tout autre nom. Ensuite, il faut faire un lien entre le fichier HTML et le CSS en mettant le code suivant dans le « <head> » du fichier HTML :
Exemple avec le nom de fichier « style.css » :
<link rel="stylesheet" type="text/css" href="nomdossier/style.css">
On indique le chemin du fichier grâce à l'attribut « href » et l'attribut « rel » (pour relationship) qui vont indiquer qu'il s'agit d'une feuille de style et où elle se trouve. Le « type» indique le type de contenu auquel le lien fait référence.
Maintenant que vous savez comment relier le HTML et le CSS, vous allez pouvoir apprendre la syntaxe du CSS...
Ajouter un commentaire :
Publicité
Thèmes abordés:
Publicité
Les commentaires
Il n'y a pas encore de commentaire, mais cela ne serait tarder ...