Tutorial HTML

HTML HOME Introdução HTML Editores de HTML HTML básico Elementos HTML Atributos HTML Títulos HTML Parágrafos HTML Estilos HTML Formatação HTML Cotações HTML Comentários HTML Cores HTML HTML CSS Links HTML Imagens HTML HTML Favicon Tabelas HTML Listas HTML Bloco HTML e Inline Classes HTML Código HTML Iframes HTML JavaScript HTML Caminhos de arquivo HTML Cabeçalho HTML Esquema HTML HTML Responsivo Código de computador HTML Semântica HTML Guia de estilo HTML Entidades HTML Símbolos HTML Emojis HTML Conjunto de caracteres HTML Codificação de URL HTML HTML vs. XHTML

Formulários HTML

Formulários HTML Atributos de formulário HTML Elementos de formulário HTML Tipos de entrada HTML Atributos de entrada HTML Atributos do formulário de entrada HTML

Gráficos HTML

Tela HTML HTML SVG

Mídia HTML

Mídia HTML Vídeo HTML Áudio HTML Plug-ins HTML HTML YouTube

APIs HTML

Geolocalização HTML Arrastar/Soltar HTML Armazenamento Web HTML Trabalhadores da Web HTML HTML SSE

Exemplos HTML

Exemplos HTML Questionário HTML Exercícios HTML Certificado HTML Resumo HTML Acessibilidade HTML

Referências HTML

Lista de tags HTML Atributos HTML Atributos Globais HTML Suporte ao navegador HTML Eventos HTML Cores HTML Tela HTML Áudio/vídeo HTML Tipos de documento HTML Conjuntos de caracteres HTML Codificação de URL HTML Códigos HTML Lang Mensagens HTTP Métodos HTTP PX to EM Converter Atalhos do teclado

Estilos HTML


O atributo HTML styleé usado para adicionar estilos a um elemento, como cor, fonte, tamanho e muito mais.


Exemplo

eu sou vermelho

eu sou azul

Eu sou grande


O atributo de estilo HTML

Definir o estilo de um elemento HTML, pode ser feito com o styleatributo.

styleO atributo HTML tem a seguinte sintaxe:

<tagname style="property:value;">

A propriedade é uma propriedade CSS. O valor é um valor CSS.

Você aprenderá mais sobre CSS posteriormente neste tutorial.


Cor de fundo

A propriedade CSS background-colordefine a cor de fundo para um elemento HTML.

Exemplo

Defina a cor de fundo de uma página para azul-pó:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Exemplo

Defina a cor de fundo para dois elementos diferentes:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>


Cor do texto

A propriedade CSS colordefine a cor do texto para um elemento HTML:

Exemplo

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fontes

A propriedade CSS font-familydefine a fonte a ser usada para um elemento HTML:

Exemplo

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Tamanho do texto

A propriedade CSS font-sizedefine o tamanho do texto para um elemento HTML:

Exemplo

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Alinhamento de texto

A propriedade CSS text-aligndefine o alinhamento horizontal do texto para um elemento HTML:

Exemplo

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Resumo do capítulo

  • Use o styleatributo para estilizar elementos HTML
  • Use background-colorpara cor de fundo
  • Use colorpara cores de texto
  • Use font-familypara fontes de texto
  • Use font-sizepara tamanhos de texto
  • Use text-alignpara alinhamento de texto

Exercícios HTML

Teste-se com exercícios

Exercício:

Use o atributo HTML correto e o CSS para definir a cor do parágrafo como "azul".

<p=";">Este é um parágrafo.</p>