La famille text

Propriété text-align

Comme son nom l'indique, la propriété text-align permet d'aligner le texte au sein de son conteneur. Les différentes valeurs que l'on peut lui attribuer ne vous sont pas étrangères:

• left: C'est la valeur par défaut, elle permet d'aligner le texte (ou d'autres objets comme les images) à gauche du conteneur.
• right: Pour placer le contenu à droite.
• center: Sert à center le contenu.
• justify: Permet de justifier le contenu en l'étalant sur toute la longueur de la ligne. Nous aurons donc les lignes (d'un paragraphe par exemple) qui finissent toutes à la même position.

Propriété text-indent

La propriété text-indent permet d'appliquer une indentation (alinéa) aux balises de type block (comme <section>, <aside>, <p>, <div>...). La première ligne de la balise qui reçoit le style marquera un retrait par rapport aux autres lignes. C'est ce que l'on appelle l'indentation. La valeur de text-indent s'exprime en pixel.

Propriété text-decoration

La propriété texte-decoration permet de souligner, surligner ou barrer un texte. Voici les différentes valeurs possibles:

• underline: Le texte est souligné (comme le ferait la balise HTML <u>).
• overline: Le texte est surligné. La ligne se trouvera donc en dessus du texte, mais c'est rarement utilisé.
• line-through: Le texte est barré. La ligne passe à travers le texte comme le ferait la balise HTML <s>).
• none: Aucune décoration ne sera appliquée au texte (toutes les lignes seront retirées).

Propriété text-transform

La propriété text-transform permet de convertir le texte en minuscule, majuscule ou capitalisé. Les différentes valeurs sont:

• lowercase: Permet de convertir tous les caractères en minuscule.
• uppercase: Permet de convertir tous les caractères en majuscule.
• capitalize: Permet de convertir le premier caractère de chaque mot en majuscule et laisser les autres sans transformation.

Propriété letter-spacing

Bien que cette propriété ne commence pas par le préfixe text, mais elle fait parti de la famille texte. La propriété letter-spacing permet d'appliquer un espacement entre les caractères d'un texte. Cet espacement peut être exprimé en pixel.

Exemple

Code HTML:
Code CSS:
Ce qui donne le résultat suivant:

Marge externe: famille margin

Pour exprimer les marges en CSS on fait appelle à la propriété margin. Sa valeur est exprimée en pixel. Si par exemple on déclare le style margin:10px, cela signifie que l'objet auquel on l'a appliqué aura une marge qui mesure 10px tout au tour (en haut, en bas, à droite et à gauche).

Pour spécifier une marge différente de chaque coté on fait donc appel aux propriétés suivantes:

• margin-left: Signifie la marge gauche.
• margin-top: Signifie la marge supérieure.
• margin-right: Signifie la marge droite.
• margin-bottom: Signifie la marge inférieure.

Supposons que nous avons le style suivant:
La première propriété signifie que l'image aura une marge de 10px tout autour et la deuxième appliquera une marge inférieure de 20px. Si la propriété margin-bottom n'a pas été déclarée, alors la marge inférieure aura aussi la valeur 10px, mais le fait de la définir donne à celle ci la valeur 20px. L'image aura donc une marge inférieure de 20px car la propriété qui l'applique est plus explicite.

Marge interne: famille padding

Si margin applique une marge autour de l'objet, padding l'applique à l'intérieur de celui ci. La propriété padding applique une marge interne aux balises de types conteneur comme <header>, <footer>, <div>...

Comme pour la propriété margin, padding applique une marge interne exprimée en pixel de tous les cotés de l'objet. Pour spécifier des valeurs différentes aux marges internes on fait appel aux propriétés suivantes:

• padding-left: Signifie la marge interne gauche.
• padding-top: Signifie la marge interne supérieure.
• padding-right: Signifie la marge interne droite.
• padding-bottom: Signifie la marge interne inférieure.

Largeur et hauteur

Seules les balises de type block peuvent être redimensionnés. Les balises inline ne le permettent pas à l'exception des images et champs de formulaires.

Pour exprimer la larguer et la hauteur on fait appel aux propriétés width et height. Elle sont exprimées en pixels, pourcentage ou en unités conventionnelles (cm, mm, in...). On peut aussi spécifier la larguer ou la hauteur minimales avec les propriétés min-width et min-height ou maximales grâce à max-width et max-height.

La largeur minimale permet à l'objet d'avoir une largeur supérieure ou égale à celle spécifiée. Si le contenu est plus grand que l'objet, alors la largeur de celui ci gagne en taille et si il est plus petit, alors l'objet ne passe pas en dessous de la largeur minimale spécifiée. De même pour la hauteur minimale.

Le même principe s'applique sur la largeur et la hauteur maximales.

Exemple

Code HTML
Code CSS:
Ce qui donne ceci:
Vous avez probablement remarqué que la marge externe de la balise <p> constitue la marge interne de la balise <div>, car la première est inclue dans la deuxième.

Une autre remarque saute aux yeux; la largeur de la balise <p> est supérieure à 50% décrite en CSS. C'est normal car elle mesurerait exactement 50% si elle n'avait pas de padding, sinon la valeurs de padding sera ajoutée à la largeur appliquées (dans ce cas 60px on été ajoutés à la largeur: 30px du padding de gauche et 30px du padding de droite).

Les listes

Les listes créées à l'aides des balises <ul> ou <ol> peuvent être modifiées en CSS. En plus des polices, marges et autres propriétés qui peuvent leur donner un look différent, il existe trois propriétés qui sont spécialement conçues pour elles.

Propriété list-style-type

La propriété list-style-type permet de définir le type de puce des éléments de la liste. Elle peut accepter les valeurs vues en HTML (disc, circle et square).
Cependant, même si on a défini la liste non ordonnée (à l'aide de la balise <ul>) on peut quand même lui donner l'apparence d'une liste ordonnée comme si elle était définie avec la balise <ol>) grâce aux valeurs suivantes:

• decimal: pour les nombres décimaux commençant de 1.
• decimal-leading-zero: pour les nombres décimaux avec zéro initial commençant de 01.
• upper-roman: pour les nombres romains majuscules commençant de I.
• lower-roman: pour les nombres romains minuscules commençant de i.
• lower-greek: pour la numération grecque.
• lower-alpha: pour les lettres de l'alphabet minuscules.
• upper-alpha: pour les lettres de l'alphabet majuscules.

Propriété list-style-image

Si on veut définir nos propres puces, autant le faire avec des images. La propriété list-style-image
list-style-image:url("chemin_de_l_image")

Propriété list-style-position

La propriété list-style-position permet de définir la position de la puce par rapport à la boite contenant les éléments de al liste. Elle peut avoir deux valeurs: inside et outside.

Exemple:

Code HTML:
Code CSS:
Ce qui donne:

Styles agissants sur les textes en vidéo