Histoire de DESIGN et de bon goût

 

 

Code placé dans le HEAD en plus du fichier externe

h1 {font-size: 20pt ; color: green ; }

h6 {font-size: 16pt ; color: blue ; }

 

Code placé dans BODY

<div style="font-family: comic sans MS, arial, helvetica,sans-serif ; text-align: justify ; font-size: 120% ; border: solid 1px #000000 ; margin: 6% ; background-image:url(aimages/v133.jpg) ; padding: 15px ; text-indent: 40px ; " > ......... </div>

 

Explications

J'ai pour ma part intégré la démonstration dans une page isolée de ce tutorial en ne vous livrant pas seulement l'exemple ce qui souvent, après un copier/coller, voit tout l'édifice s'écrouler.

Pour conserver la mise en forme de la page usuelle j'ai placé un "conteneur" défini par DIV et j'ai en ligne définit le style appliqué à mon texte de référence. La police Comic sans MS que je trouve sympa. Le texte bien entendu est justifié, en corps 120% du corps de base pour une meilleure lecture et qui en pourcentage ne changera pas suivant les navigateurs. J'ai pour bien faire la démonstration, placé un cadre avec un trait uni très fin de 1px noir, et j'ai fixé le texte à 6% de distance par rapport à l'environnement pour les quatre cotés de la boîte. L'image a été choisi en rapport avec le sujet du texte et au mieux de mon jugement. Par contre j'ai défini un padding de 15px qui éloigne le texte du cadre épais de 1px et du fond de l'image qui remplit la boîte. Bien entendu si j'avais supprimé le cadre de 1 px et l'image, tout se trouvait sur fond blanc et il était inutile dans ce cas de maintenir le padding. Pour la beauté de la présentation j'ai défini un retrait de ligne à chaque paragraphe.

Voici un exemple clair qui pourra vous aider à construire votre page mais en sachant qu'avec un zeste de bon goût le CSS est vraiment un outil agréable à utiliser. Je vous souhaite plein d'idées...

 

Sommaire application ... @ ... Sommaire CSS