Curso CSS Completo: Aula 04 - Seletores e Classes

E aí é muito bem pessoal agora nós vamos aprender a como usar os seletores em CSS O que é um seletor seletor é uma maneira de você dizer para o CSS Qual é o elemento HTML que você quer trabalhar ou seja com CSS pode fazer para ele encontrar ou selecionar o elemento HTML que você deseja estilizar então para gente exemplifi Car isso o que que eu vou fazer vou apagar esse aqui que a gente fez tá vou deixar o apagar Sim vou lá no meu CSS também vou limpar salvei e ficou zeradinho aqui certo a

gente já tá com o nosso estilo pontos e ss referenciado nosso arquivo e aqui a gente vai fazer assim ó h1de meu primeiro site com CSS Oi e a gente vai colocar aqui p vezes três três parágrafos com uma ordem aqui só pra gente ter um conteúdo certo é o primeiro site com CSS com três Lauren aqui para a gente trabalhar ok Um Certo conteúdo Dinho aqui a gente pode colocar também um botãozinho para a gente ir para a próxima página Então é bom gente fazer esses exercícios Zinho só para a gente poder trabalhar um

pouco com HTML aqui também né Já porque a gente já viu no outro módulo Então vou colocar ir para outra página fizemos um pouco de conteúdo HTML agora vamos dizer assim ó o que eu quero estilizar o meu título um certo Então como que eu posso fazer para estilizar um componente específico primeiro seletor que a gente tem esse ss é o seletor mais simples que é usando com base em consegue a gente quer trabalhar então por exemplo poderia vir aqui no meu seletor e colocar por exemplo a tag Body quer dizer ah o corpo da

nossa página Então selecionando essa tag aqui específica Então selecionando essa tag eu posso dizer que o fundo eu vou querer que seja vou colocar um cinzinha Claro aqui ó deixei um cinza inclusive com aquele nosso a plugin que a gente colocou né Aquela nossa extensão que do vs code olha só que legal quando você se fica com o mouse em cima aqui do quadradinho da cor Lembra que eu falei que ele é facilitar porque você tem aqui Um um color picker né para você selecionar uma cor então por exemplo se eu achei que ficou muito

escuro eu posso subir aqui mais para cima deixar um pouquinho mais clarinho então contra o Oeste e já ficou um pouco o meu fundo Então é só primeiro tipo de seletor que eu tenho que é colocando Qual é a tag específica poderia colocar também a tag p e é de parágrafo e dizer que na tag P eu quero que seja a cor vai ser vermelho tá color red então todos os meus parágrafos ficar em vermelho Esse é o primeiro seletor Inclusive a gente viu um pouquinho da aula passada e se a primeira é maneira de

você trabalhar aí existem outros seletores que são muito úteis e que a gente utiliza muito com CSS O primeiro é o conceito de classe e uma classe é um atributo que você vai são uma série de atributos que você vai especificar por um título que você vai dar então por exemplo assim eu poderia colocar aqui uma classe Class Class na minha tag P chamado Center que é para centralizar coloquei uma classe chamada Center lá no meu CSS eu para falar que eu quero fazer e eu coloco sempre um ponto e o nome da classe Então

vou chamar ela de Center e essa classe Center vai ter um atributo que se chama text-align quer dizer alinhamento do texto ao centro Center certo o que que acontece olha só que legal eu criei essa classe dizendo que vai ser alinhado ao centro toda a tag que eu colocar essa classe chamada Center vai ficar alinhado ao centro então eu posso ter essa classe como sendo uma dizer assim algo Universal dentro do meu código então poderia por exemplo colocar aqui dentro do título um Se eu colocar essa classe Center ele vai centralizar o meu texto eu

