Hello Friday readers! Bonjour lecteurs du vendredi!
It is now time to see what else we can do to shape and style your page. Today is all about the <style> attribute. We have seven elements to review plus a little bonus or maybe two...
Il est maintenant l'heure de voir ce que nous pouvons faire de plus pour styliser votre page. Aujourd'hui est entièrement consacré à ce que l'on appelle l'attribut <style>. Nous avons sept éléments à étudier ainsi qu'un petit bonus ou peut-être deux...
1. What is the style attribute? Qu'est-ce que l'attribut style?
The 'style' attribute is the key word you need to write between other tags in order to activate it and style the page: <p style="blablabla">
L'attribut 'style' est le mot clef que vous devez écrire à l'intérieur d'autres balises pour pouvoir l'activer et styliser la page: <p style="blablabla">
2. Font size - Taille de police
Very simple combination: <p style="font-size:12px">
p: paragraph
style: indicates an attribute change
font-size: font size change
12: size of the font
px: unit of the size, the pixel
Combinaison assez simple: <p style="font-size:12px">
p: paragraphe
style: indique un changement d'attribut
font-size: changement de la taille de police
12: taille de la police
px: unité de la taille de police, le pixel
3. Colour - La couleur
You can also change the colour. To do so, just replace 'size' by 'color' (US written): <title><h2 style="font-color:red"></title>
You cannot invent the color you want but a list exists so you can refer to it: click here to access
Vous pouvez aussi changer la couleur. Pour se faire, vous n'avez qu'à remplacer 'size' par 'color' (écriture en anglais US): <title><h2 style="font-color:red"></title>
Vous ne pouvez pas inventer la couleur que vous souhaitez mais devez vous référer à une liste qui existe: cliquez ici pour y avoir accès
4. Font family - Type de police
Fancy an original font type? What you need is 'font-family' and the name of the font you want to use: <p style="font-family:arial">
Vous avez envie d'une police originale? Vous aurez besoin de 'font-family' et du nom de la police que vous voudrez utiliser: <p style="font-family:arial">
5. Background - Le fonds
You can change the background as well if you think white is too boring: <style="background-color:green">
The same list of font colours apply to background.
Vous pouvez aussi changer le fonds si vous trouvez que le blanc est vraiment trop ennuyeux: <style="background-color:green">
La liste de couleurs disponibles est la même que pour les polices d'écriture.
6. Text alignment - Justification de texte
You can align your text as you would do in any of the Office pack programs: left, right, centre. Here is the combination: <style="text-align:center">
Vous pouvez aussi aligner votre texte comme dans les programmes du Pack Office: gauche, droite, centre. Voici la combinaison: <style="text-align:center">
7. Your font in bold or italic - Votre police en gras ou italique
Now that we used different attributes to style the font, we can highlight words by putting them in bold and/or italic.
- Bold: <strong></strong>
- Italic: <emphasize></emphasize>
Maintenant que nous avons utilisé différents attributs pour styliser la police, nous pouvons aussi mettre en évidence certains mots en les mettant en gras et/ou italique.
- Gras: <strong></strong>
- Italique: <emphasize></emphasize>
8. What about multiple attributes at the same time? - Et si l'on veut mettre plusieurs attributs en même temps?
Now that you know what style you want to give your page you can write it in one simple tag.
Let's say I want to write in courier - 22 pixels - black - yellow background and one word in bold: <style="font-family:courier;font-size:22px;font-color:black;background-color:yellow>
The only thing you need to do is add a semi colon between each attribute.
Maintenant que vous savez quel style vous souhaitez donner à votre page, vous pouvez l'écrire en un seul tag très simple.
Disons que nous souhaitons écrire en courier - 22 pixels - noir - fonds jaune et un mot en gras: <style="font-family:courier;font-size:22px;font-color:black;background-color:yellow>
La seule chose à faire est d'ajouter des points-virgules entre chaque attribut.