Post

O que é CSS?

Postado em
Por Vagner Leite
4 min de leitura

Objetivo da Aula:

Nesta aula, você aprenderá o que é CSS (Cascading Style Sheets), sua função na criação de páginas web, e como ele é usado para estilizar e melhorar a aparência do conteúdo HTML.

Conteúdo da Aula:

1. Introdução ao CSS

O que é CSS?

  • CSS (Cascading Style Sheets) é uma linguagem usada para descrever a apresentação e o estilo de um documento escrito em HTML ou XML. Ele controla como os elementos HTML devem ser exibidos em termos de layout, cores, fontes, espaçamentos e outros aspectos visuais.

Por que usar CSS?

  • O CSS permite separar o conteúdo (HTML) da apresentação (estilo), facilitando a manutenção e atualização do design sem alterar o conteúdo. Além disso, ajuda a garantir uma aparência consistente em todas as páginas de um site.

2. Como o CSS Funciona

2.1. Seletores e Regras

  • Seletores: Usados para selecionar os elementos HTML que você deseja estilizar. Os seletores podem ser simples (como nomes de tags) ou complexos (como classes e IDs).

    Exemplo de Seletores:

    • Tag: Seleciona todos os elementos de uma tag específica, como <p>, <h1>, etc.
      1
2
3

      p {
  color: blue;
}
    • Classe: Seleciona elementos com uma classe específica. As classes são precedidas por um ponto (.).
      1
2
3

      .texto-verde {
  color: green;
}
    • ID: Seleciona um único elemento com um ID específico. Os IDs são precedidos por um cerquilha (#).
      1
2
3

      #titulo-principal {
  font-size: 24px;
}

  • Regras: Definem os estilos aplicados aos seletores. Uma regra CSS é composta por um seletor e um bloco de declarações.

    Exemplo de Regra CSS:

    1
2
3
4
5

    h1 {
  color: red;
  font-size: 36px;
  text-align: center;
}

    Neste exemplo, h1 é o seletor, e o bloco de declarações { color: red; font-size: 36px; text-align: center; } especifica os estilos para o texto dentro da tag <h1>.

2.2. Cascata e Especificidade

  • Cascata: O CSS permite que regras de diferentes fontes (como estilos em linha, interno e externo) sejam aplicadas, e a “cascata” determina qual estilo tem prioridade. Regras mais específicas e as últimas definidas geralmente prevalecem.

  • Especificidade: Refere-se à prioridade de aplicação de estilos quando há regras conflitantes. IDs têm maior especificidade do que classes, e classes têm maior especificidade do que seletores de tags.

    Exemplo de Especificidade:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    /* Seletor de tag */
p {
  color: blue;
}

/* Seletor de classe */
.destaque {
  color: green;
}

/* Seletor de ID */
#importante {
  color: red;
}

    Neste caso, se um <p> tiver a classe destaque e o ID importante, a cor será vermelha devido à maior especificidade do ID.

3. Exemplo Prático

Vamos criar uma página HTML simples e estilizar com CSS para entender como tudo se conecta.

3.1. Arquivo HTML (index.html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemplo de CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="titulo-principal">Bem-vindo ao Meu Site</h1>
  <p class="descricao">Esta é uma página de exemplo para aprender sobre CSS.</p>
  <p id="especial">Este parágrafo tem um estilo especial.</p>
</body>
</html>

3.2. Arquivo CSS (styles.css)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* Estilo para o título principal */
.titulo-principal {
  color: darkblue;
  text-align: center;
  font-size: 36px;
}

/* Estilo para parágrafos com a classe 'descricao' */
.descricao {
  color: green;
  font-size: 18px;
  line-height: 1.6;
}

/* Estilo para o parágrafo com o ID 'especial' */
#especial {
  color: red;
  font-weight: bold;
}

4. Resumo e Conclusão

  • Recapitulando:
    • O CSS é uma linguagem usada para estilizar e formatar documentos HTML.
    • Utilizamos seletores para aplicar estilos a elementos HTML, e as regras CSS definem como esses estilos são aplicados.
    • A “cascata” e a especificidade ajudam a determinar quais estilos são aplicados quando há conflitos.
  • Próximos Passos:
    • Na próxima aula, abordaremos como incluir CSS em um documento HTML e exploraremos diferentes métodos para aplicar estilos.

Exercícios Práticos:

  1. Criar uma Página Estilizada:
    • Crie um documento HTML e um arquivo CSS. Adicione um título, parágrafos e estilize-os usando classes e IDs.
    • Experimente diferentes propriedades CSS, como background-color, border, e margin.
  2. Praticar Seletores e Especificidade:
    • Adicione regras CSS para selecionar elementos por tags, classes e IDs. Teste como a especificidade afeta a aplicação dos estilos.
  3. Desafio Extra:
    • Crie uma página com um layout simples, incluindo um cabeçalho, um corpo de texto e um rodapé. Use CSS para estilizar e posicionar esses elementos na página.

Essa aula forneceu uma visão geral essencial sobre o CSS e como ele é usado para estilizar páginas web. Com esse conhecimento, você pode começar a aplicar estilos básicos e preparar-se para técnicas de design mais avançadas.

voltar

ninja
ninja css
Esta postagem está licenciada sob CC BY 4.0 pelo autor.