Fonte maiúscula e minúscula em CSS - text-transform: uppercase, lowercase e capitalize

Neste simples e curto Tutorial de CSS, vamos ensinar a formatar qualquer texto de um site, definindo que as fontes fiquem maiúsculas (uppercase), minúsculas (lowercase) e capitalização de palavras (deixar a primeira letra em maiúscula e as demais minúsculas, capitalize), através do atributo text-transform do CSS.

• Baixar PDF: Apostila HTML + CSS Progressivo

Maiúsculo, Minúsculo e Capitalizado - O atributo text-transform

Como fazer para deixar um texto totalmente em fontes cujas letras são maiúsculas?
Ora, só escrever com a tecla Caps Lock ativada que não tem erro.

E se você pegou um texto em minúsculo da internet ou tinha escrito anteriormente em minúsculo?
Como fazer para deixar maiúsculo?
Ok, diversos programas de edição de textos como o Microsoft Office fornecem essa opção.

Mas e se você quiser, por exemplo, deixar todos os textos das tags H1 em maiúsculo?
Vai copiar e colar todas estas tags de cabeçalho no Word?

E se você for contratado por um portal grande, com dezenas de milhares de páginas, e como sua primeira tarefa eles te mandam colocar todas as tags de cabeçalho em maiúsculo e o último parágrafo de cada artigo capitalizado (a primeira letra, de cada palavra, em maiúscula).

E aí, o que você faz?
Pode fazer no Word? Claro que pode, mas iria ter um trabalho gigantesco, quase que humanamente impossível.

Mas relaxe, você estudou pelo Curso HTML Progressivo e domina a arte da estilização de sites com CSS, e vai aprender agora como fazer de uma maneira muito simples, rápida e extremamente eficaz e poderosa, usando o atributo "text-transform".

Fonte Maiúscula em CSS - text-transform: uppercase

Sem mais delongas, vamos aprender como deixar qualquer texto com letras maiúsculas, usando a propriedade text-transform do CSS.

Para fazer isso, usamos a propriedade "text-transform" e o valor "uppercase" (maiúscula, em inglês).
Assim, a sintaxe é:

text-transform: uppercase;

Por exemplo, para que uma tag de cabeçalho H2 seja exibida toda em maiúscula, podemos usar o seguinte código em uma folha de estilos CSS:

h2 {
 text-transform: uppercase;
}

Vejamos outros exemplos de código, que contém uma frase minúscula, mas por ter usado o text-transform com o uppercase, o resultado no site vai ser a frase maiúscula:

<div style="text-transform: uppercase;>apostila html progressivo</div>

Resultado:
APOSTILA HTML PROGRESSIVO

Fonte Minúscula em CSS - text-transform: lowercase;

Sem segredos, para deixarmos um determinado texto com todas as suas letras minúsculas, usamos a propriedade "text-transform" com a seguinte sintaxe:

text-transform: lowercase;

Assim no caso da uppercase, o lowercase faz com que o texto fique em minúsculo, não importando a maneira que você escreva.

Fonte Capitalizada em CSS - text-transform: capitalize;

Existem, basicamente, três maneiras de exibir uma fonte: em minúsculo, maiúsculo ou capitalizado.
Um texto capitalizado é aquele em que todas as primeiras letras, de cada palavra, estão em maiúsculo e o restante minúsculo.

Por exemplo:
O Html Progressivo É Uma Apostila Online De Html E Css.

Assim, a sintaxe para esta propriedade CSS é:

text-transform: capitalize;

Este tipo de formatação de texto é muito comum em Marketing, por exemplo, pois um título que contém a primeira letra de cada palavra em maiúscula costuma chamar bastante atenção.
Se você notar as ofertas que aparecem em redes sociais ou no seu e-mail, vai notar o uso da formatação de textos capitalizados.

Por exemplo o seguinte código:

<div style="text-transform: capitalize">embora eu esteja escrevendo em minúsculo, o css vai capitalizar corretamente este texto</div>

Cujo resultado é o seguinte texto, capitalizado pelo CSS:

embora eu esteja escrevendo em minúsculo, o css vai capitalizar corretamente este texto

Ou seja, se um dia precisar colocar seu texto em maiúsculo, minúsculo ou capitalizar, não precisa quebrar a cabeça com o Word, afinal você é um webmaster, cria sites e sabe HTML&CSS, então use a propriedade text-transform para transformar seus textos.