Feuilles de style : Conseils pour débuter

Le principe est de définir ( à un endroit donné) des styles pour les caractères, mais aussi pour des cellules , des tableaux..... de façon à pouvoir réutiliser simplement ces styles sans avoir à les ré-écrire.

Les principaux avantages sont donc :
Cohésion de la présentation tout au long du site avec les feuilles de style externes.
facilité et rapidité de maintenance, car on peut changer l’apparence d’éléments sur toutes les pages d’un site par modification de quelques caractères ( ou lignes) dans un seul fichier....au lieu de se taper des dizaines de balises à changer !
allègement du code source, donc chargement plus rapide des pages

Séparation du contenu et de la mise en forme
Une façon d'écriture concise et nette par rapport au Html qui devient vite fouillis.
Palier certaines insuffisances du langage Html ( sans passer par les javascript) et ainsi augmenter la créativité des écrivains du Web.
Permettre le positionnement au pixel près du texte et/ou des images sans passer par les "layers"
possibilité d’associer plusieurs feuilles de style aux même pages, adaptées au navigateur (graphique, texte...) ou à l’impression,

2/ Comment ça marche

Le lien avec la feuille de style peut se faire de 2 façons

soit interne

<STYLE type="text/css">
title { font-family: arial, verdana, sans-serif ; font-size: 12pt ; color: black ; background-color: #FFFFFF ; }
</STYLE>

soit externe

<link 
                href="feuille_exemple.css" 
                rel="stylesheet">

attention : n'oubliez jamais de fermer les sélecteurs <title> --- </title>

La balise <SPAN>
sert à appliquer des styles à des morceaux de paragraphe. Elle s'utilise aussi bien avec ID qu'avec CLASS.
Sa syntaxe est la suivante :

<SPAN class=Nom_de_la_classe> Texte </SPAN>

La balise DIV

Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise DIV s'applique à un bloc = 1 ou plusieurs paragraphes

<DIV class=important> paragraphes </DIV>

3/ Quelques exemples

apparence des liens
images avec pointillés en bordure au survol
zoom d'image 1
zoom d'image 2
liste des propriétés CCS
des boutons grace aux feuilles de style
mettre un bloc au bas de la fenêtre de l'écran

Soulignement ou non des liens : 3 possibilités

text-decoration: none = lien non souligné
text-decoration: underline = lien souligné dessous
text-decoration: overline underline = lien souligné dessus et dessous

***** En Conclusion ******

Les feuilles de style , c'est super puissant, finalement assez simple mais contrairement aux éditeurs html qui machent parfois le travail ( Frontpage.... ) là faut mettre un peu le nez dans le codage !!!
donc à réserver au niveau avancé.

mais si vosu êtes arrivé en bas de cette page vous avez déjà assimilé quelques notions de base qui peuvent vous aider ;-)