Estilos HTML: um guia para iniciantes

Estamos falando de estilos HTML . Estilos HTML referem-se à apresentação visual de elementos HTML em uma página da web.

Isso inclui estilos de fonte, cores, planos de fundo, bordas e outros efeitos visuais.

Exemplo:

eu sou verde

eu sou vermelho

eu sou marrom grande

Índice-

Atributo de Estilo HTML

O próprio HTML fornece um conjunto limitado de estilos, mas para personalizar totalmente sua página da Web, o CSS permite definir estilos que se aplicam a elementos ou grupos de elementos HTML específicos.

Você pode definir esses estilos em um arquivo CSS separado ou diretamente no documento HTML usando uma tag de estilo.

Um styleatributo pode ser usado para definir o estilo de um elemento HTML .

Esta é a sintaxe para o styleatributo HTML:

<tagname style="font-weight: bold;">

No exemplo acima, font-weight é uma propriedade CSS e bold é um valor de propriedade CSS .

Existem muitas propriedades CSS que você pode usar para personalizar a aparência visual dos elementos HTML.

Aqui estão algumas das propriedades mais usadas:

estilos Visão geral
cor Define a cor do texto.
cor de fundo Define a cor de fundo.
família de fontes Define a família de fontes.
tamanho da fonte Define o tamanho da fonte.
espessura da fonte Define o peso da fonte (por exemplo, negrito ou normal).
alinhamento de texto Define o alinhamento do texto (por exemplo, esquerda, centro ou direita).
preenchimento Define o preenchimento (espaço entre o conteúdo do elemento e sua borda).
margem Define a margem (espaço entre a borda do elemento e os elementos ao redor).

Cor de fundo

As cores de fundo em CSS são especificadas pela propriedade background-color.

Example: Set the background color for a page to blue:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body style="background-color:blue;">
<h1>Main page heading.</h1>
<p>Main page paragraph.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Você também pode definir uma cor de fundo diferente para cada um dos dois elementos a seguir quando se trata de estilos HTML :

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:blue;">This is a heading with blue color</h1>
<p style="background-color:lightpink;">Its a paragraph in light pink.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação

A seguir estão os componentes do exemplo acima:

  • A tag <h1> é usada para definir o elemento de cabeçalho e possui um atributo de estilo inline com uma propriedade “background-color” definida como “blue”. Isso significa que a cor de fundo do elemento de título será azul quando a página da Web for renderizada em um navegador da Web.
  • A tag <p> é usada para definir o elemento de parágrafo e também possui um atributo de estilo embutido com uma propriedade “background-color” definida como “lightpink”. Isso significa que a cor de fundo do elemento de parágrafo será rosa claro quando a página da Web for renderizada em um navegador da Web.
  • Estilos embutidos são estilos CSS aplicados diretamente a elementos HTML individuais usando o atributo “estilo”. Eles podem ser usados ​​para substituir ou complementar estilos CSS externos ou internos definidos em arquivos separados ou nas tags <style> do documento HTML.

Nesse código, o uso de estilos embutidos permite que o desenvolvedor da Web defina cores de fundo específicas para os elementos de título e parágrafo sem afetar outros elementos da página da Web. O resultado é uma página da Web com um cabeçalho azul e um parágrafo rosa claro.

Cor do texto

A propriedade color em CSS descreve a cor do texto para um elemento HTML:

Tente definir cores de fundo para dois elementos diferentes:

Color Code:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<h1 style="color:green;">H1 heading is in green color</h1>
<p style="color:brown;">Paragraph is in brown color.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Fontes

A família de fontes de um elemento HTML é controlada pela propriedade CSS font-family:

Escolha uma família de fontes para dois elementos separados:

Font family code example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is heading has a verdana font family</h1>
<p style="font-family:courier;">This paragraph is in courier font family.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tamanho do texto

O tamanho da fonte de um elemento HTML é especificado pela propriedade CSS font-size:

Tente definir o tamanho da fonte para dois elementos separados:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:360%;">This H1 heading has 360% font size</h1>
<p style="font-size:180%;">This paragraph has 180% font size.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Alinhamento de texto

A propriedade CSS text-align de um elemento HTML determina como o texto horizontal aparecerá:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">This H1 heading is centered through text-align css property</h1>
<p style="text-align:center;">This paragraph text is centered through text-align css property.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Decoração de texto

A propriedade text-decoration em CSS descreve a decoração do texto para um elemento HTML:

Example: 

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<p style="text-decoration: overline;">This is a paragraph with the text decoration overline.</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exibição de estilo

O HTML usa a propriedade do bloco de exibição por padrão, mas podemos alterá-lo usando a propriedade CSS Display. Veja o exemplo abaixo.

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head><style>
div{
display:inline-block;
}
</style>
</head><body>
<div>
<p>This is a paragraph one.</p>
</div>
<div>
<p>This is a paragraph two.</p>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Estilo de borda

A propriedade Border em CSS é aplicada para criar uma borda para o elemento em HTML. Veja exemplo abaixo:

Example: 

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
<h1 style="border:1px solid">This is a Heading</h1>
<p>This is a paragraph</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Conclusão

Estilos HTML são uma parte essencial do web design. Com CSS, você pode personalizar a aparência visual de seus elementos HTML para criar um site bonito e fácil de usar.

Ao usar as propriedades e seletores de CSS corretos, você pode destacar seu site e fornecer uma melhor experiência de usuário para seus visitantes.

é importante usar CSS com moderação e não exagerar com muitos estilos e efeitos. Esforce-se para um equilíbrio entre estética e usabilidade.

Além das propriedades básicas de estilos Html abordadas neste artigo, há muitas técnicas e estruturas avançadas que você pode usar para aprimorar ainda mais o design do seu site.

Isso inclui design responsivo, layouts de grade e estruturas CSS como Bootstrap e Foundation.

No entanto, é importante ter uma compreensão sólida do básico antes de mergulhar em técnicas mais complexas.
Se o artigo correspondente atendeu às suas necessidades de alguma forma, compartilhe-o com outros desenvolvedores usando os links abaixo para espalhar essas informações significativas entre eles também.
Nós valorizamos o seu feedback.
+1
1
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.