Pour insérer un stylesheet nous employons trois méthodes comme suit :
External Style Sheet
Internal Style Sheet
Inline Style Sheet
Feuille externe de modèle
Le dossier qui contient seulement le code de CSS et est économisé avec une prolongation de dossier de « .css » s'appelle en tant que CSS externe. En utilisant le <link> au lieu du <style>, ce dossier de CSS est alors mis en référence dans votre HTML. Ne pas s'inquiéter si vous êtes confus. Nous allons marcher vous par le processus entier.
<html>
<head>
<title>My First Stylesheet</title>
<link rel=stylesheet href="mystyles.css"
type="text/css">
</head>
<body>
<h1>Stylesheets: The Tool of the Web Design
Gods</h1>
<P>Friendship is always alive! Squash your enemies!</P>
</body>
</html>
Créer maintenant un dossier séparé des textes appelé le mystyles.css (vous pouvez l'appeler quelque chose que vous voulez). Tout qu'il contient est ceci :
Quand la même sensation de modèle/format/regard n est exigée à de nombreuses pages puis nous disons qu'une feuille externe de modèle (CSS) est parfaite. Le webmaster peut changer le regard de l'emplacement entier - en changeant un dossier, avec l'aide d'une feuille externe de modèle.
Feuille interne de modèle
Quand un document simple a un modèle unique, une feuille interne de modèle devrait être employée. Dans la section principale, en employant l'étiquette de <style>, vous pouvez définir des modèles internes comme ceci :
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
Le navigateur maintenant composera le document et lira les définitions de modèle selon lui.
Note : Un navigateur ignore normalement les étiquettes inconnues. Ceci signifie qu'un vieux navigateur qui ne soutient pas des modèles, ignorera l'étiquette de <style>, mais la teneur de l'étiquette de <style> sera montrée à la page. En la cachant dans l'élément de commentaire de HTML : , il est possible d'empêcher un vieux navigateur de montrer le contenu.
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>
Modèles intégrés
Insérant des règles de stylesheets juste au milieu de tout votre HTML s'appelle en tant que stylesheet intégré. Il pourrait ressembler à ceci :
<html>
<head>
<title>My First Stylesheet</title>
</head>
<body>
<h1 style="color: orange; font-family: impact">Stylesheets:
The Tool of the Web Design Gods</h1>
<P style="background: yellow; font-family:
courier">Amaze your friends! Squash your
enemies!</P>
</body>
</html>
Feuilles multiples de modèle
Dans le modèle différent couvre si quelques propriétés ont été placées pour le même sélecteur que les valeurs seront héritées de la feuille plus spécifique de modèle.
Par exemple, une feuille externe de modèle a ces propriétés pour le sélecteur h4 :
