Feuilles de style : "classes", "blocs" et "blocs flottants"

Sur le Web, ce n’est pas le style qui donne de la classe, mais l’inverse. Les classes (de style) définissent, au sein des feuilles de style, le look des éléments des pages d’un site : textes, paragraphes, calques…

Arrêtons-nous un peu sur les "classes", "blocs" et les "blocs flottants"

NB : les exemples et conseils qui suivent sont extraits du site http://openweb.eu.org/articles/init..., site impressionnant par sa clarté et son exhaustivité sur les feuilles de style. A insérer tout de suite dans ses favoris !

Faisons nos premières classes
Voici quelques exemples de classes que vous pouvez insérer dans votre feuille de style. Tout d'abord, vous pouvez attribuer une classe à une balise telle que ul (liste), p (paragraphe), etc. Ainsi, p { color: #ff00cc; } attribue une couleur violette à tout texte de paragraphe (ne pas oublier le ; après chaque caractéristique de la classe). Si l'on souhaite n'attribuer cette couleur violette qu'aux paragraphes de son choix, on définit la classe p.violet { color: #ff00cc; }. Dans la page html, on décidera d'attribuer cette couleur à tel paragraphe en ajoutant class="violet" dans la balise : Si l'on veut attribuer cette couleur violette à tout un ensemble de paragraphes, on crée une classe .violet { color: #ff00cc; } dans la feuille de style et, dans la page html, on encadre l'ensemble en question par les éléments

Si notre souhait ne porte que sur une partie de paragraphe, on utilise l’élément span en lieu et place de div.

L’instruction suivante : background-image:url(IMG/nomimage.jpg) ; background-repeat : no-repeat ; background-position : 200px 120px signifie que vous placez en fond de page une image dont le motif ne ne répètera pas et qui sera positionnée à 200 pixels du bord gauche de la page et à 120 pixels du bord supérieur.

L’instruction border : 4px groove #ff00cc ; inscrite dans une classe signifie que le contenu associé à cette classe comportera une bordure de 4 pixels d’épaisseur, de couleur violette et donnant une impression de relief.

Une classe peut aussi, bien sûr, servir à déterminer une taille d’affichage de caractères, à travers par exemple l’instruction font-size : 10px ; ou font-size : 1em ;. Dans le premier cas, on fixe une taille absolue (10 pixels), et une taille relative dans le second cas, ce qui est en général préférable car elle s’adapte mieux aux réglages opérés par les internautes sur leur navigateur Web.

Contenus « en bloc » et contenus « en ligne »
Introduisons dans notre vocabulaire deux nouveaux termes : les contenus « en bloc » et les contenus « en ligne ».

Les contenus « en bloc » sont le plus souvent introduits par l’élément div, un titre h1, h2, h3, etc., la balise de paragraphe p ou de liste et élément de liste ul, ol, li, dl, dd, ou encore par la balise de citation blockquote.
Ils se succèdent, à l’affichage dans le navigateur, de façon verticale alignée sur la marge gauche de la page.

Les contenus « en ligne » s’affichent dans une succession horizontale. Ils sont annoncés par des éléments comme span (voir ci-dessus), la marque d’un lien hypertexte a, l’insertion d’images img, etc.

L’instruction Float
Un contenu « flottant » est caractérisé par l’instruction « float » suivie de right ou de left. Cela signifie deux choses :