Aprenda a construir sites com CSS – Introdução

O que é o CSS, o que significa, para quê serve?

CSS significa: Cascading Style Sheets que em português quer dizer, Folha de Estilo em Cascata. Ele descreve como os elementos HTML devem ser exibidos na tela, no papel ou em outras mídias. O CSS pode controlar o layout de várias páginas de uma só vez. E por fim, o CSS economiza muito trabalho, vocês irão perceber isso logo nos primeiros exemplos. Dito isso, mãos a obra.

Veja abaixo uma página com 4 folhas de estilos diferentes. Clique nos links e veja a mudança acontecer.

Aposto que você já começou a imaginar as possibilidades que CSS pode nos oferecer, bom, você está certo, as infinidades de estilo dentro de uma mesma página que o CSS trás só depende da sua criatividade e conhecimento.

Mas porque usar CSS? Se você ainda está se perguntando isso então eu respondo. O CSS é usado para definir estilos para suas páginas da Web, incluindo o design, layout e variações de exibição para diferentes dispositivos e tamanhos de tela. Pois é, se você quer que suas páginas sejam bem visualizadas em qualquer dispositivo ou tamanho de tela, o CSS é a resposta.

HTML nunca teve a intenção de conter tags para formatar uma página web, e sim para descrever o conteúdo dela. A medida que foi se popularizando, essas opções de formatação foram inseridas.

Se você não sabe o que é HTML, sugerimos que você leia nossa série sobre HTML. Série HTML

A versão 3.2 do HTML trouxe tags como <font> e junto dela, atributos de cores foram adicionados, isso começou um verdadeiro pesadelo para os desenvolvedores, quem é dessa época sabe do que estou falando. O desenvolvimento de sites, quanto maior pior, isso porque as informações de tipografia eram adicionadas em cada bloco de elementos, em cada página. Esse processo se tornou longo, caro e muito, muito cansativo.

Foi então que em 1994 o grande, o salvador da pátria, Håkon Wium Lie, vendo a dificuldade por parte dos desenvolvedores propôs a criação de uma maneira mais fácil para formatar as informações. Nasceu o CSS. O lançamento oficial aconteceu em 1996, já com a W3C formada e a frente do projeto.

E para te convencer de vez que o CSS é a melhor opção de formatação de informações HTML, saiba que você pode escrever todo estilo em um arquivo externo (.css) e incluí-lo na página HTML, assim você só tem que alterar um arquivo e todas as páginas que são estilizadas pelo CSS mudarão.

Como escrever CSS – Sintaxe

Um bloco CSS contém um conjunto de regras que irão definir os elementos que forem dessa classe. Então temo um seletor e um bloco com as declarações ou regras de estilo.

• O seletor acima, está dizendo qual elemento HTML estamos querendo estilizar, mudar o estilo original;
• Depois vem o bloco que é delimitado por chaves { }. Dentro das chaves, as declarações, nada impede de ter somente uma declaração. As declarações são necessariamente separadas por ponto-e-vírgula (;);
• Nas declarações devem ter o nome da propriedade CSS e seu valor. Propriedade e valor são separados por dois pontos(:);

Veja o exemplo:

p {
  color: red;
  text-align: center;
}

<!-- CÓDIGO NO HTML -->
<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
<p>
  <small>"Não há ninguém que ame a dor por si só, que a busque e queira tê-la, simplesmente por ser dor..."</small>
</p>

SELETORES

Ok, agora você já sabe como se escreve CSS, então vamos estudar cada um de seus componentes para entendermos o funcionamento das folhas de estilo.

Vamos começar com os seletores de CSS. Os seletores são a forma que o CSS tem de encontrar os elementos HTML para serem estilizados. A seleção dos elementos HTML é feita com base no nome, ID, classe ou atributo do elemento. Se você usa o seletor h1, está dizendo que todos os <h1> terão aquele estilo. Se usa #id-do-elemento, então o CSS vai buscar o elemento com aquele ID. Se usa .classe-do-elemento, o CSS busca todos os elementos que possuem essa classe.

Exemplos:

