Falando um pouco sobre CSS

O CSS (Cascading Style Sheets) foi desenvolvido em 1996 por Håkon Wium Lie enquanto trabalhava na empresa de software norueguesa Opera Software. O objetivo era separar a apresentação visual de um documento HTML da sua estrutura lógica, permitindo assim que designers e desenvolvedores web trabalhassem de forma mais eficiente em conjunto.

A primeira versão do CSS foi publicada em dezembro de 1996 e, desde então, tem passado por várias atualizações e aprimoramentos. Hoje, o CSS é uma tecnologia fundamental para a web, permitindo que os desenvolvedores criem sites e aplicativos com aparência visualmente atraente e consistente em diferentes dispositivos e navegadores.

Como funciona

O CSS é uma linguagem de estilização que é aplicada aos elementos HTML em uma página da web. Basicamente, o CSS diz ao navegador como cada elemento HTML deve ser exibido na página.

É possível usar o CSS direto no seu html, porém uma das formas mais indicadas para seu uso é criando um arquivo separado com a extensão “.CSS”, que contém as instruções de estilo para sua página. Em seguida, você vincula esse arquivo “.CSS” ao seu arquivo HTML usando a tag <link>.

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

Dentro do arquivo CSS, você pode definir estilos para diferentes elementos HTML, como cabeçalhos, parágrafos, imagens e links. Por exemplo, você pode definir a cor do texto, o tamanho da fonte e o espaçamento entre linhas para um cabeçalho específico.

HTML

<div>
  <h1>Título 01</h1>
</div>

CSS

h1 {
  color: red;
  font-size: 24px;
  line-height: 15px;
}

O CSS é aplicado em cascata, o que significa que os estilos definidos mais recentemente têm prioridade sobre os estilos definidos anteriormente. No exemplo acima, o “color” seria lido primeiro que o “font-size”.

Isso permite que você substitua facilmente os estilos padrão de um elemento HTML e crie um visual personalizado para sua página da web.

A sintaxe do css

A sintaxe do CSS é baseada em regras que definem como um elemento HTML deve ser estilizado. Cada regra de estilo é composta por um seletor e uma ou mais declarações de propriedade/valor.

O seletor é usado para selecionar os elementos HTML que você deseja estilizar. Por exemplo, o seletor h1 selecionará todos os elementos de cabeçalho do tipo h1 na página, enquanto o seletor #meu-id selecionará apenas o elemento com o id "meu-id".

As declarações de propriedade/valor são usadas para definir os estilos que deseja aplicar ao(s) elemento(s) selecionado(s). 

A sintaxe básica de uma regra de estilo é:

seletor {
  propriedade: valor;
}

Como ligar o CSS aos elementos HTML

Para aplicar estilos CSS a elementos HTML específicos, você pode usar diferentes métodos de referência.

TAG

O método mais simples é referenciar um elemento pelo nome da tag HTML. Por exemplo, para aplicar um estilo a todos os cabeçalhos <h1> em uma página, você pode usar o seletor de tag h1 no seu arquivo CSS.

HTML

<div>
  <h1>Título 01</h1>
</div>

CSS

h1 {
  color: blue;
  font-size: 24px;
}

ID

No entanto, se você deseja aplicar um estilo a um elemento específico, pode usar a propriedade “id”. 

Você define um id exclusivo para um elemento HTML, como <div id="titulo">, e pode referenciá-lo no seu arquivo CSS usando o seletor de id #titulo. Isso permite que você aplique estilos a esse elemento específico.

HTML

<div id="titulo">
  <h1>Título 01</h1>
</div>

CSS

#titulo {
  color: blue;
  font-size: 24px;
}

CLASS

Também é possível usar a propriedade class para aplicar estilos a vários elementos HTML. Você define uma classe para um ou mais elementos HTML, como 

<p class="minha-classe">, e pode referenciá-la no seu arquivo CSS usando o seletor de classe .minha-classe. Isso permite que você aplique estilos a todos os elementos que compartilham essa classe.

HTML

<div class="titulo">
  <h1>Título 01</h1>
</div>

<div class="titulo">
  <h1>Título 02</h1>
</div>

<div class="titulo">
  <h1>Título 03</h1>
</div>

CSS

.titulo {
  color: blue;
  font-size: 24px;
}

Em resumo, para referenciar elementos HTML em CSS, você pode usar: 

- O nome da “tag”, para uma referência direta. 

- O “id”, que só pode usar um “id” específico por elemento. 

- A “class”, pode ser utilizada em vários elementos ao mesmo tempo.

O CSS é uma ferramenta poderosa para controlar a aparência e o layout de elementos HTML em uma página da web. Com o CSS, é possível criar um design visualmente atraente e responsivo, que funcione bem em diferentes dispositivos e navegadores.

Lembrando que essa foi apenas uma pequena introdução ao CSS, essa tecnologia abrange muito mais coisas. Para uma leitura mais aprofundada, eu sugiro o site w3schools.

😀 Caso tenha algum feedback ou sugestão, deixe no comentário abaixo. 😀