Il faut utiliser le pseudo-élément CSSfirst-letter, pour appliquer un style différent à la première lettre d'un élément.

Exemple d'utilisation :

div:first-letter {
  font-size : 200% ; /* Taille agrandie à 200% par rapport aux autres lettres */
  text-transform : uppercase ; /* Lettre en majuscule */
  color : red ;
}

Et le code de la page (X)HTML :

<div>Mon texte avec une lettrine en première lettre</div>

Pour justifier un texte (aligner à droite et à gauche), il faut utiliser la propriété text-align, qui peut prendre comme valeur :

• left : gauche
• right : droite
• center : centré
• justify : justifié

Exemple :

.justifie { 
  text-align : justify; 
}

Dans la page (X)HTML :

<div class="justifie">Mon texte à justifier</div>

Il faut utiliser les propriétés d'alignement en CSS

<input style="text-align:right" type="text" name="champ1" value="blabla" />

Note : Le contenu est aligné à gauche, par défaut. On peut aussi centrer le contenu :

<input style="text-align:center" type="text" name="champ2" value="blabla" />

Attention : Cette propriété peut être utilisé pour tout autres type de balises

L'élement span (par exemple) est un élément de rendu "inline" qui sert à délimiter un élément de façon logique. Pour que l'élément se comporte tel un "bloc", il faut lui appliquer la propriété display avec la valeur block.

Définition du style CSS :

.bloc { 
  display : block; 
}

Et son utilisation dans la page (X)HTML :

<span class="bloc">Mon texte</span>

Pour cela, il faut utiliser la propriété text-indent et spécifier la largeur de l'alinéa.

Petit exemple :

p { 
  text-indent : 20px; 
  text-align : left;
}

Il est tout à fait possible de faire un retrait négatif en spécifiant une valeur négative pour la propriété text-indent.

Maintenant on met en place le code dans la page (X)HTML :

<p>
  La première ligne est indentée de 20 pixels par rapport aux lignes suivantes.<br />
  Deuxième ligne.<br />
  Troisième ligne...
</p>

Note : Ceci n'est compatible qu'à partir des versions d'Internet Explorer 3, Netscape 4 et Opéra 3.5.

La propriété text-decoration permet de définir le type de soulignement désiré, et peut prendre comme valeur :

• underline : souligné en bas
• overline : souligné en haut
• line-through : barré
• blink : clignotant
• none : pas de soulignement

Code CSS représentant ce type d'effet :

h1 { 
  text-decoration : underline overline; 
}

Puis l'application dans la page (X)HTML :

<h1>Texte avec effet de double soulignement</h1>

Par défaut, les navigateurs appliquent des bordures pointillées pour identifier les éléments qui reçoivent le focus (liens et éléments de formulaire).

Ces bordures peuvent améliorer l'accessibilité de la page en cas de navigation clavier avec la touche TAB, la raison pour laquelle leurs suppression est fortement déconseillée.

a, input { outline:none }