Aprenda a construir sites com CSS – Introdução

CSS, linguagem que descreve o estilo de um documento HTML. Descreve como os elementos devem ser exibidos.

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.

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:

1.p {
2.  color: red;
3.  text-align: center;
4.}

1.	<!-- CÓDIGO NO HTML -->
2. <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
3.<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:

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

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

Resultado

---

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

Texto qualquer do site.

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:

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

1.<!-- CÓDIGO NO HTML -->
1.<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>.

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

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

1./* CÓDIGO NO CSS */
2.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.

1./* Comentário no CSS */
2./* Podemos comentar
3.em varias
2.linhas */

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>.

1.<!-- 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.

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>

1.<!-- 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>

Agora vem um assunto que deixa, ainda, muitos desenvolvedores front-end de cabelo em pé. Eu falo com detalhe sobre isso na aula 2 - APRENDA A ESTILIZAR SITES COM CSS.

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!