Cascading Style Sheets

 Nota: "CCS" redireciona para este artigo. Para outros significados, veja CSS (desambiguação).

Cascading Style Sheets
Extensão do arquivo	.css
MIME	text/css
Desenvolvido por	World Wide Web Consortium
Lançamento	17 de dezembro de 1996 (27 anos)
Tipo de formato	Linguagem de folhas de estilo
Padronização	Level 1 (Recommendation) Level 2 (Recommendation) Level 2 Revision 1 (Candidate Recommendation)

Cascading Style Sheets (abreviado CSS) é um mecanismo para adicionar estilos (cores, fontes, espaçamento, etc.) a uma página web, aplicado diretamente nas tags HTML ou ficar contido dentro das tags <style>. Também é possível, adicionar estilos adicionando um link para um arquivo CSS que contém os estilos. Assim, quando se quiser alterar a aparência dos documentos vinculados a este arquivo CSS, basta modifica-lo.

Com a variação de atualizações dos navegadores, o suporte ao CSS pode variar. A interpretação dos navegadores pode ser avaliada com o teste Acid2, que se tornou uma forma base de revelar quão eficiente é o suporte de CSS, fazendo com que a nova versão em desenvolvimento do Firefox seja totalmente compatível a ele, assim como o Opera já é. O Doctype informado, ou a ausência dele, determina o quirks mode ou o strict mode, modificando o modo como o CSS é interpretado e a página desenhada.

Sintaxe

Resultado obtido no Acid2 satisfatoriamente.

CSS tem uma sintaxe simples, e utiliza uma série de palavras em inglês para especificar os nomes de diferentes propriedade de estilo de uma página.

Uma instrução CSS consiste em um seletor e um bloco de declaração. Cada declaração contém uma propriedade e um valor, separados por dois pontos (:). Cada declaração é separada por ponto e vírgula (;).

Em CSS, seletores são usados para declarar a quais elementos de marcação um estilo se aplica, uma espécie de expressão correspondente. Os seletores podem ser aplicados a todos os elementos de um tipo específico, ou apenas aqueles elementos que correspondam a um determinado atributo; elementos podem ser combinados, dependendo de como eles são colocados em relação uns aos outros no código de marcação, ou como eles estão aninhados dentro do objeto de documento modelo.

Pseudoclasse é outra forma de especificação usada em CSS para identificar os elementos de marcação, e, em alguns casos, ações específicas de usuário para o qual um bloco de declaração especial se aplica. Um exemplo frequentemente utilizado é o :hover pseudoclasse que se aplica um estilo apenas quando o usuário 'aponta para' o elemento visível, normalmente, mantendo o cursor do mouse sobre ele. Isto é anexado a um seletor como em a:hover ou #elementid:hover. Outras pseudoclasses e pseudoelementos são, p. ex., :first-line, :visited ou :before. Uma pseudoclasse especial é :lang(c), "c".

Uma pseudoclasse seleciona elementos inteiros, tais como :link ou :visited, considerando que um pseudoelemento faz uma seleção que pode ser constituída por elementos parciais, tais como :first-line ou :first-letter.

Seletores podem ser combinados de outras formas também, especialmente em CSS 2.1, para alcançar uma maior especificidade e flexibilidade.

Aqui está um exemplo que resume as regras acima:

selector [, selector2, ...][:pseudo-class] {
  property: value;
 [property2: value2;
  ...]
}
/* comment */

Seletores

Definição de estilo é um conjunto de propriedades visuais para um elemento, o CSS define regras que fazem as definições de estilo casarem com um elemento ou grupo de elemento, o documento pode conter um bloco de CSS num elemento style ou usando o elemento link apontando para um arquivo externo que contenha o bloco CSS.

Para uso com o CSS, foi criado o atributo class que todo elemento pode conter.

As regras de casamento para o CSS são chamadas de seletores, uma definição de estilo pode ser casada com um seletor ou um grupo de seletores separados por vírgula, um seletor pode casar um elemento por:

• elemento do tipo : element_name { style definition; }
• elemento do tipo com a classe : element_name.class_name { style definition; }
• todos os elementos com a classe : .class_name { style definition; }
• o elemento com o id : #id_of_element { style definition; }
• casamento de um grupo : element_name_01, element_name_02, .class_name { style definition; }

Exemplos

