CSS é a sigla para Cascading Style Sheets, que significa Folhas de Estilo em Cascata. É uma linguagem usada para definir e aplicar o estilo das páginas web, como as cores, as fontes, os espaçamentos, as bordas, as animações e os layouts. O CSS é usado em conjunto com o HTML, que define o conteúdo e a estrutura das páginas web, e o JavaScript, que define o comportamento e a interatividade das páginas web. O CSS permite separar o conteúdo da apresentação, tornando as páginas web mais fáceis de criar, manter e adaptar.

Introdução ao CSS

O CSS foi criado em 1996 por Håkon Wium Lie e Bert Bos, dois desenvolvedores web que trabalhavam na W3C (World Wide Web Consortium), a organização responsável por padronizar as tecnologias da web. Eles desenvolveram o CSS como uma forma de resolver os problemas de inconsistência e limitação do estilo das páginas web, que na época dependiam de atributos e tags do HTML, como o <font>, o <center> e o <b>. Esses atributos e tags eram difíceis de usar, repetitivos e não permitiam um controle fino e flexível do estilo das páginas web.

O CSS surgiu como uma alternativa mais simples, poderosa e elegante para definir o estilo das páginas web, usando regras que consistem em seletores e declarações. Os seletores são usados para especificar quais elementos do HTML serão afetados pelo estilo, como o <p>, o <h1> ou o <a>. As declarações são usadas para especificar quais propriedades e valores serão aplicados aos elementos selecionados, como o color, o font-size ou o margin. Cada declaração é composta por uma propriedade e um valor, separados por dois pontos, como color: red. Cada regra é delimitada por chaves, como {color: red; font-size: 20px;}.

Origens e Evolução do CSS

O CSS foi inspirado em outras linguagens de estilo, como o DSSSL (Document Style Semantics and Specification Language) e o FOSI (Formatted Output Specification Instance), que eram usadas para formatar documentos estruturados, como o SGML (Standard Generalized Markup Language). A primeira versão do CSS, chamada de CSS1, foi publicada em 1996, e continha apenas 50 propriedades. Em 1998, foi lançada a CSS2, que adicionou novas propriedades, como as pseudo-classes, os pseudo-elementos, os posicionamentos e os media types. Em 1999, foi lançada a CSS2.1, que corrigiu alguns erros e inconsistências da CSS2.

Em 2005, o W3C decidiu dividir o CSS em módulos, que são conjuntos de propriedades relacionadas a um determinado aspecto do estilo, como o texto, o layout, a cor, a animação e a transformação. Cada módulo tem um nível de especificação, que indica o grau de maturidade e estabilidade do módulo. O nível 1 corresponde ao CSS1, o nível 2 corresponde ao CSS2 e o nível 3 corresponde ao CSS3. O CSS3 é o termo usado para se referir ao conjunto de módulos do nível 3, que trazem novas funcionalidades e possibilidades para o estilo das páginas web, como os gradientes, as sombras, as transições, as flexboxes e as grids.

Funcionamento e Estrutura do CSS

O CSS funciona seguindo o princípio da cascata, que é o processo de combinar e resolver os conflitos entre as diferentes fontes de estilo que podem afetar uma página web, como o estilo do navegador, o estilo do autor e o estilo do usuário. O estilo do navegador é o estilo padrão que o navegador aplica aos elementos do HTML, como o azul para os links, o preto para os textos e o cinza para as bordas. O estilo do autor é o estilo definido pelo criador da página web, usando arquivos ou tags de CSS. O estilo do usuário é o estilo definido pelo usuário da página web, usando as configurações do navegador ou extensões.

A cascata segue uma ordem de prioridade, que determina qual fonte de estilo prevalece sobre as outras, em caso de conflito.

A ordem de prioridade é a seguinte:

• O estilo do usuário tem prioridade sobre o estilo do navegador.
• O estilo do autor tem prioridade sobre o estilo do usuário e o estilo do navegador.
• O estilo do autor com o atributo !important tem prioridade sobre o estilo do autor sem o atributo !important.
• O estilo do usuário com o atributo !important tem prioridade sobre o estilo do autor com o atributo !important.

