O que é CSS?

A apresentação do documento

CSS significa Cascading Style Sheets, ou folhas de estilo em cascata. É a linguagem usada para descrever a apresentação de documentos como páginas HTML. Ela define cores e tipografia, controla o espaçamento e determina a disposição dos elementos.

Uma lista de produtos pode usar o mesmo conteúdo em uma coluna no celular e em várias colunas em uma tela maior. Ao mudar essa distribuição com CSS, você preserva os elementos HTML que identificam os títulos, preços e links de cada produto. A adaptação visual precisa manter essas informações legíveis e os links acessíveis nas duas larguras.

O resultado visual depende da combinação entre estilos do navegador, declarações do projeto e preferências de apresentação. Por isso, uma propriedade escrita em um arquivo não garante que aquele valor será aplicado. A cascata resolve a precedência entre as declarações relevantes.

Seletores e declarações

O seletor identifica os elementos aos quais um bloco de declarações se aplica. Nesse bloco, cada declaração associa uma propriedade a um valor. Uma classe como .cartao pode selecionar todos os elementos que receberam esse nome no HTML.

.cartao {
padding: 1rem;
border: 1px solid #d1d5db;
border-radius: 0.5rem;
}

.cartao h2 {
font-size: 1.25rem;
margin-top: 0;
}

O primeiro bloco acrescenta espaço interno, borda e arredondamento aos elementos da classe cartao. O segundo altera o tamanho da fonte e a margem superior dos títulos h2 que já existem dentro desses elementos. Para conferir o resultado, inspecione um cartão e seu título separadamente.

Por que um estilo pode não ser aplicado

A cascata considera fatores como origem da declaração, importância, camadas e especificidade. A ordem no arquivo pode desempatar declarações em condições equivalentes, mas não é a única influência. Acrescentar outra declaração no final nem sempre resolve um conflito.

Algumas propriedades são herdadas, como a cor do texto em situações comuns. Outras, como margens, normalmente não são. Se um elemento recebe uma cor sem uma declaração direta, a origem do valor pode estar em um ancestral.

Layout e uso da interface

Flexbox e Grid organizam elementos de maneiras diferentes, e media queries permitem aplicar estilos conforme condições como a largura disponível. Ao adaptar uma tela estreita, confira se os textos continuam legíveis e se os controles podem ser acionados mesmo quando todos os blocos já cabem na largura disponível.

A ordem visual pode divergir da ordem do documento quando certas propriedades reorganizam os elementos. Essa diferença pode confundir navegação por teclado e leitura assistiva. Teste a sequência de foco depois de alterar a organização visual.

Ocultar um botão com CSS também não impede uma chamada direta à API do servidor. Mesmo sem o controle visível, outro cliente pode enviar a requisição, e o backend precisa conferir as permissões antes de alterar o registro.

Como conferir o resultado

Selecione o elemento na aba Elements e consulte Styles e Computed. A primeira mostra declarações aplicadas e conflitos, enquanto a segunda permite consultar valores calculados. Confira também o box model para entender espaço interno, bordas e margens.

Teste diferentes larguras, ampliação do texto e navegação pelo teclado. Um layout que funciona com um título curto pode falhar quando recebe conteúdo maior. O verbete de HTML explica a estrutura sobre a qual esses estilos atuam.

Aplicação na formação

Vibe Coding: Do Zero ao MVP

CSS controla a apresentação da interface e sua adaptação a diferentes tamanhos de tela.

Conhecer a formação →