O que é CSS?

CSS (Folhas de Estilo em Cascata) permite a você criar páginas web agradáveis, mas como isso funciona por baixo dos panos? Este artigo explica o que é CSS, com um exemplo de sintaxe simples, e, também, trata alguns conceitos-chaves sobre a linguagem.

Pré-requisitos: Conhecimento básico sobre computador, softwares básicos instalados, conhecimento básico de como trabalhar com arquivos, e conhecimento básico sobre HTML (estude Introdução ao HTML.)
Objetivo: Aprender o que é CSS.

No módulo Introdução ao HTML vimos o que é HTML, e como ele é usado para fazer marcação de documentos. Estes documentos serão legíveis em um navegador web. Títulos serão mais largos do que textos comuns, parágrafos quebram em uma nova linha e tendo espaços entre eles. Links são coloridos e sublinhados para distingui-los do resto do texto. O que você está vendo é o estilo padrão do navegador - vários estilos básicos que o navegador aplica ao HTML, para garantir que ele será legível mesmo se não for explicitamente estilizado pelo autor da página web.

The default styles used by a browser

No entanto, a web seria um lugar chato se todos os web sites tivessem estilos iguais ao mostrado na imagem acima. Usando CSS você pode controlar exatamente a aparência dos elementos HTML no navegador, apresentando a sua marcação com o design que desejar.

Para que serve o CSS?

Como falamos antes, CSS é uma linguagem para especificar como documentos são apresentados aos usuários — como eles são estilizados, dispostos etc.

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

Apresentar um documento para um usuário significa convertê-lo para um formato utilizável pelo seu público. Browsers, como Firefox, Chrome, ou Edge , são projetados para apresentar documentos visualmente, por exemplo, um uma tela de computador, projetor ou impressora.

Observação: Um navegador web é as vezes chamado de user agent, o que, basicamente, significa um programa de computador que representa uma pessoa por trás do sistema. Navegadores web são o principal tipo de agente do usuário que nos referimos quando falamos sobre CSS, contudo, ele não é o único. Há outros agentes de usuário disponíveis — tais como aqueles que convertem documentos HTML e CSS para PDF a serem impressos.

O CSS pode ser usado para estilizar um documento muito básico de texto — por exemplo, alterando a cor e tamanho dos títulos e links. Pode ser usado para criar layout — por exemplo, transformando uma simples coluna de texto em um layout com uma área de conteúdo principal e um sidebar (barra lateral) para as informações relacionadas. Pode até ser usado para efeitos tais como animação. Dê uma olhada nos links deste parágrafo, para ver exemplos específicos.

Sintaxe CSS

CSS é uma linguagem baseada em regras. — Você define regras especificando grupos de estilo que devem ser aplicados para elementos particulares ou grupos de elementos na sua página web. Por exemplo, "Quero que o título principal, na minha página, seja mostrado como um texto grande e de cor vermelha.".

O código seguinte mostra uma regra CSS muito simples, que chegaria perto do estilo descrito acima:

h1 {
    color: red;
    font-size: 5em;
}

A regra é aberta com um selector . Isso seleciona o elemento HTML que vamos estilizar. Neste caso, estamos estilizando títulos de nível um (<h1>).

Temos, então, um conjunto de chaves { }. Dentro deles, haverá uma ou mais declarações, que tomam a forma de pares propriedade e valor. Cada par especifica uma propriedade do(s) elemento(s) que estamos selecionando e, em seguida, então um valor que gostaríamos de atribuir à propriedade

Antes dos dois pontos, temos a propriedade, e, depois, o valor. CSS properties possui diferentes valores permitidos, dependendo de qual propriedade está sendo especificado. Em nosso exemplo, temos a propriedade color, que pode tomar vários valores para cor. Também temos a propriedade font-size. Essa propriedade pode ter vários unidades de tamanho como um valor.

Uma folha de estilo CSS conterá muitas regras tais como essa, escrita uma após a outra.

h1 {
    color: red;
    font-size: 5em;
}

p {
    color: black;
}

Você constatará que rapidamente aprende alguns valores, enquanto outros precisará pesquisar. As páginas de propriedades individuais no MDN dá a você uma maneira rápida de procurar propriedades e seus respectivos valores, quando você esquecer, ou desejar saber quais valores pode usar.

Observação: Você pode achar links para todas as páginas de propriedades CSS (junto com outros recursos CSS) listados no MDN referência CSS. Alternativamente, você deve se acostumar a pesquisar por "mdn css-feature-name" no seu motor de busca favorito sempre que precisar procurar mais informações sobre uma característica CSS. Por exemplo, experimente pesquisar por "mdn color" e "mdn font-size"!

Módulos CSS

