Tradução em progresso.

CSS (Cascading Style Sheets) permite que você crie bonitas páginas web, Mas como ele funciona? Esse artico 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 emcontrar outras linguagens tais como SVG ou XML.

Apresentar um documento para o usuarios significa converter-lo em um formulario usavel pelo seu publico. 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 para atualizer 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 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, de 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 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. The forma similar ao 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>This is a paragraph.</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>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</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;}

Applying CSS to the DOM

Let's say we added some CSS to our document, to style it. Again, the HTML is as follows:

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

If we apply the following CSS to it:

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

The browser will parse the HTML and create a DOM from it, then parse the CSS. Since the only rule available in the CSS has a span selector, it will apply that rule to each one of the three spans. The updated output is as follows:

How to apply your CSS to your HTML

There are three different ways to apply CSS to an HTML document that you'll commonly come across, some more useful than others. Here we'll briefly review each one.

External stylesheet

You've already seen external stylesheets in this article, but not by that name. An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML <link> element. The HTML file looks something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

And the CSS file:

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

p {
  color: red;
}

This method is arguably the best, as you can use one stylesheet to style multiple documents, and would only need to update the CSS in one place if changes were needed.

Internal stylesheet

An internal stylesheet is where you don't have an external CSS file, but instead place your CSS inside a <style> element, contained inside the HTML head. So the HTML would look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <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>

This can be useful in some circumstances (maybe you're working with a content management system where you can't modify the CSS files directly), but it isn't quite as efficient as external stylesheets — in a website, the CSS would need to be repeated across every page, and updated in multiple places if changes were required.

Inline styles

Inline styles are CSS declarations that affect one element only, contained within a style attribute:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</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>

Please don't do this, unless you really have to! It is really bad for maintenance (you might have to update the same information multiple times per document), and it also mixes your presentational CSS information with your HTML structural information, making the CSS harder to read and understand. Keeping your different types of code separated and pure makes for a much easier job for all who work on the code.

The only time you might have to resort to using inline styles is when your working environment is really restrictive (perhaps your CMS only allows you to edit the HTML body.)

What's next

At this point you should understand the basics of how CSS works, and how browsers deal with it. Next, you'll move on to learn about CSS syntax.

Etiquetas do documento e colaboradores

 Colaboradores desta página: stefanocbl, alexvirtualbr, JefersonOliveira90, agathasilva28
 Última atualização por: stefanocbl,