Além da cascata, o CSS também segue o princípio da especificidade, que é o peso ou a importância de cada seletor usado para definir o estilo dos elementos. A especificidade é calculada com base em quatro componentes: o número de seletores de id, o número de seletores de classe, o número de seletores de tipo e o número de seletores de pseudo-classe. Cada componente tem um valor diferente, sendo o seletor de id o mais específico e o seletor de tipo o menos específico.

Por exemplo, o seletor #myDiv p.red tem uma especificidade de 1 id, 1 classe e 1 tipo, que equivale a 111. O seletor p tem uma especificidade de 0 id, 0 classe e 1 tipo, que equivale a 1. O seletor * tem uma especificidade de 0 id, 0 classe e 0 tipo, que equivale a 0.

A especificidade é usada para resolver os conflitos entre as regras que afetam o mesmo elemento, seguindo a seguinte ordem:

• A regra com maior especificidade prevalece sobre a regra com menor especificidade.
• Se as regras têm a mesma especificidade, a regra que aparece por último no código prevalece sobre a regra que aparece por primeiro.
• Se as regras têm a mesma especificidade e a mesma posição, a regra que é mais próxima do elemento prevalece sobre a regra que é mais distante.

O CSS tem uma estrutura básica, que define como as regras são escritas e organizadas. Essa estrutura é formada pelos seguintes elementos:

• Comentários: São usados para adicionar notas ou explicações ao código, que não são interpretados pelo navegador. Os comentários são delimitados por /* e */, como /* Este é um comentário */.
• Seletores: São usados para especificar quais elementos do HTML serão afetados pelo estilo, como o p, o h1 ou o a. Os seletores podem ser de diferentes tipos, como:
  • Seletores de tipo: São usados para selecionar todos os elementos de um determinado tipo, como o p, o h1 ou o a.
  • Seletores de classe: São usados para selecionar todos os elementos que têm um determinado valor no atributo class, como o .red, o .big ou o .active. Os seletores de classe são precedidos por um ponto, como .red.
  • Seletores de id: São usados para selecionar um único elemento que tem um determinado valor no atributo id, como o #myDiv, o #logo ou o #nav. Os seletores de id são precedidos por um sinal de cerquilha, como #myDiv.
  • Seletores de atributo: São usados para selecionar todos os elementos que têm um determinado atributo ou um determinado valor em um atributo, como o [src], o [href="https://www.bing.com"] ou o [alt*="foto"]. Os seletores de atributo são delimitados por colchetes, como [src].
  • Seletores de pseudo-classe: São usados para selecionar os elementos que estão em um determinado estado ou situação, como o :hover, o :focus ou o :checked. Os seletores de pseudo-classe são precedidos por dois pontos, como :hover.
  • Seletores de pseudo-elemento: São usados para selecionar uma parte específica de um elemento, como o ::before, o ::after ou o ::first-line. Os seletores de pseudo-elemento são precedidos por dois sinais de dois pontos, como ::before.
• Combinadores: São usados para combinar dois ou mais seletores, criando seletores mais complexos e específicos. Os combinadores podem ser de diferentes tipos, como:
  • Combinador de descendente: É usado para selecionar os elementos que são descendentes de outro elemento, ou seja, que estão dentro de outro elemento. O combinador de descendente é representado por um espaço em branco, como div p, que seleciona todos os elementos <p> que estão dentro de um elemento <div>.
  • Combinador de filho: É usado para selecionar os elementos que são filhos diretos de outro elemento, ou seja, que estão no primeiro nível de aninhamento de outro elemento. O combinador de filho é representado por um sinal de maior, como div > p, que seleciona todos os elementos <p> que são filhos diretos de um elemento <div>.
  • Combinador de irmão adjacente: É usado para selecionar os elementos que são irmãos adjacentes de outro elemento, ou seja, que estão no mesmo nível de aninhamento e logo após outro elemento. O combinador de irmão adjacente é representado por um sinal de mais, como h1 + p, que seleciona todos os elementos <p> que estão logo após um elemento <h1>.
  • Combinador de irmão geral: É usado para selecionar os elementos que são irmãos gerais de outro elemento, ou seja, que estão no mesmo nível de aninhamento e em qualquer posição após outro elemento. O combinador de irmão geral é representado por um sinal de til, como h1 ~ p, que seleciona todos os elementos <p> que estão em qualquer posição após um elemento <h1>.
