Initiation aux feuilles de style CSSCSS est la traduction de l’anglais "Cascading style sheet" ou "Feuilles de styles en cascade".Ces feuilles de styles, que l’on repère généralement à l’extension .css, permettent de mettre en forme le contenu d’une page web. Nous allons en voir les principales caractéristiques. A quoi servent les css ?Une feuille de style css se présente dans un fichier au format .css. Le but de cette feuille est de séparer la structure d'un document de ses styles de présentation. Il est par exemple possible de ne décrire que la structure d'un document HTML, et de décrire toute la mise en forme dans une feuille de style CSS à part. Cette séparation apporte beaucoup de bénéfices, permettant de changer de présentation quand on veut, et de réduire la complexité d'un document HTML. Comment utiliser les CSS ?Beaucoup de propriétés des CSS sont similaires à celles de HTML. Si vous avez l'habitude d'utiliser HTML pour la présentation, vous ne serez pas perdu. Voyons un exemple concret avec ce code qui permet de changer le fond d'une page: Avec HTML, on écrit:
<body bgcolor="#FF0000">
Avec CSS, on obtient le même résultat en écrivant dans un fichier CSS:
body { background-color: #FF0000; }
Ainsi, si on décide de définir la couleur du fond de son site dans une feuille de style externe, le jour où l'on souhaitera changer la couleur de fond sur toutes les pages du sites, il suffira de changer ce petit bout de code dans le fichier .css ! Comment installer une feuille de styles CSS ?La méthode recommandée pour installer une feuille CSS est celle qui permet d'appeler le fichier css externe à partir de la page web. Une feuille de style externe est simplement un fichier texte ayant l'extension .css que vous pouvez placer à la racine de votre site ou dans un dossier spécialement créé. Pour appeler cette feuille de style, il faut placer le code suivant entre les balises <head> et </head> des pages de votre site:
<link rel="stylesheet" type="text/css" href="style.css" />
L'attribut "href" permet de spécifier le chemin de votre feuille. Dans notre cas le fichier se trouve à la racine et se nomme "style.css". |
