Ser capaz de estilizar diferentes aspectos de sua página HTML é uma habilidade importante para web designers e desenvolvedores. Para estilizar suas páginas da Web em HTML com cores e tamanhos de fonte, você precisa estar familiarizado com CSS. Para segmentar o tamanho da fonte especificamente, você pode usar o CSS tamanho da fonte propriedade.

Se você está procurando uma maneira de alterar o tamanho da fonte HTML usando CSS, nós o cobrimos. Vamos mergulhar começando com uma introdução ao CSS tamanho da fonte propriedade.

Entendendo a propriedade font-size do CSS

O tamanho da fonte propriedade em CSS é útil quando você precisa alterar o tamanho do texto HTML. Você pode usar essa propriedade para alterar o tamanho de cada parte do texto em uma página HTML ou direcionar elementos específicos a serem alterados.

A segmentação de elementos específicos geralmente é recomendada, pois normalmente você não deseja que tudo tenha o mesmo tamanho. O texto que não segue uma hierarquia visual é difícil de examinar e diferenciar os títulos de nível superior dos de baixo nível.

Em termos mais simples, não abuse do tamanho da fonte propriedade. Se você deseja que um título se destaque, existem diferentes tags de título HTML para isso. Confira nosso Folha de dicas de fundamentos HTML para diferentes tags, atributos e muito mais, juntamente com explicações.

O CSS tamanho da fonte propriedade recebe dois tipos de valores: absolutos e relativos.

Valores de comprimento absolutos (ou seja, px) são fixos enquanto os relativos (por exemplo, em e ex) são flexíveis. Por exemplo, para uma unidade relativa à fonte como em, o tamanho geralmente é determinado pelo tamanho da fonte do elemento pai. No entanto, unidades relativas a fontes baseadas em raiz, como rem são influenciados pelo tamanho da fonte do elemento raiz ().

Cada um tem seus prós e contras, mas na essência de manter as coisas focadas, não vamos discuti-los neste artigo.

Como alterar o tamanho da fonte de um elemento HTML em CSS

Você pode alterar o tamanho da fonte do texto HTML usando alguma sintaxe CSS padrão.

Primeiro, especifique o seletor (o texto que você deseja modificar) e abra algumas chaves. A seguir, insira o tamanho da fonte propriedade seguida por dois pontos, especifique o tamanho específico em que você deseja que seu texto HTML seja apresentado e feche-o com um ponto e vírgula.

Aqui está a sintaxe:

Seletor de CSS {
 tamanho da fonte: valor;
}

Para entender melhor o conceito, revise o seguinte clichê HTML que tem algumas linhas de código adicionais (um título e um parágrafo):

Este é o meu primeiro título

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Se você deseja alterar o tamanho da fonte do elemento de parágrafo, você precisa selecioná-lo (através de uma classe, tag ou id) e, usando o CSS tamanho da fonte propriedade, defina um valor personalizado com suas unidades preferidas. Em nosso exemplo, usaremos pixels (px).

p{
 tamanho da fonte: 18px;
}

Embora o CSS embutido geralmente não seja recomendado em grandes projetos, você também pode usá-lo para alterar o tamanho do texto HTML. Tomando notas do código CSS externo acima, podemos implementar a mesma coisa inline assim:

Este é o meu primeiro título

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Texto no p A tag HTML agora terá um novo tamanho personalizado.

Relacionado: Dicas e truques essenciais de CSS que todo desenvolvedor deve saber

Solucionando problemas de erros ao alterar o tamanho da fonte HTML em CSS

Embora todo o processo de alteração do tamanho do texto em CSS possa parecer fácil, nem sempre pode ser exatamente como você espera. Se você tiver problemas, comece verificando se você salvou as alterações em seu arquivo (também, certifique-se de vincular sua folha CSS ao seu arquivo HTML). Se sim, tente usar o método embutido e atualize a página.

Se funcionar, pode haver um problema com seu código CSS. Experimente usar o !importante tag, e se funcionar, deve haver algum código conflitante. Analise seu código CSS linha por linha para tentar capturar esse erro.

10 exemplos simples de código CSS que você pode aprender em 10 minutos

Precisa de ajuda com CSS? Experimente estes exemplos básicos de código CSS para começar e, em seguida, aplique-os às suas próprias páginas da web.

Leia a seguir

Sobre o autor