O CSS (Cascading Style Sheet) é um documento de estilo, usado para estilizar elementos HTML. Alterações nas cores de texto e fundo, fontes e disposição de elementos são feitas no CSS.
CSS é super versátil e é possível fazer desde coisas bem simples como o visual de um botão, quando animações super complexas, sites interativos e jogos.
Exemplo de animaçãozinha feita em CSS: https://github.com/devyumao/dragon-loading
Aplicar um estilo é simples. Basta usar um seletor para selecionar o objeto de interesse. Um seletor pode ser uma tag HTML, uma classe, um id ou uma combinação de todos esses!
Tag → basta referenciar a tag diretamente
Classe → referenciado da forma .[nome-da-classe]
Id → referenciado da forma #[nome-do-id]
/* Referência a uma tag */
h1 {
font-size: 3rem;
}
/* Referência a uma classe */
.page-title {
color: red;
}
/* Referência a um id */
#page-id {
border: 1px solid #FAFAFA;
}
/* Referência a um elemento com a classe
button que está dentro de um elemento com
o id wrapper */
#wrapper .button {
background-color: #F0AB5F;
}
/* Referência a um elemento com a classe
button e o id form */
.button#form{
font-weight: 700;
}
Interno: o CSS é escrito dentro de uma tag style no próprio arquivo html. A maior vantagem é ter todo o conteúdo dentro de um único arquivo. Mas, essa estratégia pode não ser muito produtiva para sites muito grandes, já que o arquivo começa a ficar longo e difícil de entender.
A tag <style> fica dentro da tag <head>
Externo: cria-se um arquivo .css onde os estilos ficarão contidos. É a forma de organização mais usada, pois mantém o fluxo mais organizado.
Para importar um arquivo de CSS, basta usar a tag link e associar o arquivo
Inline: o estilo é aplicado diretamente no elemento html, fazendo uso do atributo style. Essa forma sobrescreve qualquer outro estilo aplicado interna ou externamente.
Prefira REM a PX.
Se você definir tudo como rem e definir no css o tamanho base da fonte da sua página
html { font-size: 16px; }Mas, para o celular, você deseja diminuir o tamanho da fonte. Como tudo está definido em rem, basta fazer:
html { font-size: 12px; }Pronto, tudo em fonte menor agora!
::before e ::after salvam vidas
Lembra do transition, ele deixa transições mais suaves