CSS: o que é, guia sobre como usar e vantagens!

No universo do desenvolvimento web, diversas linguagens coexistem: HTML, a principal linguagem, de marcação; o JavaScript, para programar a lógica e o comportamento interativo em sites; e o tema deste artigo, o CSS (cascading style sheets, ou folhas de estilo em cascata).

Enquanto o HTML tem como objetivo criar a estrutura principal do documento, a função do CSS é justamente otimizar o aspecto visual das páginas, de uma maneira mais organizada e menos complexa na hora realizar manutenção.

Por isso mesmo, é uma linguagem bastante requisitada no mercado de TI. Quem deseja ingressar na área precisa dominar a tecnologia, entender suas vantagens e conhecer as principais possibilidades que podem ser criadas. Neste artigo, falaremos um pouco mais sobre isso. Acompanhe!

O que é CSS?

CSS é uma linguagem de estilo, também conhecida como folhas de estilo em cascata. É usada para personalização visual de um site. Ou seja, elas servem para otimizar o conteúdo das páginas e permitir uma apresentação mais amigável para o usuário.

Por essa razão, o CSS complementa o HTML, que tem como função apenas a estruturação e marcação dos principais componentes das páginas. Nesse sentido, para entender CSS, é preciso saber HTML.

O HTML cria a ordem dos elementos e a forma básica, como um esqueleto, e o CSS é o que deixa o website visualmente atraente, como o corpo e as roupas que vestimos. Sua criação foi motivada justamente por essa necessidade de mais estilização e também pela limitação de aplicar personalizações com os arquivos HTML.

As folhas de estilo trabalham com um grande conjunto de informações visuais, como fontes, cores, grids e frames, posicionamento de elementos, relação entre componentes, bordas, margens e sombras. Se um desenvolvedor quisesse alterar tudo isso antes da criação de uma linguagem para estilização, teria que editar o código de cada arquivo HTML por vez. 

Como um site é geralmente composto de inúmeros arquivos e páginas, a inserção de pequenas configurações visuais em cada um deles consumia uma quantidade muito grande de tempo e esforço das equipes. Em função disso, Håkon Wium Lie apresentou o CSS em 1994, como uma ferramenta organizada que lida com esse problema e o resolve de maneira simples e prática.

Quais as vantagens de usar CSS?

1 – Rapidez e facilidade nas mudanças 

Com as folhas em cascata, é possível realizar mudanças pontuais em um componente de um arquivo da web sem comprometer o resto do conteúdo. Ou seja, caso a pessoa que programa queira alterar as propriedades de um ícone em uma barra no topo da página, isso pode ser feito de forma simples, apenas referenciando esse elemento na parte das configurações de estilo. 

Considerando que o desenvolvimento do website já começa pensando nessa relação entre HTML-CSS, é comum que o desenvolvedor já trabalhe com tags planejando modificá-las depois no arquivo de estilização. Por exemplo, ao trabalhar uma seção, como uma parte no rodapé, o programador dá um nome diferente, já que pretende voltar a essa parte para realizar formatações com o CSS. 

2 – Aplicação a diferentes documentos

Lembra do problema que apresentamos no tópico inicial? Sobre as edições visuais em HTML serem muito trabalhosas? O CSS resolve isso com a possibilidade de aplicar definições globalmente, ou seja, com um único arquivo CSS, formatações podem ser aplicadas em diversas páginas ao mesmo tempo. 

Por exemplo, se é necessário editar as cores de fundo de todas as páginas, isso pode ser feito em um arquivo CSS que será importado por todos os arquivos HTML. Ou seja, só se muda a configuração apenas uma vez, e o efeito é aplicado em todo o site.

Com isso, o programador ganha tempo com reuso de código e otimiza o carregamento dessas partes do site, já que elas têm menos linhas. Ou seja, as folhas de estilo colaboram com o desempenho das páginas web, permitindo que sites com uma complexidade visual maior não sejam tão pesados para exibição nos navegadores.

A legibilidade do código também fica melhor com essa vantagem. Afinal, se uma configuração é aplicada globalmente, haverá mais organização e será mais fácil ler e entender o que está sendo feito. Portanto, manutenções futuras serão agilizadas também. 

