O código CSS

Cascade Style Sheets, ou CSS, são um conjunto de especificações visuais que definem a forma como elementos do código HTML, ou SVG, serão exibidos na tela.

Sua função é, portanto, configurar a forma que uma estrutura de dados deverá assumir. Sabemos, contudo, que esta relação é ambígua, já que muito do que é definido na estrutura de dados de um código HTML já impõe uma hierarquia e posicionamento aos elementos que serão exibidos, e se falarmos de SVG, suas próprias instruções já definem uma forma, legando ao CSS apenas a definição de suas características, como cor, posição e etc.

É mais justo, nesse sentido, afirmar que o CSS é a contraparte responsável por especificar, de forma mais organizada e detalhada, os atributos dos diversos elementos criados pelos demais códigos. Trata-se de uma linguagem de marcação que descreve características dos diversos elementos, e, como as outras duas, não pode ser considerada efetivamente uma linguagem de programação (pois não envolve a construção de algoritmos), mas uma linguagem de marcação.

A especificação CSS é muito ampla e aberta. Há muitos elementos, propriedades, características e atributos que podem ser modelados através dela, desde a cor de fundo em um bloco de texto até as transformações animadas que ele pode sofrer ao longo do tempo. Isto significa dizer que, provavelmente, este material não conseguirá detalhar toda a vastidão de instruções possíveis que compõe o código CSS em sua totalidade.

Também é importante considerar que as atribuições e aplicação do código CSS podem crescer e serem usadas para outras finalidades não previstas iniciamente, o que fará, naturalmente, que suas instruções também se ampliem ainda mais.

A natureza deste material técnico permite que o código CSS e suas instruções sejam progressivamente detahadas e incluídas, e este processo é realizado de forma contínua, mas, logicamente, sem uma previsão de quando todo este processo chegará ao fim e que, finalmente, possamos dizer que esta obra abrange e explica todo o código CSS.

Organização do material técnico

Este texto amplia o conteúdo do "livro" com todo o material técnico já produzido, relativo ao código CSS. Este conteúdo está organizado de acordo com o papel previsto para cada instrução:

Em Aspectos básicos você encontrará os textos que explicam como o código CSS é escrito, sua sintaxe, métricas, mecanismos, características e seus elementos comuns; no capítulo Posicionamento se concentram as instruções responsáveis por definir onde e como cada elemento modelado pelo CSS será apresentado na tela; em Dimensionamento estão as instruções que modificam o tamanho e forma dos elementos operados pelo código CSS; em Aspectos avançados as instruções de diretrizes que ampliam o próprio código CSS e permitem sua parametrização em função de aspectos específicos encontrados no contexto onde ele funciona (geralmente o navegador).

Na sequência, você encontrará as demais linguagens de programação incluídas nesta obra no capítulo +Linguagens, incluíndo o material relativo ao código HTML, responsável pela estrutura de dados de um documento web; e, finalmente, em Solicitações, os documentos através dos quais é possível solicitar que outros elementos ou procedimentos sejam incluídos futuramente neste material.

Todos os exemplos contidos no material são interativos e permitem que experimentações/modificações sejam realizadas sobre eles no próprio documento.

Ferramentas necessárias

O código CSS pode ser construído e executado sem a necessidade de ferramentas específicas para seu desenvolvimento. O código em sí é um arquivo de texto puro (UTF-8) que pode ser elaborado usando um editor como o Notepad (do Windows), o Text Editor (do MacOS ou Linux), ou mesmo através de um terminal (no Linux, MacOs, Windows, MS-Dos, ou qualquer outro sistema operacional). Há, contudo, ferramentas de produtividade destinadas a agilizar/facilitar seu desenvolvimento que incluem verificação de erros no código (Linting), marcação de sintaxe (Highlight), e outros recursos bastante úteis para o programador. Aqui está uma relação das ferramentas mais populares para edição de código:

p5.js Pad - Code Art Editor for Figma
Microsoft Visual Studio Code
Sublime Text
Brackets
Atom

Outras opções, atualmente, são a edição do código CSS através de ferramentas disponíveis dentro do próprio navegador. Para isto, contamos com ambientes integrados de desenvolvimento (IDEs) inteiramente online, e ferramentas de experimentação - chamadas de Live Code - que interpretam e executam o código em tempo-real, conforme ele vai sendo digitado. Oferecemos aqui, também, uma relação destas opções:

LIVECODE

Observable: HTML+CSS+JS Livecode
Javascript, HTML & CSS Livecode Playground

IDE ONLINE

Visual Studio Code online
Visual Studio Code online (Github)
Observable: Plataforma de Programação Literária
OpenProcessing - HTML / JS / Processing / P5.js Online IDE
CodeSandbox
CodePen

Experimentações com o código podem ser realizadas em qualquer página do material técnico desta obra, no próprio editor live code incluído, como o que se encontra logo abaixo. Nenhuma modificação feita nos documentos é permanente, e o editor está inserido nas próprias páginas do "livro" para torná-lo interativo, e permitir ao leitor que modifique e experimente com os códigos, sem a necessidade de instalar ou configurar nenhum software previamente.

O editor, infelizmente, não funciona na plataforma iOS.

  
<!DOCTYPE html>
<html>
  <head>
   <style>
     body {
        color: violet;
     }
   </style>
  </head>

  <body>
    Hello World!
  </body>
</html>