Até agora, trabalhamos apenas com HTML.

Embora o HTML forme a espinha dorsal do conteúdo da web, a necessidade de personalização e apelo visual nos leva às Folhas de Estilo em Cascata (CSS).

O CSS é um padrão web projetado para estilizar elementos HTML, permitindo-nos controlar a apresentação e o layout de nossas páginas web.

Exemplo de regra CSS

Aqui está um exemplo básico de uma regra CSS que estiliza tags de parágrafo:

p {
  color: red;
}
  • Selecione (p): Identifica o elemento HTML ao qual serão aplicadas as regras de estilo.
  • Bloco de declaração ({ color: red; }): Contém uma ou mais declarações. Cada declaração é composta por uma propriedade (cor) e seu valor correspondente (vermelho).

Como aplicar CSS?

CSS pode ser aplicado de diversas maneiras no seu site:

1. Estilo embutido

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

2. Estilo interno (dentro do documento HTML)

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

3. Estilo externo (em arquivo CSS separado)

<head>
  <link href="style.css" rel="stylesheet" />
</head>

4. Múltiplas regras CSS

Você pode listar várias regras CSS para aplicar estilos diferentes a vários elementos:

p {
  color: red;
}

a {
  color: blue;
}

Um seletor pode ter como alvo um ou mais itens:

p, a {
  color: red;
}

Seletores e espaçamento

Os seletores podem ter como alvo um ou mais itens, e o espaçamento é insignificante em CSS:

p,a {
  color: red;}
p,a {              color: red;
         }

Melhores Práticas de CSS

  • Cada declaração no bloco de declaração deve terminar com ponto e vírgula (;).
  • O recuo e o espaçamento adequados melhoram a legibilidade, mas não são exigidos pelo navegador.

A compreensão desses conceitos fundamentais permite que você aprimore os aspectos visuais de seus documentos HTML usando CSS. À medida que você se aprofunda, descobrirá a versatilidade e o poder que o CSS traz para o desenvolvimento web. Fique ligado para obter mais informações sobre técnicas avançadas de CSS e práticas recomendadas.

Categorized in:

HTML, CSS, Fundamentals,