3 – Responsividade

O HTML é responsável por definir quais os elementos que farão parte de uma página web, bem como estruturá-los de uma forma mais simples.

O CSS, por sua vez, permite organizar layouts de modo a adaptar os blocos visuais para diferentes telas e tamanhos, garantindo responsividade. Em poucos minutos e linhas, o desenvolvedor é capaz de criar regras para mudar a organização de informações de acordo com o dispositivo que acessará aquele site.

Ou seja, o tamanho do menu e das fontes, bem como a posição dos elementos muda de acordo com a tela. Em celulares, por exemplo, as partes do conteúdo surgem sequencialmente de cima para baixo, ao passo que em computadores, elas ficam lado a lado.

Isso pode ser feito de maneira fácil com um framework CSS chamado Bootstrap. Os frameworks são conjuntos de códigos prontos que executam alguma funcionalidade específica. Se o objetivo é assegurar responsividade, o Bootstrap se encarrega de ajudar o programador e prevenir dores de cabeça.

4 – Mesma configuração em diversos navegadores

Quando falamos em programação para web, um dos grandes problemas é a conformidade com os padrões diferentes dos diversos navegadores disponíveis.

Se o objetivo é desenvolver um site, que, evidentemente, estará disponível para acesso na internet, o programador tem como responsabilidade a criação de regras que sejam flexíveis, ou seja, funcionem bem em diferentes interpretadores.

As folhas de estilo facilitam esse trabalho, pois ajudam a superar barreiras e diferenças entre navegadores com padrões globais. Dessa forma, é possível criar uma forma única que será traduzida por todos os softwares e não vai gerar problemas para que os usuários acessem o website.

Em outras palavras, quando precisar mudar a cor de um componente ou o tamanho de uma fonte, o profissional não precisa se preocupar com os diversos navegadores, pois a mudança será refletida em todos eles.

Quais são as regras e comandos básicos?

Além de tudo, o CSS é uma linguagem limpa e simples. mesmo assim, é sempre bom contar com dicas para acelerar o processo de aprendizagem da linguagem CSS. Além de ser organizada sempre com seletores, propriedades e valores, a tecnologia permite que os programadores compreendam facilmente o que está sendo feito. O requisito inicial é conhecer um pouco de inglês para saber do que se tratam os comandos.

Seletores são os componentes HTML que o programador deseja modificar e estilizar. As propriedades são os aspectos que serão configurados, enquanto os valores são a forma como o desenvolvedor configura esses fatores.

Vamos pegar um comando simples para usar como exemplo: “h1 {color: red;}”. Nesse caso, o h1 é o seletor, que indica que estamos trabalhando em alguns subtítulos do texto. A propriedade “color” denota que eu quero mudar a cor da fonte, já o “red” estabelece o valor, que é vermelho. Ao salvar isso e conectar essas configurações a arquivos HTML, todos os meus títulos h1 estarão em vermelho. 

Como está o mercado?

A relevância do CSS tem acompanhando o crescimento da demanda por desenvolvimento web, no geral. A procura por aplicações responsivas aumentou ultimamente, por conta do uso cada vez mais frequente de smartphones e tablets para acesso à internet. Por essa razão, saber programar layouts flexíveis é uma boa habilidade para se ter hoje.

Da mesma forma, as empresas desejam personalizar ao máximo seus sites, pensando em uma boa impressão visual e na tradução da identidade da marca para o design. As folhas de estilo são imprescindíveis nesse sentido, pois, como já vimos, facilitam definições globais, o que viabiliza maior customização.

Vale relembrar, contudo, que o CSS trabalha com as configurações HTML. Elas se complementam, ou seja, não são concorrentes.

As duas, por sua vez, cooperam com o JavaScript para a criação da parte visual da web, de modo a gerar animações, interatividade e o dinamismo necessário para o padrão moderno de desenvolvimento. Assim, é interessante estudar essas outras tecnologias também.

