Este artigo é dedicado a quem está interessado em trabalhar com o aspecto visual de sites através de códigos. E isso é possível através do CSS. Mas afinal, o que é CSS?

Possivelmente você está em suas primeiras pesquisas sobre desenvolvimento web, web design e afins, sabe que o CSS é um dos caminhos a se trilhar e precisa saber mais sobre essa linguagem. Portanto neste artigo você será apresentado a um conteúdo que vai te guiar para que você possa entender a sintaxe, criar os primeiros estilos e dar forma às primeiras páginas web.

Sem mais delongas vamos ver o que você verá neste artigo.

• O que é CSS?;
• O que é possível fazer com CSS?;
• Requisitos para aprender CSS;
• Benefícios da aplicação de CSS;
• Regras CSS;
• Tipos de seletores básicos;
• Selecionando elementos aninhados;
• Grupamento de seletores;
• Declaração única;
• Efeito cascata;
• Herança;
• Especificidade;
• Vinculação das folhas de estilos ao documento HTML;
• Como criar um arquivo CSS.

O que é CSS?

CSS, sigla em inglês para Cascading Style Sheet, que em português quer dizer Folha de Estilo em Cascata, é uma linguagem que cuida da apresentação visual de páginas web através de regras de estilos. Podemos resumir que é uma linguagem de estilização ou apresentação.

A história da Folha de Estilo começou a surgir quando seu criador Håkon Wium Lie constatou que não havia como estilizar documentos em uma plataforma para publicação eletrônica. Em novembro de 1994 em Chicago, Håkon apresentou a proposta inicial do CSS em uma Web conferência.

Esta linguagem consiste em dar forma aos elementos HTML presentes na página web. HTML e CSS são parceiros. O CSS só existe em função do HTML.

Ela pega uma página praticamente sem estilos e enriquece com cores, formas, tamanhos e até animações. E esta linguagem que define qual a cor de um texto, onde determinado bloco será posicionado, entre outros estilos.

E o que é muito bacana é que o CSS também é um recurso acessível para estilizar o que você projetou em seu editor gráfico através de suas propriedades.

Um dos maiores atrativos do CSS é separar a apresentação em um arquivo externo. Com isso o HTML, que antes estava com a função de marcar e apresentar visualmente o conteúdo, ficou responsável por somente estruturar o conteúdo através da marcação.

O que é possível fazer com CSS?

Com aplicação das folhas de estilos é possível fazer muita coisa. Só para citar algumas, você pode:

• Estruturar o layout do site;
• Posicionar elementos na página web;
• Mudar a ordem de apresentação dos elementos HTML;
• Colocar espaçamentos entre elementos;
• Preencher com espaço vazio entre a borda de um bloco e seu conteúdo;
• Colocar diferentes tipos de bordas de diferentes cores nos blocos;
• Inserir bordas arredondadas aos blocos;
• Colocar cor de fundo, gradiente ou imagem de fundo aos blocos;
• Trabalhar com diversas propriedades para tipografia. Tanto que aqui no Chief tem um artigo dedicado a muitas delas. CONFIRA AQUI!;
• Inserir sombras em textos e blocos;
• Fazer pequenas animações, transições;
• Ocultar elementos, entre tantas coisas.

Requisitos para aprender CSS

Para aprender CSS é necessário para você possuir boas noções de HTML. Se você não conhece nada de HTML aconselho ler esse artigo para introdução. Caso você queira se aprofundar tanto no HTML quanto no CSS sugiro adquirir o E-book Solidário de Fluência em HTML e CSS.

Você precisa também ter instalado em sua máquina um bom navegador tipo Mozilla Firefox ou Google Chrome e um editor para desenvolvimento web. Para começar a aprender o bloco de notas basta.

Benefícios da aplicação de CSS

Entre os principais benefícios destaco:

• A separação da folha de estilo da marcação;
• Facilidade de manutenção visual do site através de um arquivo externo;
• Disponibilidade de diretiva para construção de layouts que atendam diferentes tipos de dispositivos.
• Aumento na velocidade de carregamento de páginas.

Regras CSS

Através das regras CSS é que você vai conseguir dar forma as suas páginas web. Portanto a atenção nas informações que vêm a seguir é fundamental.

A regra CSS é um comando que serve para definir o estilo que um elemento HTML receberá. Ele é composto por um ou mais seletores, e uma ou mais declarações. As declarações estão contidas entre chaves e são formadas pela propriedade e o valor da propriedade. O seletor vincula um elemento do documento HTML a declaração CSS.

