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:

<link rel=stylesheet href=”sample.css” type=”text/css”>

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 é:

  1. Seletor de tipo de elemento (p).
  2. Seletor de classe (.important).
  3. 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
Equipe EBAC

O conteúdo

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
Compartilhe sua opinião
Notificar sobre comentários

Ou como convidado

Cadastre-se Cadastre-se Cadastre-se Cadastre-se Cadastre-se

Artigos Relacionados

04 nov 2024
4 min
Como fazer comentários no código em Python: um guia completa para iniciantes

Como se tornar um analista de segurança da informação: salário, habilidades e mais

04 nov 2024
4 min
14 linguagens de programação mais difíceis de aprender

Será que a linguagem que você está aprendendo está entre as mais difíceis?

11 out 2024
5 min
11 out 2024
9 min
O que é um Dashboard e como fazer um?

Descubra o que é um dashboard, para que serve, os tipos e ferramentas de criação, e como criar o seu.

11 out 2024
9 min
09 out 2024
8 min
Engenheiro de Nuvem: o que faz, habilidades e salário

Entenda quem é o Cloud Engineer e como se tornar um!

09 out 2024
8 min
Analista de Segurança da Informação: o que faz, habilidades e salário

Como se tornar um analista de segurança da informação: salário, habilidades e mais

09 out 2024
11 min
Scrum Master: o que faz, habilidades e salário

Entenda quem é o Scrum Master e como se tornar um!

09 out 2024
8 min