CSS

Como deixar o texto em caixa alta com CSS

3 de janeiro de 2020

Como deixar o texto em caixa alta com CSS

Neste artigo veremos como deixar o texto em caixa alta com CSS, de uma maneira bem simples e seguindo as boas práticas do HTML e CSS.

texto em caixa alta com css capa

Fala programador, beleza?

Começando a falar sobre o assunto: caso você não saiba, é uma má pratica ESCREVER O TEXTO ASSIM direto no HTML

O aconselhável é escrever tudo em caixa baixa, com exceção da letra inicial de cada frase e tratar as diferenças de estilo com o CSS

Por isso criei este artigo, para elucidar este ponto do desenvolvimento web seguindo as boas práticas, então agora que você já tem um bom motivo para utilizar a forma correta, vamos a prática

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Texto em caixa alta com CSS na prática

Primeiro vamos criar um HTML básico para o nosso mini projeto, veja:

<!DOCTYPE html>
<html>
<head>
    <title>Caixa alta com CSS</title>
</head>
<body>
    <p>Este texto aqui é normal, <span>mas esta parte é em caixa alta</span>.</p>
</body>
</html>

Perceba que nosso objetivo é deixar o conteúdo da tag span em caixa alta

caixa alta com css exemplo 1

E o resto do texto deve ficar normal, como o próprio texto diz

E para fazer isso, vamos adicionar a regra text-transform com o valor uppercase, que transformará o texto em caixa alta

O código fica assim:

span {
    text-transform: uppercase;
}

E o resultado final é este:

caixa alta com css ex 2

Assim concluímos nosso objetivo, que era fazer o texto ficar em caixa alta com CSS e também seguimos as boas práticas do desenvolvimento web

A propriedade text-transform tem outros valores também:

  • lowercase: todo o texto fica em caixa baixa;
  • capitalize: toda palavra começa com letra maiúscula;

Conclusão

Neste artigo vimos que escrever um texto em caixa alta direto no HTML não é considerada uma boa prática

Para isso devemos alterar o estilo do texto com CSS e para fazer essa mudança utilizamos a regra text-transform

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

0

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Deixe um comentário

avatar
  Subscribe  
Notify of