colocar nesse outro aqui ó Aquela se Center ele vai centralizar aquele Então eu posso trabalhar com vamos dizer assim propriedade CSS pré-definidas como se fosse comportamentos que eu já quero deixar pronto para que quando eu colocar aquela classe ele já é daquela maneira eu poderia criar por exemplo em vez de aqui uma cor chamada dizer que todos os parágrafos vão ser em vermelho e poderia criar uma uma classe chamada vermelho por exemplo e dentro dessa classe chamada vermelho eu diria que a cor é Red vermelho certo tudo ficou preto agora que que eu poderia fazer

somente nas tags que eu quero que seja vermelho eu poderia acrescentar aqui por exemplo ele já tá Centralizado essa de um espaço e vou dizer também que eu quero que seja vermelho olha só que que vai acontecer quando eu dou control S ficou vermelho porque eu determinei aqui um estilo uma classe certo para que ficasse vermelho show de bola né pessoal então onde eu colocasse essa classe por exemplo se eu colocasse nesse último parágrafo aqui também que não vai ser Centralizado Mas vai ser vermelho o olá que legal ficou vermelho certo então eu posso definir

aqui estilos através de classe e isso daí vai especificando no meu código aqui os comportamentos Então vamos supor outras eu vou dizer que eu quero que eu vou chamar uma classe de fonte 30 ponte 30 por exemplo eu posso dar um nome que eu quiser para classe tá essa classe eu vou dizer que o Font size o tamanho da fonte vai ser 30 pixels Tá certo então onde eu colocar isso daqui por exemplo nesse último aqui que tá vermelho Se eu colocar aqui ó fonte traço 30 Olha que que vai acontecer já ficou com o

tamanho da fonte daquele tamanho então eu especifiquei padrões que eu posso usar dentro do meu conteúdo aqui dentro da minha página HTML legal Isso facilita muito o nosso trabalho quando você vai criando aí padrões para você estar utilizando conforme a sua necessidade Então essa é outra maneira de você selecionar criando classes né quando você queria classes onde você aplicar essa classe e vai ter aquelas propriedades ali mas vamos dizer que eu quero que um item específico tenha um certo comportamento só aquele item específico a gente tem um outro seletor chamado aidee aidee É como se

você batizar se aquela tag com o nome único por exemplo eu vou chamar esse essa esse é dia aqui de teste por exemplo Eu batizei essa tag Pack o teste lá no meu CSS se eu quero que somente somente essa tag pq tem uma ide chamado teste tem uma propriedade eu posso fazer assim ó joguinho da velha né o hash hashtag como pessoal agora chamar e eu chamo aqui de teste e aqui eu vou passar as propriedades eu vou dizer que a cor vai ser azul e que o fundo vai ser amarelo tá background Yellow

a beleza sempre lembrando que quando a gente coloca mais de uma propriedade CSS a gente sempre foi um ponto e, Olha o que que vai acontecer ele ficou com fundo amarelo e a cor azul porque eu determinei que essa tag específica essa tag aqui vai receber esses valores então eu selecionei esse parágrafo específico através do identificador único uma dica que eu dou para ele porque se eu colocar as por exemplo seletor P todos os parágrafos de ficar daquela maneira certa agora quando eu específico Qual é o elemento que eu quero usando o identificador só ele

vai ter aquele comportamento já as classes não são comportamentos padrões que você pode usar ao longo de todo o seu código então esses são os três principais seletores que a gente utiliza né pessoal que é pelo nome da tag que vai aplicar aquilo para todas as tags através da classe Então você coloca aqui o nome da classe vai especificando você pode colocar várias cla é acumulativa não tem limite aqui para Quantas classes você vai querer fazer e também através do identificador você coloca uma ide E aí a o que tiver Aquele é dia aqui no

nosso CSS e vai receber aquela propriedade alguns detalhes importantes primeiro e quando a gente for colocar a identificação por exemplo um Eyed nunca pode começar com o número tá pessoal assim por exemplo um teste nunca pode começar o identificador com o número sempre com uma letra você teria que fazer teste um mas nunca um teste certo esse é um detalhe quando a gente usa identificadores outra coisa identificadores são sempre únicos então ciência esse parágrafo que se chama teste esse Não pode se chamar teste senão vai dar errado ali tem que entender que é um só

