Les feuilles de styles en cascade, également appelées CSS, ou simplement styles, permettent d’affecter plusieurs propriétés simultanément à tous les éléments d’une page marquée par une balise particulière .Vous pouvez par exemple afficher tous les titres H1 dans une taille, une police, et une couleur spéciales. Des tags, HTML, comme FONT ou BIG, permettent certes d’appliquer quelques-uns de ces formatages, mais les styles présentent plusieurs avantages .
Un style se compose d’un nom de balise (H1, P, etc …) et d’une ou plusieurs définitions qui déterminent l’affichage des éléments marqués par la balise en question(par exemple en rouge, 12 points et lithos regular) .
Au début de votre document HTML, entre les balises <HEAD> et </HEAD>, tapez <STYLE>
Tapez le nom de la balise dont vous voulez définir les propriétés(H1 ou P, par exemple).
Tapez { pour marquer le début des propriétés de cette balise .
Définissez autant de propriétés que vous le souhaitez pour ce tag, séparez chaque propriété par un point-virgule .
Tapez } pour marquez la fin des propriétés de cette balise .
Tapez </STYLE>, afin de terminer la feuille de styles .
Exemple :
Créer un nouveau document texte, à l’aide du bloc lotes ou du wordpad .
Ensuite inscrivez toutes les données d’une feuille de style, ensuite enregistrez le document au format Texte seulement et donnez-lui l’extension .css, afin de défiler comme feuille de styles en cascade .
Dans l’en-tête HEAD de chaque page HTML à laquelle vous souhaitez appliquer la feuille de styles, tapez <LINK REL=stylesheet TYPE= "text/css "
Tapez HREF= url.css, url étant le nom à l’extension css, tapez le > final .
Vous pouvez répartir des éléments HTML, en catégories ou classes, afin de n’appliquer des styles qu’à certains. Il est par exemple possible de créer une classe de paragraphes d’introduction qui auront un formatage légèrement différent des paragraphes normaux .
Marquez les éléments de votre page à inclure dans la classe en insérant dans les Balises HTML, appropriés Class=nomclasse, nomclasse correspondant au mot qui identifie la classe.
Dans la partie STYLE de votre page HTML, tapez tagparent=nomclasse, tagparent indiquant la balise dont dépend la classe, et nomclasse étant le même qu’a l’étape 1.
N’oubliez pas le point entre ces deux membres.
Tapez une accolade ouvrante { pour commencer les définitions, puis lorsque vous avez fini, tapez } .
Exemple :
p.intro {text-indent :0 ;font : italic bold}, puis plus loin
<p class=intro>
Au lieu de créer toute une classe de balises HTML, vous pouvez également identifier des tags particuliers, puis appliquer des données d’une feuille de styles ou des fonctions javascript .
Identifiez l’élément dans votre page HTML, en ajoutant dans la balise HTML, approprié ID=nomid, nomid étant le mot qui identifie le tag.
Dans la partie style de votre page HTML, tapez tagparent#nomid, tagparent correspondant au type de balise HTML, identifié par l’attribut ID et nomid étant le même qu’a l’étape 1.
Tapez une accolade ouvrante { pour commencer les définitions, puis lorsque vous avez fini, tapez } .
Deux tags sont particulièrement utiles pour l’application de style :DIV, qui porte sur une ou plusieurs section de votre document, et SPAN, applicable à quelques mots d’un texte, Employés seuls, ils n’ont pas grande influence sur le texte marqué, mais associés à une classe ou à un ID et un style, ils permettent de créer vos propres balises HTML .
Dans la partie STYLE, au début de votre document HTML, ou dans une feuille de styles externe, tapez DIV.nomclasse, nomclasse correspond au mot identifiant la classe que vous allez utiliser, ou DIV#nomID,nomID étant le mot qui identifie cette instance particulière de la balise DIV .
Tapez une accolade ouvrante { pour commencer les définitions, puis lorsque vous avez fini, tapez } .
Exemple pour DIV ainsi que SPAN :
Div :
DIV.balda {background=aqua}
Div chouchou {background=lime }
Puis avant un paragraphe ou titre
Tapez <DIV class= "balda ">Puis pour finir </div>
Span :
Span.majinit {font-size : 200%}
Span.tousesmaj {font-variant :small-caps}
Puis avant un mot
Tapez <Span class= " majinit ">S</span>
Class= " tousesmaj ">ur cette page, vous </span>
Si vous n’aimez pas les liens soulignés, vous pouvez changez leurs couleurs d’arrière plan et de premier plan, afin qu’ils continuent de ressortir dans la page, mais de façon plus élégante. Le styles de lien ont une syntaxe particulière .
Tapez A :
Tapez link, afin de changer la présentation des liens qui n’ont pas encore été cliqués ni cliqués, ou visited pour modifier celle des liens déjà cliqués par le visiteur ou active en vue de changer l’apparence des liens au moment du clic, ou enfin hover, afin de modifier la présentation des liens actuellement pointés.
Tapez une accolade ouvrante { pour commencer les définitions, puis lorsque vous avez fini, tapez } .
Exemple :
A :link ou visited ou active ou hover {background :yellow ;color :green ;text-decoration :none}
Tout le monde ne possédant pas le même jeu de polices, le marqueur font-family a des caractéristiques spéciales :il permet de spécifier plusieurs fontes, au cas où le système de l’utilisateur ne pourrait pas employer la première .
Tapez {font-family :nomfamille, nomfamille étant la première police choisie, et si vous le souhaitez, tapez nomfamille2 }
Exemple :
H1 {font-family : " news gothic MT ", " Lithos Regular "}
Vous pouvez certes choisir n’importe quelle police que verra le visiteur si elle n’est pas installée sur son système. L’une des dernières fonctionnalités ajoutées au feuille de styles est la possibilité d’incorporer une fonte dans une page et de la télécharger vers la machine de l’internaute, comme une image .
Tapez @font-face {font-family : ".
Tapez le nom entier de la police à incorporer.
Tapez " ;src : url(.
Tapez L’ URL de la fonte.
Tapez )}
Exemple :
A mettre dans la balise <style>
@font-face {font-family : " NewsGoth " ;src : url (NewsGoth.eot)}
Dans la balise <style>
Exemple :
p.intro {font-style : italic} //Mettre du texte en italique
p.intro EM {font-style : normal}//Permet de retirer la mise en italique
OU
H1 {font-weight : normal} // permet de le texte en gras (normal), vous pouvez tapez soit Bolder ou alors lighter (Plus gras ou beaucoup moins gras)
Dans la balise <style>
H1 {font-weight : normal ;
Font weight : bold }
Tapez {font-size : 20pt ; //Permet de définir la taille d’une police .
Tapez {line :height :15 pt} //Permet de définir la hauteur des lignes .
Vous pouvez augmenter l’espace qui sépare les mots(espace inter –mots) ou lettres (Crénage ou interlettrage). Il est aussi possible d’ajouter un bloc d’espace ou un retrait devant des paragraphes particuliers .
Tapez Word-spacing :
Tapez longueur, longueur étant une valeur numérique en pixels, points, cicéros, etc ..
Fixez le crénage
Tapez letter-spacing :
Tapez longueur, longueur étant une valeur numérique en pixels, points, ciceros, etc ..
Ajouter un retrait
Tapez text-indent
Exemple :
H1 {letter-spacing : 5em ;
P {text-indent : 0pt ;
p.intro {text-indent :0 pt ;
Tapez text-align :center ou right ou left ou justify //Permet d’aligner le texte à droite, à gauche, au centre ou justifié .
Dans la balise <style>
Tapez text-decoration :
Tapez underline ou overline, selon que vous désirez respectivement tracer un trait au-dessous ou au-dessus du texte ou tapez line-through, afin de barrer le texte .