Propriedades CSS para estilizar textos

Introdução

Neste tutorial estudaremos as propriedades CSS destinadas exclusivamente à estilização de textos.

Textos, também conhecidos na terminologia técnica da HTML como "conteúdos textuais" são inseridos em uma página com uso de elementos de marcação, tais como, H1, P, DIV, SPAN, BODY, etc. Textos "fluem" da esquerda para a direita (na escrita ocidental) dentro do box CSS criado pelo elemento no qual foram inseridos até atingir o comprimento total do box quando passam para a linha seguinte e assim sucessivamente criando linhas distribuidas na vertical. Exatamente como acontece com este texto que você está lendo, com os textos que lemos em jornais, revistas e mídia impressa em geral.

Textos são constituidos por palavras e acentuação e palavras são formadas por letras ou fontes, e aqui fazemos esta observação para esclarecer que este tutorial mostra as propriedades para estilização de textos. A estilização de fontes é tratada no tutorial Propriedades CSS para estilizar fontes.

Índice das propriedades

As propriedades CSS para estilizar, exclusivamente, textos são listadas neste índice. Para acesso rápido a cada uma das propriedades use o índice para navegar.

Vejamos, a seguir, cada uma delas.

text-indent

Esta propriedade destina-se a definir um espaçamento horizontal a ser deixado antes do início da primeira linha do texto, ou seja, define a indentação (ou tabulação) da primeira linha do texto.

Os valores possíveis para esta propriedade são: uma unidade de medida CSS, porcentagem (refere-se a largura do box onde o texto foi inserido) e valor herdado. ( Ver Herança CSS )

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { text-indent: 50px; }
p { text-indent: 10%; }
p { text-indent: 3rem; }
div { text-indent: 3em; }

Voltar ao índice

text-align

Esta propriedade destina-se a definir o alinhamento horizontal do texto. Trata-se de uma propriedade herdada.

Os valores possíveis para esta propriedade são.

left
Alinha o texto à esquerda do box. Este é o valor inicial (ou default).
right
Alinha o texto à direita do box.
center
Alinha o texto no centro do box.
justify
Alinha o texto de modo que cada linha estenda-se da esquerda à direita do box.
inherit
O valor do alinhamento do texto é herdado.
start
Consta do Rascunho de Trabalho do W3C - Previsto para o futuro.
end
Consta do Rascunho de Trabalho do W3C - Previsto para o futuro.
match-parent
Consta do Rascunho de Trabalho do W3C - Previsto para o futuro.
justify-all
Consta do Rascunho de Trabalho do W3C - Previsto para o futuro.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { text-align: right; }
p { text-align: justify; }
p { text-align: left; }
div { text-align: center; }

Voltar ao índice

text-align-last

A propriedade text-align-last consta do Rascunho de Trabalho do W3C - Prevista para o futuro.

Voltar ao índice

text-transform

Esta propriedade destina-se a definir os efeitos de capitalização (maiúsculas, minúsculas) do texto. Trata-se de uma propriedade herdada.

Os valores possíveis para esta propriedade são.

capitalize
Causa o efeito de transformar as primeiras letras das palavras do texto em maiúscula.
uppercase
Causa o efeito de transformar todas as letras das palavras do texto em maiúscula.
lowercase
Causa o efeito de transformar todas as letras das palavras do texto em minúsculas.
none
Não causa qualquer efeito de transformação.
inherit
A capitalização do texto é herdada.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { text-transform: uppercase; }
p { text-transform: capitalize; }
p { text-transform: none; }
div { text-transform: lowercase; }

Voltar ao índice

Pratique!

Pratique as propriedades estudadas anteriormente visitando uma página interativa no Codepen

ver a pen Estilizar textos - 1 by Maujor (@Maujor) no CodePen.

text-decoration

Esta propriedade destina-se a definir uma linha decorativa para o texto ou fazer com que o texto "pisque". Trata-se de uma propriedade que se propaga para elementos descendentes, mas não pode ser classificada como propriedade herdada, pois não é possível sobrescrever a "herança" como acontece com propriedades herdadas.

Os valores possíveis para esta propriedade são.

underline
Causa o efeito sublinhado. A linha decorativa é desenhada sob o texto.
overline
Causa o efeito superlinhado. A linha decorativa é desenhada sobre o texto.
line-through
Causa o efeito riscado. A linha decorativa é desenhada riscando o texto.
blink
Causa o efeito de texto "piscante". Critérios de acessibilidade fazem com que a maioria dos navegadores não implementem este efeito.
none
Não desenha uma linha decorativa no texto.