• Declarações: São usadas para especificar quais propriedades e valores serão aplicados aos elementos selecionados, como o color, o font-size ou o margin. As declarações são delimitadas por chaves, como {color: red; font-size: 20px;}. Cada declaração é composta por uma propriedade e um valor, separados por dois pontos, como color: red. Cada declaração é terminada por um ponto e vírgula, como color: red;.

Um exemplo de um documento CSS com a estrutura básica é:

/* Este é um comentário */
p { /* Esta é uma regra que afeta todos os elementos <p> */
  color: red; /* Esta é uma declaração que define a cor do texto como vermelha */
  font-size: 20px; /* Esta é uma declaração que define o tamanho da fonte como 20 pixels */
}
.red { /* Esta é uma regra que afeta todos os elementos que têm a classe "red" */
  color: red; /* Esta é uma declaração que define a cor do texto como vermelha */
}
#myDiv { /* Esta é uma regra que afeta o elemento que tem o id "myDiv" */
  width: 300px; /* Esta é uma declaração que define a largura do elemento como 300 pixels */
  height: 300px; /* Esta é uma declaração que define a altura do elemento como 300 pixels */
  background-color: blue; /* Esta é uma declaração que define a cor de fundo do elemento como azul */
}
div p { /* Esta é uma regra que afeta todos os elementos <p> que são descendentes de um elemento <div> */
  color: green; /* Esta é uma declaração que define a cor do texto como verde */
}
div > p { /* Esta é uma regra que afeta todos os elementos <p> que são filhos diretos de um elemento <div> */
  color: yellow; /* Esta é uma declaração que define a cor do texto como amarela */
}
h1 + p { /* Esta é uma regra que afeta todos os elementos <p> que são irmãos adjacentes de um elemento <h1> */
  color: orange; /* Esta é uma declaração que define a cor do texto como laranja */
}
h1 ~ p { /* Esta é uma regra que afeta todos os elementos <p> que são irmãos gerais de um elemento <h1> */
  color: purple; /* Esta é uma declaração que define a cor do texto como roxa */
}

Importância do CSS no Design Web

O CSS é fundamental para o design web, pois define o estilo e a aparência das páginas web, criando uma experiência visual agradável, atraente e consistente para os usuários. O CSS também é essencial para a usabilidade e a acessibilidade das páginas web, pois permite adaptar o estilo das páginas web a diferentes dispositivos, resoluções, preferências e necessidades dos usuários, usando recursos como media queries, os layouts responsivos e as unidades relativas. Os media queries são expressões que permitem aplicar diferentes regras de estilo de acordo com as características do dispositivo ou da janela, como a largura, a altura, a orientação ou a resolução. Os layouts responsivos são técnicas que permitem criar páginas web que se ajustam automaticamente ao tamanho e à forma do dispositivo, usando propriedades como o display, o flex e o grid. As unidades relativas são unidades de medida que se baseiam em algum fator de referência, como o tamanho da fonte, o tamanho da janela ou o tamanho do elemento pai, usando unidades como o em, o rem, o vw, o vh e o %.

O CSS também é importante para a criatividade e a inovação no design web, pois permite criar efeitos visuais impressionantes, usando recursos como os gradientes, as sombras, as transições, as animações e as transformações. Os gradientes são imagens geradas pelo navegador que criam uma transição suave entre duas ou mais cores, usando propriedades como o linear-gradient, o radial-gradient e o conic-gradient. As sombras são efeitos que criam uma ilusão de profundidade ou de distância, usando propriedades como o box-shadow e o text-shadow.

