O que é CSS e para que serve?

Última atualização

14 ago 2023

Tempo de leitura

7 min

O que é o CSS, como ele difere do HTML e quais são seus elementos. Neste artigo, você vai saber tudo isso.

Desenvolvimento Front-end do Zero ao Pro

Economize R$320 na compra do seu curso. Use o código copied blog2024 e comece a aprender!

Desenvolva sites e aplicativos fáceis e rápidos de usar. Aprenda a estruturar com HTML, estilizar com CSS e a implementar funcionalidades com JavaScript, JQuery, Bootstrap. Torne-se um desenvolvedor Front-end e comece sua carreira no aquecido mercado de TI.

5 meses

12x de

R$ 72,08

(parcelas sem juros no cartão de crédito)

Investimento pelo curso completo

R$ 865

R$ 2.163

Inscreva-se no curso

O CSS (Cascading Style Sheets) é um padrão que define como os dados são apresentados no navegador. Enquanto o HTML fornece informação sobre a estrutura de um documento, o CSS indica o aspecto que ele deve ter: a fonte, o fundo, o texto, as cores dos links, as margens e a disposição dos objetos na página.

O principal objetivo do desenvolvimento do CSS é separar o conteúdo — seja este escrito em HTML ou outra linguagem de marcação — do design de um documento. Essa separação pode aumentar a acessibilidade dos documentos, proporcionar mais flexibilidade e controle de sua apresentação, bem como reduzir a complexidade e a repetição de conteúdos estruturados. Além disso, o CSS permite apresentar o mesmo documento em diferentes estilos ou métodos de saída, como em uma tela, impressão, leitura por voz ou quando a saída utiliza dispositivos que usam Braille.

Fonte: Unsplash

Vantagens do CSS

O CSS poupa tempo: Depois de criar um estilo CSS para um elemento HTML, você poderá usá-lo em muitas páginas da web.
As páginas são carregadas mais rapidamente: Você não precisa repetir atributos de estilo HTML o tempo todo. Basta criar uma regra de estilo CSS para uma tag e ela será usada em todo o documento HTML. Dessa forma, menos código significa carregar uma página mais rápido.
Alterar o layout de páginas web é mais fácil: Para fazer alterações globais, basta alterar o estilo e os elementos em todas as páginas web serão atualizados automaticamente.
Mais espaço para a criatividade e engajamento do usuário: O CSS tem muito mais atributos de estilo que o HTML, então, você pode usá-lo para criar um design mais chamativo que no HTML e atrair mais público.
É compatível com diferentes dispositivos: As folhas de estilo permitem otimizar a aparência do conteúdo da página para qualquer tipo de dispositivo. Usando o mesmo documento HTML, você pode oferecer diferentes versões de layout do site para vários dispositivos como PDA (Personal Digital Assistant ou Assistente Pessoal Digital), smartphones, tablets, etc.
As páginas podem ser exibidas offline: As aplicações web podem armazenar o CSS por meio de um cache offline, permitindo que você veja os sites, sem conexão. O cache também fornece tempos de carregamento mais rápidos e um melhor desempenho do site.
O CSS é usado por padrões web reconhecidos: Atualmente, os atributos de estilo HTML são considerados obsoletos, então, é recomendável o uso do CSS. É necessário começar a usar o CSS em todas as páginas web, para que sejam compatíveis com as futuras versões dos navegadores.

Fonte: Unsplash

Tipos de estilos CSS

Estilos inline

Os estilos internos oferecem controle máximo sobre todos os elementos de uma página web. Isso se aplica a qualquer tag HTML com o atributo style da seguinte forma:

<p style=”font: 12pt Courier”>Este é um texto com um tamanho de 12 pontos e um estilo de fonte Courier</P>

Os estilos internos são úteis quando você precisa ajustar a visualização de algum elemento de uma página ou de um site pequeno.

Estilos internos

Os estilos embutidos aparecem com a tag <style>, que geralmente é colocada no cabeçalho do documento HTML.

(<head>…</head>):

<html>
<head>
…
<style>
regras CSS
</style>

…
</head>
<body>
…

Estilos externos

As folhas de estilo externo (external) são a melhor solução quando você está desenhando um site inteiro em um estilo. A descrição das regras fica em um arquivo separado. Use a tag <link> para vincular esta folha de estilo a cada página onde ela precisa ser aplicada. Por exemplo:

