Introdução

O que é CSS?

- CSS (é um acrônimo para: Cascading Style Sheet), para o português seria: um jeito de escrever uma folha de estilo em cascata.

- É um código para cirar estilos para o nosso HTML;

- HTML é a estrutura do documento, CSS é o que da a cor, a beleza para ele;

- CSS não é uma linguagem de programação, mas dizemos que ele é uma linguagem Style Sheet.

- Se você quiser praticar o CSS em conjunto com o HTML e JS, recomendo o site: Codepen

Exemplo Básico:

Imagine que você tem em seu código o seu título da página, e você quer mudar a cor dele:

<h1>Título da Página</h1>
Perceba que <h1> é a tag utilizada, para mudar sua cor através do CSS fariamos o seguinte:
h1 {
color: blue
}

Como resultado teremos:

Título da Página

Pronto, agora você já tem uma noção do que é o CSS na prática.

Adicionando CSS em docs HTML

Temos 4(quatro) formas de adicionarmos CSS em nossos códigos HTML, veja quais são elas:

##inline: atributo Style;

##style: tag html que vai conter o CSS;

## <link>: arquivos externos;

##import: arquivo de CSS externo.

Um dos jeitos de adicionar o CSS ao HTML é colocando ele todo por linhas, como assim? Veja:

<h1 style= "color: greenyellow">
Exemplo
<strong style= "color: brown">
Aqui

</h1>

Resultado:

Exemplo Aqui

--------------------------------------------------------------------------------------------------------------

Outro jeito é adicionando através da tag <style> que se localiza na <head>. Exemplo:

<style>

h1 {
color: blue
}

strong {
color: red
}

</style>

Resultado:

Exemplo Aqui

Esta é uma das maneiras mais vistas no mercado hoje. Mas abaixo deixarei uma outra maneira mais organizada de se fazer.

------------------------------------------------------------------------------------------------------------------------

Bom este método se torna mais organizado pois não utilizaremos os memso documento para criação do nosso CSS, por outro lado, nós utilizaremos um aruivo CSS, que é possível criar no VSCode, abrindo um arquivo novo e salvando-o como ".css". Neste arquivo criaremos todo o nosso CSS e para importa-lo para o HTML, utilizamos a tag:

<link rel="stylesheet" href= "nome_do_arquivo.css">

Comentários

- Não vão afetar o código

- Nos ajudam a lembrar blocos de códigos

- Deixa dicas para leitura

- Ajuda outros a entenderem

- Nunca esqueça de fechar um comentário aberto

- Podemos usar para desabilitar uma parte do código

No CSS os comentários são iniciados por /* e terminados com */.

Anatomia

Vamos entender agora a anatomia do CSS e como é feita a conexão dele com o HTML.

- Selector: é a tag que dirigiremos os comandos de CSS, exemplo h1, o selector vai procurar no documento HTML por esses h1 e onde houver, ele vai aplicar as propriedades definidas pelo CSS, sejam elas, cor, fonte, tamanho de fonte, fundo;

- Declaration: é tudo que fica dentro das chaves, é a declaração do que o CSS deve aplicar ao HTML;

- Properties: são as propriedades que definiremos a cor, fonte, tamanho da fonte, etc. mas utilizamos nomenclaturas em inglês, como color, font-size, background-color;

- Property Value: este é o valor que atribuimos à propriedade como azul para color, 30px para font-size e white para background-color.

OBS.: A chave do CSS é conhecer as mais diversas propriedades, pois com elas, mais edições e estilizações são possíveis.

Selectors

Conecta CSS ao HTML.

Tipos:

- Global Selector: *

- Element/Type Selector: h1, h2, div, p

- ID Selector: #box, #container

- Class Selector: .red , .m-4

obs.: o . antes do red e m-4 serve para dizer que eles são uma classe.

- Atribute Selector, Pseudo-Class, Pseudo-Element, entre outro.

Box Model/Caixas

O CSS trabalha com um modelo de box model, mas o que vem a ser essa caixa? Bom, é um retângulo. Essa tem como propriedades:

- Podem ficar uma em cima da outra, ou do lado;

- Elementos HTML no geral são caixas;

- Quase tudo no CSS são caixas;

- Tamanho: largura x altura / width x height, respectivamente;

- Conteúdo: content;

- Borda: border;

- Preenchimento Inteiro: padding;

- Espaços fora da box model: margin.

Cascata

É o C de CSS, Cascading, a escolha do browser de qual regra aplicar, caso haja muitas regras para o mesmo elemento

