Il existe trois possibilités d'incorporer les styles au sein d'une page HTML
Le style En ligne consiste à incorporer les couples propriété : valeur dans l'attribut style des balises html du corps de la page (entre <body> et </body>) . Cette dernière option mélange style et contenu, et on perd de ce fait les avantages d’une feuille de style CSS, elle est donc déconseillée dans tous les bons manuels. Elle est pourtant bien pratique dans deux cas :
Une feuille de style interne peut être utilisée quand un seul document doit adopter un style unique. Dans le cas de la méthode
imbriquée, les styles sont tous définis dans l’en-tête du document HTML : il suffit d’en faire la déclaration entre les balises
<head> et </head> de la page en utilisant la balise
<style>, voir ci-contre :
La feuille de style externe est idéale lorsque les styles que vous avez définis doivent s’appliquer à plusieurs pages de votre site, voire à son ensemble. Avec une feuille de style externe, vous pouvez changer le style de l'intégralité votre site uniquement en changeant le code d’un fichier (celui de la feuille de style). Chaque page de votre site doit alors faire référence à la feuille de style. Cela se fait en utilisant la balise <link> à insérer dans l’entête de votre page, c'est à dire entre les balises <head> et </head>. Ainsi pour cette page, le lien vers la feuille de style externe du site est le suivant :
La feuille de style peut être également extérieure au site et jointe par un lien hypertexte. Ainsi, si vous ouvrez le code de la page d'accueil de Yahoo, vous trouverez dans head la ligne ci-dessous qui ouvre le lien vers la feuille de style de cet opérateur :
Notons entre parenthèses, que vous pouvez entièrement reconstituer une page Yahoo en recopiant son code dans un fichier html vierge, car même les images sont accessibles par des adresses url non verrouillées.Les recommandations du W3C offrent une dernière façon d'inclure des feuilles de style dans un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles de style externes au niveau de la déclaration du style de document, en insérant la commande @import url immédiatement après la balise style. Le lien vers la feuille de style de Yahoo aurait ainsi pu s'écrire :
J'ai testé sur une page de Yahoo que j'ai reconstituée et ça marche.
Si dans le style en ligne les couples Propriétés/Valeurs sont attachés directement à l'élément HTML, dans les feuilles de style internes ou externes. Les propriétés sont regroupées par blocs de règles, délimités par les accolades { }. Chaque bloc est identifié par un Sélecteur qui permet de le lier aux éléments structurels de la page HTML auxquels les propriétés concernées doivent être appliquées. La syntaxe d'écriture des blocs de règles peut donc se schématiser comme suit :
Sélecteur { propriété : valeur ; propriété : valeur ; propriété : valeur ; }
Comme dans la syntaxe du HTML, le respect des signes de ponctuation est impératif :
Ces possibilités sont adaptées aux propriétés padding, margin, border,
background ou font .
Pour padding et margin, l'ordre top, right, bottom,
left doit être respecté?
Pour border, on peut regrouper les propriétés épaisseur, style et couleur en une seule commande en respectant l'ordre précité.
Pour font, les propriétés peuvent être regroupées en respectant l'ordre style de police, taille et éventuellement interligne enfin, famille de police.
Dans une feuille de style qui peut être longue, il est judicieux d'ajouter des éléments d'information, de division ou de repérage.
Comme dans le code HTML, ces éléments doivent insérés entre des balises de commentaires, celles-ci sont pour l'ouverture :
/* et pour la fermeture :
*/. Voici un exemple de division de la feuille de style de ce site:
/*== MENU ==*/
Notons que les balises de commentaires peuvent également être utilisées pour désactiver momentanément des lignes du code CSS durant les essais de mise en page.