Estilos CSS para Texto

O CSS oferece controle detalhado sobre a aparência do texto. Esta página apresenta as principais propriedades de texto mais utilizadas — o que cada uma faz, os valores que aceita e um exemplo executável mínimo para cada uma. Cada propriedade tem um link para seu próprio capítulo dedicado, onde você pode se aprofundar.

Cor do Texto

A propriedade color define a cor do texto de um elemento (e, por padrão, suas decorações de texto, como sublinhados). Você pode especificar o valor como uma palavra-chave de cor (red), um valor HEX (#ff0000), um valor rgb() / rgba() (rgb(255 0 0)) ou um valor hsl(). Como color é herdada, defini-la em um contêiner aplica-a a todo o texto descendente, a menos que um elemento filho a substitua.

Exemplo de uso da propriedade color do CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="color:#ff0000">This is some paragraph in red.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Alinhamento de Texto

A propriedade de alinhamento é usada para alinhar o texto dentro de um elemento à esquerda, à direita, ao centro, etc.

O alinhamento de texto possui quatro valores:

Left (text-align: left) - alinha o texto à esquerda
Right (text-align: right) - alinha o texto à direita
Center (text-align: center) - centraliza o texto na página
Justify (text-align: justify) - estica a linha de texto para alinhar tanto as extremidades esquerda quanto direita (como em revistas e jornais)

Por padrão, os navegadores alinham o texto ao início da linha — à esquerda em idiomas escritos da esquerda para a direita, como o português. Use o valor correspondente quando precisar de um alinhamento diferente. Para alinhamento sensível ao idioma, prefira as palavras-chave lógicas start e end em vez de left e right.

Exemplo de uso da propriedade text-align do CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is some paragraph</p>
    <p style="text-align:center">Some paragraph with value center.</p>
    <p style="text-align:right">Some paragraph with value right.</p>
    <p style="text-align:justify">Some paragraph with value justify.</p>
  </body>
</html>

Experimente Você Mesmo »

Decoração de Texto

A propriedade text-decoration adiciona linhas ao texto. No CSS moderno, é uma abreviação para CSS text-decoration-line, CSS text-decoration-color e CSS text-decoration-style. Os valores mais comuns para a parte text-decoration-line são:

Overline (text-decoration: overline) - desenha uma linha acima do texto
Underline (text-decoration: underline) - desenha uma linha abaixo do texto
Line-through (text-decoration: line-through) - desenha uma linha no meio do texto
None (text-decoration: none) - remove qualquer decoração; é o que você usa para retirar o sublinhado padrão dos links

Exemplo de uso da propriedade text-decoration do CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a style="text-decoration:none">This is link without underline</a>
    <h1 style="text-decoration:overline">Heading with value overline.</h1>
    <p style="text-decoration:line-through">Some paragraph with value line-through.</p>
    <a style="text-decoration:underline">Some hyperlink with value underline.</a>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Transformação de Texto

A propriedade de transformação é usada para controlar a capitalização do texto. Isso significa que você pode definir seu texto como maiúsculas, minúsculas ou com a primeira letra de cada palavra em maiúscula (title case).

A propriedade de transformação possui os seguintes valores:

Uppercase (text-transform: uppercase) - converte todos os caracteres para maiúsculas
Lowercase (text-transform: lowercase) - converte todos os caracteres para minúsculas
Capitalize (text-transform: capitalize) - converte o primeiro caractere de cada palavra para maiúscula
None (text-transform: none) - mantém o texto como digitado; este é o valor padrão

Lembre-se de que text-transform apenas altera como o texto é exibido — o conteúdo HTML subjacente permanece exatamente como foi escrito, o que importa para copiar e colar e para acessibilidade.

Exemplo de uso da propriedade text-transform do CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p style="text-transform:uppercase">Paragraph with uppercase.</p>
    <p style="text-transform:lowercase">Paragraph with lowercase.</p>
    <p style="text-transform:capitalize">Paragraph with capitalize.</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Sombra de Texto

A propriedade text-shadow adiciona uma ou mais sombras ao texto. Cada sombra é descrita por até quatro valores, nesta ordem:

text-shadow: h-shadow v-shadow blur-radius color;

h-shadow (obrigatório) - deslocamento horizontal; valores positivos movem a sombra para a direita, negativos para a esquerda.
v-shadow (obrigatório) - deslocamento vertical; valores positivos movem a sombra para baixo, negativos para cima.
blur-radius (opcional) - quão suave é a sombra; valores maiores a desfocam mais (padrão é 0).
color (opcional) - a cor da sombra; se omitida, o navegador usa a color do elemento.

Você pode empilhar múltiplas sombras separando-as com vírgulas, que é como os efeitos de brilho e contorno são criados.

Exemplo de uso da propriedade text-shadow do CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        text-shadow: 2px 2px 4px #888888;
      }
      h2 {
        /* Two shadows stacked to create a glow */
        text-shadow: 0 0 6px #ff0000, 0 0 12px #ff0000;
      }
    </style>
  </head>
  <body>
    <h1>Heading with a soft drop shadow</h1>
    <h2>Heading with a red glow</h2>
  </body>
