Artigo original: HTML Font Size – How to Change Text Size Using Inline CSS Style
Em HTML, a fonte que você escolhe desempenhará um papel importante na aparência de suas páginas da web.
Você pode escolher a cor, o peso, o tamanho da fonte e assim por diante. Todas essas características fazem com que seus sites e aplicações para a web fiquem melhores e mais apresentáveis para o usuário.
Com a propriedade font-size no CSS, você pode mudar o tamanho do texto que está na página da web. Você pode usar essa propriedade em qualquer tipo de CSS que estiver escrevendo – externo, interno ou em linha.
Neste artigo, eu vou mostrar como mudar o tamanho do texto com a propriedade font-size no CSS em linha.
O que é CSS em linha?
CSS em linha (em inglês, inline) é uma das três maneiras diferentes que você pode usar para estilizar qualquer elemento do HTML.
Em vez de direcionar o elemento com um atributo de classe ou id, ou o próprio elemento como o seletor e estilizá-lo dessa maneira, você coloca todos os estilos do CSS na tag de abertura do elemento.
Além disso, você precisa garantir que todas as propriedades e valores dos estilos estejam dentro do atributo style. Esse atributo style é um dos inúmeros atributos aceitos por todas as tags do HTML.
No exemplo abaixo, eu mudo a cor do fundo do texto para crimson, a cor do texto para #f1f1f1 (cinza-claro) e o peso da fonte para bold com CSS em linha.
<p style="background-color: crimson; color: #f1f1f1; font-weight: bold">
Hello Campers...
</p>
A propósito, meu navegador está com zoom de 400%, por isso tudo aparece tão grande. Eu não apliquei nenhum estilo adicional para conseguir isso. 🙂
Como mudar o tamanho do texto usando CSS em linha
Para mudar o tamanho do seu texto com CSS em linha, você precisa fazer isso com o atributo style. Você digita a propriedade font-size e, então, atribui a ela um valor.
Existem valores embutidos como large, larger, medium, small, x-large e assim por diante:
No trecho de código abaixo, eu mudo o tamanho do texto "Hello Campers…" para x-large, um dos valores embutidos da propriedade font-size.
<p style="font-size: x-large">Hello Campers...</p>
Você também pode definir o valor da propriedade font-size usando um número com qualquer unidade, como pixels (px), rem ou em.
É melhor usar valores numerados porque eles dão mais liberdade para escolher qualquer tamanho de fonte que você quiser.
No trecho de código abaixo, eu mudei o tamanho do texto para 30px com CSS em linha:
<p style="font-size: 30px">Hello Campers...</p>
Conclusão
Neste artigo, você aprendeu como mudar o tamanho do texto com CSS em linha e a propriedade font-size. Você também viu como pode atribuir valores à propriedade font-size.
Apenas um aviso: o CSS em linha é ótimo para estilizar, mas você não deve depender muito dele, pois dificulta a leitura do seu HTML, especialmente se você estiver trabalhando em equipe. Você não quer ser o único capaz de ler seu próprio código.
Esteja ciente de que o CSS em linha também sobrescreve qualquer estilização definida com estilo interno ou externo. Você deve usar estilo externo ou estilo interno, pois eles separam seus códigos HTML e CSS, o que é melhor para a legibilidade.
Ao atribuir valores à propriedade font-size, é melhor atribuir os valores em unidades rem ou em em vez de px, por exemplo. Isso porque, quando você usa rem, o navegador será capaz de fazer ajustes no tamanho da fonte conforme o usuário aproxima ou afasta o texto usando o zoom, o que não acontece quando você usa px.
Agradecemos pela leitura! Siga programando! 😀