Aulas

• Os seletores CSS apontam qual elemento HTML deverá receber o estilo. É como se fosse o endereço a ser encontrado pelo navegador.

body {
  background: #3B2F2F;
  color:white;
  font-family:tahoma;
}

h2 {
  color:orange;
}

}
  background: #3B2F2F;
  color:white;
  font-family:tahoma;
}{
  color:orange;
}

• Outro seletor CSS é o seletor por Classe

...      
  <header>
    <img src='bicicletaria.jpeg'>
    <h1 class='' >Bicicletaria Pedal Forte</h1>
    <p><i>Mais de 20 anos pedalando com você!</i></p>
    <hr>
  </header>
  <main>
    <h2 class='' >Serviços</h2>
    <p>Oferecemos manutenção completa para sua bicicleta:</p>
    <ul>
      <li>Troca de peças</li>
      <li>Ajuste de marchas</li>
      <li>Revisão geral</li>
    </ul>
    <hr>
    <h2 class=''>Produtos</h2>
    <p>Temos uma linha variada de bicicletas e acessórios:</p>
    <p>
      <b>Bicicletas:</b> Mountain Bike, Speed, Urbanas<br>
      <b>Acessórios:</b> Capacetes, Luvas, Luzes
    </p>
    <hr>
  </main>
  <footer>
    <h2 class=''>Contato</h2>
    <p>Endereço: Rua das Flores, 100 – São Paulo - SP<br>       
    Email: contato@pedalforte.com.br
    </p>
    <hr>	
    <p>2025 Bicicletaria Pedal Forte - Todos os direitos reservados.</p>
  </footer>
...

body {
  background: #3B2F2F;
  color:white;
  font-family:tahoma;
}

h1 {
  color:orange;
}

h2 {
  color:orange;
}

• Repetição Desnecessária: temos duas regras que fazem exatamente a mesma coisa.
• Dificuldade de Reutilização: se quisermos que outras tags, por exemplo: <p> também tenha a cor laranja, temos que escrever a mesma regra novamente.
• Dificuldade de Manutenção:  mesmas regras escritas várias vezes dificulta a manutenção do código, sempre que possível precisamos reduzir nosso código de maneira inteligente.

body {
  background: #3B2F2F;
  color:white;
  font-family:tahoma;
}

h1,h2 {
  color:orange;
}

Isso já resolveria o nosso problema: temos menos código e a regra aparece apenas uma vez para vários elementos HTML.

<h1 class='titulo' >Bicicletaria Pedal Forte</h1>

<h2 class='titulo' >Serviços</h2>

<h2 class='titulo'>Produtos</h2>

<h2 class='titulo'>Contato</h2>

Agora temos que adicionar no arquivo estilo.css a classe que acabamos de criar e agora que agrupamos os estilos das tags de estilo dentro de uma classe podemos retirar o seletor de tag que estamos utilizando:

body {
  background: #3B2F2F;
  color:white;
  font-family:tahoma;
}

titulo {
  color:orange;
}

Nosso código dessa maneira não irá funcionar! Desse jeito o navegador vai procurar uma tag chamada titulo e não vai encontrar. Precisamos que ele procure uma classe e não uma tag.

Para resolver isso temos que colocar um ponto "." na frente do nome da classe. Veja como deve ficar:

body {
  background: #3B2F2F;
  color:white;
  font-family:tahoma;
}

.titulo {
  color:orange;
}

Esse ponto na frente do nome da classe é o que identifica que ela é uma classe e não uma tag.

Alguma dúvida ou questão que gostaria de esclarecer sobre os seletores CSS que vimos até esse momento?  Teste o seu código utilizando os dois tipos de seletores ( de tag e de classe ) e observe o resultado: 

• Adiciona o estilo desejado em apenas um elemento HTML, aquele que possui o id (identificador) definido.
• No lugar do atributo class=' ' é usado o atributo id=' '.
• No lugar do "." na frente do nome usamos o símbolo "#".

...
  <header>
    <img src='bicicletaria.jpeg'>
    <h1 class='titulo'>Bicicletaria Pedal Forte</h1>
    <p id='destaque'><i>Mais de 20 anos pedalando com você!</i></p>
    <hr>
  </header>
...

E no CSS :

body {
  background: #3B2F2F;
  color:white;
  font-family:tahoma;
}

.titulo {
  color:orange;
}

#destaque {
  color:yellow;
}

