CodeGym/Cursos/Frontend SELF PT/Conexão CSS ao HTML

Conexão CSS ao HTML

Disponível

2.1 Folhas de Estilo Externas

Conectar CSS (Cascading Style Sheets) a um documento HTML te permite estilizar páginas web, melhorando a aparência e a usabilidade delas. Existem várias formas de conectar CSS ao HTML, cada uma com suas vantagens e aplicabilidade para situações diferentes.

Métodos para conectar CSS:

  • Folhas de estilo externas (External Stylesheets)
  • Folhas de estilo internas (Internal Stylesheets)
  • Estilos embutidos (Inline Styles)

Folhas de estilo externas (External Stylesheets)

As folhas de estilo externas são arquivos CSS separados que são conectados ao documento HTML usando a tag <link>. Este método permite separar os estilos da estrutura do documento, o que facilita o gerenciamento dos estilos e a reutilização dos arquivos CSS em várias páginas.

Vantagens:

  • Facilidade no gerenciamento dos estilos
  • Reutilização dos estilos em várias páginas
  • Melhora no cache e no desempenho

Sintaxe:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Exemplo de folha de estilo externa</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
      }

      h1 {
        color: #333;
      }

      p {
        color: #666;
      }
    </style>
  </head>
  <body>
    <h1>Cabeçalho</h1>
    <p>Texto</p>
  </body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Exemplo de folha de estilo externa</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Cabeçalho</h1>
    <p>Texto</p>
  </body>
</html>

Exemplo de arquivo CSS(styles.css):

CSS
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

h1 {
  color: #333;
}

p {
  color: #666;
}

2.2 Folhas de Estilo Internas (Internal Stylesheets)

As folhas de estilo internas são colocadas dentro do próprio documento HTML na seção <head> usando a tag <style>. Este método é conveniente quando você precisa aplicar estilos apenas a uma página ou quando o arquivo externo não está disponível.

Vantagens:

  • Facilidade de uso para uma única página
  • Não há necessidade de um arquivo adicional

Sintaxe:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Exemplo de folha de estilo interna</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
      }
      h1 {
        color: #333;
      }
      p {
        color: #666;
      }
    </style>
  </head>
  <body>
    <h1>Cabeçalho</h1>
    <p>Texto</p>
  </body>
</html>

2.3 Estilos Embutidos (Inline Styles)

Os estilos embutidos são aplicados diretamente aos elementos HTML usando o atributo style. Este método é útil para testes rápidos ou quando é necessário alterar o estilo de um elemento individualmente.

Vantagens:

  • Aplicação rápida e precisa de estilos
  • Adequado para mudanças dinâmicas através de JavaScript

Desvantagens:

  • Dificuldade na gestão de estilos com muitos elementos
  • Dificuldade na reutilização de estilos

Sintaxe:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Exemplo de estilos embutidos</title>
  </head>
  <body>
    <h1 style="color: #333; font-family: Arial, sans-serif;">Cabeçalho</h1>
    <p style="color: #666; background-color: #f4f4f4;">Texto</p>
  </body>
</html>

Exemplo de uso de todos os métodos em uma única página:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Exemplo de todos os métodos de conexão CSS</title>
    <link rel="stylesheet" href="styles.css">
    <style>
      body {
        background-color: #f4f4f4;
      }

      .internal {
        color: #333;
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1 class="internal">Cabeçalho</h1>
    <p style="color: #666;">Este texto é estilizado usando estilos embutidos.</p>
  </body>
</html>

2.4 Ordem de Prioridade dos Estilos

Quando estilos são aplicados de diferentes maneiras, a prioridade é determinada da seguinte forma:

  • Estilos embutidos (Inline Styles) têm a maior prioridade
  • Folhas de estilo internas (Internal Stylesheets) têm o próximo nível de prioridade
  • Folhas de estilo externas (External Stylesheets) têm a menor prioridade

Se múltiplos estilos com a mesma prioridade forem aplicados a um único elemento, a prioridade é determinada pela especificidade do seletor e pela ordem de declaração.

Exemplo de prioridade de estilos:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Exemplo de prioridade de estilos</title>
    <link rel="stylesheet" href="styles.css">
    <style>
      p {
        color: blue; /* Estilo interno */
      }
    </style>
  </head>
  <body>
    <p style="color: red;">Este texto será vermelho devido à prioridade do estilo embutido.</p>
  </body>
</html>
1
Tarefa
Frontend SELF PT,  nível 12lição 2
Bloqueado
Estilos Internos
Estilos Internos
1
Tarefa
Frontend SELF PT,  nível 12lição 2
Bloqueado
Estilos embutidos
Estilos embutidos
Comentários
  • Populares
  • Novas
  • Antigas
Você precisa acessar para deixar um comentário
Esta página ainda não tem nenhum comentário