CSS Tutoriais

O que é CSS? Aprenda sobre CSS com este Guia Básico

O que é CSS? Aprenda sobre CSS com este guia Básico

Certamente você está nos seus primeiros passos como desenvolvedor web e chegou até aqui para saber o que é CSS, certo?

CSS é a sigla para o termo em inglês Cascading Style Sheets, que traduzido para o português significa Folha de Estilo em Cascatas. O CSS é fácil de aprender e entender e é facilmente utilizado com as linguagens de marcação HTML ou XHTML. Mas o que realmente isso quer dizer? O que é CSS além da sigla?

Prepare-se para este Guia Completo onde você vai saber o que é CSS, as principais características e o que você pode fazer com CSS no desenvolvimento de um site.

O que é CSS?

CSS é uma linguagem de folha de estilos, que tem o papel de tornar uma página apresentável na web, relacionada diretamente com o design e aparência. Ou seja, o CSS é uma camada que se usa para controlar o estilo da sua página da web.

Para entender o que é CSS pense  na decoração da sua página. Utilizando o CSS é possível alterar a cor do texto e do fundo, fonte, espaçamento entre parágrafos, criar tabelas, usar variações de layouts, ajustar imagens para suas respectivas telas e assim por diante. Podemos dizer que toda a parte visual da sua página será definida com o CSS.

O CSS ilustra como os elementos em HTML de um site devem ser apresentados nas telas. De uma forma direta, é o CSS que determina o visual do seu site. Desde o tamanho da fonte até a imagem de fundo, tudo pode ser alterado com o CSS.

Por que cascata? O termo dá-se por causa do método de utilização. É possível usar vários documentos CSS a fim de de se compor o visual da página, cada um com uma regra diferente.

HTML & CSS

Para resumir, vamos fazer uma analogia para você entender porque vamos falar de HTML em um artigo sobre o que é CSS. Imagine a construção de uma casa.

Na sua casa, o HTML é responsável pela estrutura. Definir quantos cômodos, quantidade de quartos e garagem. Isso acontece com cabeçalho, títulos e parágrafos do seu texto. Para isso servem as linguagens de marcação e você pode saber mais sobre HTML neste artigo.

Depois de pronta, você certamente quer decorar sua casa. Nessa hora você precisará do CSS. É o CSS quem vai determinar quais as cores das paredes, qual estilo da decoração, dos tapetes e das cortinas. Daí, entende-se a decoração da sua página: cor da fonte, quantidade de linhas e colunas, estilo da fonte, layout, efeitos de sombra em botões, animações de elementos e até mesmo profundidade. Para isso serve a linguagem de estilo de camada.

E por último, mas que ainda não vamos aprofundar neste texto, entra a parte automatizada da sua casa. Instalações de facilitadores como aquecedor, ar-condicionado, sistema de música automático ou campainha, que é  para isso que serve a linguagem de programação, como JavaScript, Json, Ruby on Rails, por exemplo.

Como Surgiu?

A história do CSS começou em 1994 quando Håkon Wium se deparou com uma situação onde, para publicar uma página da web não havia possibilidade de criar um layout similar ao de um jornal de papel. E foi assim que criou-se a linguagem de folha de estilo, para estilizar páginas.

Antes de saber o que é CSS, quando Tim Berners-Lee criou o HTML, esperava que isso chegaria a acontecer, mas não publicou a sintaxe da folha de estilo, que se tornou um problema para cada navegador ao ter que decidir como apresentar as páginas para os usuários.

Havia uma cobrança por parte dos escritores da web sobre a falta de controle da aparência de suas páginas, com um tom de hostilidade entre eles, como podemos notar neste email do programador Marc Adreessen.

Håkon, com ajuda de Bert Bos, publicou o primeiro rascunho de uma Folha de Estilo em camadas e o original ainda está disponível online.

Características do CSS

O CSS é muito bem recebido pelos navegadores atuais. Chega a ser relativamente fácil aprender e criar um código mais eficiente e clean que se aplique em todas as suas páginas HTML.

Quem usa CSS é capaz de estilizar sua página da mesma forma que programadores modulam códigos de softwares. Isto faz do CSS um novo padrão na criação de páginas web. Os navegadores usam os comandos CSS para alterar a forma como um documento é apresentado.

Benefícios e Vantagens do CSS

