Postagem mais recente:
- Gerar link
- X
- Outros aplicativos
O que é CSS? Qual sua importância para o site?
Folhas de Estilo em Cascata, ou CSS, é uma tecnologia muito interessante criada por um único propósito principal: modificar o estilo padrão do HTML da página. Embora pareça uma razão meio boba para sua existência, graças ao CSS nós temos a internet como ela é hoje, com tantas variações de estilização de sites, o que nos permite fazer coisas impressionantes usando suas propriedades.
Quando foi criado
O CSS foi desenvolvido em 1995 com o CSS1 pela W3C, grupo responsável pela distribuição do mesmo até hoje, o que permitiu uma reestruturação geral no modo de trabalhar com web deixando as coisas muito mais simples e menos limitadas de se fazer.
O que é o CSS
Mas o que de fato é o CSS? Se eu fosse definir de fato, eu diria que é a própria visualização da internet em si. Não se trabalha mais HTML sozinho, o CSS se tornou a verdadeira página, mesmo porque sozinho não faça sentido sua existência. Então, se eu fosse definir, eu diria que o HTML e o CSS são parte de algo maior: uma página de site.
Com esse pensamento, o CSS evoluiu da sua primeira versão até a versão que temos hoje que é a CSS3, permitindo muito mais coisas, como as animações e as variáveis que tem uma função importantíssima para agilizar o trabalho.
Estrutura dos CSS
Com um seletor em página, lembrando que usamos “ponto” para classes e “hashtags” para id’s, nós podemos definir propriedades, que é de fato, o CSS, é uma atribuição que você dá ao seletor, permitindo que o “robozinho” do navegador entenda a nova formatação do HTML e com isso trazendo o resultado desejado.
Tudo é feito em inglês , portanto se você entende a língua torna-se muito mais fácil atribuir valor a algo, e entre essas propriedades nós podemos ter margens internas e externas, bordas de todos os lados, cores de fundo ou do próprio texto, entre outras coisas incríveis que só o CSS pode nos permitir. Isso é feito colocando “colchetes” depois do seletor e fechando após a última propriedade colocada.
O que significa Cascata em CSS
Mas, de onde vem a tal “Cascata”? Vem exatamente do sentido literal da palavra. Quando penso em cascata me vem a cabeça uma cachoeira descendo sobre as pedras, e de fato é isso que significa cascata no CSS, ou seja, se eu atribuo uma propriedade para um seletor, e logo após eu atribuo outra propriedade para esse mesmo seletor, a informação que o “robozinho” vai ler, será a última proposta, isso porque a cascata vai de cima para baixo, mas a última coisa a chegar onde ela “desemboca” é como se fosse a última gota a sair, deu pra entender? Acho que fiquei confuso também!
Animações CSS
Vamos em frente. O CSS é algo maravilhoso, isso é inegável, mas você sabia que é possível construir animações? Até hoje, para mim, essa é a parte que torna o CSS algo de outro mundo, e tem pessoas que fazem coisas absurdas com isso, construindo desenhos e os animando, tudo isso usando CSS puro.
Vamos em frente. O CSS é algo maravilhoso, isso é inegável, mas você sabia que é possível construir animações? Até hoje, para mim, essa é a parte que torna o CSS algo de outro mundo, e tem pessoas que fazem coisas absurdas com isso, construindo desenhos e os animando, tudo isso usando CSS puro.
Variáveis CSS
Mas existe algo, simples, porém muito legal no CSS3, que é a utilização de variáveis. Se você conhece outras linguagens de programação, você sabe que nós podemos armazenar informações dentro de variáveis, e agora o CSS faz o mesmo, permitindo que você defina previamente valores que vai utilizar em toda a extensão da sua página. Isso é feito utilizando a pseudo-classe “:root”, pseudo-classes merecem um artigo só para elas de tão bom que é, então, você coloca “--” e escreve o nome da variável que quer, e quando você quiser atribuir seu valor a algo, é só colocar na frente de uma propriedade.
Pseudo-Classes
Para finalizar esse artigo, que tem o propósito de dizer sua importância e como eu gosto do CSS, brincadeiras a parte, vamos falar brevemente sobre “pseudo-classes”. Já é incrível poder animar algo com o CSS, mas, agora você pode, além disso, atribuir um evento a um seletor, usando as pseudo-classes. Temos vários tipos como “:hover” (passar o mouse em cima), “:active” (quando o elemento está clicado), entre outros como “::after” “::before” e outras coisas que dão ação à nossa página. Com isso, damos dinamismo à página, permitindo aplicar estilo somente quando uma pseudo-classe é acionada e isso é feito usando os “dois pontos” em frente a um seletor, ou em alguns casos “dois pares de dois pontos” dependendo da pseudo-classe.
A gente se vê na próxima! Abraços!
- Links importantes:
- Não deixe de se inscrever no canal!
- Tag como usar HTML!
- Visite nosso blog e veja novas postagens!






Comentários
Postar um comentário