CSS 101 : Typographie et espaces blancs
par Mark Newhouse (trad. Christophe Ducamp)
dimanche 24 juillet 2005
Dans les TABLEs, les GIFs d'espacement et la soupe de balises FONT, la plupart des techniques douteuses se préoccupaient de problèmes de typographie et d'espaces blancs. Comme nous démarrons le processus de comprendre les feuilles de style Cascading Style Sheets (CSS) nous étudierons ces questions.
Changement Extrême pour l'Aspect d'un C.V.
La plupart des sites Web sont fondés sur le texte. Nous avons appris à les embellir avec des images et du rich media, mais le moyen principal de communication sur l'internet demeure encore le texte. C'est tout spécialement vrai pour un curriculum vitae.
Voilà l'aspect d'un C.V. “avant” et “après”. Les deux ont la même syntaxe, la seule différence est qu'“après” il a une feuille de style qui lui est attachée.
La nouvelle école est la vieille école
Dans l'époque d'avant les gifs d'espacement et les balises FONT, vous ne pouviez pas faire grand chose pour embellir l'aspect d'une page Web. Au fur et à mesure que sont apparues les usages de balises de présentation et les “hacks” HTML, il nous fût offert un contrôle supplémentaire sur la manière dont nos pages se présentaient. Mais ces techniques étaient plutôt limitées, n'autorisant le contrôle que sur la couleur, la taille et la typographie sans aucune cohérence.
Avec CSS, nous pouvons contrôler tout cela et bien plus encore.
Jetez un oeil au balisage du c.v. Il y a des titres, des paragraphes, des liens, des listes non triées et des listes de définitions—tout cela dans une syntaxe belle et franche. Et regarder la page dans un navigateur présente une page lisible, quoique d'un aspect compact. Mais nous pouvons faire mieux.
Le but d'un c.v. est de présenter le mieux possible l'employé potentiel à l'employeur. Le c.v. a besoin d'être lisible, de valoriser les réalisations de la personne, sans être trop distrayant. La CSS est parfaite pour ainsi dire afin de parvenir à faire ce travail.
Espace blanc horizontal—modifier la BODY
La première chose à regarder est que la longueur de ligne varie avec la largeur de la fenêtre du navigateur. C'est quelque chose que CSS peut faire sans avoir à ajouter une TABLE à la syntaxe.
Nous pouvons utiliser CSS pour contrôler la largeur du texte, ce qui le rend plus lisible—considération importante à prendre en compte pour un c.v. Nous commencerons par modifier la présentation de la BODY. La CSS ressemble à ça :
body {
margin-left: 7%;
padding-left: 5%;
width: 80%;
max-width: 700px;
background-color: #fffffa;
color: #333;
font-family: Arial, Verdana, Lucida, Helvetica, sans-serif;
}
L'écriture ci-dessus est appelé une règle. Elle comprend un sélecteur (body) et un bloc de déclaration, qui est compris entre les accolades. Le bloc de déclaration comprend une ou plusieurs déclarations, qui à leur tour, contiennent des paires de valeurs-de-propriété. Dans la règle ci-dessus il y a sept paires, margin-left: 7% étant la première d'entre elles. margin-left est la propriété et 7% est la valeur. Les déclarations sont terminées par des points-virgules (;).
Laissons de côté la règle ci-dessus.
La première propriété dans la règle est margin-left. Elle contrôle la marge à main gauche de la BODY. Vous pouvez aussi régler les valeurs pour les autres marges, et vous pouvez utiliser une méthode raccourcie pour réger ces quatre valeurs en une déclaration. Dans cet exemple, les valeurs du haut, droite et bas par défaut des valeurs internes de la feulle de style du navigateur.
Vous pouvez contrôler la propriété margin-left par des pourcentages, comme je l'ai fait ici, ou avec des ems (em), exs (ex), inches (in), picas (pc), centimètres (cm), millimètres (mm) ou pixels (px). Sentez-vous libre de saisir ces fichiers et de modifier les choses pour voir comment cela affecte la présentation de la page.
La propriété qui suit est padding-left. Très similaire à la marge, et les mêmes unités peuvent être utilisées au moment de régler sa valeur. Dans un futur article, nous étudierons le modèle de boîte, qui aidera à clarifier la différence entre la marge et la zone de remplissage (padding). A ce stade, pensez que la marge est l'espace en dehors de la boîte conteneur, et la zone de remplissage est l'espace à l'intérieur. J'ai défini les deux ici pour apaiser Internet Explorer pour Windows.
La propriété qui suit est la largeur width. Elle peut accepter les unités cités précédemment pour ses valeurs. J'ai choisi d'utiliser le pourcentage en créant un gabarit fluide. La largeur s'agrandira et diminuera chaque fois que la fenêtre du navigateur sera retaillée.
Mais il peut y avoir des cas où 80% est trop large. Ceci nous amène à la prochaine propriété de largeur maximale, max-width. Elle est réglée à 700 pixels—notez qu'il n'y a pas d'espace entre le nombre et l'unité. Cette propriété spécifique n'est pas supportée par tous les navigateurs. Pour ceux qui la comprennent, la largeur de la BODY ne dépassera pas 700 pixels. Pour ceux qui ne la comprennent pas, la largeur sera toujours de 80% de la fenêtre du navigateur. Vous pouvez aussi régler une largeur minimum via la propriété min-width .
Les deux prochaines propriétés concernent la couleur. J'ai réglé la couleur d'arrière-plan de la page background-color à une valeur hexadécimale #fffffa. Ce nombre démarre avec un dièse (#) et est constitué de 6 nombres hexadécimaux. Un nombre hexadécimal est un nombre en base 16. Les nombres hexadécimaux se classent de 0-9 plus 6 lettres supplémentaires de a-f. Le zéro est noir et le f est blanc. D'autres valeurs acceptables sont les valeurs de couleurs RGB (red, green, blue), exprimées soit en pourcentages de rouge, vert et bleu : rgb(100%, 100%, 95%) ou exprimées comme un nombre partant de zéro (noir) à 255 (blanc) : rgb(255, 255, 250).
La prochaine propriété, color, règle la couleur du texte sur la page. Dans cette valeur j'ai utilisé un nombre hexadécimal raccourci. Si seulement trois chiffres sont utilisés, alors le navigateur double chaque nombre, ainsi #333 est équivalent à #333333. Comme nous le verrons plus tard, cette valeur peut être annulée par une règle ultérieure dans la feuille de style.
Voir http://www.w3.org/TR/css3-color/ pour plus de détails sur les couleurs et équivalents de valeurs de couleurs.
La dernière propriété dans cette règle est la famille de fontes font-family. Elle règle la fonte par défaut pour la page. La raison de la présence d'une liste est que chaque ordinateur accédant à la page n'a pas forcément la fonte disponible pour la page. Chaque système d'exploitation (OS) est livré avec un ensemble de fontes par défaut, mais même les OS du même vendeur peuvent modifier leurs ensembles par défaut au fil du temps. Celles que j'ai utilisées dans la règles couvrent quelques-unes des fontes les plus communes sans-serif qui sont trouvées sur les machines Windows, Macs et Unix/Linux. Le navigateur vérifiera la première fonte disponible sur la machine et si elle est présente, il l'utilisera. Si tel n'est pas le cas, il vérifiera que la suivante dans la liste soit disponible et ainsi de suite. La dernière valeur indique au navigateur d'utiliser la fonte sans-serif définie par l'utilisateur s'il ne peut trouver aucune des fontes listée dans la déclaration.
Ainsi, voilà ce que nous avons quand nous appliquons la règle pour la BODY à la page.
Typographie et couleurs—modifer les en-têtes
Ensuite, j'aimerais régler les titres en dehors du reste du texte. Nous pouvons faire cela de bien nombreuses façons. La prochaine règle présentera quelques nouvelles propriétés.
Voilà la règle :
h1, h2, h3, h4, h5, h6 {
text-indent: -0.75em;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 1.5em 0 0 0;
padding: 0;
font-family: 'Trebuchet MS', Helvetica, Geneva, Arial, sans-serif;
color: #337;
}
La première chose que vous remarquerez probablement est qu'il y a plusieurs sélecteurs. Chaque sélecteur est séparé par une virgule, et chaque déclaration dans la règle s'appliquera à tous ces sélecteurs. Dans ce cas, ce sont tous les titres disponibles à utiliser en (X)HTML.
La première propriété est text-indent. Elle peut avoir une valeur positive ou négative, avec les mêmes unités que les marges et les paddings (zones de remplissage). J'ai fixé la valeur à -0.75em. Ceci migre le titre vers la gauche de 0.75ems. J'ai choisi d'utiliser des ems parce qu'ils sont fondés sur la taille du texte. Parce que les H1s sont plus grands que les H3s, ils seront migrés plus loin sur la gauche, créant une hiérarchie visuelle sur la page. Notez que c'est cette propriété qui fait que IE a des problèmes sur Windows. Si l'élément conteneur (dans notre cas la BODY) n'a pas suffisamment de zone de remplissage (padding), tout texte qui tombe en dehors de l'élément conteneur sera coupé. C'est la raison pour larquelle nous réglons à la fois la marge et la zone de remplissage (padding) pour la BODY.
La propriété letter-spacing nous permet de contrôler l'espace entre les lettres dans un mot. Des valeurs positives accroissent l'espace et des valeurs négatives diminuent l'espace, fusionnant les lettres ensemble. J'ai choisi de séparer les choses, et utilisé des ems, ce qui a l'effet de rendre les espaces plus larges sur les plus grands titres.
La propriété text-transform vous permet de produire des modifications au texte lui-même. Vous pouvez forcer la mise de chaque mot en haut de casse avec uppercase ou en bas de casse avec lowercase, ou en lettres capitales avec capitalize . Une valeur de none réinitialisera toute valeur qui aurait pu être appliquée dans une règle précédente.
Nous avons déjà regardé la marge avec margin et la zone de remplissage padding. Dans cette règle, j'ai utilisé la version raccourcie dans la déclaration. Pour les marges j'ai réglé margin avec quatre valeurs, commençant par la marge haut margin-top et migrant dans le sens des aiguilles d'une montre à travers le reste. La déclaration est équivalente aux quatre déclarations suivantes :
margin-top: 1.5em;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
Dans la déclaration de la zone de remplissage padding , parce qu'une valeur seulement est donnée, toutes les quatre se font assigner la même valeur, dans ce cas, 0. Notez qu'une valeur de 0 n'a pas besoin de quelque unité.
En outre, j'ai modifié le type de fonte font-family pour tous les en-têtes, et aussi modifié leurs couleurs avec color. Parce que cette règle apparaît dans la règle BODY, ces valeurs seront appliquées, mais seulement aux en-têtes.
Ceci est ce qui apparaît comme quand nous appliquons toutes ces règles au curriculum-vitae.
Espace blanc vertical—modifier les paragraphes et les listes
Quand nous avons fait les modifications sur la manière de présenter les titres, nous avons utilisé les propriétés margin pour contrôler la marge du haut, la réglant à 1.5em pour chaque en-tête sur la page. Nous avons aussi réglé toutes les autres marges margins et zones de remplissage padding à 0. Quand vous regardez la page de résultat dans un navigateur, vous pourriez vous attendre à ce que tout le texte sous les en-têtes apparaisse calé en haut contre les bas des titres, mais ce n'est pas le cas. C'est parce que chaque navigateur a sa propre feuille de style qu'il utilise quand aucun style n'est appliqué au document, et dans ces feuilles de style existe des valeurs par défaut pour de telles choses comme la marge et la zone de remplissage, tout comme les fontes, les tailles, couleurs, etc. pour chaque élément (paragraphes, listes, items, etc.)
Ces valeurs par défaut varient souvent d'un navigateur à l'autre, aussi ont t'elles besoin d'être réglées explicitement si vous voulez que votre page ait une apparence identique dans chaque navigateur sur toutes les plates-formes. Il est bien d'acquérir l'habitude de régler tant le padding et la marge car parfois un navigateur utilisera une marge et un autre utilisera la zone de remplissage dans ses feuilles de style internes pour contrôler l'espace blanc. C'est tout particulièrement vrai quand on en vient à la façon dont les navigateurs créent les indentations pour les listes.
Ceci dit, nettoyons un peu les choses pour rendre les paragraphes et les listes un peu plus lisibles. En même temps, nous alignerons les choses sur le côté gauche de la page.
Voici les nouvelles règles :
p {
margin-top: 0.35em;
margin-left: 0;
padding-left: 0;
line-height: 1.5em;
}
ul {
margin-top: 0.35em;
margin-left: 1em;
padding-left: 0;
}
li {
line-height: 1.5em;
}
dl {
margin-top: 0.35em;
}
dt {
text-indent: -0.5em;
color: #339;
margin-top: 1em;
}
dd {
margin-top: 0.35em;
margin-left: 0;
padding-left: 0;
line-height: 1.5em;
}
Nous sommes déjà acclimatés avec la plupart des propriétés que nous voyons dans ces règles. Et vous avez probablement remarqué que les valeurs de ces propriétés sont très semblables à travers toutes les règles. Ceci parce que je veux ici être cohérent sur la manière dont les paragraphes et listes sont présentés sur la page. Leur donner les mêmes valeurs dans la feuille de style garantira que cela le sera.
D'abord j'ai voulu migrer le contenu sous les titres du haut un peu plus à proximité que ce leurs valeurs de marges. Ainsi chaque propriété reçoit une marge haut de 0.35em. Bien, presque toutes les propriétés. Les items de listes (LI) n'ont pas leurs jeux de marges et les termes des définitions ont une mesure de marge haut différente. Pour les LIs, la propriété UL règle la marge haut. Régler une marge haut pour LI affecterait aussi chaque item de liste, et je ne veux voir une marge haute de 0.35em que sur le haut de la liste, ainsi je la règle dans la règle pour l'UL. J'expliquerai mon raisonnement pour la définition des règles de listes sous peu.
Pour finir la règle pour les paragraphes, je règle le margin-left et le padding à 0. Parce que les titres ont tous une indentation de texte négative text-indent, ceci fait que les paragraphes paraissent comme s'ils étaient un peu indentés, donnant à la page une hiérarchie visuelle. J'ai voulu aussi plus de séparation entre les lignes du texte à l'intérieur du paragraphe. Ceci est défini par la propriété de hauteur de ligne line-height , dont les fonctions ressemblent à celles de l'impression. Elle accepte les mêmes unités que les margins et le padding.
La prochaine règle définit la présentation des listes non ordonnées. Les listes sont des éléments uniques, parce qu'elles ont des puces (ou des nombres, pour les listes numérotées). Ces puces reposent à l'intérieur du padding ou de la marge de la liste, selon le navigateur. Ainsi, nous avons besoin de réglér tant la marge gauche margin-left et le padding-left pour nous assurer que nos listes sont présentées de la même manière sur différents navigateurs.
Dans ce cas, je voulais que les puces s'aligent visuellement sur la même ligne verticlae que les paragraphes ne le font. Le fait de régler à la fois margin-left et padding à 0 bouge le début du texte vers cette ligne verticale, et place la puce trop loin vers la gauche. Nous devons ajouter 1em quelque part pour faire que les choses s'alignent correctement. Cela importe peu si vous la placez dans la margin ou le padding, vous obtiendrez le même résultat visuel pour cet exemple.
Les items de listes sont encore trop proches à mon goût. Il y a plein de façons d'ajouter de l'espace blanc vertical. Les marges et paddings sont certainement des options, mais je veux là un peu plus de séparation à l'intérieur des LIs quand elles débordent, pas seulement entre les items de listes. Telle est la raison pour laquelle je choisis d'utiliser la hauteur de ligne line-height pour contrôler l'espace blanc à l'intérieur de la LI. Pour que les choses demeurent cohérentes, j'ai utilisé la même valeur que je l'ai fait pour les paragraphes.
Ceci nous amène aux listes de définitions. Visuellement, je veux que les termes (DT) apparaissent un peut comme les titres, par conséquent je leur ai données une indentation petite, négative et les mêmes couleurs que les titres. Pour les garder distinctes des titres, je n'ai pas appliqué de text-transform. En outre, j'ai voulu un peu plus de séparation, tout spécialement à l'intérieur de la liste, ainsi ai-je ajouté une marge haut de 1em qui neutralise la marge haut de 0.35em de la DL.
Les définitions (DD) reçoivent la même règle que les paragraphes. Pour économiser un peu de bande passante, nous aurions pu combiner ensemble les deux règles comme nous l'avons fait pour les en-têtes—quelque chose comme ça :
p, dd {
margin-top: 0.35em;
margin-left: 0;
padding-left: 0;
line-height: 1.5em;
}
Voilà ce que les choses donnent avec les styles de paragraphes et listes définis.
Détails, détails—class et id
Ce document commence à avoir un aspect fini. Il y a simplement deux détails pour parfaire l'ensemble. En bas du c.v. une liste de jobs avec les dates correspondantes des emplois. Les dates sont importantes, mais portent atteinte aux descriptions de postes plus importantes. Ce serait beau s'il y avait un moyen de réduire ces petits paragraphes dans le document et de dire au navigateur de les afficher dans une police plus petite, et peut-être une couleur plus discrète. Diminuer l'espace vertical blanc serait aussi joli. Vous avez probablement deviné à ce stade que CSS nous permet de faire simplement ça.
En outre, il y a une autre date tout à la fin du document qui indique quand le document a été modifié pour la dernière fois. Ce serait bien de différencier un peu plus cette date.
Voilà à quoi ressemblent les règles :
p.date {
color: #999;
font-size: 0.8em;
line-height: 1em;
}
p#update {
font-style: italic;
text-align: right;
}
Ces deux règles présentent deux nouvelles idées—class et id. Ce sont des moyens de cibler des instances spécifiques des éléments qui ont une classe ou un identifiant qui leur est assigné dans le (X)HTML.
Pour que les règles ci-dessus s'appliquent au c.v., nous devons faire une modification au document XHTML. Pour chaque paragraphe qui ne contient seulement qu'une date ou un intervalle de dates, nous lui donnons une class de date:
<p class="date">September, 1999-Present</p>
Ceci permet au sélecteur p.date d'appliquer à ces paragraphes une class de date. Utilisez des class quand vous avez plus d'un élément sur lequel vous voulez appliquer la classe. S'il y a un élément unique qui a besoin d'une présentation spéciale, il devrait avoir un id :
<p id="update" class="date">August, 2004</p>
Comme l'indique l'exemple, les éléments peuvent avoir une class et/ou un id qui leur sont assignés.
Souvenez-vous que vous n'avez qu'un élément unique avec une id. donnée. Si vous souhaitez assigner à plus d'un élément la même présentation spécifique, utilisez class, comme nous l'avons fait avec les dates.
Dans la CSS, vous créerez une nouvelle règle qui adresse la classe en ajoutant un point, suivi par le nom de la classe, vers le sélecteur. Dans notre exemple, cela ressemble à la première règle : p.date.
Ici nous avons modifié la color vers un gris clair, réduit la taille de la fonte font-size à 0.8em et réduit la hauteur de ligne line-height . Parce que c'est un paragraphe, il hérite aussi de toutes les autres propriétés que nous n'avons pas explicitement modifié dans cette règle.
Les autres règles définissent ce à quoi devraient ressembler les paragraphes dotés d'un id d' update . Le sélecteur a un dièse suivi par le nom de l'id qui lui est ajouté (p#update). Dans notre exemple, je lui ai donné un style de fonte font-style en italic. D'autres valeurs acceptables pour cette propriété sont normal et oblique. Pour graisser le texte, utilisez font-weight: bold ;.j'ai différencié un peu plus ce paragraphe en l'alignant sur la droite avec la propriété text-align . Cette propriété accepte les valeurs left, right, center et justify. Ce paragraphe héritera aussi de tous les styles réglés par la classe date class ou l'id update , parce que toutes les deux lui ont été assignées dans le XHTML.
Voilà à quoi les choses ressemblent après avoir ajouté ces classes et l'id (les liens passent à la fin de cette page de telle façon que vous pouvez voir les modifications.)
Assembler tout cela ensemble
Maintenant que nous avons un fichier (X)HTML et la CSS, comment faire que le navigateur applique la feuille de style ? Il existe plusieurs moyens de faire.
La première, vous pouvez appliquez la CSS en-ligne en utilisant l'attribut style sur n'importe quel tag. Dans notre exemple, nous devrions faire ceci sur chaque tag pour que la CSS fonctionne, par conséquent, nous n'utiliserons pas cette méthode.
Vous pouvez aussi inclure la CSS dans l'en-tête du document. Vous la placez simplement entre des balises STYLE comme suit :
<style type="text/css">
selector {
property: value;
}
.
.
.
</style>
Ceci est tout particulièrement utile quand vous commencez à travailler sur une conception de page parce que vous pouvez aller en avant et en arrière entre le XHTML et la CSS à l'intérieur d'un même document tant que vous essayez différentes combinaisons. C'est la méthode que j'ai utilisée dans les exemples pour ce tutoriel. Une fois que vous avez vraiment bien défini les choses, je recommande d'utiliser la troisième méthode, expliquée ci-dessous :
Ceci se passe aussi dans l'en-tête HEAD du document. Au lieu d'inclure la feuille de style, faites un lien vers un fichier externe :
<link href="cv.css" rel="stylesheet" type="text/css" />
Le href pointe vers le fichier CSS. Le rel dit au navigateur quel type de lien c'est et le type lui dit quel type de feuille de style est en train d'être pointée. Tous les trois sont exigés dans le tag LINK. En utilisant un fichier externe, vous pouvez lier plusieurs documents vers le même fichier. Ceci est extrêmement puissant car vous pouvez faire des modifications à travers un site Web complet en éditant un seul document.
Construire quelque chose
Maintenant, vous disposez de tous les outils pour appliquer quelque style de votre propre production sur vos documents (X)HTML. Et nous n'avons fait qu'égratigner la surface de ce qui peut être fait avec CSS. Prêtez un oeil aux futurs articles qui présenteront le modèle de boîte et et le positionnement. Mais n'attendez pas, essayez dès maintenant !
