O que é CSS: o responsável pelo design na WEB

Este conteúdo foi produzido por Adriano Aluizi.

Hoje falaremos um pouco sobre CSS que é o responsável pela estilização das páginas e de sistemas WEB. Esse mecanismo abre um mundo de possibilidades para deixar as paginas mais “bonitas” e com um design mais amigável e intuitivo para melhor navegabilidade do usuário.

Mas e o HTML?  Se formos analisar, só com o HTML as páginas WEB seriam apenas textos em fundos brancos. Sabemos que o HTML5 permite adicionar alguns estilos, mas ainda assim é muito limitado.

Então, afinal de contas quem é esse tal de CSS?

O que é CSS e para que serve ?

CSS é a sigla para o termo em inglês Cascading Style Sheets que, traduzido para o português, significa Folha de Estilo em Cascatas. O CSS é fácil de aprender e entender e é facilmente utilizado com as linguagens de marcação HTML ou XHTML.

O CSS permite muitas possibilidades de formatação, como:

• Mexer;
• Editar;
• Remover;
• Alinhar;
• Ou, até mesmo, trabalhar no espaçamento dos elementos de uma página de forma prática e fácil.

Isso garante mais flexibilidade e agilidade, não apenas para os elementos textuais e gráficos que constituem essa mesma página, como também para profissionais que trabalham com essa linguagem de estilos.

É possível mudar a cor, estilo e tamanho de uma fonte, até fazer coisas mais elaboradas como animações, transições gradientes de forma simples e fácil dando um visual altamente profissional para sua páginas e sistemas, se usado da forma correta.

Utilização do CSS

Como já dito anteriormente o CSS é utilizado em conjunto com o HTML e JS. A união destas 3 linguagens possibilita criar páginas incríveis e extremamente profissionais.

Toda WEB é desenvolvida em cima destas 3 linguagens, cada uma com sua responsabilidade dentro da página, sendo:

• HTML: estrutura;
• CSS: estilo;
• JS: lógica.

Abaixo temos um exemplo de uma página HTML simples sem o uso de nenhum estilo:

Agora iremos aplicar um estilo mudando o tipo da fonte e a cor da mesma vamos adicionar a tag <style> com no exemplo abaixo:

Logo obteremos o seguinte resultado:

Veja, mudamos a cor e o tipo de fonte de forma rápida e simples. Logicamente esse é um exemplo básico e apenas uma dentre o mundo de possibilidades que o CSS nos fornece.

Existem também vários frameworks que agilizam o desenvolvimento, como: Bootstrap, Materialize, AntDesing entre outros.

O que é CSS3? A nova versão

CSS3 é a terceira, e mais nova versão, do CSS. Dentre todas as evoluções, ele possibilita construir animações tanto em 2 como em 3 dimensões, como também possui novos mecanismos para um maior controle sobre o estilo com o qual se mostram as características das páginas.

Até a próxima Dev!

Este conteúdo foi produzido por Adriano Aluizi.

Tem interesse em compartilhar algum conteúdo no Blog da Vulpi? Clique aqui.