Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

CSS (Cascading Style Sheets) permite que você crie bonitas páginas web, Mas como ele funciona? Esse artigo explicará o que é CSS, como o navegador transforma o HTML dentro do (DOM), como o CSS é aplicado nas partes do DOM, alguns exemplos basicos de sintaxe e qual código e realmente usado para incluir nosso CSS em nossa página web.

Pré Requisitos: Conhecimento basico de informatica, software basico instalado, conhecimento basico para trabalhar com arquivos, HTML basico (estude Introdução ao HTML)
Objective: Aprender o que é CSS, e entender o basico de como ele funciona.

O que é CSS?

Como nós mencionamos antes, CSS é uma linguagem para especificar como os documentos são apresentados para os usuários — como eles são estilizados, mostrados, desenhados etc.

Um documento é normalmente um arquivo de texto estruturado usando uma linguagem de marcação — HTML é a linguagem de marcação mais comum, mas você também vai encontrar outras linguagens tais como SVG ou XML.

Apresentar um documento para os usuarios significa converter-lo em um formulario usável pelo seu público. Browsers, como Firefox, Chrome ou Internet Explorer, são projetados para converter documentos, por exemplo, em uma tela de computador, projetor ou impressora.

Como o CSS afeta o HTML?

Navegadores aplicam regras CSS a documentos para alterar como estes são exibidos. Uma regra CSS é forma de:

  • Um conjunto de properties, dos quais possuem valores definidos que determinam como o conteúdo da página HTML é exibido, por exemplo Quero que o tamanho de meus elementos seja 50% o de seu elemento pai, e que seu background seja vermelho.
  • Um selector, o qual seleciona o(s) elemento(s) ao qual você quer aplicar os valores das propriedades. Por exemplo, Quero aplicar minha regra CSS a todos os parágrados em meu documento HTML.

Um conjunto de regras CSS contidos em uma folha de estilos detemina como uma página da web deve parecer. Você irá aprender muito mais sobre como a sintaxe CSS parece no próxim artigo do módulo — Sintaxe CSS.

Um rápido exemplo de CSS

A descrição acima pode ter feito sentido ou não para você, então vamos garantir que as coisas estão claras mostrando um rápido exemplo. Antes de mais nada, vejamos um documento HTML simples, contendo um <h1> e um <p> (perceba que a folha de estilo é aplicada ao HTML utilizando um elemento <link>):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Meu experimento em CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Olá, mundo!</h1>
    <p>Este é meu primeiro exemplo em CSS</p>
  </body>
</html>

Agora vejamos um simples exemplo de CSS contendo duas regras:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

A primeira regra começa com um seletor h1, o que significa que os valores das propriedades serão aplicados ao elemento <h1>. A regra contem três propriedades e seus valores (cada par propriedade/valor é chamado de declaração):

  1. A primeira declaração define a cor do texto para azul.
  2. A segunda define a cor do fundo para amerelo.
  3. A terceira coloca uma borda ao redor do cabeçalho que tem 1 pixel de largura, é sólida (não é dotilhada, nem riscada, etc.), e de cor preta.

A segunda regra começa com um seletor p, o que significa que o valor de suas propriedades será aplicado no elemento <p>. Ela contém uma declaração apenas, que define a cor do texto para vermelho.

Em um navegador, o código acima produziria o seguinte resultado:

A simple webpage containing a header of Hello World, and a paragraph that says This is my first CSS example

Não é lá muito bonito, mas pelo menos te dá uma ideia de como CSS trabalha.

Aprendizado ativo: escrevendo seu primeiro CSS

Agora nós iremos lhe dá uma chance para escrever um pouco do seu CSS. Você pode fazer isso usando as áreas de entrada a seguir, exemplo editável ao vivo. De uma forma similar a que você viu acima, você terá que obter alguns elementos HTML e algumas propriedades do CSS. Tente adicionar algumas declarações simples para seu CSS para estilizar o HTML.

Se cometer um erro, você poderá sempre redefinir usando o botão Reset. Se você travar realmente, pressione o botão "Mostrar solução" para ver uma resposta potencial.

Playable code

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><h1>Hello World!</h1>

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

<ul>
  <li>This is</li>
  <li>A list</li>
</ul></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">h1 {

}

p {

}

li {

}</textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
  </div>
</div>
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'h1 {\n  color: blue;\n  background-color: yellow;\n  border: 1px solid black;\n}\n\np {\n  color: red;\n}\n\nli {\n  text-shadow: 2px 2px 3px purple;\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

Como o CSS trabalha realmente funciona?

