Primeiros passos no CSS: Introdu��o pr�tica

Fique por dentro

CSS, juntamente com o HTML e o JavaScript s�o a base do desenvolvimento web. Sem conhecer essa linguagem � imposs�vel ser um programador web profissional.

CSS (Cascading Style Sheets) � uma linguagem de criaç�o de estilos, que quando combinados determinam qual ser� a apar�ncia de uma p�gina web. Enquanto o HTML cuida da estrutura contida em uma p�gina, � o CSS quem diz ao navegador com o que cada parte da p�gina deve se parecer.

Usamos a linguagem CSS para moldar a apar�ncia dos elementos em uma p�gina web atrav�s de regras.

Por exemplo, com CSS podemos modificar os par�grafos p aumentando a sua fonte e peso adicionando negrito, os t�tulos h1 para que tenham a fonte Roboto Slab, mover uma parte da p�gina para baixo de outra, entre muitos exemplos.

Todas essas caracter�sticas visuais dos elementos s�o representadas por propriedades, de forma que aprender CSS consiste em tr�s etapas:

Entender como ele funciona
Conhecer a sintaxe de uma regra
Descobrir quais propriedades existem

Este artigo � uma introduç�o aos dois primeiros t�picos e ao longo da mat�ria CSS abordamos o terceiro.

Como o CSS funciona?

Cada elemento em uma p�gina reside em uma caixa invis�vel.

No Slide 1 vemos os elementos fora e dentro de suas respectivas caixas.

#PraCegoVer - Transcriç�o dos Slides P�gina HTML contando a hist�ria de Chapeuzinho Vermelho
o t�tulo Chapeuzinho Vermelho aparece dentro da caixa h1
O primeiro par�grafo, abaixo do t�tulo, aparece na caixa p
O texto abaixo do par�grafo aparece dentro da caixa blockquote

Slide 1. Elementos fora e dentro da caixa

Box Model

Essa caracter�stica dos elementos � chamada Box Model e � uma das chaves para entender como o CSS funciona.

As caixas que envolvem os elementos possuem margem, borda, preenchimento e conte�do. O CSS nos permite criar regras que determinam como a caixa individual de cada elemento ser� apresentada.

A p�gina mesmo � uma grande caixa para o CSS, que envolve todo o conte�do vis�vel na p�gina como vemos na Figura 1.

Figura 1. Caixa do elemento HTML selecionada

Para ver a caixa de cada elemento como nos exemplos acima e tamb�m as propriedades de cada um podemos usar as ferramentas de desenvolvimento do navegador (DevTools). No Chrome as ferramentas do desenvolvedor podem ser acessadas apertando a tecla F12.

Na Animaç�o 1 abaixo temos uma vis�o geral do console.

Animaç�o 1. Vis�o geral do DevTools

O console � dividido em tr�s grandes seç�es. A primeira mostra a estrutura da p�gina conforme ela foi processada pelo navegador. A segunda exibe as propriedades de um elemento selecionado na primeira seç�o. Para selecionar um elemento basta posicionar o mouse sobre ele. A terceira seç�o apresenta a caixa do elemento e as propriedades dele.

Sintaxe de uma regra

O trabalho do CSS � associar regras aos elementos em uma p�gina.

Uma regra CSS � composta de duas partes:

Seletor
Declaraç�o

Seletor � a parte da regra que informa a qual ou quais elementos ela deve ser aplicada.

Declaraç�o � a parte da regra que informa como os elementos referenciados pelo seletor devem ser modificados.

As declaraç�es s�o compostas por pares de chave e valor separados por dois pontos :.

Por exemplo, na regra apresentada no C�digo 1 p � o seletor e todo o conte�do entre chaves � a declaraç�o.


  p {
      font-family: Arial;
  }

C�digo 1. Regra CSS para alterar a fonte de um par�grafo

Essa regra informa para o navegador que todos os elementos p encontrados na p�gina devem ter a fonte Arial.

Uma declaraç�o pode conter diversas propriedades separadas por ponto e v�rgula, conforme exemplificado no C�digo 2. As propriedades informam quais caracter�sticas visuais do elemento desejamos modificar.

  h1, h2 {
      font-family: Arial;
      color: yellow;
  }

C�digo 2. Regra com mais de uma propriedade

Essa regra informa para o navegador que os elementos h1 e h2 devem ter a fonte Arial e a cor yellow.

Note que a propriedade font-family recebe como valor o nome de uma fonte e que color recebe uma cor. Diferentes propriedades podem ter diferentes conjuntos de valores.

Exemplo pr�tico

Abra o seu editor preferido para criar uma p�gina HTML e aplicar CSS a ela.