Como existem tantas coisas que você pode estilizar com CSS, a linguagem é dividida em módulos. Verá referência a esses módulos a medida que explora o MDN e muita das páginas da documentação são organizadas em torno de um módulo em particular. Por exemplo, poderia dar uma olhada na referência MDN para os módulos Backgrounds and Borders para descobrir qual é o seu objetivo, e quais diferentes propriedades e outras características ele contém. Você também encontrará links para a especificação CSS que define a tecnologia (veja abaixo).

Nesse ponto você não precisa se preocupar muito sobre como o CSS é estruturado. No entanto, isso pode tornar fácil achar informação se, por exemplo, você estiver ciente de que uma determinada propriedade provavelmente será encontrada entre outras coisas semelhantes e estiver, portanto, provavelmente na mesma especificação.  

Para um exemplo específico, vamos voltar ao módulo Backgrounds e Borders  — você pode achar que isso tem um senso lógico para as propriedades background-color e border-color serem definidas neste módulo. E, você está certo!

Especificações CSS

Todas as tecnologias de padrões web (HTML, CSS, JavaScript, etc.) são definidos em documentos gigantes chamados especificações (ou simplesmente "specs"), que são publicados por organizações de padrões (tais como W3C, WHATWG, ECMA, ou Khronos) e definem precisamente como essas tecnologias devem se comportar.

Com CSS não é diferente — ele é desenvolvido por um grupo dentro do W3C chamado CSS Working Group. Esse grupo é formado por representantes de fornecedores de navegadores web e outras companhias que tem interesse em CSS. Também existe outras pessoas, conhecidas como peritos convidados (invited experts), que agem como vozes independentes; eles não são associados como um membro de alguma organização.

Novas características CSS são desenvolvidas, ou especificadas, pelo CSS Working Group. As vezes, porque um navegador em particular está interessado em alguma capacidade, outras vezes, porque designers web e desenvolvedores estão perguntando por uma característica, e, algumas vezes, porque o Working Group em si tem identificado uma necessidade. O CSS está em constante desenvolvimento, com novas peculiaridades ficando disponíveis. Contudo, uma ideia chave sobre CSS é que todos trabalham pesado para nunca alterar as coisas de uma maneira que não quebrem os sites antigos. Um site construído no ano 2000, usando um CSS limitado da época, deverá ainda ser utilizável em um navegador moderno!

Como iniciante no CSS, é provável que você ache as especificações CSS impressionantes — eles são direcionados a engenheiros para implementar suporte aos recursos nos agentes de usuário (navegadores), não para desenvolvedores lerem com o intuito de entender CSS. Muitos desenvolvedores experientes preferem consultar a documentação do MDN ou outros tutoriais. No entanto, vale a pena saber que eles existem, entender a relação entre o CSS que você usa, suporte ao navegador (veja abaixo), e os specs (especificações).

Suporte do navegador

Uma vez que o CSS tenha sido especificado, então se torna útil para nós, em termos de desenvolvimento de páginas web, apenas se um ou mais navegadores implementá-los. Isso significa que o código foi escrito para transformar as instruções do nosso arquivo CSS em algo que possa ser mostrado na tela. Vamos olhar um pouco mais esse processo nas lições Como o CSS funciona. É inusitado implementarem uma característica ao mesmo tempo, e, geralmente, existe uma lacuna na qual se pode usar parte do CSS em alguns navegadores e em outros não. Por esse motivo, ser capaz de verificar o estado da implemtação é útil. Para cada página de propriedade no MDN, pode-se ver o estado dela, que se esta interessado. Assim, você saberá se pode usá-la em uma página.

A seguir, é apresentado o gráfico de dados compat para propriedade CSS font-family.

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-familyChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Not supported on option elements. See bug 1536148.
IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
system-ui
Experimental
Chrome Full support 56Edge No support NoFirefox No support No
No support No
Full support 43
Notes Alternate Name
Notes Supported on macOS only.
Alternate Name Uses the non-standard name: -apple-system
IE No support NoOpera Full support 43Safari Full support 9
Notes Alternate Name
Full support 9
Notes Alternate Name
Notes Supported since macOS 10.11.
Alternate Name Uses the non-standard name: -apple-system
WebView Android Full support 56Chrome Android Full support 56Firefox Android No support NoOpera Android Full support 43Safari iOS Full support 9
Alternate Name
Full support 9
Alternate Name
Alternate Name Uses the non-standard name: -apple-system
Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

A seguir

Agora que você tem algum entendimento do que o CSS é, vamos ao Iniciando com CSS, onde pode começar a escrever alguma coisa, você mesmo.

Neste módulo

  1. O que é CSS?
  2. Começando com CSS
  3. Como o CSS é estruturado
  4. Como o CSS funciona
  5. Usando o seu novo conhecimento