Como alterar o tamanho da fonte HTML em CSS
Você não irá longe como desenvolvedor web se não souber como alterar o tamanho das fontes em CSS. Felizmente, este guia ajuda você.
Ser capaz de estilizar diferentes aspectos de sua página HTML é uma habilidade importante para web designers e desenvolvedores. Para estilizar suas páginas HTML com cores e tamanhos de fontes, você precisa estar familiarizado com CSS. Para definir especificamente o tamanho da fonte, você pode usar a propriedade CSS font-size .
Se você está procurando uma maneira de alterar o tamanho da fonte HTML usando CSS, nós temos o que você precisa. Vamos começar com uma introdução à propriedade CSS font-size.
Compreendendo a propriedade CSS font-size
A propriedade font-size em CSS é útil quando você precisa alterar o tamanho do texto HTML. Você pode usar esta propriedade para alterar o tamanho de cada parte do texto em uma página HTML ou direcionar elementos específicos para alteração.
A segmentação de elementos específicos geralmente é recomendada, pois normalmente você não deseja que tudo tenha o mesmo tamanho. É difícil examinar o texto que não segue uma hierarquia visual e diferenciar os títulos de nível superior dos de baixo nível.
Em termos mais simples, não abuse da propriedade tamanho da fonte. Se você deseja que um título se destaque, existem diferentes tags de título HTML para isso. Confira nossa folha de dicas sobre fundamentos de HTML para diferentes tags, atributos e muito mais, juntamente com explicações.
A propriedade CSS font-size aceita dois tipos de valores: absolutos e relativos.
Os valores de comprimento absoluto (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 à fonte baseadas na raiz, como rem, são influenciadas pelo tamanho da fonte do elemento raiz ().
Cada um tem seus prós e contras, mas no que diz respeito à essência de manter o foco, não os discutiremos 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 deseja modificar) e abra algumas chaves. Em seguida, insira a propriedade tamanho da fonte seguida de dois pontos, especifique o tamanho específico em que deseja que seu texto HTML seja apresentado e feche-o com ponto e vírgula.
Aqui está a sintaxe:
CSS selector {
font-size: value;
}Para entender melhor o conceito, revise o seguinte padrão HTML que contém algumas linhas de código adicionais (um título e um parágrafo):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p>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.</p>
</body>
</html>
Se quiser alterar o tamanho da fonte do elemento de parágrafo, você precisa selecioná-lo (através de uma classe, tag ou id) e, usando a propriedade CSS font-size, definir um valor personalizado com suas unidades preferidas. Em nosso exemplo, usaremos pixels (px).
p {
font-size: 18px;
}Embora o CSS embutido geralmente não seja recomendado em projetos grandes, 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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple HTML Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is my first heading</h1>
<p style="font-size:18px">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.</p>
</body>
</html>
O texto na tag HTML p agora terá um novo tamanho personalizado.
Solução 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 funciona exatamente como você espera. Se você tiver problemas, comece verificando se salvou as alterações em seu arquivo (além disso, certifique-se de vincular sua planilha CSS ao seu arquivo HTML). Se você fez isso, tente usar o método inline e atualize a página.
Se funcionar, pode haver um problema com seu código CSS. Tente usar a tag !important e, se funcionar, deve haver algum código conflitante. Analise seu código CSS linha por linha para tentar detectar esse erro.