Quando um navegador mostra um documento, ele deve combinar o conteúdo do documento com a informação de estilo. Ele processa o documento em duas etapas:

  1. O navegador converte HTML e CSS para dentro do DOM (Modelo de Objeto do Documento). O DOM representa o documento na memória do computador. Ele combina o conteúdo do documento com o seu estilo.
  2. O navegador mostra o conteúdo do DOM.

Sobre o DOM

Um DOM tem uma estrutura semelhante a uma árvore. Cada elemento, atributo e pedaço de texto na linguagem de marcação torna-se um DOM/Nó na estrutura da árvore. Os nós são definidos por suas relações com outros nós. Alguns elementos são pais dos nós filhos e os nós filhos tem irmãos.

Entendendo o DOM ajudará você desenhar, depurar e manter seu CSS porque é no DOM que é aonde o CSS e o conteúdo do documento se encontra.

Representação DOM

Em vez desta longa explicação chata, vamos pegar um exemplo e ver como o DOM e o CSS funcionam juntos.

Vamos assumir o seguinte código HTML:

<p>
  Vamos usar:
  <span>Folhas</span>
  <span>Estilizadas em</span>
  <span>Cascatas</span>
</p>

No DOM, o nó correspondente para seu elemento <p> é um pai. Seus filhos são um nós textos e os nós correspondentes para seus elementos <span>. Os nós SPAN também são pais, com os nós textos são seus filhos:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
   └─ "Sheets"

É assim que um navegador interpreta o snippet HTML previamente — ele transforma a árvore DOM acima e, em seguida, mostra no navegador desta forma:

p {margin:0;}

Aplicando CSS ao DOM

Digamos que adicionamos algum CSS ao nosso documento, para estilizá-lo. De novo, o HTML é o seguinte:

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>

Se aplicarmos os seguintes códigos ao arquivo CSS:

span {
  border: 1px solid black;
  background-color: lime;
}

O navegador fará um parse(analisará) o código HTML e criará um DOM a partir dele, depois disse analisará o CSS. Sendo assim a única regra disponível no CSS possuirá um seletor span que aplicará a regra em cada um dos três spans. O resultado será:

Como aplicar CSS ao HTML

Há três diferentes formas de aplicar o CSS ao arquivo HTML. A utilização de ambos estilizam as páginas HTML. Aqui faremos uma breve revisão de cada um. 

Folha de estilo externo

Você já vi nesse artigo como inserir folhas de estilos externos, porém não com esse nome. Uma folha de estilo externo é quando você tem um arquivo externo com a extensão .css e referência nos arquivos HTML. Elemento <link>. O arquivo HTML será parecido com:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Meu experimento CSS </title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Olá Mundo!</h1>
    <p>Esse é meu primeiro exemplo em CSS</p>
  </body>
</html>

E o arquivo CSS:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

Pode se argumentar que esse método é o melhor, uma vez que se pode ser uma folha de estilo em múltiplos documentos, sendo necessário apenas um arquivo CSS e ter todas as alterações.

Folhas de estilo internas

Uma folha de estilo interna é usado quando não temos um arquivo externo de CSS, pois o código de estilo foi inserido dentro da tag<style> na parte do cabeçalho(head<>) do arquivo .html. O código HTML ficará parecido com:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Meu experimento CSStitle>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

Isso pode ser útil em algumas circustâncias(talvez você não essteja trabalhando com CMS(Content Management System - Sistema de gerenciamento de conteúdo na qual você não pode modificar os arquivos CSS diretamente) porém isso não é tão eficiente com arquivos de estilos externos - em um site,  the CSS would need to be repeated across every page, and updated in multiple places if changes were required.

Aplicação de estilos Inline

Aplicação de estilos por linha(Inline styles) são declarações em CSS que afetam somente um elemento, contém somente um atributostyle :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Experimentando o CSS</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1>
    <p style="color:red;">This is my first CSS example</p>
  </body>
</html>

Por favor, não faça isso, exceto se você realmente precisar fazer isso! Isso é muito para a manutenção do código(você poderá ter que atualizar as mesmas tags e informações diversas vezes no arquivo) e isso mistura a informação de apresentação(CSS) com a informação estrutural(HTML) complicando a leitura e o entendimento de códigos. Mantendo códigos separados torna o desenvolvimento muito mais simples para todos

A única vez que será necessário usar o recurso de estilo em linha(inline styles) é quando está se trabalhando em ambientes muito restrito(quando o CMS somente permite a edição no corpo(<body>) do HTML)

O que vem a seguir?

Nesse ponto espera que você entenda os conceitos básicos de como funciona o CSS e como os navegadores trabalham com isso. Em seguinte você aprenderá mais sobre a sintaxe do CSS.

Etiquetas do documento e colaboradores

Última atualização por: thiagoreis,