Guia Estelar de CSS

Conhecendo o CSS

CSS é uma forma de escrever uma folha de estilos em cascata.

É um código para criar estilos no HTML, que como vimos, é a estrutura de todo o documento, já o CSS seria a beleza, a parte bonita.

CSS não é uma linguagem de programação, é uma linguagem style sheet, pois mesmo não sendo de programação, ainda possui uma ideia de sintaxe, e assim, precisamos aprender a forma correta de se escrever.

Voltar ao índice

Comentários

Os comentários, no CSS, abrem com /* e terminam com */.

Eles não irão afetar o meu código, e podem me ajudar a lembrar de, ou agrupar e organizá-lo, além de deixar dicas para a leitura e ajudar outros devs a entende-lo.

Também posso usar um comentário para desabilitar partes do código, o que possibilitaria um debug mais fácil (ou caso deseje fazer alguma alteração sem quebrá-lo).

/* Exemplo de código de comentário em um arquivo .css */

Voltar ao índice

Anatomia

O nome de algum elemento, uma chave aberta e uma fechada embaixo, e no meio vamos ter propriedades e seus valores.

Toda propriedade é seguida de :(dois pontos) e um valor, e um ; (ponto e vírgula) para encerrar essa ideia de valor.
Por exemplo:

h1 {
color: blue;
font-size: 60px;
background: gray;
}
Os elementos do CSS são então:

Selectors: Nesse caso o h1, que vai buscar no HTML a tag h1 e aplicar as mudanças.
Declaration: As chaves e tudo dentro delas.
Properties: As coisas a serem alteradas.
Property values: Os novos valores que estamos atribuindo a tais propriedades.

Voltar ao índice

Seletores

Os seletores são o que conectam um elemento HTML com o CSS.
Existem vários tipos:

Element/Type selector, que usei na última aula 'h1, h2, p, div';
Universal Selector, que é um * (asterisco);
ID Selector, que é um # (cardinal, jogo da velha) '#box, #container';
Class Selector, que é um . (ponto) seguido do nome da classe '.red, .m-4';
... e mais alguns que vou entender mais tarde no curso.

Exemplos:
HTML:
<p class="exemploidselector">
Exemplo de <b>ID Selector.</b>
</p>
CSS:
.exemploidselector, .exemploidselector b {
   color: red;
   font-size: 25px;
   background: black;
  }
Resultado:

Exemplo de ID Selector.

Voltar ao índice

Box model

O CSS trabalha com essa ideia de caixas, chamada "box model".
O que é:

O box model é uma caixa retangular. Essa caixa possui as mesmas propriedades de uma caixa 2D, e tem como propriedades:

Tamanho (largura x altura): width e height, respectivamente;
Conteúdo: o content;
Bordas: o border;
Preenchimento interno: o padding;
Espaços fora da caixa: a margin.

Quase todo elemento de uma página é considerado uma caixa: Posicionamento, tamanhos, espaçamentos, bordas, cores, então, em suma, elementos HTML são caixas, assim como quase tudo no CSS.

As caixas podem ficar ao lado uma da outra, ou acima.

Exemplo:
HTML:
<div class="divtest">
  <h3 class="h3id">Aprenda HTML</h3>
  <div class="boxmodeltest">
   <p class="examplebox">Empodere-se da capacidade de criar.</p>
   <button class="button" style="color: white;">Embarcar!</button>
  </div>
 </div>
CSS:
.divtest{display:grid;
width:50vw;
align-items:center;
justify-content:space-between;}
.h3id{margin:20px;
padding:20px;
text-align:20px;
font-size:30px;}
.boxmodeltest{display:flex;}
.examplebox{padding-top:5px;
font-size:17px;}
.button{background-color:purple;
border-color:purple;
font-size:17px;}
Resultado:

Aprenda HTML

Empodere-se da capacidade de criar.

Voltar ao índice

Origem do CSS

Vamos primeiro aprender a adicionar um estilo no nosso documento HTML.
Inline:

Começaremos pelo inline, que é dentro do próprio HTML, através da tag style, utilizada das seguintes formas:

<h3 style="color: blue;">Título
<strong style="color: red;">alo</strong>
</h3>
Ou na head do HTML, assim:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
  <style>
h1 {
color: blue;
}
strong {
color: red;
}
  </style>
</head>
Tag link:

Porém, a forma mais comum, é através da tag link, onde vamos linkar um documento CSS externo, um outro arquivo para nosso documento HTML, feito da seguinte forma:

<link rel="stylesheet" href="style.css>
Neste caso, o nosso documento CSS se chama style.css e sua relação com o HTML é de stylesheet.
Import:

A última forma é através do @import, que é uma regra do CSS:

@import url('https://fonts.googleapis.com/');

Não é recomendado seu uso, pois leva um pouco mais de tempo do que através da tag link, deixando a página menos responsiva, demorando mais no carregamento.

Voltar ao índice

A Cascata

