Estilos CSS

O que singifica CSS?

CSS é a sigla para Cascading Style Sheets, que significa Folhas de Estilo em Cascata. Na prática, o CSS é usado para estilizar os elementos HTML, permitindo modificar características como cor, tamanho de fonte, espaçamento, posicionamento, entre outros.

Assim como o HTML, o CSS não é uma linguagem de programação, mas sim uma linguagem de folhas de estilo. Ele funciona em conjunto com o HTML para definir a aparência visual das páginas. Com o CSS, é possível aplicar estilos seletivamente, escolhendo a quais elementos as regras serão aplicadas. Isso é feito por meio dos seletores, que utilizam a seguinte estrutura:

seletor {
  propriedade1: valor1;
  propriedade2: valor2;
  propriedade3: valor3;
}

Explicando a sintaxe:

• Cada seletor deve ser seguindo das chaves {}
• Cada propriedade deve ser seguida de dois pontos :
• Ao final de cada declaração (propriedade e seu valor) deve ser finalizada com ponto e vírgula ;

Agora vamos ao exemplo prático:

<style>
span {
  color: blue;
  font-size: 28px;
}
p {
  font-style: italic;
  margin: 40px;
}
div {
  border: 2px solid orange;
  border-radius: 12px;
}
</style>
<div>
  <p>
    Caiu na rede,
    é <span>peixe</span>!
  </p>
</div>

Resultado:

No exemplo acima:

• A cor azul e o tamanho de fonte de 28 pixels foram aplicados apenas ao elemento <span>.
• O elemento <p> recebeu estilo itálico e uma margem de 40 pixels.
• O elemento <div> ganhou uma borda laranja de 2 pixels com um arredondamento de 12 pixels.

Como selecionar múltiplos elementos no CSS?

Para aplicar o mesmo estilo a vários elementos, basta utilizar vírgulas entre os seletores. Exemplo:

h1, p, li {
  color: red;
}

Nesse caso, os estilos são aplicados simultaneamente aos elementos <h1>, <p> e <li>.

Tipos de seletores

O CSS oferece diferentes tipos de seletores que permitem especificar com precisão os elementos a serem estilizados.

p {
  color: green;
}

#meu-id {
  color: orange;
}

<div id="meu-id">conteúdo</div>

.minha-classe {
  color: blue;
}

<div class="minha-classe">conteúdo</div>

input[disabled] {
  color: grey;
}

<input type="text" disabled>

a:hover {
  color: red;
}

<a href="#">link</a>