Uma regra básica segue o seguinte esquema:

seletor { propriedade: valor }

Na imagem a seguir você poderá os detalhes da regra.

Seletor: Ele é responsável por selecionar o elemento, ou elementos HTML que receberão determinado estilo.

Propriedade: Se refere às características visuais que um elemento pode possuir. Tomamos como comparação qualquer objeto que podemos medir suas dimensões. Altura e largura seriam propriedades deste objeto quando pensamos em tamanho. Os elementos HTML também possuem propriedades de altura e largura.

Valor: Corresponde ao produto da propriedade. Ou seja, ele define como o elemento será apresentado. Se um elemento tem uma altura, o valor corresponde ao seu tamanho seguida pela sua unidade de medida. Um bloco com 2 cm de altura possui a propriedade altura cujo valor é 2 cm.

Outro exemplo para fixar o conceito é selecionar um parágrafo (seletor) para que apresente no navegador uma cor (propriedade) e cujo valor desta cor é vermelha (valor). Veja na sequência como apresentaríamos esta regra para apresentar um parágrafo vermelho.

p { color: red; }

“p” seleciona todo e qualquer elemento HTML <p> encontrado no documento.
A propriedade “color” define que queremos estilizar a cor dos parágrafos.
E “red”, que quer dizer vermelha, é a cor escolhida para os parágrafos.

Outro ponto importante a saber é que uma regra CSS pode ter mais que uma declaração. Veja:

p {
    color: red;
    font-size: 14px;
}

Tipos de seletores básicos

Existem uma lista repleta de seletores com diferentes objetivos. Mas existem 3 tipos de seletores básicos cuja aplicação é constante e cujo conhecimento para iniciantes é obrigatório. São eles que apresentaremos aqui.

Para conhecer a lista completa visite o site da W3C.

Vamos agora aos 3 tipos básicos.

Seletor de tipo

Este seletor seleciona um elemento html específico para estilização. A sintaxe é bem simples. Depois de escolhido o elemento que você propõe estilizar basta digitá-lo antes da abertura de chaves da declaração, conforme exemplo a seguir para o elemento <h1>.

h1 {
    color: blue;
}

Como só deve existir um elemento <h1> por página somente ele recebe esta estilização. Mas caso o elemento estilizado aparece mais vezes no documento HTML todos receberão o estilo, a menos que um deles receba um seletor específico.

Seletor ID

Este seletor seleciona um elemento HTML cujo atributo id tenha o mesmo nome do seletor. Observe o seguinte elemento HTML:

<div id="wrapper"></div>

