Conhecendo a propriedade do CSS text-transform

CursoSimplificando o desenvolvimento de APIs PHP com Swagger

Você já deve ter se deparado com algum tipo de problema onde seu texto esta começando com letras minúsculas, ou que seja necessário imprimir na tela algo com todas as letras maiúsculas ou minúsculas, certo?

Pois bem, o CSS tem uma propriedade chamada text-transform que nos permite formatar uma TAG HTML, isto mesmo, através do seletor podemos escolher o que formatar.

Abaixo temos uma ilustração do que é um Seletor, Propriedade e valor.

Primeiramente, precisamos do nosso HTML, neste exemplo vou utilizar três parágrafos, você pode observar apenas o Código HTML no código abaixo.

Código 01:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Text-transform</title>
		<meta charset="utf-8">
		<style type="text/css">
		
		</style>
	</head>
	<body>
		<p id="uppercase">SatellaSoft - Tecnologia em Dados da Informação</p>
		<p id="lowercase">SatellaSoft - Tecnologia em Dados da Informação</p>
		<p id="capitalize">satellasoft - tecnologia em dados da informação</p>
	</body>
</html>

Bom, temos nosso HTML com os parágrafos já com os ID definidos, agora só nos basta aplicar as formatações no CSS, então vamos a explicação e depois aplicação.

A propriedade Text-transform assume quatro valores, None, Capitalize, Uppercase, Lowercase, vamos entender o que cada valor deste faz.

None = Nenhuma formatação (traduzido seria nenhum).
Capitalize = As primeiras letras de cada palavra ficam com letras maiúsculas (traduzindo seria Capitalizar).
Uppercase = Coloca todas as letras em maiúscula (traduzindo seria maiúscula).
Lowercase = Coloca todas as letras em minúsculas (traduzindo seria minúscula).

O None geralmente é utilizado quando já se tem um valor, como Capitalize, Uppercase ou Lowercase aplicado e queremos remover esta formatação, por padrão este valor é automático para todos os text-transform mesmo quando não utilizamos.

Vamos agora colocar em prática o que aprendemos teoricamente , para isto é muito simples, basta dentro do nosso atributo declarar a propriedade text-transform e aplicar o valor na qual você pretende utilizar, veja o exemplo no código abaixo.

Código 02:

#uppercase{
	text-transform: uppercase;
}
			
#lowercase{
	text-transform: lowercase;
}
			
#capitalize{
	text-transform: capitalize;
}

O resultado será como mostrado na imagem abaixo, agora você pode perceber melhor como tudo funciona na prática, e melhor que isto, percebe também que é muito fácil utilizar esta propriedade.

Espero que tenham aprendido, em caso de dúvidas, deixe um comentário.

Até a próxima.