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.
Criando sites com CSS
Deixe seu site com um estilo moderno e personalizado.
As cores podem ser definidas pelo seu código hexadecimal, por exemplo, para uma cor branca, usamos o código #FFFFFF; ou simplesmente #FFF; para uma cor preta o código é #000000; ou #000;
Esse código é dado em RGB (Red, Green, Blue), então os dois primeiros algarismos são a quantidade (em hexadecima) de Vermelho os dois próximos são os de verde e os últimos de azul, por isso #000000; é preto, pois não há entrada de nenhuma cor.
Em RGB, a falta de cor ou de luz, é o preto ou a escuridão.
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>
Resultado
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
"Não há ninguém que ame a dor por si só, que a busque e queira tê-la, simplesmente por ser dor..."
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.
".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:
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>
Resultado
Conteúdo do parágrafo aqui.
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!
Aprenda as principais linguagens usadas na WEB.
Aqui você tem acesso gratuito às principais linguagens de programação web, não perca tempo, acesse nosso conteúdo e comece a programar agora mesmo.