Agora que você que já entende para que serve o CSS, aqui você terá o seu primeiro contato com a seleção de TAGS.(Que significa selecionar o que queremos personalizar).

 

Caso você ainda não se sinta preparado ou não conheça o que é CSS, Clique aqui e entenda o que é CSS.

 

Continuando,

Abaixo possuímos um exemplo.

 

 

Seletor:  É onde escolhemos o elemento que vamos controlar, informando a TAG HTML. Neste exemplo selecionamos a TAG <p> (Que indica um parágrafo).

 

Caso você não conheça ou queira aprender mais sobre TAGS HTML, clique aqui e acesse nosso material sobre HTML.

 

Propriedade:  Aqui escolhemos qual personalização aplicar. Nesse caso nossa propriedade é a “color”, que dirá qual cor será utilizada.

Argumento da propriedade: Nesse caso a propriedade é “color”, por isso devemos especificar uma cor, de forma escrita, em formato hexadecimal(exemplo #f2f2f2) ou em formato RGB ( rgb(255, 0, 0) ). Aqui vamos utilizar a forma escrita, portanto será “red”.

Neste caso possuímos um parágrafo (Representado no HTML com a tag <p>) com a frase “Primeiro teste com CSS”, ficaria da forma abaixo.

 

 

E será apresentada na tela do usuário da forma abaixo:
Primeiro teste com CSS.

Notas importantes:

  1. O bloco de comando(s) sempre deverá ser envolvido por chaves “{ }”;
  2. Para cada declaração, o uso de dois pontos “:” é o que deve separar a propriedade do seu argumento;
  3. Você poderá colocar mais de uma linha de comando, desde que separados por ponto e virgula “;

Ainda é possível selecionar vários seletores, basta separá-los por vírgulas e todas as tags seletoras receberão as propriedades dos comandos.

 

Mas não se limite a este tipo de seleção de tags, existem diversas maneiras de selecionar elementos HTML no CSS, para um conhecimento mais aprofundado recomendamos você a leitura desta página, clique aqui.

Onde Inserir Códigos CSS?

Há duas formas de inserirmos nosso código CSS na página.

  1. Criando um arquivo externo  e carregando este no <head> da sua página.
  2. Utilizando dentro da própria página HTML.

Exemplo 1 – Arquivo externo

 

Exemplo 2- Códigos CSS dentro da própria página

Nesse modelo, os comando serão declarados uma vez na página, e usados na página inteira. Para esse caso, não precisamos criar nenhum arquivo.  Basta inserir o css dentro da tag <style>, conforme exemplo abaixo.

 

 

 

Visto que a total personalização de nossas páginas geram muitos códigos CSS, fica bastante claro que inserir os códigos CSS dentro de todas as suas páginas é mais trabalhoso do que apenas carregar o arquivo com os códigos CSS como no exemplo 1.

 

Você não conhece o conceito da tag <head>? Clique aqui agora e aprenda a estrutura básica de documentos HTML.

 

Posts Relacionados

  CSS