- Tout d'abord créer une feuille de style qui ne contient que des valeurs relatives, par exemple :
body,table,td,pre,p {font: x-small verdana, arial, helvetica;}
h1 {font:200% verdana, arial, helvetica; font-weight:bold; color:#CC0000}
h2 {font:150% verdana, arial, helvetica; font-weight:bold; color:#CC0000}
h3 {font:120% verdana, arial, helvetica; font-weight:bold; color:#000080}
h4 {font:100% verdana, arial, helvetica; font-weight:bold; color:#CC0000}
h5 {font:80% verdana, arial, helvetica; font-weight:bold; color:#2F488A}
h6 {font:50% verdana, arial, helvetica; font-weight:bold; color:#2F488A}
A:link {color:#003399}
A:visited {color:#003399}
A:hover {color:#990000}
input, textarea, select {font-family: verdana, arial,geneva,helvetica;
color:#000000;
font-weight:normal;
font-size=75%;
background-color:#CCD5D8;
border-color:#99CCFF}
(Sauver le texte ci-dessus entre les deux barres horizontales dans un fichier texte avec l'extension css, par exemple "style.css".)
- Activer la feuille de style dans le document HTML :
<html>
<head>
<meta name="description" content="Description de ma page">
<meta name="keywords" content="mots, clés, pertinents, pour, un, moteur, de, recherche">
<meta name="robots" content="follow,index,all">
<meta name="revisit-after" content="2 days">
<meta name="classification" content="science">
<LINK rel="stylesheet" type="text/css" href="../style.css">
</head>
<body>
...
</body>
</html>
- Vérifier dans le document, si vous utilisez le tag "style=" que celui-ci n'utilise que des valeurs relatives (small, nn%, etc..) info sur les valeurs de taille de font
Les déclarations du type deviendront relatives automatiquement.
En respectant ces quelques règles, l'utilisateur peut agrandir ou diminuer la taille de la font affichée avec la commande "view / text size" de son explorateur.