Podemos destacar que os principais benefícios do CSS na construção de páginas são:

  • Código mais clean que o HTML, que para suprir necessidades e acompanhar a evolução da internet, apresentava soluções por meio de novas tags, poluindo assim o background dos sites.
  • Facilidade de manutenção e atualização em todo o documento com apenas uma folha de comando, o que também faz ganhar tempo de trabalho.
  • Separação da Folha de Estilo e Folha de Marcação, que permite que escritores e desenvolvedores trabalhem simultaneamente e de forma independente, eliminando a necessidade de criar e aplicar o layout para cada nova página criada.
  • Maior possibilidade de formatação que incluem controle do espaçamento, alinhamento e posicionamento na página; autonomia no tamanho de fontes, cores e estilos dos textos; e permite a geração automática de listas ordenadas e não ordenadas, marcações e tabelas.
  • Flexibilidade quanto ao tamanho e posicionamento dos elementos que formam uma página. Com CSS é possível solicitar ao navegador qual pixel colocar nesta ou aquela imagem, ou a altura e largura que ela deve mostrar. O mesmo aplica-se ao conteúdo.
  • Permite formatar separadamente o conteúdo do site para ser exibido na tela ou para ser impresso.
  • Aumento na velocidade do carregamento de páginas pelos navegadores. A capacidade de download da página melhora pois se usa menos código e pela separação de conteúdo e layout.

Embora ninguém possa afirmar, somando todas estas vantagens, há indícios fortíssimos para o impacto do CSS no ranqueamento das páginas diante dos mecanismos de buscas, ou seja, o CSS pode influenciar diretamente no SEO.

Tantos benefícios tornam o CSS uma ferramenta indispensável por parte dos desenvolvedores na programação de um site.

Limitações do CSS

O CSS tem alguns limites. Vale a pena citar alguns deles que causam mais impacto na construção de uma página:

  • Nem todos os browsers suportam todas as especificações das folhas de estilo.
  • Não é possível ler um arquivo usando CSS.
  • Não interage com Base de dados.
  • Não pode solicitar uma página da web.
  • Dependendo no nível de sofisticação requer testes de validação.
  • Funciona diferente de acordo com cada browser e ainda cada browser pode criar sua própria folha de estilo.

Funções do CSS em um site

O que você pode fazer com CSS?

O CSS é uma ferramenta muito potente que possibilita criar diversas funcionalidades ao invés de usar JavaScript ou outra linguagem mais pesada. Se usado com moderação, CSS pode viabilizar uma ótima experiência ao desenvolvedor e usuários das páginas web.

Com o Cascading Style Sheets é possível criar animações complexas, criar efeitos com uso de parallax, que faz parecer que a imagem de fundo tem uma profundidade diferente um dos outros, criar sites interativos e também jogos com HTML5 e CSS3.

Veja outros trabalhos incríveis neste site e se inspire.

Aprendendo o Básico

Agora que você já tem noções básicas sobre o significado do termo CSS e o que pode ser feito com essa ferramenta, vamos à próxima etapa.

Como usar CSS

O CSS vai manter as informações de um documento separadas do estilo em que serão exibidas. Veja um exemplo de um arquivo em CSS.

Imagine que o seu site tem o fundo todo preto, o background, e o conteúdo é escrito em branco, para causar o destaque. Ao invés de criar diversas tags em .html para determinar que o conteúdo seja em branco, <white>, você pode aplicar de forma automática em todas as páginas com uso do CSS.

Como no exemplo abaixo, o primeiro quadro refere-se ao CSS e o segundo é o HTML, já com a classe .bloco-dark.

Como adicionar CSS no HTML

O CSS funciona com o sistema de personalização de estilos de três elementos:

  • Tag (personalização das tags do .html como body, div, li, ul, ol e table).
  • #id (adiciona um ID por tag html fazendo uma personalização).
  • .classes (é possível adicionar mais de uma classe por tag html).

E assim, sua formatação estará reunida em um só documento sem ter a necessidade de estruturar página por página, basta apenas adicionar a classe. Veja o resultado.

Exemplo de personalização com uso de CSS

E como isso aconteceu? O navegador carrega tanto o arquivo em .html quando o .css, agrupando assim o conteúdo e o estilo da página.

Anatomia de um comando CSS

O CSS estipula regras para o arquivo em html. Com cada regra é possível estilizar o conteúdo todo ou somente determinados elementos. Por isso entenda, um comando básico é composto por seletor e declarações, que contém propriedade e valor.

SELETOR {PROPRIEDADE: VALOR}

A sintaxe do CSS é muito simples de aprender. O seletor seleciona quais elementos em html receberão a propriedade. Pode ser p (parágrafo) ou o body (corpo da sua página). Já a propriedade pode ser a cor ou algo mais específico como cor do fundo (background). E por último o valor, que determina o valor da propriedade.

Vamos simular um exemplo. Digamos que o objetivo é mudar a fonte de uma tag h1. Para isso podemos usar h1 {font-size: 20px;}

  • h1 – é o seletor. Neste caso selecionamos o h1.
  • font-size – é a declaração que contém  a propriedade (font-size) e o valor é (20px).

Lista de comandos básicos CSS