Importante: ID foi criado para ser único e representar apenas um elemento HTML na sua páginas. Mesmo que você defina outros parágrafos com o mesmo id e observe que o estilo desse parágrafos foram também alterados, isso não significa que seja uma boa prática de programação.

Isso pode acarretar problemas no futuro, principalmente quando estiver utilizando linguagens de programação como Javascript, PHP e outras.

Acrescente seletores CSS por id em seu código e descreva abaixo como está o seu aprendizado:

body {
  background: #3B2F2F;
  color:white;
  font-family:tahoma;
}

.Titulo {
  color:orange;
}

#DESTAQUE {
  color:yellow;
}

E o HTML estiver :

...
  <header>
    <img src='bicicletaria.jpeg'>
    <h1 class='titulo'>Bicicletaria Pedal Forte</h1>
    <p id='destaque'><i>Mais de 20 anos pedalando com você!</i></p>
    <hr>
  </header>
...

Nosso CSS deixa de funcionar! O navegador irá procurar a classe Titulo e o id DESTAQUE e não vai encontrar, porque os nomes dos atributos class e id são é 'case-sensitive', ou seja, maiúsculas e minúsculas importam.

O CSS pode ser escrito da forma como está abaixo que irá funcionar, mas uma boa prática é utilizar o nome das tags, das classes, dos ids e o conteúdo dentro deles sempre com letras minúsculas:

BODY {
  BACKGROUND: #3B2F2F;
  COLOR:WHITE;
  FONT-FAMILY:TAHOMA;
}

.titulo {
  COLOR:ORANGE;
}

#destaque {
  COLOR:YELLOW;
}

Evite o uso de acentuação

Veja que utilizamos o nome titulo e não título para a nossa classe. Não existe nenhum problema em utilizar acentos nos nomes das classes, mas uma prática recomendada é evitá-lo. 

Como nomear um Seletor CSS?

• Devem refletir a função ou papel do elemento: por exemplo: mensagem, alerta, conteudo, bloco.

• Utilizar um padrão de linguagem: pode ser português, inglês, ou qualquer outra, porém evite misturá-las. Defina uma e utilize em todo o seu projeto.

• Deixe o nome mais fácil de ser entendido: pode ser usado mais de um nome utilizando um padrão para separa-los, quase sempre a barra '-' é o mais recomendado, por exemplo: mensagem-alerta, mensagem-erro, mensagem-sucesso.

• mensagem-alerta: prefira alert-message. 
• mensagem-erro: prefira error-message.
• mensagem-sucesso: prefira success-message.

• Por Tipo ou Tag,
• Por Classe e
• Por ID

body {

}

.titulo {

}

#destaque {^

}

<img src='img/bicicletaria.jpeg'>

Vamos adicionar dois atributos para deixar essa tag mais completa:

• alt : um texto alternativo que é exibido quando a imagem não é carregada.
• title : um texto explicativo quando o usuário posiciona o cursor do mouse sobre a imagem.

<img src='img/bicicletaria.jpeg' 
alt='Uma bicicleta posiciona a frente de um quadro de uma montanha' 
title='Bicicletaria Pedal Forte'>

• Se a tela for grande a imagem fica pequena :

<img src='img/bicicletaria.jpeg' 
alt='Uma bicicleta posiciona a frente de um quadro de uma montanha'
title='Bicicletaria Pedal Forte'
width='100%'>

Podemos também utilizar o atributo height='' para definir a altura da imagem, porém no nosso caso já temos uma imagem que possui a altura que desejamos, além disso ao definir os dois atributos na mesma imagem podem ocorrer distorções no momento da exibição.

Adicione esses atributos na sua imagem e comente abaixo o resultado obtido:

body {
  background: #3b2f2f;
  color:white;
  font-family:tahoma;
  margin:0px;
}

Isso irá resolver o nosso problema, veja como ficou agora nossa página:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bicicletaria Pedal Forte</title>
    <link rel='stylesheet' href='css/estilo.css'>
  </head>
  <body>
  ..
  </body>
</html>

Os atributos utilizados são name (nome) e content (conteúdo) onde declaramos o nome viewport e o conteúdo com dois valores:

• width= device-width : ajusta a largura para ser igual a largura da tela do dispositivo.
• initial-scale = 1.0 : define o nível inicial de zoom (1.0 = sem zoom).

• Está conseguindo acompanhar os exemplos? 
• Sua página está abordando todos os assuntos que estudamos até o momento?