Estilo lido de cima para baixo (como uma cascata). Ou seja, cada comando de edição, para aplicar uma cor, fonte, etc. é lida de cima para baixo, nessa mesma ordem onde podemos ter por exemplo:
<h1 {
color: red
}
<h1 {
color: blue
}

Ele pegará a formatação de cor vermelha para o texto, mas em seguida vem a formatação para azul, então essa será a formatação aparente.

É levado em consideração 3 (três) fatores:

Origem do Estilo
Especificidade
Importância

Origem do Estilo

Um inline é muito mais "forte" que um tag style, que por sua vez é mais "forte" que um tag link. Calma, se você não entendeu o que são cada atributo desses veja o exemplo:

Exemplo Inline:

<h1 style= "color: greenyellow"> Exemplo <h1>

Exemplo Tag Style:

<style>
h1 {
color: brown
}
</style>

Exemplo Tag Link:

<link rel= "stylesheet" href= "nome_do_arquivo.css">

Explicação: Digamos que esse código CSS abaixo esteja em um arquivo X, e estamso trabalhando no arquivo Y, utilizamos a tag link para fazer a importação desse CSS.

<style>
h1 {
color: yellow
}
</style>

Especificidade

É um cálculo matemático onde, cada tipo de origem do estile e seletores, possuem valores que devem sempre ser considerados.

0. Universal selector, combinators e negation pseudo-class (:not())

1. Element type selector e pseudo-element (::before, ::after)

10. Classes e attribute selectors. Exemplo: class="title"

100. ID Selector. Exemplo: id="my-title"

1000. Inline. Exemplo: style="color: gray"

Regra !important

Tenha em mente 3 coisas:

- Evite o uso

- Não é considerado uma boa prática

- Quebra o fluxo natural da cascata

Para que serve? Ela se ultrapassa aquele esquema das "forças" que são aplicadas, de fato, pode e provavelmente vai acontecer um dia de você ter de usar, como exemplo, você está usando a biblioteca de alguém, e por mais que tente não consegue fazer a alteração de CSS desejada, bem, neste caso sim, usa-se essa regra, mas, como fazemos para usá-la? Simples, vá até a formatação que deseja, lá em style e adicione: !important

At Rules

Tem relação com o comportamento do CSS. Para usarmos, iniciamos com "@" seguido do identificador de valor.

Exemplos de identificadores:

- @import: Importa um arquivo CSS externo;

- @media: São regras condicionais para dispositivos;

- @font-face: Fontes externas;

- @keyframes: Animação.

Exemplos Práticos:

@import:

@import url("link_vem_aqui");

@import "link_vem_aqui";

@media:

@media (min-width: 500px {
aqui_vem_as_regras
}

@font-face:

@font-face {
aqui_vem_as_regras
}

@keyframes

@keyframes nameofanimation {
aqui_vem_as_regras
}

Mais para frente veremos melhor essas regras, não se preocupe.

Shorthand

É uma junção de propriedades que utilizamos diversas ideais do CSS de uma maneira resumida, e claro, de uma forma mais legível.

Aí você se pergunta "Como faço essa junção de propriedades resumida e legível?".

Veja nos exemplo práticos abaixo:

Background: temos algumas propriedades, que estudaremos mais a fundo em seguida.

Ao invés de colocarmos linha por linha as propriedades do Background, colocaremos na mesma linha:

background: #000 url(imagem_linkada) no-repeat left top;

Veja como seria sem Shorthand:
background-color: #000;
background-image: url(imagem_linkada);
background-repeat: no-repeat;
background-position: left-top;

Font: propriedades relacionadas a fonte como, tamanho, estilo, tamanho da linha, fonte da letra...

font: italic bold .8em/1.2 Arial, sans-serif;

Sem utilizar Shorthand:
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

Detalhes:

Shorthand não vai considerar propriedades anteriores;

Valores que não forem especificados receberão valores padrões;

A ordem descritas das propriedades não importa tanto, pois se houver propriedades com valores muito semelhantes, pode-se encontrar problemas.

Propriedades que aceitam Shorthand:

animation, background, border, border-bottom, borde-color, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, offset, outline, overflow, padding, place-content, place-items, place-self, text-decoration, transition, entre outros...
Se quiser saber masi sobre as propriedades que aceitam Shorthand, recomendo que acessem o site da MDN.

Funções

Funções nada mais são que um nome seguido de abre e fecha aprentesis, esse nome recebe argumentos (informações), veja o exemplo:
color: rgb(255, 0, 100);
width: calc(100% - 10px);