São tantas opções entre seletores, propriedades e valores que pode ser muito difícil para um desenvolvedor lembrar de todos eles apenas confiando na memória. Por isso decidimos criar uma Lista de Comandos Básicos CSS (CSS3 Incluso) que servirá de ajuda para você que está aprendendo sobre o que é CSS.

Nesta lista você encontrará treze páginas de declarações junto com possíveis propriedades. Este documento foi estrategicamente estruturado e dividido em seções para facilitar sua leitura.

Você pode fazer o download da Lista de Comandos CSS em PDF clicando aqui e saiba muito mais sobre o que é CSS.

Diferenças de Folhas de Estilo

No CSS existem três diferentes maneiras para adicionar os estilos às páginas do seu site. São eles: interno, externo e inline.

Basicamente as definições são:

  • Interno: o código é colocado na seção <head> de uma determinada página.
  • Externo: o código é vinculá-lo a um arquivo .css externo. Dessa forma, quaisquer alterações feitas em um arquivo CSS externo serão refletidas em seu site globalmente.
  • Inline: o código é usado para uma tag html específica.

Para se familiarizar mais com estas maneiras, confira este tutorial com as diferenças entre os estilos CSS. Vale a pena a leitura principalmente para entender o porque o inline não é tão recomendado para construir seu site, além das vantagens e desvantagens de todos eles.

Criando uma folha de estilo

Para criar uma folha de estilos é bem simples, basta abrir seu editor de códigos, como o Sublime, e criar um documento novo.

Depois de criado, salve como estilo.css, mesmo sem ainda ter escrito nada (este .css é o que define um arquivo ser reconhecido pelo navegador como a folha de estilo).

Como criar um folha de estilo CSS

Assim que for salvo, o editor de texto vai conseguir ler o arquivo com mais facilidade, até mesmo com sugestões de auto complete enquanto digita os códigos da folha de estilo, como mostra o print abaixo:

Como integrar o CSS no HTML?

Após salvar como estilo.css precisamos colocar o arquivo em nosso arquivo HTML, porque é ele quem vai carregar o CSS, o CSS sozinho não faz site! E é com tags de referência que você avisa ao HTML que existe um arquivo de estilo para ele, veja:

<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

Esta tag vai indicar ao HTML que tem um arquivo CSS para ser adicionado à  página. Isto deve ser adicionado dentro da tag <head> </head> do seu HTML, como pode ver nesse print:

Como incorporar CSS no Html

Agora abra o documento estilo .css com o Sublime, que provavelmente está na mesma pasta do nosso HTML.

Incorporando CSS no HTML

A partir desta última imagem, vamos entender como o CSS funciona com três parâmetros básicos:

Elementos Básicos do CSS

Os elementos são tags do HTML, #id e .classe.

1 – Tags html

  • body
  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • span
  • p

2- Classes CSS:

Criar e usar uma classe CSS é simples. No documento CSS basta colocar .nome-da-classe-que-deseja . Abaixo criamos a classe título:

Criando classes no CSS

Note que existe um ponto (.) antes do nome da classe. Isso faz com que o CSS entenda que se está criando uma classe para ser usada no HTML.

Para se adicionar essa classe que criamos dentro do CSS, basta que na tag HTML tenha o parâmetro class=””.

Observação: dentro das aspas, não precisa usar o ponto (.) antes da classe pois o nome class no HTML já avisa para o CSS que é para ele buscar pelo nome da classe com “.”

Criando classe título no CSS

Lembrando que uma tag HTML, como h1 ou qualquer outra, pode ter mais de uma classe, basta separá-las com espaço como mostra no exemplo abaixo:

<h1 class=”titulo fonte-grande sublinhado”>Melhor site</h1>

Nesta tag foram usadas três classes: “titulo”, “fonte-grande” e “sublinhado”.

Mas para que todas estas classes tenham efeito épreciso criá-las no CSS. Veja como criamos estas classes:

Criando diversas classes no html

Quando abrirmos nosso HTML o título deverá ficar assim:Exemplo de uso de CSS

3- Criando Id’s CSS:

O uso dos Id’s em CSS é parecido com as classes, mas as principais diferenças são que os id’s são identificados com # e só podem ser usados um id por tag html. Para adicionar um id ao HTML, adicione como parâmetro id=””.

Veja que a quando usamos no HTML, também excluímos o #  do id da mesma forma que excluímos o . da classe.

Criando ID no CSS

Dessa forma o botão deverá ficar assim:

criando botão com CSS

Dica: este parâmetro de ID’s não é o mais apropriado para se usar em uma página para muitos botões pois pode causar conflitos com a linguagem de programação JavaScript, que utiliza normalmente dos ID’s no HTML para realizar ações mais complexas.

Como adicionar CSS no HTML sem a tag <link>?

Existem duas outras maneiras de se adicionar CSS no HTML, apesar de não serem recomendadas devido a um padrão adotado mundialmente, é nosso dever te mostrar como faz.