Por padrão a cor da linha decorativa é a mesma cor definida para o elemento para o qual a propriedade foi definida e a espessura da linha é função do seu tamanho de fonte (font-size).

Definida uma linha decorativa para um elemento, todos os seus descendentes serão decorados com linhas na cor e espessura conforme a cor e o tamanho de fonte do elemento. Se um elemento descendente ter sua cor alterada a linha decorativa não terá sua cor alterada, contudo se o tamanho de fonte do elemento descendente for alterado a linha decorativa será alterada.

É válido definir mais de um efeito decorativo para o texto. Neste caso os valores devem ser separados por espaço em branco e mais de uma efeito será aplicado ao texto.

Existem, ainda, as propriedades text-decoraton-line, text-decoration-color e text-decoration-style que se destinam a definir, respectivamente, a posição, a cor e o estilo da linha decorativa.
Alerta: O suporte a estas três propriedades é precário à epoca que este tutorial foi atualizado em 2016

Os valores possíveis para esta propriedade são.

solid
Cria uma linha decorativa sólida (contínua).
double
Cria uma linha decorativa dupla.
dotted
Cria uma linha decorativa pontilhada.
dashed
Cria uma linha decorativa tracejada.
wavy
Cria uma linha decorativa ondulada.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar estas propriedade.

CSS
p { text-decoration: underline; }
p { text-decoration: overline; }
p { text-decoration: line-through; }
p { text-decoration: overline underline; }
p { text-decoration-line: underline; }
p { text-decoration-color: red; }
p { text-decoration-style: dashed; }

Voltar ao índice

text-underline-position

Esta propriedade destina-se a definir a posição do sublinhado do texto. Por padrão a linha sublinhada obtida com a propriedade text-decoration posiciona o sublinhado na linha base (baseline) tipográfica do texto. Com esta propriedade é possível alterar a posição para: por baixo da linha tipográfica das descendentes ou colocá-la à esquerda ou direita do texto em escrita oriental.

Voltar ao índice

text-emphasis e text-emphasis-position

Estas propriedades destinam-se a decorar texto em escrita oriental.

Voltar ao índice

text-overflow

Para entender os efeitos desta propriedade é preciso que você conheça a propriedade white-space (ir para white-space)

Um texto extrapola, na horizontal, seu container de largura fixa em duas situações: quando se declarada white-space: nowrap ou quando uma palavra do texto tem comprimento maior do que a largura do container.

Por padrão a parte do texto que extrapola o container (texto em overflow) é renderizada normalmente. Declarando-se overflow: hidden para o container é possível "esconder" o texto que extrapolou o container sobresrevendo aquele comportamento padrão. Esta propriedade controla como será a apresentação da parte final do texto que permaneceu dentro do container.

Os valores possíveis para esta propriedade são.

clip
Corta o texto exatamente na linha vertical que passa pelo lado direito do container. Neste caso é possível até mesmo que uma letra do texto seja cortada na vertical. Este é o valor padrão da propriedade.
ellipsis
Insere três pontos (...) antes do corte do texto. É a convenção típica indicativa de interrupção de texto.
string
Este valor insere uma string antes do corte do texto. É um valor que está em fase de estudo de implementação pelo W3C.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { text-overflow: clip; }
p { text-overflow: ellipsis; }
p { text-overflow: "."; } /* em estudo no W3C */
p { text-overflow: " "; } /* em estudo no W3C */

Voltar ao índice

Pratique!

Pratique as propriedades estudadas anteriormente visitando uma página interativa no Codepen

Ver Pen Estilizar textos - 2 by Maujor (@Maujor) no CodePen.

text-orientation

A propriedade text-orientation é útil para escrita oriental e consta do Rascunho de Trabalho do W3C - Prevista para o futuro.

Voltar ao índice

word-spacing

Esta propriedade controla o espaçamento entre as palavras do texto.

Os valores possíveis para esta propriedade são.

normal
É o valor padrão da propriedade.
unidade de medida CSS
Definir uma unidade de medida CSS (px, em, cm) para esta propriedade causa um espaçamento entre palavras igual a quantidade definida. É admissível valores negativos que causam o efeito de contrair o espaçamento padrão.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { word-spacing: 8px; }
p { word-spacing: -1em; }
p { word-spacing: 3ex }
p { word-spacing: -0.5mm; }

Voltar ao índice

letter-spacing

Esta propriedade controla o espaçamento entre as letras da palavra.

Os valores possíveis para esta propriedade são.