Qualquer página que contenha um vínculo deste tipo será estilizada para que coincida com os estilos do arquivo sample.css. Tenha em mente que a folha de estilo pode permanecer fisicamente em outro servidor e você deve oferecer um caminho para ela no href.

Como usar o CSS?

O CSS tem uma sintaxe relativamente simples. Primeiro, você especifica um seletor, que seleciona um elemento específico da página (uma tag HTML, classe ou identidade). Depois de colocar colchetes, especifique a declaração: as propriedades com seus valores, separadas por dois pontos. As declarações em si ficam separadas por ponto e vírgula.

Fonte: Unsplash

Exemplo de uma regra de CSS:

seletor {propriedade: valor;}

Seletor CSS

Um seletor no CSS é uma estrutura que permite selecionar elementos individuais ou similares em uma página para atribuir a eles um estilo. Cada bloco de declaração CSS começa com um seletor contendo o seguinte:

my-class {
background-color: #999;
}

No exemplo, my-class é definido como um seletor. Todos os elementos com essa classe terão a mesma cor de fundo, cinza #999.

Os estilos são organizados em um único esquema usando uma cascata. Veja este exemplo simples, que também vai te ajudar a entender o que é o código CSS e como ele se apresenta:

p {
color: green;
font-size: 20px;
}

p {
color: red;
}

Seguindo o modelo, ao elemento p é atribuída a cor vermelha. Como a cor verde é declarada antes do vermelho, isso não será levado em conta. Para evitar conflitos, sempre serão usados os valores dos parâmetros declarados por último. O tamanho da fonte de 20 pixels não muda. Se isso é simplificado, fica assim:

p {
color: red;
font-size: 20px;
}

Além disso, pode-se fazer que um único elemento dependa de vários seletores de diferentes tipos. Por exemplo:

p {
color: red;
}

p.important {
font-size: 20px;
}

#intro {
font-style: italic;
}

Para usar todos os parâmetros no HTML, você deve declarar:

<p class=“important” id=“intro”>
O CSS simplifica a formatação dos documentos
</p>

Aqui, as seguintes propriedades foram atribuídas ao elemento: cor vermelha, tamanho de 20 pixels e itálico. Nesse caso, os diferentes seletores têm prioridades diferentes. Sua ordem de relevância é:

Seletor de tipo de elemento (p).
Seletor de classe (.important).
Seletor ID (#intro).

1 é de baixa prioridade, enquanto 3 é alta.

Prioridades no CSS

A hierarquia de prioridades funciona da seguinte forma:

É dada a máxima prioridade às propriedades com !important no final da declaração.
Depois vêm os estilos inline, que são definidos com o atributo style da tag.
Ainda menor é a prioridade dos estilos especificados com a tag style no próprio documento.
Em seguida, há os estilos anexados ao documento como um arquivo de CSS externo usando a tag <link>.

O CSS é uma ferramenta útil, prática e eficaz para o design de páginas web, formatação de textos, links, imagens e outros elementos. Além disso, está em constante evolução: agora, a terceira geração deste padrão está sendo desenvolvida ativamente. Nele, a especificação se divide em módulos e o desenvolvimento de cada módulo é independente. Os desenvolvedores modernos estão ampliando gradualmente o suporte com o CSS3. Há alguns anos, a quarta geração do padrão começou a tomar forma, mas algumas especificações ainda estão no rascunho.

Todo o conhecimento de CSS, HTML e suas funções, você pode encontrar no curso interativo Desenvolvimento Front-End: do Zero ao Pro. Você vai aprender a desenvolver em HTML, a projetar com CSS, a interagir com o JavaScript e adicionar dinamismo com jQuery e React.

Em 5 meses, você vai se tornar um desenvolvedor Front-End e especialista em layouts de sites, que atraiam a atenção dos usuários, com a ajuda do professor Gian Souza. Ao final do curso, você receberá o certificado e estará preparado para começar sua carreira no aquecido mercado de TI. Para mais detalhes, clique no link a seguir: seja um desenvolvedor Front-End.

Caso você queira acessar conteúdo gratuito sobre a área de front-end, clica aqui e confira todos os nossos eventos que são abertos ao público. Aproveite!

Página inicial / Programação & Data