.span { color: #FF4466; }
#avatar { width: 20px; height:20px; padding: 5px; }
.texto-vermelho { color: #F00; background-color: #000; }

<!-- CÓDIGO NO HTML -->
<span>Conteúdo do span</span>
<img src="avatar.png">
<p class="texto-vermelho">Texto com texto vermelho</p>

Resultado

---

Conteúdo do span, lembrando que a propriedade “color” só afeta textos.

Texto qualquer do site.

Lembre-se: Você pode usar a mesma classe em várias tags e definir propriedades para todas elas usando o seletor ".sua-classe{}", mas a propriedade "id", pensando em boas práticas, só deve ser usado em uma única tag sendo uma identidade única para ela. Você até pode usar a mesma ID em mais de uma tag, mas isso não é interessante e pode prejudicar sua programação no futuro, principalmente pensando em JavaScript.

Imagine agora que você tem uma classe que determina a cor vermelha para elementos e outra classe que seta o tamanho, agora você tem um parágrafo que precisa receber tanto a cor quanto o tamanho especificado nas classes sugeridas. Então você terá que criar outra classe especificando tamanho e cor??? Graças a Deus não. Os elementos HTML podem receber duas ou mais classe e vão puxar as configurações de todas elas.

Veja o exemplo abaixo:

/* CÓDIGO NO CSS */
.cor-vermelha { color: red; }
.tamanho-12 { font-size: 12pt; }

<!-- CÓDIGO NO HTML -->
<p class="cor-vermelha tamanho-12">Conteúdo do parágrafo aqui.</p>

Legal neh?

Outra sacada muito legal do CSS é o agrupamento de elementos com as mesmas definições. Vamos supor que vc tem a mesma configuração para <h1>, <h2> e <p>.

/* CÓDIGO NO CSS */
h1 { text-align: center; color: red; } 
h2 { text-align: center; color: red; }
p { text-align: center; color: red; }

Em vez disso, podemos agrupá-los separando-os por vírgula, assim:

/* CÓDIGO NO CSS */
h1, h2, p { text-align: center; color: red; }

Economiza tempo, melhora o desempenho, pois reduz a quantidade de códigos digitados e fica muito mais fácil de analisar futuramente em uma manutenção do estilo.

Podemos ainda, como em qualquer outra linguagem, comentar nosso código. Esse é um ótimo recurso, principalmente se você trabalha com outros designers no mesmo projeto. Os comentários são iniciados com /* e finalizam com */, podem ser na mesma linha ou em várias.

Beleza, até agora tranquilo, mas onde vamos escrever nossa folha de estilo CSS?

Há três formas de escrever um estilo CSS:

•  Em um arquivo externo;
•  Dentro do documento HTML aninhado com o elemento <head>;
•  Como atributo de um elemento, o que chamamos de inline.

Usando um arquivo externo, você escreve todo seu estilo de uma página em um documento com extensão .css e inclui esse arquivo no código HTML aninhado com o elemento <head>.

<!-- CÓDIGO NO HTML -->
<!DOCTYPE html>
<html>
<head>
  <title>Título de seu site</title>
  <link rel="stylesheet" type="text/css" href="estilodapage.css">
</head>
<body>
  <h1>Conteúdo do site</h1>
</body>
</html>

Você pode usar qualquer editor de texto para escrever a folha de estilo CSS, só não esqueça de salvar com extensão .css. Essa é a forma mais recomendada, dessa maneira você não precisa alterar página por página quando quiser mudar o estilo, basta alterar o arquivo .css e incluí-lo em todas as páginas como mostrei acima.

Lembrando que um documento CSS não pode conter tags HTML, apenas siga a sintaxe mostrada no começo do post.

Importante! Não adicione espaço entre o valor e a unidade de medida dessa maneira, font-size: 20 px, não vai funcionar. A maneira correta é: font-size: 20px;

A folha de estilo CSS interna segue as mesmas regras de escrita, mas é escrita dentro do documento HTML aninhada com a tag <head> e dentro da tag <style>.

<!-- CÓDIGO NO HTML -->
<!DOCTYPE html>
<html>
<head>
  <title>Título de seu site</title>
  <style type="text/css">
  	body { background: #F6F6F6; }
  	p { font-size: 18pt; }
  </style>
</head>
<body>
  <h1>Conteúdo do site</h1>
</body>
</html>

E agora a maneira menos recomendada, mas que as vezes é necessário, em raríssimos casos. Estilo inline ou, como um atributo da tag. Você pode usar o atributo style=”” para qualquer propriedade CSS. Por exemplo, vamos alterar o tamanho e a cor de um <h1>.

<!-- CÓDIGO NO HTML -->
<!DOCTYPE html>
<html>
<head>
  <title>Título de seu site</title>
</head>
<body>
  <h1 style="font-size:25px; color:red;">Titulo com conteúdo alterado inline</h1>
</body>
</html>

Dica rápida! Esse estilo de escrita CSS mistura conteúdo com apresentação. Perde-se muitas vantagens. Use com moderação.

Agora vem um assunto que deixa, ainda, muitos desenvolvedores frontend de cabelo em pé.

Nós podemos ter várias folhas de estilo em um documento HTML, inclusive, as três formas apresentadas aqui em um único documento. O problema é que você pode ter o mesmo elemento configurado em mais de uma folha de estilo CSS ao mesmo tempo. E agora, vai bugar? Sim claro!!!, brincadeira, não vai, a única coisa que vai bugar é a cabeça de quem for fazer a manutenção depois. Isso eu afirmo com certeza!!!

As regras CSS seguem uma ordem em cascata. Pense em uma cachoeira, a água no inicio é bem mais fraca, a medida que cai, ganha mais e mais força, no seu estágio final é onde ela tem mais força. A folha de estilo também é assim. Pensando nas três formas de se escrever folhas de estilo, qual está mais abaixo, ou mais próximo do elemento? Sim, a forma inline, dentro da tag, essa tem prioridade sobre as outras.

Se você incluir um documento externo e depois, logo abaixo, escrever usando a tag <style>, então a tag <style> terá preferência, mas se for o contrário, primeiro a tag <style> e depois dela incluir o arquivo externo, o arquivo terá prioridade. Da mesma forma acontece se você inserir várias folhas de estilo externas, a que for inserida por último terá preferência.

Essa foi uma breve introdução, se você se interessou em aprender mais sobre folhas de estilo CSS, continue a série, tenho certeza que não irá se arrepender. Se você tiver alguma dúvida, pode entrar em contato conosco nas redes sociais, pelo whatsapp ou pelo nosso formulário de contato.

Até a próxima!