SdevLab – Tutorial | CSS Básico

Eae Galera!

Este é o primeiro tutorial de uma série que ensina os fundamentos básicos do CSS.

Boa Leitura!

ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!

CSS Básico

Nascido da necessidade de separar os elementos (tags) da apresentação de uma página html nasceu o CSS, que não é uma “linguagem” de programação, e sim um conjunto de regras que são escritas com uma ordem de prioridade (folha de estilos em “cascata”).

Cascata, porque podemos ter em uma mesma folha de estilo, estilos que se sobrepõe de acordo com a lista de prioridades abaixo:

  • estilo inline (dentro de um elemento html)
  • estilo incorporado (definido na seção head do documento)
  • folha de estilo externo (importado ou linkado)
  • folha de estilo nativa do navegador

O estilo definido pelo usuário prevalece sobre os demais. Os estilos inline tem preferêcia sobre os definidos entre as tags head. Os estilos definidos entre as tags head tem preferência sobre os estilos linkados à página, e estes tem preferência sobre os estilos nativos do navegador.

Sintaxe

Para escrever uma regra, utilize a seguinte sintaxe:

seletor {propriedade: valor;}

Onde o seletor é o elemento html à ser estilizado, ou uma classe, ou uma id; propriedade é o atributo que desejamos alterar, e o valor é a característica do atributo à ser assumida. Tudo isso deve vir escrito entre chaves {} e após cada atributo devemos utlizar o ponto-e-virgula (;).
Exemplo:

p{
font-size: 20px;
}
body{
background:#000000;
}

Agrupamento de seletores

Se vamos utilizar uma mesma regra para mais de um elemento, podemos agrupar estes elementos em uma mesma regra, como no exemplo abaixo:

h1,p,h2,h3{
color:#ffffff;
}

Criando uma classe

Se precisarmos ir além e os elementos html não forem suficientes, podemos criar uma classe para resolver o problema. Para criar uma classe siga o exemplo abaixo:

p.meu_paragrafo{
propriedade: valor;
}

Criando uma ID

Uma ID é bastante semelhante à uma classe. Na verdade a única diferença é que uma ID só deve ser utilizada em um elemento html . Para criar uma ID siga a sintaxe abaixo:

#id_teste{
propriedade: valor;
}

Note que para declarar uma ID foi utilizado o caractere “tralha” e depois o nome da ID. Em termos de declaração é a única diferença da declaração de classes.

Comentários

Para inserir um comentário em qualquer ponto do arquivo .css, utilize a sintaxe a seguir:

/* Tudo que estiver entre os caracteres /* e */ serão
considerados comentários */

 

No próximo tutorial veremos como anexar uma folha de estilos à um arquivo css.
Até lá!
xD

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s