O CSS é uma linguagem de estilo que permite diversas configurações para otimizar os sites visualmente. Mesmo com o avanço e evolução da tecnologia, continua sendo uma opção mais leve e simples para resolver problemas no desenvolvimento web. 

Quais os estilos do CSS?

Existem diferentes formas de aplicarmos estilos CSS nos elementos de uma página HTML. É importante entender como funciona cada uma e que existe uma hierarquia entre elas. Ou seja, podemos declarar estilos em locais diferentes ao mesmo tempo, e acontecer de um deles ser ignorado pelo navegador. Isso ocorre em função dessa prioridade que é classificada da seguinte forma:

  • estilo inline: primeiro lugar;
  • estilos internos e externos declarados na seção head: segundo lugar e a prioridade de aplicação entre eles será para o que for declarado por último;
  • padrão do navegador: terceiro lugar e corresponde ao valor definido para cada elemento de acordo com o navegador. 

Confira nos próximos tópicos como cada um deles funciona.

Interno

Uma forma de declarar os estilos CSS é dentro do código HTML. Para isso, devemos escrever o código fonte correspondente entre as tags <style> /* código CSS */ </style>. É importante dizer que a declaração dos estilos deve ser inserida no elemento head do HTML. Veja um exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS com código interno</title>
    <style>
        /* estilo aplicado em tag */
        h2{   
            color: darkgreen;
        }
        /* estilo aplicado em id */
        #meuTitulo{ 
            color:red;
        }
        /* estilo aplicado em classe */
        .tituloModificado{ 
            color: blue; 
        }
    </style>
</head>
<body>
    <h2>Título aplicado no seletor do tipo tag.</h2>
    <h2 id="meuTitulo">Título aplicado no seletor tipo id.</h2>
    <h2 class="tituloModificado">Título aplicado no seletor tipo tag.</h2>
</body>
</html>

Perceba que escrevemos o código CSS na área indicada, ou seja, no head da página e entre as tags <style></style>. Ao escrevermos o código, podemos utilizar diferentes tipos de seletores entre eles: tags, classes e id.

Vale ressaltar que a utilização desse formato não é a mais recomendada, pois dificulta a manutenção e o reaproveitamento do código, já que todas as definições ficam dentro do arquivo HTML e não podem ser utilizadas em outras páginas da aplicação.

Externo

O formato externo indica que o código CSS é escrito em um arquivo à parte, ou seja, fora do código HTML e inserido por meio da tag <link>. Sua utilização é a mais recomendada, pois facilita a manutenção do código e a reutilização em outras páginas. Para isso, devemos inserir o seguinte código na seção head da página:

<link rel="stylesheet" type="text/css" href="./estilo.css" >

Vale ressaltar que precisamos indicar ao navegador que esse é um arquivo de estilos CSS. Para isso, utilizamos os atributos rel = “stylesheet” e type = “text/css”.

Inline

A forma inline de escrever código CSS corresponde à inserção das características desejadas na própria tag HTML por meio do atributo style. Confira um exemplo:

<h2 style="color: blue; font-size: x-large">Meu título</h2>

Podemos definir uma série de propriedades para o elemento quando utilizamos o atributo style na tag HTML. Cada propriedade deve ser declarada com o sinal de dois pontos e separada por ponto e vírgula.

Vale ressaltar que esse formato dificulta a manutenção e a reutilização do código na aplicação web. Além disso, se for preciso definir muitas propriedades, o código ficará muito extenso e confuso. Um bom exemplo de utilização desse é a construção de e-mail marketing, que podem ser feitos com código HTML.

Como criar um arquivo estilizado de CSS? 

A utilização de arquivos externos é uma das formas para aplicarmos estilos em uma página HTML. Para isso, basta criarmos um arquivo com a extensão .css e adicionarmos à página por meio da tag <link>, como mostramos no tópico anterior.

Alguns dos nomes mais utilizados para esse arquivo são: style.css ou estilo.css, mas podemos colocar qualquer outro nome. O próximo passo é escrevermos os estilos que serão utilizados nos elementos da página. Veja como é a estrutura da instrução CSS:

seletor { propriedade: valor }

