Introdução ao CSS

Bem vindo!

Vamos entender o CSS!

Propriedades e valores

Uma propriedade é uma característica de um elemento do nosso HTML (cor de fundo, largura, altura, espaçamento, etc). Um valor define o resultado de uma propriedade e como o navegador deve exibir o estilo daquele elemento.

Formas de declarar o CSS

  • CSS Inline: adicionamos o código CSS utilizando o atributo style dentro das tags HTML, elemento por elemento.
  • CSS Interno: código CSS é adicionado dentro da tag <head> da página HTML. Dentro da tag <head> adicionamos outra tag, a <style>, e colocamos as regras CSS nessa área.
  • CSS Externo: é criado um arquivo com a extensão .css com todas as regras CSS que queremos aplicar e esse arquivo é referenciado no HTML da página através da tag <link>.

Seletores CSS

  • Seletor por tipo: Busca elementos por uma tag HTML especifica.

  • Seletor por ID (#): Busca elementos através do atributo "id", que é único para cada elemento HTML na página.

  • Seletor por Classe (.): Busca elemntos através do atributo "class".

  • Seletor Universal (*): Seleciona todos os elementos HTML.

  • Seletor de Atributo ([atrib]): Seleciona elemntos que possuem um atributo específico em nosso documento HTML e conseguimos também buscar atributos com um valor específico.

    Exemplo:

Combinadores

Agrupamento de Seletores

Podemos aplicar as mesmas regras CSS para vários seletores diferentes. Para isso, podemos separar os seletores utilizando uma vígula (,).

Assim, não precisamos fiar copiando e colando os mesmos códigos para todos, nós podemos fazer um só básico de CSS e reutilizar as mesmas regras!

Exemplos:

Clique para ver a documentação

Clique para entrar em contato

Voltar

Combinadores

Especifica o tipo de relação entre dois seletores.

Combinador Descendente

É o padrão e busca os elementos descendentes (filhos) do primeiro seletor para o segundo.

Exemplos:

  • Item 1
    • Subitem A
    • Subitem B
  • Item 2
    • Subitem A
    • Subitem B
  • Item 3
    • Subitem A
    • Subitem B

Combinador Filho

Busca os elementos filhos (filhos diretos) do primeiro seletor para o segundo.

Exemplos:

Parágrafo 1 dentro da div

Parágrafo 2 dentro da div

Paragrafo 3 dentro da div, dentro do span

Paragrafo 4 fora da div

Paragrafo 5 fora da div

Combinador Irmão

Busca os elementos irmãos (semelhantes) do primeiro seletor. Usa-se (+) para selecionar apenas o próximo irmão e (~) para selecionar todos os irmãos.

Exemplos:

Parágrafo 1 dentro da div

Parágrafo 2 dentro da div

Paragrafo 3 dentro da div, dentro do span

Paragrafo 4 fora da div

Paragrafo 5 fora da div

Parágrafo 6 dentro da div

Parágrafo 7 dentro da div

Paragrafo 8 dentro da div, dentro do span

Paragrafo 9 fora da div

Paragrafo 10 fora da div

Parágrafo 11 dentro da div

Parágrafo 12 dentro da div

Paragrafo 13 dentro da div, dentro do span

Paragrafo 14 fora da div

Paragrafo 15 fora da div

Dimensionamento e Espaçamento

Largura e Altura

Exemplo altura e largura de um elemento

A palavra-chave auto faz com que a altura e largura do elemento sejam adustadas de acordo com o conteúdo e o tamanho da tela.

A palavra-chave initial aplica o valor inicial padrão do css.

A palavra-chave inherit aplica o mesmo valor do elemento pai.

Div 01
Div 02


Largura e Altura Máxima e Mínima

Margin

Espaçamento externo de um elemento, criando espaço ao redor dele, fora das bordas.

  • Um valor: aplica-se a todos os lados
  • Dois valores: primeiro, em cima e embaixo, segundo laterais
  • Três valores: em cima, lados, embaixo
  • Quatro valores: em cima, esquerda, embaixo, direita

A palavra-chave auto faz com que o elemento fique centralizado na tela na horizontal. Então se ainda assim quiser aplicar margem em cima e embaixo tem jeito.

Podem ser aplicados também valores negativos, fazendo com que um elemento se sobreponha a outro.

Exemplos:

Padding

Espaçamento interno, cria espaço entre o conteúdo de um elemento e suas bordas.

Segue a mesma regra de margin para a quantidade de valores atribuídos.

Quando aumentamos o padding do elemento, é como se a largura e a altura aumentassem junto.

Exemplos:

Com padding:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, cumque facilis repellat dignissimos ullam tempore neque aliquam accusamus aperiam excepturi molestias delectus nam quo repellendus sunt sint. Optio, praesentium totam!

Sem padding:

Lorem ipsum dolor sit amet consectetur adipisicing elit. Box-siding:

Box Sizing = border-box

Define como o tamanho total de um elemento é calculado.

Com box-sizing border-box, o padding e a borda são incluídos na largura e altura definidas do elemento.

Com box-sizing content-box, a largura e altura aumentam com o padding.

Exemplos:

Box-siding = border-box: o elemento não aumenta com o padding.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, cumque facilis repellat dignissimos ullam tempore neque aliquam accusamus aperiam excepturi molestias delectus nam quo repellendus sunt sint.

Box-siding = content-box: o elemento aumenta com o padding.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, cumque facilis repellat dignissimos ullam tempore neque aliquam accusamus aperiam excepturi molestias delectus nam quo repellendus sunt sint.