No arquivo HTML insira o C�digo 3.

  <!DOCTYPE html>
  <html>
   
  <head>
      <title>Chapeuzinho Vermelho - Conto dos irm�os Grimm</title>
  </head>
   
  <body>
      <h1>Chapeuzinho Vermelho</h1>
   
      <p>Houve, uma vez uma graciosa menina;
          quem a via ficava logo gostando dela,
          assim como ela gostava de todos;
          Particularmente, amava a avozinha, que n�o sabia o que dar e
          o que fazer pela netinha.
          Certa vez, presenteou-a com um chapeuzinho de
          veludo vermelho e, porque lhe ficava muito bem,
          a menina n�o mais quis usar outro e acabou ficando
          com o apelido de Chapeuzinho Vermelho.
          Um dia, a m�e chamou-a e disse-lhe:</p>
   
      <blockquote>- Vem c�, Chapeuzinho Vermelho;
          aqui tens um pedaço de bolo e uma garrafa de vinho;
          leva tudo para a vov�; ela est� doente e fraca e
          com isso se restabelecer�.
          P�e-te a caminho antes que o sol esquente muito e,
          quando fores, comporta-te direito; n�o saias do caminho,
          sen�o cais e quebras a garrafa e a vov� ficar� sem nada.
          Quando entrares em seu quarto, n�o esqueças de dizer
          "bom-dia, vov�," ao inv�s de mexericar pelos cantos.
      </blockquote>
  </body>
   
  </html>

C�digo 3. Conte�do da p�gina HTML

Assim como aprendemos anteriormente, um arquivo HTML deve ser salvo com a extens�o .html. Chamaremos esse arquivo de index.html, seguindo a convenç�o da linguagem de nomear o arquivo principal de um site dessa forma.

Agora, crie um novo arquivo e insira nele o c�digo CSS do C�digo 4.

  h1 {
      font-family: Arial;
      color: #333;
  }
   
  p {
      font-size: 14px;
  }
   
  blockquote {
      margin: 0;
  }

C�digo 4. Regras CSS para o arquivo index.html

Um arquivo CSS deve ser salvo com a extens�o .css. Chamaremos esse arquivo de stylesheet.css, seguindo a convenç�o de nome dessa linguagem.

Neste arquivo criamos tr�s regras.

A primeira regra, que possui como seletor h1, informa que esse elemento deve possuir fonte Arial e um tom de cinza como cor. Podemos usar tanto nomes de cores quanto n�meros hexadecimais prefixados por cerquilha # como valor para a propriedade color.
A segunda regra, que possui como seletor p, informa que esse elemento deve ter o tamanho da sua fonte modificado para 14px, que quer dizer 14 pixels. A propriedade fonte-size deve receber um valor num�rico em alguma unidade de medida reconhecida pelo CSS. Informar esse valor em pixels � muito comum.
A terceira regra, que possui como seletor blockquote, modifica a margem desse elemento de forma que ele perca o recuo.

link

Agora, devemos vincular o arquivo stylesheet.css a p�gina index.html. Faremos isso utilizando o elemento link.

Abra o arquivo index.html e insira o seguinte conte�do dentro do elemento head, abaixo de title.


<link
rel="stylesheet" href="stylesheet.css">

C�digo 5. Utilizando o elemento link para vincular CSS e HTML

O elemento link no C�digo 5 possui dois atributos, que s�o rel e href. Conforme aprendemos no curso de HTML os atributos de um elemento sem tag de fechamento cont�m informaç�es sobre o seu conte�do.

A informaç�o contida em rel � stylesheet nomeia a relaç�o entre o recurso que est� sendo adicionado no documento atual. Nesse caso informamos que estamos carregando uma folha de estilo para o documento.

O atributo href cont�m a URL para o recurso que estamos adicionando. Essa URL pode ser absoluta, como em https://www.site.com.br/css/stylesheet.css, ou relativa, que � a forma utilizada no C�digo 5.

Para ver o resultado desse c�digo basta abrir o arquivo index.html no navegador. A Animaç�o 2 mostra o momento em que o navegador aplica o CSS ap�s a p�gina ser atualizada.

Animaç�o 2. CSS sendo aplicado a p�gina

Agora, se abrirmos as ferramentas do desenvolvedor veremos que al�m das propriedades padr�o dadas pelo navegador aos elementos da p�gina tamb�m s�o apresentadas as propriedades que modificamos.

Pressione F12 para abrir as ferramentas do desenvolvedor (DevTools)

Abaixo vemos esse resultado na Animaç�o 3.

Animaç�o 3. Visualizaç�o das alteraç�es no DevTools

Observe que ao lado de qualquer propriedade que modificamos h� um link para o arquivo stylesheet.css, indicando a origem dessas alteraç�es. Se clicarmos sobre esse link seremos direcionados para o arquivo, ainda dentro das ferramentas do desenvolvedor.

Conclus�o

Aqui aprendemos como o CSS funciona, a sintaxe de uma regra e como adicionar CSS a um documento HTML. Seguindo a mat�ria CSS voc� poder� aprender mais sobre esses assuntos e sobre as diversas propriedades que cada elemento pode ter.

Confira tamb�m

O que � HTML?

Curso

O que � CSS?

Curso

O que � LESS?

Curso

Introdu��o pr�tica ao CSS

Esse artigo é uma introdução à como o CSS funciona, qual a sintaxe de uma regra e como adicionar uma folha de estilo a um documento HTML.

Guia do artigo:

Como o CSS funciona?

Box Model

Sintaxe de uma regra

Exemplo pr�tico

link

Conclus�o

Confira tamb�m

O que � HTML?

O que � CSS?

O que � LESS?

Artigos relacionados