No qual:

  • seletor: corresponde ao identificador do elemento em que o estilo será aplicado. Como mencionamos, esse valor pode ser o id, a classe, o nome da tag ou a combinações desses seletores e, ainda, as pseudo-classes. Podemos ter várias propriedades definidas para cada seletor;
  • propriedade: corresponde à característica do elemento que será estilizada;
  • valor: indica o valor do estilo.

Veja o mesmo código de exemplo que mostramos no tópico anterior feito com a utilização de um arquivo de estilos CSS externo e a sua utilização em uma página HTML.

Arquivo estilo.css

h2{
    color: darkgreen;
}
#meuTitulo{
    color: red;
}
.tituloModificado{
    color:blue;
    font-size: x-large;
    font-weight: bold;
}

Código HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS com arquivo externo</title>
    <link rel="stylesheet" type="text/css" href="./estilo.css" >
</head>
<body>
    <h2>Título 1 - estilo aplicado com o seletor do tipo tag h2</h2>
    <h2 id="meuTitulo">Título 2 - estilo aplicado com o id do elemento h2</h2>
    <h2>Título 3 - estilo aplicado com o seletor do tipo tag h2</h2>
    <h2 class="tituloModificado">Título 4 - estilo aplicado com a classe tituloModificado</h2>
    <h2 class="tituloModificado">Título 5 - estilo aplicado com a classe tituloModificado</h2>
</body>
</html>             

Perceba que utilizamos diferentes tipos de seletores no arquivo estilo.css. O seletor do tipo id só pôde ser aplicado uma vez, pois não podemos ter dois elementos em uma página HTML com o mesmo identificador. Por isso, só temos um elemento que recebe as características do estilo #meuTitulo.

Já as classes podem ser utilizadas várias vezes e têm prioridade sobre os estilos definidos apenas com a estilização da tag. Perceba que utilizamos o elemento h2 em todos os títulos e que, ao aplicarmos a classe tituloModificado, o estilo definido para ela foi aplicado ao elemento em vez do código definido apenas para as tags do tipo h2.

Perceba também que adicionamos a tag <link> na seção head da página HTML para que o navegador carregue o seu conteúdo no momento de renderizar a página.

Conheça algumas propriedades do CSS!

As propriedades CSS são utilizadas para definir as características que desejamos aplicar aos elementos. A linguagem de estilos oferece diversas opções, por isso, continue com a gente e confira algumas delas nos próximos tópicos.

CSS background-image 

A propriedade CSS background-image é utilizada para inserir uma ou mais imagens ao fundo de um elemento. Essa propriedade pode ser aplicada em todos os elementos HTML. Além de imagens, podemos inserir efeitos de transição de cores com as funções CSS para a criação de CSS background gradient, que é considerado um tipo de imagem. Confira no exemplo abaixo:

background-image: url(nome-da-imagem.jpg);
background-image: linear-gradient(cor1, cor2);

CSS border 

A propriedade CSS border adiciona uma borda ao redor do elemento e corresponde ao agrupamento de outras três propriedades relacionadas:

  • border-width: que corresponde ao tamanho da borda;
  • border-style: que define o estilo da borda e é uma informação obrigatória;
  • border-color: para definir a cor da borda.

Confira um exemplo:

border: 2px solid red;

Ela também pode ser aplicada em qualquer elemento HTML e contém uma série de propriedades auxiliares que ajudam a adicionar características a cada lado do elemento, como a border-top-style, border-right-color e muitas outras.

CSS position 

A propriedade CSS position é utilizada para especificar como será o posicionamento de um elemento na página. Seu valor padrão é static, o que indica a ocupação de acordo com a ordem natural da escrita do código. Podemos utilizar outros valores, como o fixed, que posiciona o elemento em uma parte específica da tela.

A propriedade position trabalha em conjunto com outras propriedades auxiliares para definirmos com mais exatidão o local em que o elemento deve ficar. São elas: top, bottom, left e right. Confira:

position: static | relative | fixed | absolute | sticky

CSS transition 

