Quando você começar a trabalhar com HTML e CSS, perceberá que alguns estilos são aplicados às suas páginas web mesmo antes de você escrever qualquer CSS. Esses estilos são chamados de "default browser styles" ou "user-agent styles". Esses estilos padrão do navegador fornecem formatação básica para garantir que os elementos HTML sejam exibidos de forma legível em todos os navegadores. No entanto, esses estilos podem variar ligeiramente de um navegador para outro, por isso é importante entendê-los ao projetar uma aparência consistente para o seu site. Vamos dar uma olhada em alguns estilos padrão comuns do navegador aplicados a vários elementos HTML. Os headings são um dos elementos HTML mais comumente usados e são estilizados por padrão para terem tamanhos e pesos variados. Por exemplo, h1 (o cabeçalho de nível mais alto) geralmente é em negrito e maior em tamanho de fonte comparado a cabeçalhos de níveis inferiores como h2, h3 e assim por diante. Estas tags de título ajudam a definir a hierarquia e a estrutura do seu conteúdo. O exemplo a seguir mostra todos os seis elementos de título de h1 a h6.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Outro elemento com estilos padrão é o elemento hr, que cria uma linha horizontal frequentemente usada para separar visualmente seções de conteúdo. Navegadores geralmente aplicam um estilo de linha simples a este elemento. Para entender melhor, vamos analisar este exemplo de código:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<hr>
<p>Paragraph 3</p>
<p>Paragraph 4</p>

A regra horizontal aparece como uma linha fina com espaçamento acima e abaixo do texto para distinguir entre seções de conteúdo. A seguir, vamos analisar o elemento blockquote. Blockquotes são usados para indicar uma seção de texto que é uma citação de outra fonte. Navegadores normalmente adicionam indentação e às vezes colocam o texto em itálico. A indentação ajuda a separar os blockquotes do restante do texto, deixando claro que este conteúdo foi citado de outra fonte. Vamos dar uma olhada neste exemplo de código:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<blockquote>I think, therefore I am. (Rene Descartes)</blockquote>
<p>Paragraph 3</p>
<p>Paragraph 4</p>

No exemplo acima, o elemento blockquote produzirá uma indentação no texto, aplicada pelos estilos padrão do navegador. Outro elemento com estilos padrão é o elemento âncora (<a>), que é estilizado com uma cor azul padrão e sublinhado para torná-lo reconhecível como um link. Vamos dar uma olhada no seguinte exemplo de HTML:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<a href="https://G.E.A.R ACADEMY.org/">Visit the G.E.A.R ACADEMY learn page</a>
<p>Paragraph 3</p>
<p>Paragraph 4</p>

O código acima tem quatro elementos de parágrafo com um elemento de âncora no meio. O elemento anchor é estilizado em azul com um sublinhado para mostrar aos usuários que devem ir para a página de aprendizado do G.E.A.R ACADEMY. Finalmente, vamos analisar os elementos de lista não ordenada e ordenada. Navegadores adicionam formatação básica a listas, incluindo indentação e marcadores ou números, dependendo se você está usando uma lista não ordenada (ul) ou uma lista ordenada (ol). Vamos dar uma olhada em um exemplo:

<p>Sample Paragraph</p>
<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>
<ul>
  <li>item</li>
  <li>another item</li>
  <li>yet another item</li>
</ul>
<p>Ending Paragraph</p>

No exemplo de código acima, estamos usando uma lista não ordenada e uma lista ordenada. Ambas essas listas serão ligeiramente indentadas para a direita por padrão. Para todos esses exemplos, você viu como o navegador aplicou espaçamento padrão, tamanhos de fonte variados e pesos a esses elementos HTML. Nas aulas posteriores, você aprenderá como redefinir alguns desses estilos padrão usando um CSS reset.