exemples des codes styles en CSS

1-Par exemple, si vous désirez que tous les liens de votre site soient rouges, blancs lorsqu'ils sont survolés par la souris, et orange une fois cliqués, vous utiliserez ce code :

<style type="text/css">
a:link{text-decoration:none;color:red;}
a:visited{text-decoration:none;color:orange;}
a:hover{text-decoration:underline;color:white;}
</style> 


2-ici les liens survolés vont être en gras, soulignés, verts et en taille de 20pt :
<style type="text/css">
a:link{text-decoration:none;color:red;}
a:visited{text-decoration:none;color:orange;}
a:hover{text-decoration:underline;font-weight:bold;font-size:20pt;color:green;}
</style> 

3-Intégrez la couleur du body dans les CSS et non dans le code HTML de la page : si vous décidez de modifier après coup la couleur du body, vous n'aurez qu'à modifier une ligne dans le fichier CSS et non chaque page HTML !

<style>
body {
background-color:green;
}
</style>


5-Les barres de défilement : 
<style>
body {
scrollbar-face-color: #d9d9f3;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #d9d9f3;
scrollbar-arrow-color: #000000;
}
</style>
6-Les mots ou paragraphes qui appartiennent à la famille "beurk" seront rouges, d'une taille de 20, en police verdana, en gras et soulignés... Ces mots ou paragraphes seront intégrés dans un <span> :
<span id="beurk"> ce mot adopte les caractéristiques de la famille "beurk"</span>

#beurk{
color:red;
font-size:20pt;
font-family:verdana;
font-weight:bold;
text-decoration:underline;
}

#glob{
color:blue;
font-size:10pt;
font-family:arial;
font-weight:bold;
font-style:italic;
text-decoration:none;
} 


7-Cette phrase se référe aux attributs de la famille "glob" :
<span id="glob">Bonjour à tous, petits et grands...</span>
Si l'on souhaite attribuer à un paragraphe un style particulier et un autre style aux liens de ce même paragraphe, on procèdera ainsi :

#glob2{
color:green;
font-size:10pt;
font-family:arial;
font-weight:bold;
font-style:italic;
text-decoration:none;
}
#glob2 a:link,#glob2 a:hover,#glob2 a:visited {color:brown;} 

8-On obtient alors un paragraphe adoptant le style "glob2" pour le texte mais ses liens qui pointent sur les CSS auront un style différent...
Ce paragraphe ne se trouve pas dans un tableau mais bien dans un div dont les attributs ont reçu des propriétés particulières...
Cette page permet à tous les débutants de s'initier aux CSS mais ne les dispense pas de faire des recherches par eux-mêmes afin de développer leurs connaissances sur les Cascading Style Sheets...
 9-Voici le code de cet élément :
#tableau_span {
width:400px;
background-color:white;
color:orange;
border-color:orange;
border-style:solid;
border-left-width:1px;
border-right-width:1px;
border-top-width:1px;
border-bottom-width:1px;
/* le padding permet d'espacer les bords */
padding-left:20px;
padding-right:20px;
padding-top:20px;
padding-bottom:20px;
}