normal
É o valor padrão da propriedade.
unidade de medida CSS
Definir uma unidade de medida CSS (px, em, cm) para esta propriedade causa um espaçamento entre letras igual a quantidade definida. É admissível valores negativos que causam o efeito de contrair o espaçamento padrão.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { letter-spacing: 8px; }
p { letter-spacing: -1em; }
p { letter-spacing: 3ex }
p { letter-spacing: -0.5mm; }

Voltar ao índice

Pratique!

Pratique as propriedades estudadas anteriormente visitando uma página interativa no Codepen

Ver Pen Estilização de textos - 3 by Maujor (@Maujor) no CodePen.

white-space

Esta propriedade controla como serão tratados os espaços em branco inseridos na marcação HTML do texto.

Os valores possíveis para esta propriedade são.

normal
É o valor padrão da propriedade. Qualquer quantidade de espaços em branco na marcação será renderizada como um espaço.
pre
A quantidade de espaços em branco será renderizada exatamente como inserida na marcação. As quebras de linhas ocorrerão quando houver quebra de linha na marcação. Pode ocorrer overflow.
nowrap
Qualquer quantidade de espaços na marcação será renderizada como um espaço, contudo não haverá quebra de linha. O texto extrapola o container (overflow)
pre-wrap
A quantidade de espaços em branco será renderizada exatamente como inserida na marcação. As quebras de linhas ocorrerão quando houver quebra de linha na marcação ou para evitar overflow.
pre-line
A quantidade de espaços em branco será renderizada exatamente como inserida na marcação. As quebras de linhas ocorrerão quando houver quebra de linha na marcação ou para completar uma linha.
inherit
Valor herdado.

A tabela a seguir mostra, para cada valor definido para a propriedade, como serão tratadas as novas linhas, espaçamentos e tabulações e acomodação do texto dentro do container.

Novas linhas Espaçamentos e tabulações Acomodação do texto
normalTransformado em um só espaço Transformado em um só espaço Com quebra de linha
preDe acordo com a marcação HTML De acordo com a marcação HTML Não há quebra de linha
nowrapTransformado em um só espaço Transformado em um só espaço Não há quebra de linha
pre-wrapDe acordo com a marcação HTML De acordo com a marcação HTML Com quebra de linha
pre-lineDe acordo com a marcação HTML Transformado em um só espaço Com quebra de linha

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { white-space: pre; }
p { white-space: nowrap; }
p { white-space: pre-line }
p { white-space: normal; }

Voltar ao índice

word-break

Esta propriedade controla a possibilidade de quebra de linha dentro de uma palavra.

Os valores possíveis para esta propriedade são.

normal
É o valor padrão da propriedade. A quebra de linha segue o comportamento normal
break-all
Quebra de linha poderá ocorrer dentro de uma palavra, exceto se definido ao contrário pela propriedade line-break.
keep-all
Quebra de linha não poderá ocorrer dentro de uma palavra, tal como no valor normal, inclusive quando definido ao contrário pela propriedade line-break.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { word-break: keep-all; }
p { word-break: normal; }
p { word-break: break-all }

Voltar ao índice

line-break

Esta propriedade controla a possibilidade de quebra de linha dentro de uma palavra.

Os valores possíveis para esta propriedade são.

normal
É o valor padrão da propriedade. A quebra de linha segue o comportamento normal
break-all
Quebra de linha poderá ocorrer dentro de uma palavra, exceto se definido ao contrário pela propriedade line-break.
keep-all
Quebra de linha não poderá ocorrer dentro de uma palavra, tal como no valor normal, inclusive quando definido ao contrário pela propriedade line-break.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { line-break: keep-all; }
p { line-break: normal; }
p { line-break: break-all }

Voltar ao índice

word-wrap

Esta propriedade controla a possibilidade de quebra de linha dentro de uma palavra.

Os valores possíveis para esta propriedade são.

normal
É o valor padrão da propriedade. A quebra de linha segue o comportamento normal
break-word
Quebra de linha poderá ocorrer dentro de uma palavra.

Sintaxe

Observe a seguir alguns exemplos mostrando a sintaxe para declarar esta propriedade.

CSS
p { word-wrap: normal; }
p { word-wrap: break-word; }

Voltar ao índice

direction e writing-mode

Estas propriedades destinam-se a definir a direção e disposição do texto. São usadas em escrita oriental.

Voltar ao índice

Pratique!

Pratique as propriedades estudadas anteriormente visitando uma página interativa no Codepen

Ver Pen Estilizar-textos - 4 by Maujor (@Maujor) no CodePen.

Compartilhe essa matéria com seus amigos

logo twitter logo facebook logo linkedin logo reddit

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.