p {text-align: right; color: #BA2;}
p.minhaclasse01 { color:#ABC; }
.minhaclasse02 { color:#CAD; }
# iddomeuelemento { color:#ACD; }
p.minhaclasse03 .minhaclasse04 { color:#ACD; }

Exemplos

/* comentário em css, semelhante aos da linguagem c */
body
{
   font-family: Arial, Verdana, sans-serif;
   background-color: #FFF;
   margin: 5px 10px;
}

O código acima define fonte padrão Arial, caso não exista, substitui por Verdana, caso não exista, define qualquer fonte sans-serif. Define também a cor de fundo do corpo da página.

Sua necessidade adveio do fato do HTML, aos poucos, ter deixado de ser usado apenas para criação de conteúdo na web, e portanto havia uma mistura de formatação e conteúdo textual dentro do código de uma mesma página. Contudo, na criação de um grande portal, fica quase impossível manter uma identidade visual, bem como a produtividade do desenvolvedor. É nesse ponto que entra o CSS.

As especificações do CSS podem ser obtidas no site da W3C "World Wide Web Consortium", um consórcio de diversas empresas que buscam estabelecer padrões para a Internet.

É importante notar que nenhum navegador suporta igualmente as definições do CSS. Desta forma, o web designer deve sempre testar suas folhas de estilo em navegadores de vários fabricantes, e preferencialmente em mais de uma versão, para se certificar de que o que foi codificado realmente seja apresentado da forma desejada.

Exemplo de CSS aplicado em XML

O arquivo de exemplo XML renderizado no Mozilla Firefox.

Arquivo *.XML com ligação para uma folha de estilos em cascata:

 <?xml version="1.0" encoding="UTF-8"?>
 <?xml-stylesheet type="text/css" href="css.css"?>
 <schedule>
   <date>Tuesday 20 June</date>
   <programme>
     <starts>6:00</starts>
     <title>News</title>
     With Michael Smith and Fiona Tolstoy.
     Followed by Weather with Malcolm Stott.
   </programme>
   <programme>
     <starts>6:30</starts>
     <title>Regional news update</title>
     Local news for your area.
   </programme>
   <programme>
     <starts>7:00</starts>
     <title>Unlikely suspect</title>
     Whimsical romantic crime drama starring Janet
     Hawthorne and Percy Trumpp.
   </programme>
 </schedule>

O arquivo *.CSS que formata o XML anterior:

  @media screen {
    schedule {
      display: block;
      margin: 10px;
      width: 300px;
    }
    date {
      display: block;
      padding: 0.3em;
      font: bold x-large sans-serif;
      color: white;
      background-color: #C6C;
    }
    programme {
      display: block;
      font: normal medium sans-serif;
    }
    programme > * { /* All children of programme elements */
      font-weight: bold;
      font-size: large;
    }
    title {
      font-style: italic;
    }
  }

CSS e JavaScript

Pop-up não-bloqueável

<html>
  <head>

    <style type="text/css">
# popup {
        position: absolute;
        top: 30%;
        left: 30%;
        width: 300px;
        height: 150px;
        padding: 20px 20px 20px 20px;
        border-width: 2px;
        border-style: solid;
        background: #ffffa0;
        display: none;
      }
    </style>

    <script type="text/javascript">
      function abrir() {
        document.getElementById('popup').style.display = 'block';
        setTimeout ("fechar()", 3000);
      }

      function fechar() {
        document.getElementById('popup').style.display = 'none';
      }
    </script>
  </head>
  <body onload="abrir()" >
    <div id="popup" class="popup">
      Esse é um exemplo de popup utilizando o elemento <code>div</code>. Dessa maneira esse
      pop-up não será bloqueado.

      <small><a href="javascript: fechar();">[X]</a></small>
    </div>

<a href="javascript: abrir();">Abrir pop-up</a>

<a href="javascript: fechar();">Fechar pop-up</a>
  </body>
</html>

Padronização

CSS Snapshot 2021

Frameworks

Os frameworks CSS são bibliotecas pré-preparadas destinadas a permitir um estilo mais fácil e mais compatível com os padrões de páginas da web usando a linguagem Cascading Style Sheets. Os frameworks CSS incluem Blueprint, Bootstrap, Cascade Framework, Foundation e Materialize. Assim como as bibliotecas de linguagem de programação e script, os frameworks CSS são geralmente incorporados como planilhas .css externas referenciadas no HTML <head>. Eles fornecem uma série de opções prontas para projetar e fazer o layout da página da web. Embora muitos desses frameworks tenham sido publicados, alguns autores os usam principalmente para prototipagem rápida, ou para aprender com, e preferem 'criar' CSS apropriado para cada site publicado sem a sobrecarga de design, manutenção e download de muitos recursos não utilizados no estilo do site.

Metodologias de design

Conforme o tamanho dos recursos CSS usados em um projeto aumenta, uma equipe de desenvolvimento geralmente precisa decidir sobre uma metodologia de design comum para mantê-los organizados. Os objetivos são facilidade de desenvolvimento, facilidade de colaboração durante o desenvolvimento e desempenho das folhas de estilo implementadas no navegador. As metodologias populares incluem OOCSS (CSS orientado a objeto), ACSS (CSS atômico), oCSS (folha de estilo em cascata orgânica), SMACSS (arquitetura escalável e modular para CSS) e BEM (bloco, elemento, modificador).

Ver também

• Acid2
• Javascript
• HTML
• HTML5
• Padrões web
• Tableless
• XHTML

Ligações externas

• Wikilivros

• «Sítio oficial» (em inglês) 
• «W3C CSS Specification» (em inglês) 
• «Serviço de validação de CSS do W3C» 
• «Aprenda a estilizar HTML utilizando CSS». Guia na MDN Web Docs