O que é CSS?

Avatar

Redação

0 avaliações

29 de julho de 2019 às 7:14

O que é CSS?

CSS é abreviação para Cascading Style Sheets, ou Folhas de Estilo em Cascata. Em uma página na web, é o CSS que fica responsável pelo estilo do documento HTML. Em outras palavras, é o CSS que determina as fontes, cores, espaçamentos e muitos outros elementos visuais de uma página.

É comum ficar curioso para saber de fato o que é CSS quando se está começando a aprender mais sobre a Web. Afinal, a primeira impressão que temos de uma página ou arquivo HTML se dá a estilização e aos recursos visuais criados com CSS.

Com CSS, é possível definir um padrão de estilo para reutilizar em todas as páginas, sem a necessidade de repetir a configuração da programação de forma manual. Além disso, o CSS possibilita o design responsivo, permitindo que uma página se adapte para diferentes tamanhos de telas.

Entendendo melhor o que é CSS

Antes de entender melhor o que é CSS, é importante saber o que é HTML. Mas, de forma simples, HTML é a parte que estrutura um documento em "blocos", definindo um significado e comportamento para cada um. Enquanto o CSS fica responsável pela aparência desses blocos.

O que é CSS - Elementos e blocos

Por exemplo, na imagem acima, há um elemento com o tamanho 320x158. Esse elemento é composto por diferentes partes, como:

  • tamanho - resolução do elemento, largura e altura em pixels;
  • padding - um preenchimento interno do elemento;
  • border - uma borda para o elemento;
  • margin - a margem do elemento.

Porém, se você observar o código HTML para esse elemento, não há qualquer referência sobre tamanho ou aparência:

O que é CSS - Referência no HTML

Isso é, porque todas as regras para aparência do documento estão separadas em um ou mais arquivos CSS. É fazendo referência a um arquivo CSS que os elementos em uma página conseguem assumir uma aparência diferente. Também é possível incluir essas regras CSS no HTML, como será mostrado a seguir.

É importante destacar que o CSS é uma linguagem de front-end. Em outras palavras, ela é executada ao lado do navegador, logo, todo processamento visual de um documento é feito no computador do usuário e não em um servidor, como ocorre em linguagens de back-end.

A estrutura de uma regra CSS

A primeira coisa para conhecer sobre uma linguagem são suas regras. Quando se trata de uma linguagem de programação ou de estilos, como é o caso do CSS, conhecer a sintaxe é fundamental para a aplicação da tecnologia nos documentos da web.

Em um documento web, uma regra CSS possui as instruções que determinam como um elemento será posicionado e como será sua aparência. Uma regra CSS é dividida da seguinte forma:

  • Seletor - indica o elemento que será estilizado;
  • Propriedade - indica a propriedade do elemento que será estilizada;
  • Valor - indica o valor para a propriedade a ser estilizada.

Trata-se, basicamente, da estilização que os elementos HTML vão assumir após aplicação do CSS. Para definir o estilo, os elementos chave são: seletor, propriedade e valor.

O que é CSS - Estrutura

Juntos, a propriedade e o valor formam uma declaração CSS. Dessa forma, uma regra CSS pode ter várias declarações, separadas por um caractere de ponto e vírgula ';'. As declarações tem início no caractere de chave '{' e são encerradas com o caractere '}'.

Veja esse exemplo de uma regra CSS com duas declarações:

p { background-color: blue; color: white }

Partindo deste exemplo, seletor é o elemento HTML colocado para ser estilizado. Neste caso, trata-se do elemento <p>, que é o elemento parágrafo no HTML. A propriedade é alguma característica, como a cor ou tamanho do elemento selecionado, sendo aqui o fator cor. E o valor é a característica em si.

Neste exemplo, a regra CSS determina que o elemento de parágrafo terá o fundo azul e a cor do texto do parágrafo será branca.

Além disso, é possível usar várias declarações em uma regra, o CSS também permite criar várias regras em somente um arquivo. Por exemplo, você pode criar um 'arquivo.css' com várias regras, e essas regras com várias declarações:

body {
background-color: lightblue;
}

h1 {
color: red;
margin-left: 20px;
}

Dica: as cores no CSS podem ser representadas com nomes ou hexadecimais (ex: #FFFFFF é a cor branca).

Exatamente por ser sobre estilo de página, a regra pode trazer mais de uma declaração e os parágrafos podem definir estilização de mais de um seletor.

Características dos seletores no CSS

Até agora, nós utilizamos os seletores somente com elementos. No entanto, pode haver a necessidade de estilizar um mesmo tipo de elemento de forma diferente. Por exemplo, o elemento <div> responsável pelo menu terá uma aparência diferente do elemento <div> da barra lateral.

Nesses casos, podemos usar as classes e ids especificadas no arquivo HTML como identificadores nas regras CSS. Veja o exemplo abaixo:

O que é CSS - Seletores

Um id é um identificador único – não pode haver dois elementos HTML com o mesmo id em um documento, enquanto as classes podem ser usadas por diferentes elementos.

Embora esses sejam os tipos de seletores mais usados, existem variações mais avançadas. Entre outros seletores mais complexos, é possível estilizar um elemento baseado nos seus atributos ou comportamentos.

Você pode conhecer mais sobre CSS em sites de referência, como Mozilla Developer Network (MDN).

Como inserir o CSS nas páginas HTML

Quem procura saber o que é CSS também quer saber como inserir os códigos CSS num site. Existem três maneiras de inserir o CSS e aplicar as mudanças visuais nas páginas web:

  • Externa - um arquivo externo CSS (ex: 'estilos.css') que reúne as regras para várias páginas. Esta é a opção mais recomendada para sites com várias páginas pela facilidade de organização e manutenção.
  • Interna - as regras CSS ficam no próprio documento HTML, dentro do elemento <style>. Este método geralmente é usado para sites com poucas páginas ou para determinar regras específicas de uma página.
  • Inline - a regra CSS é usada como um atributo de um elemento HTML – o atributo style. Esta forma não é muito recomendada pela dificuldade de organização e manutenção das regras CSS por elemento.
O que é CSS - Externo, interno, inline

No caso caso da inserção do CSS de forma externa, é necessário incluir um elemento <link> para indicar onde está o arquivo de folha de estilos CSS. Nessa forma também é possível usar vários arquivos de folhas de estilos, o que adiciona mais um nível de organização do código.

Conclusão

Agora você sabe o que é CSS e como esta tecnologia contribui para o desenvolvimento de sites. O CSS é um dos alicerces do desenvolvimento web, junto com HTML e JavaScript. Embora a linguagem possa parecer complicada no início, seu conhecê-la é essencial para qualquer desenvolvedor.

Além disso, a popularidade e eficácia do CSS é tanta que a linguagem é utilizada mesmo fora da web, em diversos projetos de software. Quando se trata de desenhar interfaces, é muito provável que haja um código CSS responsável pelos estilos.

Depois de aprender sobre HTML e CSS, o próximo passo é conhecer a linguagem que completa o conjunto de tecnologias presentes em praticamente toda web. Confira nosso artigo para saber o que é JavaScript.


Avatar
Redação

Melhor Hospedagem de Sites é um projeto com o objetivo de ajudar as pessoas na busca pelo lugar ideal para hospedar seus sites, trazendo informação e conhecimento sobre o universo de hospedagem de sites.


TOP 3 Provedores de Hospedagem
Hostinger logo
9.9 /10
GoDaddy logo
9.1 /10