Texto com CSS

Publicado em 19 de Dec 2013.

Adicionando estilos em textos com CSS

O que você precisa

  • Conhecimento em HTML
  • Ter visto o primeiro link de tutorial

O que iremos apreender

  • Cor no texto
  • Alinhamento de texto
  • Adicionar decoração
  • Transformando texto em maiúsculo,  minuscula e capitalizar
  • Identar o texto

Cor no texto

Para adicionar um estilo de cor em seu texto vamos utilizar o seguinte trecho de código

h1 {color:#00ff00;}

Alinhamento de texto

No CSS existem três alinhamentos centro 'center' , direita 'right' e justificado 'justify', vamos ao código

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Adicionar decoração

A propriedade text-decoration é utilizada para remover a decoração do texto essa propriedade é muito utilizada para remover o famoso underline (_).

Para remover o underline utilizamos o seguinte trecho de código

a {text-decoration:none;}

Caso você queira adicionar uma nova decoração você pode utilizar o seguinte código

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

Transformando texto em maiúsculo,  minusculo e capitalizar

Com o CSS você pode tornar o seu texto maiúsculo 'uppercase', minusculo'lowecase' ou capitalizar 'capitalize' o texto.

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Identar o texto

O CSS permite identar o texto, que é você deixar um recuso antes de começar o paragrafo, isso somente se aplica a primeira linha do paragrafo.

p {text-indent:50px;}