</html>

Veja o capítulo CSS text-shadow para mais exemplos.

Recuo de Texto

A propriedade de recuo de texto é usada para especificar o comprimento do espaço vazio da primeira linha em um bloco de texto. Os valores a seguir são válidos para esta propriedade:

Length (comprimento), que especifica o recuo em px, pt, cm, em, etc. O valor padrão é 0. Valores negativos são permitidos.
Percentage (porcentagem), que especifica o recuo como uma porcentagem da largura do bloco contêiner.
Each-line, quando o recuo afeta a primeira linha, bem como cada linha após uma quebra de linha forçada, mas não afeta linhas após uma quebra de linha flexível.
Hanging, que inverte quais linhas são recuadas. A primeira linha não é recuada.
Initial, que faz a propriedade usar seu valor padrão.
Inherit, que herda a propriedade do elemento pai.

Exemplo de uso da propriedade text-indent do CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h2>Text Indentation Example</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Espaçamento entre Letras

A propriedade CSS letter-spacing permite definir os espaços entre as letras/caracteres em um texto. Os seguintes valores são suportados por esta propriedade:

Normal, que significa que não haverá espaços extras entre os caracteres. É o valor padrão desta propriedade.
Length (comprimento), que define um espaço extra entre os caracteres. Valores negativos são permitidos.
Initial, que faz a propriedade usar seu valor padrão.
Inherit, que herda a propriedade do elemento pai.

Exemplo de uso da propriedade letter-spacing do CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
        line-height: 24px;
        font-size: 16px;
        letter-spacing: 5px;
      }
      h3 {
        letter-spacing: -1px;
      }
    </style>
  </head>
  <body>
    <h2>Example of letter-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Here is some text with letter-spacing property.
    </h3>
  </body>
</html>

Experimente Você Mesmo »

Altura de Linha

A propriedade line-height define a altura da linha. É usada para definir o entrelinhamento das linhas de um texto. Se o valor de line-height for maior que o valor de font-size de um elemento, a diferença será o entrelinhamento do texto. Aqui estão os valores suportados por esta propriedade:

Normal, que define uma altura de linha normal. É o valor padrão desta propriedade.
Length (comprimento), que define uma altura de linha fixa em px, cm, etc.
Number (número), que define um número multiplicado pelo tamanho de fonte atual para definir a altura da linha.
%, que define uma altura de linha em porcentagem do tamanho de fonte atual.
Initial, que faz a propriedade usar seu valor padrão.
Inherit, que herda a propriedade do elemento pai.

Um valor number sem unidade (por exemplo line-height: 1.5) geralmente é a escolha mais segura, pois escala com o tamanho de fonte do próprio elemento e evita surpresas de herança.

Exemplo de uso da propriedade line-height do CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        line-height: 30px;
      }
      h3 {
        line-height: 1;
      }
    </style>
  </head>
  <body>
    <h2>Example of line-height property</h2>
    <p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3> 
  </body>
</html>

Experimente Você Mesmo »

Espaçamento entre Palavras

Com a ajuda da propriedade CSS word-spacing podemos alterar o espaço entre as palavras em um trecho de texto, e não os caracteres individuais. Ela suporta os valores abaixo:

Normal, que especifica o espaçamento normal entre palavras. Este é o valor padrão desta propriedade.
Length (comprimento), que especifica um espaçamento extra entre palavras. Pode ser especificado em px, pt, cm, em, etc. Valores negativos são válidos.
Initial, que faz a propriedade usar seu valor padrão.
Inherit, que herda a propriedade do elemento pai.

Exemplo de uso da propriedade word-spacing do CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        word-spacing: 1em;
      }
      h3 {
        word-spacing: -3px;
      }
      span {
        display: block;
        word-spacing: 3rem;
      }
    </style>
  </head>
  <body>
    <h2>Example of word-spacing property</h2>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <h3>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </h3>
    <span>
    Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
    </span>
  </body>
</html>

Experimente Você Mesmo »

Prática

Qual das seguintes propriedades pode ser usada para controlar a aparência do texto em CSS?