As transições são efeitos que criam uma mudança gradual entre dois estados de um elemento, usando propriedades como o transition, o transition-property, o transition-duration, o transition-timing-function e o transition-delay. As animações são efeitos que criam uma sequência de mudanças entre vários estados de um elemento, usando propriedades como o animation, o animation-name, o animation-duration, o animation-timing-function, o animation-delay, o animation-iteration-count, o animation-direction, o animation-fill-mode e o animation-play-state.

As transformações são efeitos que modificam a forma, o tamanho, a posição ou a orientação de um elemento, usando propriedades como o transform, o transform-origin, o translate, o rotate, o scale e o skew.

Recursos e Avanços no CSS3

O CSS3 é o termo usado para se referir ao conjunto de módulos do nível 3 do CSS, que trazem novos recursos e avanços para o estilo das páginas web, como os filtros, as variáveis, as funções, as media features e os pseudo-elementos. Os filtros são efeitos que alteram a aparência de um elemento, aplicando operações como o desfoque, o brilho, o contraste, a saturação, a inversão e a tonalidade, usando a propriedade filter.

As variáveis são nomes que armazenam valores que podem ser reutilizados em várias partes do código, facilitando a manutenção e a atualização do estilo, usando as propriedades -- e var(). As funções são expressões que retornam um valor calculado a partir de um ou mais argumentos, permitindo criar valores dinâmicos e complexos, usando funções como o calc(), o min(), o max(), o clamp() e o hsl().

As media features são características que descrevem o dispositivo ou a janela, como o width, o height, o orientation ou o resolution, que podem ser usadas em conjunto com os media queries para aplicar diferentes regras de estilo de acordo com as condições.

Os pseudo-elementos são palavras-chave que representam uma parte específica de um elemento, como o ::before, o ::after, o ::first-line, o ::first-letter, o ::selection e o ::placeholder, que podem ser usados para estilizar essas partes de forma independente.

Um exemplo de um documento CSS com alguns recursos do CSS3 dentro de uma regra é:

p {
  /* Esta é uma regra que afeta todos os elementos <p> */
  color: var(--main-color); /* Esta é uma declaração que usa uma variável para definir a cor do texto */
  font-size: clamp(16px, 5vw, 20px); /* Esta é uma declaração que usa uma função para definir o tamanho da fonte como um valor entre 16px e 20px, proporcional à largura da janela */
  filter: grayscale(50%); /* Esta é uma declaração que usa um filtro para definir a escala de cinza do elemento como 50% */
  transition: all 0.5s ease-in-out; /* Esta é uma declaração que usa uma transição para definir uma mudança gradual entre dois estados do elemento, com uma duração de 0.5 segundos e uma função de tempo de aceleração e desaceleração */
}
p:hover {
  /* Esta é uma regra que afeta todos os elementos <p> quando o mouse passa sobre eles */
  color: hsl(120, 100%, 50%); /* Esta é uma declaração que usa uma função para definir a cor do texto como um tom de verde, usando os valores de matiz, saturação e luminosidade */
  filter: none; /* Esta é uma declaração que remove o filtro do elemento */
  transform: scale(1.2); /* Esta é uma declaração que usa uma transformação para definir o aumento do tamanho do elemento em 20% */
}
p::first-letter {
  /* Esta é uma regra que afeta a primeira letra de cada elemento <p> */
  font-size: 2em; /* Esta é uma declaração que define o tamanho da fonte como o dobro do tamanho da fonte do elemento pai */
  font-weight: bold; /* Esta é uma declaração que define o peso da fonte como negrito */
  color: red; /* Esta é uma declaração que define a cor da letra como vermelha */
}

Conclusão

Neste artigo, você aprendeu o que é o CSS, quais são os seus fundamentos, as suas origens e evolução, o seu funcionamento e estrutura, a sua importância no design web e os seus recursos e avanços no CSS3. Espero que este artigo tenha sido útil e interessante para você, e que você tenha ficado com vontade de aprender mais sobre o CSS e o design web.

e você gostou deste artigo, por favor, deixe a sua opinião sincera e sugestões nos comentários, compartilhe o post nas suas redes sociais e fique ligado para mais conteúdos sobre tecnologia e programação.

Obrigado pela leitura e até breve! 😊