Na ordem de aplicações, caso haja algum selector com informações conflitantes, o mais embaixo é o que será atribuído.
Seu estilo é lido de cima para baixo.

Por exemplo:

h1 {color: red;}
h1 {color: blue;}

Nesse caso, o blue irá prevalecer pois está abaixo do red.

    São levados em consideração 3 fatores:
  1. Origem do estilo;
  2. Especificidade;
  3. Importância;

Origem do estilo:

Inline > tag style > tag link.
Inline:

O inline (<style="color: exemplo">) está direto no HTML, e direto no código.
Exemplo:

<h1 style="color: green">Exemplo </h1>
<p>parágrafo </p>
Tag style:
A tag style também está no HTML, mas fora do código.

Exemplo:

<style>
h1 {color: gray;}
</style>
<h1>Exemplo </h1>
<p>parágrafo </p>
Tag link:
A tag link é o CSS externo linkado ao HTML.

Exemplo:

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

Voltar ao índice

Especificidade

É um cálculo matemático, onde cada tipo de seletor e origem de estilo possuem valores a serem considerados.

0. Universal selector, combinator e negation pseudo-class (:not( ))
1. Element type selector e pseudo-elements (::before, ::after)
10. Classes e attribute selectors ([type="radio"])
100. ID selector.
1000. Inline.

Qualquer elemento com cálculo de valor superior irá prevalecer sobre o efeito cascata.

Exemplo:

h1 {color: red;}
h1 {color: blue;}
* {color: green;}

Apesar de estar acima, o h1 {color: blue;} irá prevalecer sobre o * {color: green;} pois seu valor é 1, enquanto o * tem valor 0.

Seletores podem ser somados para aumentar o seu valor.

Exemplo:

.class {color: purple;}
h1 {color: red;}
h1 .class {color: blue;}
* {color: green;}

Nesse caso, apesar do .class ter valor 10, o h1 .class se sobressai pois tem valor 11 (1+10).

Quando houver duas ou mais origens dentro de uma, elas devem ser especificadas.

Exemplo:

<h1 id="title">Título <strong>alo </strong> </h1>
#title {color: gray}
* {color: green}

Apesar de ter valor 0, o * será aplicado no "alo" pois o mesmo não foi especificado no #title.
Deveria ficar assim:

#title,
#title strong {color: gray}
* {color: green}

E, dessa forma, o alo ficaria cinza também.

Voltar ao índice

Regra important

Sintaxe: !important

São raras as ocasiões nas quais se devem usar um important, pois é uma má prática. Ela quebra o fluxo natural da cascata e das especificidades e pode acabar me atrapalhando caso eu a deixe em algum lugar no meu código.

Evitar!

Voltar ao índice

At rules

São regras relacionadas ao comportamento do CSS, começa com um sinal de @ seguido do identificador e do valor.

    São as seguintes:
  • @import serve para incluir um CSS externo.
  • @media são regras condicionais para vários dispositivos.
  • @font-face é pra colocar fontes externas.
  • @keyframes serve para as animations do CSS.

Voltar ao índice

Shorthand

É a junção de propriedades, para que fiquem de forma resumida e legível.

Exemplo de propriedades com e sem o shorthand:

* {
/* background properties */
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

/* background shorthand */
background: #000 url(images/bg.gif) no-repeat left top;

/* font properties */
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

/* font shorthand */ font: bold italic .8em/1.2 Arial, sans-serif;
}
Algumas características do shorthand:

Não irá considerar propriedades anteriores, ou seja, caso faça um shorthand, apenas ele será considerado, quaisquer propriedades anteriores serão substituídas pelas do shorthand.

Os valores que não forem especificados irão assumir o valor padrão.

Por fim, geralmente, a ordem descrita não importa, mas, caso haja muitas propriedades com valores semelhantes, poderemos encontrar problemas.

Shorthand Properties

Voltar ao índice

Funções

Um tipo de valor existente no CSS, é estruturado com um nome seguido de abre e fecha parênteses. Recebe um argumento, que são seus valores.

Um exemplo de função é:

color: rgb(255, 0, 100);

Voltar ao índice

DevTools

F12

Uma das ferramentas mais importantes para o desenvolvedor CSS, o DevTools é aberto ao apertar F12 em uma página web.

Voltar ao índice

Cuidados com a escrita

É importante prestar atenção à sua escrita do CSS, identificar seu código para facilitar a leitura, e mais importante, manter tudo organizado e funcionando!

Voltar ao índice

Vendor prefixes

São coisas que permitem que browsers adicionem features a fim de colocar em uso alguma novidade que vemos no CSS.
< class="infop">Exemplos:
p {
-webkit-background-clip: text; /*Chrome, Safari, iOS e Android */
-moz-background-clip: text; /* Mozilla (Firefox) */
-ms-background-clip: text; /* Internet Explorer ou Edge */
-o-background-clip: text; /* Opera */
}

É possível consultar se a feature pode ser utilizada através dos sites:
Ireade vendor prefix
Caniuse

Voltar ao índice