cada identificador é sempre único certo se você precisa usar algum tipo de propriedade que vai ser em comum em vários você vai usar classe o ponto como a gente fez aqui né classe de vermelho e onde a gente tem que fique vermelho a gente usa essa classe também o nome das classes também não pode conversar com números por exemplo um Center por exemplo não podemos começar com números teria que ser Center um a gente quisesse fazer essa classe com o número também outro detalhe A gente nunca dá o nome de classe iniciando com numerais Esses

são os tipos de seletores que a gente tem as vezes a gente quer um seletor Universal vamos dizer assim que selecione todos os elementos da página Quero que todas as tags da minha página tem aquele determinado comportamento como que a gente faz a gente usa o coringa que é assim ó o asterisco é eu abro propriedades que isso quer dizer que todas as tags vão receber essa propriedade por exemplo se eu colocar aqui que o pede vai ser de 20 pixels olha só que que vai acontecer todas elas eram separados dá margem a de um

pede de 20 pixels porque eu determinei que todos os elementos da minha página e um ter esse comportamento certo também às vezes pessoal quando a gente quer trabalhar com os eleitores deixa eu apagar esse tudo isso aqui que a gente fez a facilitar as vezes a gente tem vários itens que vão ter propriedades Iguais por exemplo assim eu quero que o meu H1 seja cor vermelha e que o texto seja alinhado ao centro text-align-center certo Tom é vermelho com o texto no centro beleza aí eu quero que os meus parágrafos a minha tag P também

seja assim aí eu coloco uma color.red e text-align-center certo beleza percebeu que os dois eles estão com as mesmas propriedades então a gente pode agrupar esses eleitores não só pra gente Minimizar código Então em vez a gente fazer assim dessa forma a gente poderia fazer assim a gente apaga esse aqui da tag P vem aqui no H1 coloca, P E aí pronto eu salvo eu tô dizendo que tanto a tag H1 como até DP vai ter essas propriedades a bom então fiz um agrupamento de seletores todos que tiverem Um item comum eu posso colocar a,

e então determinar como ele deve se comportar legal então é basicamente assim que a gente usa seletores né a gente pode usar uma classe que a Universal a gente pode usar um Eyed Ou a gente pode colocar Qual que é o nome da tag para aplicar a Todas aquelas tags específicas certo Pessoal espero que vocês tenham gostado dessa aula na próxima aula nós vamos começar a conhecer as propriedades por permite ditas essas propriedades que a gente coloca aqui dentro do nosso CSS para a gente entender para que cada uma delas serve existem tipos de seletores

pessoal antes da gente passa para próxima ao só para explicar para vocês existem tipos de seletores muito mais complexos tá pessoal do que só esses que eu mostrei aqui para vocês existem várias opções de seletores O que acontece se vem uma tag depois de outra tag se uma estiver contida dentro de outra É mas à medida que a gente for fazendo aqui no curso coisas que vão envolver se eleitores mais complexos aí eu vou explicando para vocês porque não são é tão usuais gente não usa isso tanto no dia a dia esses que eu mostrei

para vocês né que é com classe que é. Classe que não o nome da classe que você quer dar e também Wide assim ó ou o nome da tag né Por exemplo P Esses são os que a gente mais utiliza tá pessoal Esses são os seletores principais com esses aqui seja consegue fazer tudo mas existem os mais complexos que daí a medida do que for aparecendo a gente vai mostrando para vocês beleza forte abraço e até a próxima aula Valeu Espero que você tenha gostado dessa aula que tenha te ajudado se você quiser continuar assistindo

o curso pode continuar clicando num desses cargos que estão aparecendo aqui deixa o seu gostei se inscreve no canal para não perder nenhum conteúdo sobre programação web e a gente se vê no próximo vídeo valeu