Estilização de texto em CSS

A estilização de texto em CSS é uma das principais formas de personalizar o visual de um site ou aplicação web. Com as diversas opções de propriedades e valores disponíveis, é possível criar efeitos visuais incríveis, desde simples mudanças de cor e tamanho até animações e efeitos de transição.

Propriedades de estilização de texto em CSS

Para estilizar o texto em um documento HTML, o CSS oferece diversas propriedades que podem ser aplicadas aos elementos de texto. Algumas das principais são:

• color: define a cor do texto;
• font-family: define a família tipográfica utilizada no texto;
• font-size: define o tamanho da fonte utilizada no texto;
• font-weight: define a espessura da fonte utilizada no texto;
• text-align: define o alinhamento do texto dentro do elemento;
• text-decoration: define a decoração do texto, como sublinhado ou tachado;
• text-transform: define a transformação do texto, como maiúsculas ou minúsculas;
• line-height: define a altura da linha do texto;
• letter-spacing: define o espaçamento entre as letras do texto;
• word-spacing: define o espaçamento entre as palavras do texto;

Além dessas propriedades, o CSS também oferece outras opções para estilização de texto, como sombras, bordas, transições e animações.

Exemplos de estilização de texto em CSS

Veja alguns exemplos de como é possível estilizar o texto em CSS:

Mudando a cor do texto

Para mudar a cor do texto, basta utilizar a propriedade color e definir o valor da cor desejada em hexadecimal, RGB ou nome:

  
    p {
      color: #ff0000; /* vermelho */
    }
  

Mudando o tamanho da fonte

Para mudar o tamanho da fonte, basta utilizar a propriedade font-size e definir o valor desejado em pixels, em ou rem:

  
    p {
      font-size: 16px; /* tamanho padrão */
    }

    h1 {
      font-size: 32px; /* tamanho grande */
    }

    small {
      font-size: 12px; /* tamanho pequeno */
    }
  

Mudando a família tipográfica

Para mudar a família tipográfica utilizada no texto, basta utilizar a propriedade font-family e definir o nome da fonte desejada:

  
    p {
      font-family: Arial, sans-serif; /* fonte padrão */
    }

    h1 {
      font-family: "Helvetica Neue", sans-serif; /* fonte diferente */
    }
  

Aplicando sombra no texto

Para aplicar sombra no texto, basta utilizar a propriedade text-shadow e definir os valores de deslocamento, desfoque e cor:

  
    h1 {
      text-shadow: 2px 2px 2px #000000; /* sombra preta */
    }
  

Aplicando animação no texto

Para aplicar animação no texto, basta utilizar a propriedade animation e definir os valores de duração, direção, preenchimento e outros:

  
    h1 {
      animation: myanimation 2s linear infinite;
    }

    @keyframes myanimation {
      0% { color: #ff0000; }
      50% { color: #00ff00; }
      100% { color: #0000ff; }
    }
  

Conclusão

A estilização de texto em CSS oferece diversas opções para personalizar o visual de um site ou aplicação web. Com as propriedades e valores corretos, é possível criar efeitos visuais incríveis e destacar o conteúdo de forma adequada. É importante lembrar, no entanto, que a estilização deve ser utilizada com moderação e sempre pensando na usabilidade e acessibilidade do usuário.

Próxima página do Ebook Gratuito:

12Estilização de links em CSS

2 minutos