1- Adicionar CSS no HTML sem uso do arquivo externo

Você pode adicionar o CSS colocando o estilo dentro do próprio HTML, sem usar um arquivo CSS externo como mostra o exemplo abaixo:

Como adicionar CSS no HTML sem a tag link

Neste exemplo, o estilo fica dentro do HTML mesmo com o uso da tag <style> dentro da tag <head>. Isso faz com que tudo fique centralizado em um único documento.

E por que não é recomendado? Quando há muitas linhas de estilo isso pode causar uma demora ao abrir a página uma vez que o navegador lê o seu documento de cima para baixo, linha por linha. Então se tiver muitas linhas de estilo para ler, vai demorar mais para o conteúdo da página ser mostrado.

Por isso o ideal é usar a tag <link> para que, ao invés de ler muitas linhas de estilo, o navegador leia somente uma referência para outro arquivo e assim fazer com que seu conteúdo seja carregado mais rapidamente.

2- Adicionar CSS no HTML utilizando o parâmetro style

Você pode adicionar CSS no HTML utilizando o parâmetro style em uma tag html específica. Mas isso afetará somente aquela tag e não todas as demais tags com o mesmo nome, então ao invés de usarmos os parâmetros id=”” ou  class=””, utilizaremos o parâmetro style=””:

<h1 style=”font-size: 3rem;color: #333;text-align: center;”>

Veja como fica:

Adicionando css no html com parâmetro Style

E por que não é recomendado? Este tipo de uso de estilos se torna um problema caso outros elementos tenham as mesmas características do seu título, por exemplo. Com isso, você teria que copiar todo o parâmetro style da tag h1.

Diante de disso, concluímos também que o mais recomendado é o uso de classes através de um arquivo de estilo externo ao CSS. Assim conseguimos usar os estilos de forma mais limpa e rápida e é possível reutilizar essas classes em outras tags sempre que desejar, sem afetar o tempo de carregamento da página.

CSS3

Apesar de lançada em 2010, CSS3 é a última versão da Folha de Estilo em Cascata e veio para acrescentar de forma melhorada das versões anteriores.

A melhor novidade é em relação a flexibilidade na criação de layouts, trazendo assim mais autonomia para os webdesigners e também desenvolvedores, que de certa forma estão ligados ao visual do site.

Com o CSS3 é possível elaborar cantos arredondados, sombras, efeitos gradientes, animações e efeitos de transição, dentre outras opções.

Alguns exemplos:

@keyframes exemplo {
    0% {background-color: red;}/*a animação começa vermelho*/
    50% {background-color: yellow;}/*a animação chega na metade em amarela*/
  100% {background-color: red;}/*a animação termina vermelha novamente*/

}
div {
    width: 100px;/*largura do elemento*/
    height: 100px;/*altura do elemento*/
    background-color: red;/*cor do inicial do elemento*/
    animation-name: exemplo;/*aqui vem o nome da animação*/
    animation-duration: 4s;/*tempo da duração do inicio ao fim*/
  animation-iteration-count:infinite;
}

E no html basta colocar a tag <div></div> e a animação começará assim que o estilo conteúdo do site for carregado.

Cursos para aprender mais sobre o que é CSS

Para aprofundar mais nos seus conhecimentos sobre o que é CSS, nós recomendamos o Codecademy, uma plataforma online interativa para quem quer aprender sobre linguagens de programação e marcação. Outras indicações também são o Codeschool e Udemy.

Conclusão

Pronto! Você conclui os primeiros passos que precisava para saber sobre o que é CSS e entender como pode ser um grande aliado na hora de criar e desenvolver um site. Além disso é uma ferramenta sempre atual e com melhorias constantes, por isso além de aprender o básico sobre o que é CSS recomendamos que fique sempre por dentro do que tem de novo no assunto das folhas de estilo.

Se você ainda precisa saber mais sobre HTML, recomendamos que leia nosso Guia Completo, que também inclui uma lista de comandos básicos HTML.

E depois desse artigo sobre o que é CSS, que tal dar um passo adiante e aprender como criar um menu suspenso CSS? Então fique com esta leitura. E se tiver dicas e sugestões para este artigo, deixe nos comentários. Bom desenvolvimento!

Ariane G.

Ariane é jornalista, analista de conteúdo & SEO na Hostinger Brasil e tem o papel de contar para todo mundo o poder transformador da internet. Com foco em otimização, produção para web e técnicas de SEO, divide os dias entre pesquisas de palavras-chave e passagens aéreas (ela ama viajar).

1 Comentário

Deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$2
29
/mês*

Cadastre-se

Receba nossos conteúdos e novidades direto no seu e-mail!

 

Estamos cadastrando...

Pronto! Obrigado por se inscrever!