O que é o CSS?

CSS é quem formata a informação marcada em HTML.

Com CSS podemos formatar diversas características básicas como:

cores
fundo
fontes
margens
espaçamentos
posições

Como utilizar?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Inline</title>
  </head>
  <body>
    <h1 style="color: blue;">Aplicando um CSS</h1>

    <p style="font-size: 1.2em;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </body>
</html>

Como utilizar?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Interno</title>
    
    <style>
    	#titulo1 {
        	color: blue;
        }
        
        .paragrafo {
        	font-size: 1.2em;
        }    
    </style>
  </head>
  <body>
    <h1 id="titulo1">Aplicando um CSS</h1>

    <p class="paragrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </body>
</html>

Como utilizar?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Externo</title>

    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1 id="paragrafo1">Aplicando um CSS</h1>

    <p class="paragrafo">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </body>
</html>

#paragrafo1 {
  color: blue;
}

.paragrafo {
  font-size: 1.2em;
}

Como utilizar?

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Externo</title>

    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>Aplicando um CSS</h1>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
  </body>
</html>

h1 {
  color: blue;
}

p {
  font-size: 1.2em;
}

Seletores

Representa uma estrutura que condiciona quais elementos serão formatados.

seletor {
  propriedade: valor;
}

Podem ser encadeados ou agrupados:

section p {
  color: red;
}

strong, em {
  color: red;
}

Seletores Complexos

Seletores são a alma do CSS.

Seletores complexos facilitam e nos dão precisão ao formatar:

Elementos com atributo específico;
Elementos com um valor específico em um atributo;
Elementos filhos de um determinado pai;
Elementos que precedem de outro;
Elementos habilitados e desabilitados;
Campos obrigatórios de um formulário.

Pseudo-classes

Manipulam um determinado estado do elementos.

Podem ser dinâmicas ou estruturais:

Passar o mouse por cima;
Elemento visitado;
Elemento ativo;
Elemento com foco;
Encontrar elementos específicos.

Pseudo-elementos

Permitem acessar informações inacessíveis e referenciar conteúdos que não existem.

Encontrar a primeira letra de um texto;
Encontrar a primeira linha de um texto;
Adicionar um elemento antes ou depois de um elemento existente.

Guia de Propriedades

A Propriedade Display

Especifica o tipo de caixa de renderização usada por um elemento

Também pode ocultar um elemento

A Propriedade Float

Determina se o elemento deve sair do seu fluxo natural

A Propriedade Float

/* Esquerda */
float: left;

/* Direita */
float: right;

/* Padrão */
float: none;

/* Global values */
float: inherit;

Propriedades Background

São 8 as propriedades para estilizar o fundo de um elemento

Propriedades Background

/* Cor de Fundo */
background-color

/* Imagem de Fundo */
background-image

/* Posicionamento do Fundo */
background-repeat

/* Determina a movimentação do fundo */
background-attachment

/* Determina o posicionamento do fundo */
background-position

/* Determina a área do fundo */
background-clip

/* Determina a posição de origem do fundo */
background-origin

/* Determina o tamanho do fundo */
background-size

/* Atalho */
background