Acima vemos um elemento que possui o atributo id com o valor wrapper. O nome do valor é um nome de sua escolha que você acha melhor colocar. Você pode selecioná-lo digitando o nome do valor precedido por tralha (#). Veja a seguir:

#container { background-color: yellow; }

Ao utilizar # estamos selecionando um elemento com atributo id. O elemento <div> que recebe o id com valor “wrapper” terá uma cor de fundo amarela.

Duas observações importantes. O valor do atributo id só pode ser usado em um elemento dentre todas as tags de uma página. E caso haja conflito entre duas regras o seletor ID prevalecerá. Entenda a seguir.

HTML:

<div id="container"></div>

CSS:

div { background-color: blue; }
#container { background-color: yellow; } 


/* Isso é um simples comentário em CSS */

O elemento <div> foi selecionado duas vezes para receber cores de fundo diferentes, mas ele somente receberá a cor amarela porque o seletor ID tem prioridade em relação ao do tipo que seleciona elemento.

Seletor class

Este seletor seleciona um ou mais elementos HTML cujo atributo class tenha o mesmo nome do seletor. O fato deste tipo de seletor poder selecionar mais que um elemento HTML torna-o mais vantajoso em relação o do tipo id. Com uma simples regra é possível definir estilos que poderão ser aplicados por todo documento HTML onde exista necessidade de repetir estilos. Com isso economiza-se código e tempo de desenvolvimento. Observe o código HTML a seguir.

<header class="container"></header>
<section class="container"></section>
<footer class="container"></footer>

Digamos que você deseja que ambos tenham um padding (propriedade esta que preenche com um espaço vazio entre a extremidade do elemento até a área do conteúdo) de 15 pixels. Em vez de você criar uma regra para cada elemento você cria uma para o valor do atributo class que é “container”.

.container { padding: 15px; }

Note que antes de colocar o nome do seletor ele é precedido por um ponto para que funcione.

Observação sobre nomes de IDs e classes

Os nomes de IDs e classes é algo que você “cria”. Mas não é indicado inventar números e caracteres especiais. Simplifica as coisas usando apenas letras.

Esses nomes não devem ter espaço em branco. Espaço em branco em um atributo de um elemento HTML indica que existem dois seletores. Veja:

<div class="bloco maior"></div>

Isso não indica que exista uma class com seletor .bloco maior, e sim que existem duas classes, .bloco e .maior.

Selecionando elementos aninhados

Em muitos casos você terá a necessidade de criar um seletor para um elemento aninhado e para isso você precisará indicar o caminho que indica os elementos antecedentes. Observe a lista com links a seguir:

<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="sobre.html">Sobre</a></li>
    <li><a href="contato.html">Contato</a></li>
</ul>

Você quer definir um tamanho de fonte de 14 pixels e poderia simplesmente fazer da seguinte forma.

a { fonte-size: 14px; }

Daria certo. Mas agora imagine que você tenha mais links na página onde não deseja esse valor. Então estilizar “a” não seria a melhor solução.

Poderia então criar uma class para o elemento da lista. Mas repare a seguir no HTML.

<ul>
    <li><a href="home.html" class="tamanho-fonte">Home</a></li>
    <li><a href="sobre.html" class="tamanho-fonte">Sobre</a></li>
    <li><a href="contato.html" class="tamanho-fonte">Contato</a></li>
</ul>

É um pouco trabalhoso colocar um atributo class em cada elemento, imagine uma lista com muitos elementos. E também é uma decisão pouco inteligente.

A melhor forma nesse caso é indicar os elementos antecedentes do elemento “a”. Veja a seguir.

ul li a { font-size: 14px; }

Simples assim. Você coloca os elementos que precedem o “a” antes dele e com espaço entre ambos.

A regra com aninhamento também pode ser aplicada quando presente os outros tipos de seletores. Veja:

<ul class="menu">
    <li><a href="home.html">Home</a></li>
    <li><a href="sobre.html">Sobre</a></li>
    <li><a href="contato.html">Contato</a></li>
</ul>

Agora o CSS:

.menu li a { font-size: 14px; }

Grupamento de seletores

Um uso também comum em CSS é em uma mesma declaração você colocar mais que um seletor com separação por vírgula. Veja a seguir:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

O código acima pega todos elementos acima e informa que eles devem ser elementos em bloco. Esses elementos foram introduzidos no HTML5 e este código é um recurso para que navegadores antigos os reconheçam como elementos em bloco.

Mas você pode utilizar mais que um seletor não só para elementos HTML mais também mesclando os outros tipos de seletores. Veja a seguir:

span, a, #seletor-1, .seletor-2 { font-weight: bold; }

Este código acima negrita os textos dos elementos selecionados.

Declaração única

Existem alguns casos que temos propriedades que atuam separadamente para resultar em estilo, mas que podem estar reunidas em uma só declaração. É o que chamamos de declaração única. Este tipo abrevia declarações reunindo todos seus valores em uma só.

Isso é muito útil para diminuir código e ganhar tempo.

Podemos tomar como exemplo as seguintes propriedades que estilizam borda.

Border-width: Propriedade que define a espessura da borda;
Border-style: Propriedade que define o tipo de borda (contínua, tracejada, etc);
Border-color: Propriedade que define a cor da borda;

Para reunir os valores das 3 propriedades podemos utilizar uma propriedade única chamada border.

Veja as seguintes declarações para uma div:

div {
   border-width: 1px;
   border-style: solid;
   border-color: black;
}

Agora a junção de seus valores em uma declaração única usando border.

div {
   border: 1px solid black;
}

Efeito cascata

O efeito cascata estabelece qual regra é prioritária na aplicação de estilo de um elemento. Ela é importante quando um elemento está recebendo mais que um valor de uma determinada propriedade através de regras diferentes gerando um conflito.

Imagine que uma regra determine que um contêiner receba a cor de fundo amarela e outra regra determina a cor de fundo azul. Neste momento alguns fatores vão determinar qual estilo será aplicado, como a localização da folha de estilo, a ordem da declaração da regra e a especificidade.

Herança

Algumas propriedades quando aplicadas a elementos pais são herdadas por elementos filhos. A isso chamamos de herança.

Elementos filhos são os elementos contidos no elemento pai. Veja seguir:

<div>
    <p>Este é um elemento filho de "div".</p>
</div>

Digamos que definimos um valor de font-size (tamanho da fonte) para a <div> (elemento pai). Automaticamente o elemento <p> (elemento filho) herdará esse valor caso não for especificado outro valor de font-size específico para ele. Veja:

div {
    font-size: 14px;
}
p {
    color: red;
}

No exemplo vemos que além de receber a cor vermelha o parágrafo também terá 14 pixels de tamanho de fonte herdado automaticamente de <div>.

Logicamente que nem todas as propriedades são herdadas. Você pode usar o valor inherit para força a herança. Veja no exemplo a seguir:

div {
   border: 1px solid #000000 /* borda de um pixel de cor preta */
}
p {
   border: inherit;
}

O elemento <p> herda a borda de <div>. Toda vez que alterar o valor da declaração do elemento pai a característica vai ser replicada no elemento filho que recebe o valor inherit.

Especificidade

Isso vai acontecer com você no futuro. Você vai ter um texto com uma cor, mas ao verificar seu CSS você está vendo que o valor está indicando outra cor. Isso vai fritar sua mente.

O porque disso é que em uma página web pode ser que um elemento HTML esteja vinculado a diferentes regras CSS ao mesmo tempo gerando um conflito. A especificidade pode atuar determinando qual regra é prioritária. Vamos ao código HTML a seguir.

<p>Você está lendo um artigo sobre CSS.</p>
<p>Também conhecido como Folha de Estilo em Cascata.</p>
<div>
    <p>Esses são seus primeiros passos sobre a linguagem.</p>
</div>

E agora o CSS.

p { color: red; }

Sem segredos. Todos os elementos possuem a cor vermelha.

Mas em muitos momentos seu projeto precisará de um estilo específico e não depender de uma regra genérica. Agora vamos a novas regras.

p { color: red; }
div p { color: blue; }

Agora inserimos um novo seletor que muda a forma de estilizar os parágrafos. Os parágrafos continuam recebendo a cor vermelha, menos o parágrafo dentro da div que recebe uma regra específica que determina a cor do parágrafo como azul. Essa regra tem prioridade sobre a regra genérica com seletor “p”.

Vinculação das folhas de estilos ao documento HTML

A vinculação das folhas de estilos ao documento HTML é uma forma de fornecer estilos à página web. Existem 4 formas de fazer essa vinculação.

• Por folha de estilo externa;
• Por folha de estilo incorporada;
• Por folha de estilo em escopo;
• e por folha de estilo inline.

Folha de estilo externa

Para se obter uma folha de estilo externa temos que declarar as regras CSS em um arquivo a parte com e extensão .css. Com este tipo de vinculação você pode mudar um estilo no site inteiro apenas com uma pequena alteração no arquivo CSS.

A vinculação da folha de estilo externa pode se dar de 3 maneiras. Vamos a elas:

Linkando o arquivo através do elemento HTML ‹link›

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

Acima vemos a primeira e mais comum forma de vinculação de folha de estilo externa. Uma observação importante é que o código deve estar entre as tags de abertura e fechamento do elemento head.

Usar folha de estilo de forma externa traz a vantagem de você deixar a página HTML menor, com um carregamento mais leve e você pode usar o mesmo arquivo CSS em diferentes páginas.

Importando o arquivo dentro do arquivo CSS externo

@import url(estilos-extras.css);
    .um-seletor-qualquer {
        margin: 0;
        padding: 0;
        background-color: #ff0000;
        font-size: 18px;
    }

Note que para fazer a vinculação utilizamos a diretiva @import e ela deve ser declarada na folha de estilos antes de qualquer regra.

Importando o arquivo dentro do HTML

Este tipo faz a vinculação dentro do documento HTML entre as tags de abertura e fechamento do elemento head, através do elemento ‹style›, mas usando a diretiva @import antes das regras CSS.

<head>
    <style type="text/css">
        @import url(estilos-extras.css);
    </style>
</head>

O uso da diretiva @import não é a mais indicada para incorporação de folha de estilo externa devida a problemas de performance. Procure, sempre que possível, usar o elemento ‹link›.

Folha de estilo incorporada

Folha de estilo incorporada também conhecida como folha de estilo interna é aquela que você vincula dentro documento entre as tags de abertura e fechamento do elemento head, através do elemento ‹style›. Veja como a seguir:

<head>
    <style type=”text/css”>
        .um-seletor-qualquer {
           margin: 0;
           padding: 0;
           background-color: #ff0000;
           font-size: 18px;
        }
    <style>
<head>

Este tipo de vinculação é indicada para aplicar em uma página única, ou seja, somente a página que tiver a folha de estilo incorporada receberá os estilos.

Folha de estilo em escopo

A folha de estilo em escopo também é utilizada dentro do documento HTML, mas o que difere das incorporadas é que elas ficam dentro de um contêiner de marcação HTML e os estilos somente serão aplicados para os elementos dentro deste contêiner. Veja a seguir.

<div>
    <style type=”text/css” scopped=”scopped”>
        /* Aqui vão as regras CSS */        
    </style>

<!-- Aqui vão os elementos HTML que receberão os estilos 

</div>

Folha de estilo inline

Folha de estilos inline é quando uma declaração CSS é incorporada dentro de uma tag de abertura de um elemento através do atributo style. Veja a seguir.

<p style="font-size: 14px; color: #ccc; text-align: center;">Aqui está um parágrafo de cor cinza alinhado no centro.</p>

Este tipo de vinculação deve ser desencorajado por misturar marcação com apresentação onde se perde as vantagens de se utilizar o CSS.

Como criar um arquivo CSS

Quando os estilos CSS estiverem dentro do arquivo HTML, obviamente a extensão será .html. Agora um arquivo com estilos separados para ser vinculado ao site deve ser salvo com a extensão .css.

Você pode até criar logo de cara um arquivo CSS. Mas faz mais sentido antes de criar este arquivo ter acesso aos elementos que serão estilizados. Então você precisa primeiro de um arquivo HTML.

Vamos então a uma página básica com um simples parágrafo. E nele insira uma folha de estilo externa. Você pode nomeá-la como estilo.css ou outro nome que desejar e que seja relacionado com o projeto.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Minha primeira página com meus estilos CSS</title>
        <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
        <p>Esta página possui a cor de fundo azul conforme valor declarado na regra CSS dentro do arquivo "estilo.css"</p>
        <p>O texto usado possui a cor branca.</p>
    </body>
</html>

Você pode salvar o documento com o nome que desejar desde que tenha a extensão .html. A imagem a seguir mostra uma página sem seus estilos CSS.

Com o HTML salvo você já pode estilizar os elementos.

Utilizando seu editor de códigos preferido abra um novo documento. Se ele permitir escolha que deve ser um arquivo do tipo CSS. Aqui no exemplo vou utilizar o bloco de notas.

Digite suas primeiras regras CSS. Como você ainda não conhece muito sobre propriedades copie o código a seguir:

body {
   background-color: #05a4e7;
   margin: 0;
   padding: 2em;
   font-size: 1.2em;
}
p {
   color: #fff;
}

Salve o arquivo com o nome do arquivo conforme está dentro da tag do elemento <link>. Você pode salvar na mesma pasta que salvou o arquivo HTML.

Não esqueça de digitar e extensão .css. Escolha também no bloco de notas o tipo como “Todos os arquivos” e a codificação UTF-8.

Vá para o local onde você salvou o documento HTML e abra o arquivo clicando duas vezes sobre ele.
Você verá a página aberta no navegador principal instalado em sua máquina.

Lógico que o resultado é simples porém é mais apresentável do que a página sem estilos.

Agora o próximo caminho é conhecer as propriedades CSS. Você pode começar aos poucos por aquelas com uso mais acentuado. Aqui no Chief você pode encontrar uma lista com explicação de propriedades bastante usadas que eu sugiro a leitura.

Conclusão

Este guia só foi o pontapé inicial para você começar aplicar as primeiras regras em CSS. A partir dele você já pode criar suas primeiras folhas de estilo, executar todos os tipos de vinculação e fazer pequenas estilizações.

Mas os estudos precisam avançar! Por isso deixo uma lista útil de artigos do Chief of Design sobre CSS para você consultar posteriormente.

CSS e suas Propriedades mais usadas!

Tipografia para web – Parte 01

Como usar o CSS3 media queries para que seu site atenda a diferentes resoluções de tela

Flexbox CSS3 – Guia para iniciantes

CSS Grid Layout – Guia introdutório

CSS3 Animation – Tutorial para iniciantes

E o Chief of Design também oferece conteúdo em vídeo sobre essa ferramenta no Curso em Vídeo de Fluência em HTML & CSS. Dê uma conferida!!!

Espero que este artigo tenha sido útil e esclarecido suas dúvidas iniciais. Quaisquer dúvidas deixe um comentário.

Abraço!