CSS (Cascading Style Sheets) é uma linguagem de estilos que descreve como os elementos HTML devem ser exibidos em tela. Através do CSS é possível definir propriedades como cor, fonte, tamanho, espaçamento e muitos outros aspectos visuais da página.
A primeira coisa que precisamos fazer é criar um arquivo com a extensão .css, preferencialmente no mesmo nível do arquivo HTML.
Para conectar o arquivo de estilos ao nosso HTML, basta adicionarmos dentro da nossa tag <head> uma tag link especificando no atributo href o caminho do nosso arquivo .css está, assim:
<link rel="stylesheet" href="styles.css">
Exemplo da sintaxe do CSS:
seletor {
propriedade: valor;
}
Para deixar o nosso projeto mais flexível e facilitar futuras alterações, podemos utilizar variáveis para fontes e cores no CSS, como no exemplo abaixo:
No arquivo de estilos vamos começar declarando as variáveis no root:
:root {
--ff-title: "Open Sans", sans-serif;
--bg-primary: #9900EF;
--fc-primary: #FFFFFF;
}
E para chamar uma variável em um elemento, basta chamá-la assim:
body {
background-color: var(--bg-primary);
}
Isso facilita demais a manutenção! Imagina que uma cor precisa ser alterada: não precisaremos pesquisar por ela no código todo, basta alterarmos o valor na variável. 💙