AFINAL, O QUE É ESSE TAL DE CSS ?
Folha de Estilo em Cascata, Cascading Style Sheet ou CSS é o código utilizado para determinar como os elementos HTML devem ser apresentados na tela. Assim como o HTML o CSS não é uma linguagem de programação, mas diferente do HTML ela não é uma linguagem de marcação também. O CSS é portanto um mecanismo que tem como função definir os componentes visuais nos elementos do HTML de forma seletiva, incluindo design, layout e variações de apresentação de acordo com o dispositivo em que o site será renderizado.
Quando tags de estilo foram introduzidas ao HTML 3.2 os desenvolvedores passaram a viver um pesadelo, pois em cada página era necessário passar essas tags para dar estilo aos elementos. Para resolver este problema a W3C criou o CSS, removendo assim as formatações de estilo do documento HTML.
Usando o CSS economizamos muito tempo, pois como o código está salvo em um documento externo, não precisamos ficar escrevendo repetidamente como elementos individuais devem ser comportar. Assim como podemos controlar o layout de múltiplas páginas do site ao mesmo tempo, outra vantagem é a possibilidade de chamar dentro do documento de HTML vários arquivos de CSS, o que aumenta muito as possibilidades de personalização.
LEGAL, MAS COMO QUE EU ESCREVO UM CÓDIGO DESSE ?
Certo, agora que entendemos o que é esse tal de CSS, precisamos falar sobre sintaxe.
Mas calma.
Vamos por partes.
É muito importante entender que as regras do CSS são baseadas em blocos e seletores. Usamos os seletores para indicar qual elemento do HTML estamos estilizando, e as regras do CSS são passadas dentro de um bloco, como o exemplo abaixo.
No exemplo temos um código CSS que está definindo as margens e a forma como a tag <p> é apresentada no site. Vamos nos aprofundar um pouco mais sobre esta sintaxe.
Seletores CSS
Os seletores são os elementos do HTML que você deseja estilizar, no último exemplo era o elemento <p>, que é utilizado para marcação de parágrafos. No exemplo abaixo o seletor é <h1> , que marca os textos mais importantes do HTML como um título, por exemplo.
Na sequência do seletor teremos sempre um bloco delimitado por colchetes (os famosos bigodinhos) e dentro teremos a relação propriedade (color e font-size) e valor (blue e 12px). Podem ser passadas várias propriedades e cada uma delas deve ser separada por ponto e vírgula.
Abaixo temos alguns exemplos de seletores:
- Seletores de elementos: seleciona os elementos do HTML.
- Seletores de ID: faz a seleção do atributo no HTML com base em seu ID, que é um elemento único de um elemento, as boas práticas orientam a utilizar um ID por elemento. O seletor de ID é identificado com o uso do sinal # na frente do nome do ID.
- Seletores de classe: seleção com base na classe dos atributos. Diferente do ID a mesma classe pode ser aplicada a vários atributos. Para selecionar uma classe no CSS utilizamos um ponto (.) antes do nome da classe. Considere a classe “fixed-top” da imagem anterior.
- Seletores de atributo: faz a seleção de um elemento com um atributo específico. No exemplo abaixo estão sendo selecionadas todas as tags <a> que possuem o atributo target igual blank.
- Seletores de pseudo-classe: uma pseudo classe é uma palavra-chave que serve para especificar um estado especial do elemento HTML selecionado. No exemplo abaixo está sendo estilizada a primeira letra de cada elemento <p>.
Inserindo o CSS no HTML
Agora que entendemos mais sobre como escrever um código de estilo, o próximo passo é adicioná-lo ao HTML, há três formas de inserir o CSS no documento de HTML.
CSS EXTERNO
Neste formato temos um arquivo externo com todo o código CSS e referenciamos este arquivo dentro do HTML na seção <head>. A referência para o CSS deve ser passada dentro da tag <link>.
CSS INTERNO
Outra forma de adicionar o CSS no HTML é internamente. Essa forma deve ser usada se um documento HTML possuir apenas um estilo único. O CSS interno é definido dentro do elemento <style> na seção <head>.
CSS INLINE
A adição inline do CSS pode ser usada para aplicar estilos para um único elemento. É possível passar qualquer propriedade de CSS no formato inline.
Porém usar muito este formato elimina as principais vantagens do CSS, pois se o desenvolvedor usar somente CCS inline caso queira alterar o estilo futuramente, terá que mudar todo o documento HTML.
ORDENAÇÃO
Por fim, é importante entender que por ser uma cascata, há uma ordem de renderização do estilo, quando há mais de um dentro do html.
A prioridade é:
- CSS Inline
- CSS Externo e Interno
- Padrão do navegador
Quando passamos o CSS na seção <head> a prioridade é dada pela ordem que o CSS é colocado, o último sobrescreve o anterior.
Se temos o arquivo main.css com o seguinte código.
body {
background-color: black;
}
h1 {
color: red;
margin-left: 40px;
}E no HTML fizermos a seguinte declaração:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>TEXTO</h1>
</body>
</html>O CSS interno irá sobreescrever as propriedades do CSS externo. No caso a cor do TEXTO será verde e não vermelha, porém a cor de fundo do <body> não foi redefinida no CSS interno, permanecendo com as definições do CSS externo.
Links:
