Introdução CSS

CSS é uma das ferramentas mais importantes para projetar e embelezar a aparência de um site. Vamos te ensinar o básico e como usar CSS

CSS pode alterar o estilo de beleza HTML

CSS é a linguagem que usamos para estilizar uma página da Web.

O que é CSS?

CSS significa Cascading Style Sheets
CSS descreve como os elementos HTML devem ser exibidos na tela, papel ou em outra mídia
CSS economiza muito trabalho. Ele pode controlar o layout de várias páginas da web de uma só vez
Folhas de estilo externas são armazenadas em arquivos CSS

Demonstração de CSS - Uma página HTML - Vários estilos!

Aqui vamos mostrar uma página HTML exibida com quatro folhas de estilo diferentes. Clique nos links "Folha de estilo 1", "Folha de estilo 2", "Folha de estilo 3", "Folha de estilo 4" abaixo para ver os diferentes estilos:

Por que usar CSS?

CSS é usado para definir estilos para suas páginas da web, incluindo design, layout e variações de exibição para diferentes dispositivos e tamanhos de tela.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS resolveu um grande problema

HTML NUNCA foi destinado a conter tags para formatar uma página da web!

HTML foi criado para descrever o conteúdo de uma página da web, como:

<h1> Este é um título </h1>

<p> Este é um parágrafo.</p>

Quando tags como <font> e atributos de cor foram adicionados à especificação HTML 3.2, começou um pesadelo para os desenvolvedores da web. O desenvolvimento de grandes sites, onde fontes e informações de cores eram adicionadas a cada página, tornou-se um processo longo e caro.

Para resolver esse problema, o World Wide Web Consortium (W3C) criou o CSS.

CSS removeu a formatação de estilo da página HTML!

CSS economiza muito trabalho!

As definições de estilo são normalmente salvas em arquivos .css externos.

Com um arquivo de folha de estilo externo, você pode alterar a aparência de um site inteiro alterando apenas um arquivo!

Sintaxe CSS

Uma regra CSS consiste em um seletor e um bloco de declaração.

O seletor aponta para o elemento HTML que você deseja estilizar.

O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.

Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.

Várias declarações CSS são separadas por ponto e vírgula e os blocos de declaração são cercados por chaves.

p {
  color: red;
  text-align: center;
}

Exemplo explicado

p é um seletor em CSS (ele aponta para o elemento HTML que você deseja estilizar: <p>).
color é uma propriedade e red é o valor da propriedade
text-align é uma propriedade e center é o valor da propriedade