Como usar estilos CSS para formatar conteúdo HTML

Para formatar conteúdo HTML, você pode usar estilos CSS. Existem várias maneiras de aplicar estilos CSS a um documento HTML, mas a maneira mais comum é usando a tag <style> dentro da seção <head> do documento.

Exemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Minha página HTML</title>
    <style>
      /* Define o estilo do parágrafo */
      p {
        font-family: Arial, sans-serif;
        font-size: 16px;
        color: #333;
      }

      /* Define o estilo do cabeçalho h1 */
      h1 {
        font-family: Georgia, serif;
        font-size: 24px;
        color: #666;
      }

      /* Define o estilo da classe "destaque" */
      .destaque {
        background-color: yellow;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h1>Minha página HTML</h1>
    <p>Este é um parágrafo simples.</p>
    <p class="destaque">Este é um parágrafo com destaque.</p>
  </body>
</html>

Neste exemplo, a tag <style> contém as regras CSS para formatar o conteúdo HTML. O seletor p define o estilo do parágrafo, o seletor h1 define o estilo do cabeçalho h1 e o seletor .destaque define o estilo da classe “destaque”. As propriedades CSS, como font-family, font-size e color, são usadas para definir o estilo dos elementos HTML. A classe “destaque” é aplicada ao segundo parágrafo usando o atributo class.

Além disso, você também pode incluir um arquivo CSS externo usando a tag <link> dentro da seção <head> do documento.

Exemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Minha página HTML</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <h1>Minha página HTML</h1>
    <p>Este é um parágrafo simples.</p>
    <p class="destaque">Este é um parágrafo com destaque.</p>
  </body>
</html>

Neste exemplo, o arquivo estilos.css contém as regras CSS para formatar o conteúdo HTML. A tag <link> é usada para vincular o arquivo CSS externo à página HTML.

CSS Inline

Outra maneira de aplicar estilos CSS a um elemento HTML é usando o atributo style. Com este método, você pode aplicar um estilo diretamente a um elemento HTML sem a necessidade de usar uma tag <style> ou um arquivo CSS externo.

Exemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Minha página HTML</title>
  </head>
  <body>
    <h1 style="font-family: Georgia, serif; font-size: 24px; color: #666;">Minha página HTML</h1>
    <p style="font-family: Arial, sans-serif; font-size: 16px; color: #333;">Este é um parágrafo simples.</p>
    <p class="destaque" style="background-color: yellow; font-weight: bold;">Este é um parágrafo com destaque.</p>
  </body>
</html>

Neste exemplo, o atributo style é usado para definir o estilo do cabeçalho h1 e dos parágrafos. Observe que as propriedades CSS são separadas por ponto e vírgula (;) e o valor é colocado entre aspas duplas.

Existem muitas outras propriedades CSS que você pode usar para formatar o conteúdo HTML, como largura (width), altura (height), margem (margin), preenchimento (padding), borda (border), plano de fundo (background) e muitas outras. Além disso, também existem várias técnicas avançadas de CSS, como seletores de atributos, pseudoclasses e pseudoelementos, que permitem um maior controle sobre a formatação do conteúdo HTML.

Deixe um comentário