Formater un texte = Modifier l'apparence du texte

Taille du texte

La propriété CSS qui permet de changer la taille du texte est font-size.

Deux possibilités s'offrent à vous :

- Taille absolue : il s'agit d'indiquer en pixels, la hauteur exacte de vos lettres.

ex : .contenuArticle {font-size:16px;}

 


- Taille relative : il s'agit d'indiquer si le texte sera petit, très petit, moyen, grand, très grand...

ex : .contenuArticle {font-size: xx-small;}         .contenuArticle {font-size: x-small;}         .contenuArticle {font-size: small;}         .contenuArticle {font-size: medium;}         .contenuArticle {font-size: large;}         .contenuArticle {font-size: x-large;}         .contenuArticle {font-size: xx-large;}

 










Indiquer la taille du texte en pixels, centimètres et millimètres est très pratique et très précis. Certes. Mais il    est   préférable d'indiquer une taille relative afin que la taille du texte s'adapte aux choix de tout le monde  (certains préfèrent avoir du texte plutôt gros, d'autres plutôt petit etc...). En effet, selon la résolution de votre écran, ce même texte n'apparaitra pas de la même façon.

Il existe d'autres moyens mais les 2 cités ci-dessus sont les plus courants.


Police du texte

Le problème c'est que, pour qu'une police s'affiche correctement, il faut que tous les internautes l'aient. Si un internaute n'a pas la même police que vous, son navigateur prendra une police par défaut (une police standard) qui n'aura peut-être rien à voir avec ce à quoi vous vous attendiez.

La propriété CSS qui permet d'indiquer la police est font-family.

ex : .contenuArticle {font-family:police;}

Seulement, pour éviter qu'il n'y ait de problème si l'internaute n'a pas la même police que vous, on met en général plusieurs noms de police, séparés par des virgules :

ex : .contenuArticle {font-family:police1, police2, police3, police4;}

  -> En général, on met en tout dernier "serif", ce qui correspond à une police standard (qui ne se met que si aucune autre police n'a été trouvée).

  -> Lorsqu'un nom de police est en plusieurs mots, on l'écrit entre guillemets.

ex : .contenuArticle {font-family: "Arial Black", Arial, Verdana, serif;}

A SAVOIR : Les polices les plus utilisées, donc les plus sûres à utiliser sont : 

• Arial  
• Arial Black  
• Comic Sans MS  
• Courier New  
• Georgia  
• Impact  
• Times New Roman  
• Trebuchet MS  
• Verdana

Alignement du texte

C'est à dire, le texte sera-t-il aligné à gauche,à droite, centré ou justifié?
On utilise la propriété text-align, et on indique l'alignement désiré :  

• left : le texte sera aligné à gauche (c'est le réglage par défaut).  
• center : le texte sera centré.  
• right : le texte sera aligné à droite.  
• justify : le texte sera "justifié". Justifier le texte permet de faire en sorte qu'il prenne toute la largeur possible sans laisser d'espace blanc à la fin des lignes. Les textes des journaux, par exemple, sont tout le temps justifiés.

ex : .contenuArticle {text-align: center;}

Décoration du texte

Cette propriété CSS porte bien son nom : text-decoration
Elle permet, entre autres, de souligner le texte. Voici les différentes valeurs qu'elle peut prendre :  

• underline : souligné.  
• line-through : barré.  
• overline : ligne au-dessus.  
• blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont Mozilla Firefox.
• none : normal (par défaut).

ex : .contenuArticle {text-decoration: underline;}

Couleur du texte

La propriété qui permet de changer la couleur du texte est color.

La méthode la plus simple et la plus pratique pour choisir une couleur est de taper son nom en anglais.
Le seul défaut de cette méthode est qu'il n'existe que 16 couleurs dites "standard" :

white
silver
gray
black
red
maroon
lime
green
yellow
olive
blue
navy
fuchsia
purple
aqua
teal
Couleur	Aperçu

D'autres couleurs officieuses existent (certaines ont aussi un nom mais on utilisera plus souvent le code commençant par #):

Ech.	Nom HTML	Traduction	RVB
	aliceblue	bleu Alice	#F0F8FF
	antiquewhite	blanc antique	#FAEBD7
	aqua	eau	#00FFFF
	aquamarine	aigue-marine	#7FFFD4
	azure	azurin	#F0FFFF
	beige	beige	#F5F5DC
	bisque	bisque	#FFE4C4
	black	noir	#000000
	blanchedalmond	amande blanchi	#FFEBCD
	blue	bleu	#0000FF
	blueviolet	parme bleuté	#8A2BE2
	brown	brun	#A52A2A
	burlywood	bois dur	#DEB887
	cadetblue	pétrole clair	#5F9EA0
	chartreuse	vert chartreuse	#7FFF00
	chocolate	chocolat	#D2691E
	coral	corail	#FF7F50
	cornflowerblue	bleuet	#6495ED
	cornsilk	jaune maïs doux	#FFF8DC
	crimson	pourpre	#DC143C
	cyan	cyan	#00FFFF
	darkblue	bleu sombre	#00008B
	darkcyan	cyan sombre	#008B8B
	darkgoldenrod	jaune paille sombre	#B8860B
	darkgray	gris cliar (!)	#A9A9A9
	darkgreen	vert sombre	#006400
	darkkhaki	kaki sombre	#BDB76B
	darkmagenta	magenta sombre	#8B008B
	darkolivegreen	vert olive sombre	#556B2F
	darkorange	orange sombre	#FF8C00
	darkorchid	orchidée sombre	#9932CC
	darkred	rouge sombre	#8B0000
	darksalmon	saumon sombre	#E9967A
	darkseagreen	vert océan sombre	#8FBC8F
	darkslateblue	bleu ardoise sombre	#483D8B
	darkslategray	gris ardoise sombre	#2F4F4F
	darkturquoise	turquoise sombre	#00CED1
	darkviolet	violet sombre	#9400D3
	deeppink	rose profond	#FF1493
	deepskyblue	bleu ciel profond	#00BFFF
	dimgray	gris rabattu	#696969
	dodgerblue		#1E90FF
	firebrick	rouge brique	#B22222
	floralwhite	blanc floral	#FFFAF0
	forestgreen	vert forêt	#228B22
	fuchsia	fuchsia	#FF00FF
	gainsboro		#DCDCDC
	ghostwhite	blanc spectral	#F8F8FF
	gold	or	#FFD700
	goldenrod	jaune paille	#DAA520
	gray	gris	#808080
	green	vert	#008000
	greenyellow	jaune-vert	#ADFF2F
	honeydew	miellé	#F0FFF0
	hotpink	rose chaud	#FF69B4
	indianred	rouge indien	#CD5C5C
	indigo	indigo	#4B0082
	ivory	ivoire	#FFFFF0
	khaki	kaki	#F0E68C
	lavender	lavande	#E6E6FA
	lavenderblush	lavande rougeâtre	#FFF0F5
	lawngreen	vert prairie	#7CFC00
	lemonchiffon	jaune chiffoné ?	#FFFACD
	lightblue	bleu clair	#ADD8E6
	lightcoral	corail clair	#F08080
	lightcyan	cyan clair	#E0FFFF
	lightgoldenrodyellow	jaune paille clair	#FAFAD2
	lightgreen	vert clair	#90EE90
	lightgrey	gris clair	#D3D3D3
	lightpink	rose clair	#FFB6C1
	lightsalmon	saumon clair	#FFA07A
	lightseagreen	vert océan clair	#20B2AA
	lightskyblue	bleu ciel clair	#87CEFA
	lightslategray	gris ardoise clair	#778899
	lightsteelblue	bleu acier clair	#B0C4DE
	lightyellow	jaune clair	#FFFFE0
	lime	citron vert	#00FF00
	limegreen	citron vert foncé	#32CD32
	linen	blanc de lin	#FAF0E6
	magenta	magenta	#FF00FF
	maroon	marron	#800000
	mediumaquamarine	aigue-marine moyen	#66CDAA
	mediumblue	bleu moyen	#0000CD
	mediumorchid	orchidée moyen	#BA55D3
	mediumpurple	lavande	#9370DB
	mediumseagreen	vert océan moyen	#3CB371
	mediumslateblue	bleu ardoise moyen	#7B68EE
	mediumspringgreen	vert printemps moyen	#00FA9A
	mediumturquoise	turquoise moyen	#48D1CC
	mediumvioletred	rouge violacé moyen	#C71585
	midnightblue	bleu nuit	#191970
	mintcream	blanc mentholé	#F5FFFA
	mistyrose	rose voilé	#FFE4E1
	moccasin	beige mocassin	#FFE4B5
	navajowhite	blanc navarro	#FFDEAD
	navy	bleu marine	#000080
	oldlace	vieux blanc	#FDF5E6
	olive	vert olive	#808000
	olivedrab	vert olive terne	#6B8E23
	orange	orange	#FFA500
	orangered	rouge orangé	#FF4500
	orchid	orchidée	#DA70D6
	palegoldenrod	jaune paille pâle	#EEE8AA
	palegreen	vert pâle	#98FB98
	paleturquoise	turquoise pâle	#AFEEEE
	palevioletred	rouge violacé pâle	#DB7093
	papayawhip	papaye délavé	#FFEFD5
	peachpuff	pêche passé	#FFDAB9
	peru	pérou	#CD853F
	pink	rose	#FFC0CB
	plum	prune	#DDA0DD
	powderblue	bleu poudré	#B0E0E6
	purple	violet	#800080
	red	rouge	#FF0000
	rosybrown	bois de rose	#BC8F8F
	royalblue	bleu roi	#4169E1
	saddlebrown	cuir	#8B4513
	salmon	saumon	#FA8072
	sandybrown	brun sable	#F4A460
	seagreen	vert océan	#2E8B57
	seashell	coquillage	#FFF5EE
	sienna	terre-de-sienne	#A0522D
	silver	argent	#C0C0C0
	skyblue	bleu ciel	#87CEEB
	slateblue	bleu ardoise	#6A5ACD
	slategray	gris ardoise	#708090
	snow	blanc neigeux	#FFFAFA
	springgreen	vert printemps	#00FF7F
	steelblue	bleu acier	#4682B4
	tan	brun tané	#D2B48C
	teal	sarcelle	#008080
	thistle	chardon	#D8BFD8
	tomato	rouge tomate	#FF6347
	turquoise	turquoise	#40E0D0
	violet	parme	#EE82EE
	wheat	blé	#F5DEB3
	white	blanc	#FFFFFF
	whitesmoke	blanc fumée	#F5F5F5
	yellow	jaune	#FFFF00
	yellowgreen	vert jaunâtre	#9ACD32

ex : .contenuArticle {color:red;}          .contenuArticle {color:#9ACD32;}          .contenuArticle {color:#FFFFFF;}  équivaut à écrire  .contenuArticle {color:white;}