Créez votre page HTML. Ouvrez un nouveau fichier dans un programme d'édition de texte et entrez le code de schéma suivant, sauvant votre page avec l'extension ".html":
Ceci est la structure de base d'une page HTML. Le contenu de votre page doit être placé dans la section de corps.
Créer votre fichier CSS. Ouvrez un nouveau fichier dans votre éditeur de texte et enregistrez-le avec l'extension ".css", par exemple "multistyle.css» pour refléter son but. Ajouter un lien vers votre fichier CSS dans la section de la tête de votre page, ce qui reflète son emplacement. Entrez la syntaxe suivante entre l'ouverture et tête de fermeture des balises dans votre page HTML:
Modifiez la valeur "href" attribut si vous avez enregistré votre fichier CSS avec un nom différent ou si elle ne va pas être stockés dans le même répertoire que votre page.
Créer des éléments HTML dans votre page. Entrez le code exemple HTML suivant entre l'ouverture et la fermeture des balises body dans votre page:
Div style 1
Div style 2
1 div style nouveau
2 div style nouveau
Les éléments ont été donnés un attribut de classe. Plusieurs éléments dans une page peuvent partager le même attribut de classe, "style1" et "style2" dans cet exemple. En utilisant des classes, vous identifiez de certains éléments comme appartenant à une catégorie particulière.
Ajouter quelques règles CSS pour définir la façon dont vos éléments devraient apparaître. Entrez le code CSS suivant la définition du style de vos éléments "div":
div {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-weight: hardiesse}
Ce code CSS utilise le type d'élément pour définir un style, dans ce cas, l'application de propriétés de la police à tous les éléments "div" dans la page. Ceci est l'une des principales façons de multiples éléments de style de la même manière, mais également des moyens que chaque élément de ce type inclus dans votre page aura ces propriétés qui lui sont appliquées.
Utilisez la classe des attributs HTML pour le style de votre page. Ajoutez le code CSS suivant, qui utilise la classe de chaque élément afin de déterminer comment il devrait être de style:
div.style1 {
color: # FF0000;
background-color: # 333333-}
.style2 {
color: # 0000FF;
background-color: # FF99FF-}
Ce code applique différents styles à des éléments à l'aide de leurs attributs de classe. Cela vous permet de déclarer des propriétés de style pour un sous-ensemble d'éléments au sein de votre site, plutôt que d'appliquer simplement les mêmes propriétés à tous les éléments d'un type particulier. La seconde classe de style démontre également que vous ne devez inclure le type d'élément pour identifier une classe CSS. Vous pouvez affecter le même attribut de classe à des éléments de différents types en HTML.