A propriedade CSS transition é usada para adicionar um efeito de transição gradativa ao modificarmos o estado de um elemento na página. Por isso, é bastante utilizada para a construção de efeitos de animação. Um exemplo é o aumento da fonte ou o deslocamento de um elemento ao posicionarmos o mouse sobre ele.

CSS color 

Basicamente, a propriedade CSS color é utilizada para modificar a cor do texto da página HTML. Entretanto, outras propriedades também se associam a ela para alterar as cores CSS de seus elementos, como a background-color, border-color e muitas outras. A propriedade color aceita diferentes sistemas de cores e funções CSS para a construção de gradientes.

color: valor; 

CSS display 

A propriedade CSS display é essencial para a construção de layouts responsivos. Na prática, ela determina a maneira em que os elementos serão renderizados na página. Vale ressaltar que os elementos podem ser do tipo block (em bloco), no qual são dispostos um em cada linha, ou inline (em linha), em que o elemento ocupa apenas o espaço equivalente ao seu conteúdo. Por isso, são posicionados lado a lado.

display: valor;

Hover CSS 

A pseudo-classe hover CSS é utilizada quando queremos realizar uma modificação no elemento sempre que a pessoa usuária posicionar o mouse sobre ele. Trata-se de um recurso muito utilizado para a construção de efeitos variados, como a mudança de cores para chamar a atenção para um link, para modificar imagens e textos e muito mais.

a:hover {
     color: blue;
}

Box shadow CSS 

Com a propriedade box-shadow CSS, podemos criar efeitos de sombras ao redor ou no interior do elemento. Ela contém uma série de atributos que ajudam a definir as características da sombra, como o seu tamanho, a intensidade do efeito blur e a cor. Uma das aplicações dessa propriedade é para a criação de botões com o efeito de pressionado ou não. Como no exemplo:

box-shadow: [inset][h-offset][v-offset][blur][spread][color];

CSS gradient 

A linguagem CSS oferece algumas funções para a criação de CSS gradient, que são efeitos de transição de cores. Os gradientes podem ser linear (em linha) ou radial (circular ou elíptico) e conter uma ou mais cores, o que permite uma enorme possibilidade de combinações.

CSS margin 

A propriedade CSS margin é utilizada para adicionar um determinado espaço ao redor do elemento. Ela contém outras propriedades auxiliares para definir o posicionamento do elemento com mais exatidão. São elas: margin-top; margin-bottom, margin-left e margin-right.

CSS padding

A propriedade CSS padding adiciona um determinado espaço na parte interna do elemento. Sua utilização deve ser feita com cuidado, pois essa característica modifica o tamanho do elemento, o que pode causar o deslocamento de elementos do layout. Ela contém outras propriedades auxiliares, que são: padding -top; padding -bottom, padding -left e padding -right.

Entendendo a evolução do CSS! 

A primeira versão da linguagem de estilos CSS foi lançada em 1996 pelo W3C — World Wide Web Consortium — para ser utilizada em conjunto com a linguagem de marcação HTML para formatar os elementos da página. O CSS 1 oferecia suporte a uma série de formatações como o alinhamento de textos, propriedades para a definição de fontes, cores, tabelas, posicionamento e muito mais.

Em 1998 foi lançada a versão CSS 2 com diversas novidades, entre elas a propriedade z-index, media types e novas possibilidades para a propriedade position, como o posicionamento relative, fixed e absolute. Em 12 de abril de 2011, foi lançada a versão CSS 2.1 que corrigia alguns erros da versão anterior.

A versão CSS 3, que é a que utilizamos hoje, foi dividida em diversos módulos que adicionaram funcionalidades à versão CSS 2.1. Seu desenvolvimento começou em 1998, logo após o lançamento da versão anterior. Dessa forma, não existe um lançamento integral da versão CSS 3, pois ela foi atualizada aos poucos, na medida em que os módulos atingiram o status de recomendação total de CSS nível 3.

Em 2012, três módulos tinham esse status, enquanto muitos outros estavam em fase de desenvolvimento. Atualmente, existem atualizações em andamento tanto para o CSS nível 3 quanto para módulos que terão o status de nível 4.