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:

P {
  Color: red;
  text-align: center;
}

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.

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

No HTML teremos:

<span>Conteúdo do span</span>
<img src="/avatar.jpg" id="avatar">
<p class="texto-vermelho">Texto que vai receber a cor vermelha</p>

Você pode querer que apenas alguns elementos específicos sejam afetados por uma classe. Por exemplo, você pode especificar que apenas elementos

e que tenha o atributo class="center" sejam afetados pelo estilo CSS.

p.center { text-align: center; }

No HTML:

<p class="center">Texto do elemento</p> <!—esse será afetado-->
<p>Outro texto qualquer</p> <!—esse não será afetado -->

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.

.cor-vermelha { color: red; }
.tamanho-12 { font-size: 12pt; }

No HTML:

<p class="cor-vermelha tamanho-12">Conteúdo</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.

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:

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.

/* comentário do estilo */

/* aqui vai um
Comentário 
Do estilo */

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

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

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

body { font-family: Verdana; background-color: lightblue; }
h1 { font-size: 18px; color: gray; }

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

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/estilo.css">
</head>
<body>
</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

<h1 style=”font-size:25px; color:red;”>Titulo com conteúdo alterado inline</h1>

Agora vem um assunto que deixa, ainda, muitos designers 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, brincadeira, não, a única coisa que vai bugar é a cabeça de quem for fazer a manutenção depois.

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!