As diferenças entre id e class - @Curso em Vídeo HTML5 e CSS3

e vamos continuar nossas estudos sobre o capítulo 15 onde nós falamos sobre seletores personalizados [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula aqui do seu curso de HTML e CSS eu tô cansado de falar isso mas a gente ainda vai falar muitas vezes pode ficar tranquilo e a gente vai continuar dando os estudos vamos continuar basicamente do exercício anterior onde nós tínhamos um exercício de gente que o identificadores de alimentos em HTML e agora nós vamos identificar os elementos vamos classificar os elementos na verdade não

identificar identificar a gente só consegue um elemento vamos computador ali no mesmo exercício que a gente fez na aula passada vamos dar continuidade aos nossos estudos nem comigo e aí tá gostando do curso tá achando legal a ideia desse curso Ele tá dando um trabalhão para gente desenvolver eu vim aqui te pedir um e-mail por favor para divulgar esse curso e eu creio jeito bem legal de também talvez divulgar o seu trabalho isso porque no repositório que eu vou falar várias vezes no curso além do nosso material de apoio todos os exercícios também vai ter

uma pasta chamada ajude na divulgação se você e entra lá baixar essa parte inteira e aí você vai encontrar várias imagens em vários formatos para ajudar na divulgação eu particulamente vou fazer uma versão mas você que é artista Você que sabe desenhar que sabe ilustrar o que manja muito de Photoshop no Estreito pode criar uma arte baseada nos tamanhos né gente vai ter o tamanho deitado o tamanho pé e também quadradinho você pode criar essas Artes e mandar para gente Para esse e-mail aqui ó que é arte@curso em video ponto com não tem ponto br

no final e a idade de selecionadas vão ser divulgadas no meu Instagram pessoal e no Instagram do Conselho vídeo que estão aparecendo aqui embaixo então se você é artista pode ajudar a gente querendo Artes pode produzir o seu conteúdo que a gente ajuda a divulgar e se você não é bom com artes não tem problema é só se essa pasta ajude na divulgação do nosso repositório escolher um ou mais imagens e divulgar nas suas redes sociais grupos e tudo mais valeu mesmo já agradeço antecipadamente pela sua divulgação o que vai tornar Com certeza esse curso

muito grande que vai ajudar muitas pessoas eu estou aqui exatamente no exercício que a gente fez na aula anterior tá tudo aqui eu mudei um pouquinho as cores porque ficou me incomodando eu ficar chutando o corpo que eu já te ensinei o Color nela Cola apontador bi.com que eu fiz foi o seguinte abriu o ano mudei aqui o esquema de cor para sombra escolha um verde aqui ó eu fui pegando essas cores aqui esse som só botei estou no fundo do tem estão no título esse aqui no outro título enfim cheguei a esse essa configuração

aqui tá eu simplesmente peguei códigos de cores diferentes foi a única coisa que eu mudei então basicamente que a gente fez na aula passada foi identificar esse título aqui para dar a ele uma característica diferente uma configuração diferente utilizando a hashtag no caso do Egito só que a gente tem uma grande limitação dentro de um mesmo documento HTML só se pode ter um elemento com a esse mês começa a passar a uma Guanabara o meu professor me ensinou a colocar o mesmo assim todos os elementos cara tá errado sinto muito te informar mas tá errado

dentro a regra do w3c dentro de um mesmo do e eu tenho documento por aqui se eu já coloquei a de principal aqui eu não posso usar o agir principal aqui também ver mas vai funcionar quer ver print esse pau vou transformar esse aprendendo CSS aqui ó vou ter uma rede principal nele também tá vendo funcionou funciona mas está errado a regra do WC essa se eu já usei o aí de principal aqui eu não posso usar o aí de principal rack certo mesmo que funciona acabei de te provar que funciona funcionar não significa que

está certo já te ensinei várias vezes que existe essa telinha aqui ó Center totalmente paciente na frente existe essa essa tag Center mas não é porque ela funciona que eu vou usar ela está errada também Beleza então vai na minha alma Guanabara eu quero que esses títulos o seguinte HTML básico eu quero a mesma formatação CSS básico HTML intermediário o cara mesmo a formatação do CSS intermediário HTML avançado eu a configuração do CSS avançado Como eu faço essa configuração tipo o básica verdinho o amarelo amarelo o intermediário amarelinho e o avançado eu quero vermelho tá

basicamente se você tiver por exemplo que eu vou querer verdinho aqui eu também vou querer verdinho tá que já tá na verdade né você não pode dar o mesmo apoio a pagar você me ali básico eu não posso fazer aí de básico pode usar assento tá nesse caso aqui aí de básico no CSS básico eu boto aí de básico também não pode funcionar dessa maneira quando eu tenho dois elementos eu quero aplicar a mesma configuração neles dois eu não vou usar aí ó vou clicar aqui para segurar o alt vou clicar aqui e eu consigo

apagar os dois apaguei eu vou usar Flex tá uma classe ela também faz a configuração personalizada ela não é identificado com a hashtag é identificado com. Como a gente viu na aula anterior Mas eu posso ter vários elementos com a mesma classe Fechou então aí é o único classe pode ser múltiplo ou Oi e a gente vai seguir meio que padrão de desenvolvimento web você nunca vai colocar assim eu sei que HTML base para ficar verde evita botar assim verde tá não de nome as suas classes é seus ardis de acordo com a forma e

sim a função tá então se ele vai ficar verde não é porque ele está escrito Verde aqui é porque ele é um curso básico tá todo o curso básico ele vai ficar verde enfim isso porque se você toda verde Agora eu tenho cliente faça um não quero verde eu quero azul aí você tem uma classe chamada verde e coloca as coisas a luz Deu para entender então não classifique eu a forma não de nomes das suas classes pela forma e sinta a funcionalidade fechou ajudar muito muito projeto Então eu tenho o básico aqui esse H2

intermediário e esse H2 intermediário aqui ó segurar o alt e clicar agora eu consigo botar senha Class intermediário aqui também eu tenho um H2 avançado e eu tenho outro H2 avançado tá o volume aqui nos dois e botar a classe avançada percebe que eu não coloquei acento nem o básico nem um intermediário nem um avançado mas eu tenho títulos básicos títulos intermediários e títulos avançados agora basicamente que eu vou fazer vou vir aqui no meu CSS e vou criar dentro do meu H2 eu tenho uma configuração para o H2 básico não necessariamente aqui no classe

geralmente a gente não bota o nome do elemento a gente bota só a ponto básico. Intermediário e ponto avançado aqui tá ficando com a linha amarela porque eu não botei nenhuma configuração Tá eu vou fazer o seguinte o verde Vou colocar aqui o básico é verde o intermediário vai ser amarelo e o avançado vai ser vermelho eu vou colocar aqui ó a mesma cor não é o mesmo tom colocar aqui para o chapéu amarelo eu mesmo tom pastel aqui ó eu só puxa a barra de Tom aqui para cima ou para baixo que o vermelho

é o primeiro lá então já fiz verde amarelo vermelho quando você atualiza lá básico intermediário e avançado aqui também básico intermediário e avançado viu como foi simples fazer essa configuração aqui que isso tudo foi muito cara isso tudo foi muito simples e quando você não é um elemento na frente eu não botei por exemplo H2 básico H2 intermediário eu consigo fazer isso aqui ó então tudo que é básico vai ficar verde não sei lá vai ficar verde em botar aqui a gente aprendeu também como é que bota as coisas em tá tudo que é básico

vai ficar verde e em já tá em aqui na verdade muita gente aparece por aqui perguntando sobre os nossos certificados são válidos e até mesmo se esse curso de html CSS e vai ter um certificado a primeira resposta é sim os nossos certificados são 100 porcento válidos em território nacional EA segunda resposta também assim mas não vai ser um certificado só não esse curso vai ter cinco módulos então isso significa que serão cinco certificados Mas é óbvio que a gente só vai conseguir emitir esse certificado a partir do momento em que os módulos estejam completos

cada um vai ter aproximadamente quarenta aulas e a gente sempre encerra o módulo um vídeo fim do módulo Então já fica ligado fica ligada para você poder conseguir os 5000 o curso que tá bem legal mas eu consigo vir aqui ó por exemplo Sei lá eu quero dentro do esse laborum subscript tá eu vou contra o TP vou mandar envelopar com a tag espera até e eu vou colocar esse esse tá não vai fazer nada ele é só um trecho do texto eu vou botar aqui ó Clécio básico se eu boto isso aqui ó laborum

criticar eu lavo no escrito aqui ó laborum escrito em sei lá que uma criança gosta quando eu atualizo isso aqui ficou verde por quê que isso aqui ficou verde porque eu botei da classe em básico então como eu disse tudo que for da classe básico tá nós aqui também um seletor personalizado tudo que for da classe básico eu coloco cor verde e a fonte de leite né o peso da fonte vou tirar essa aqui para ficar igual a todos eles mas simplesmente ficou verde também funciona muito bem outra coisa que a gente pode fazer é

colocar duas classes por exemplo se eu quiser colocar uma o destaque aqui ó é uma classe destaque nessa classe destaque eu vou botar um background-color vou colocar Amarelo só que eu vou pegar um amarelo pouco menos saturado e vou colocar um pouco mais transparente então tudo que tiver digitar aqui ele vai ter essa cor aqui a tia botar na forma até casa de cima tanto faz né da Verdade tudo que for destaque aqui ó aqui não aparecer nada em destaque pois eu quero aprender no CSS destacado eu vim aqui ó aprendendo CSS e bota o

classe destaque ó ele já tá verde e tá com o amarelinho aqui no fundo se eu quiser por exemplo se essa avançada também destaque você vai falar tá mas não pode que eu tenho que botar classe destaque né mas o H2 aqui do CSS avançado e já tá com uma classe que é avançado não eu quero avançado e quero destaque eu consigo não precisa separar por, tá é só botar um espaço é o meu H2 é daquela se avançado e é daquelas está aqui isso é ele vai ficar vermelho como tá aqui ó já tá

vermelho que ele vai ficar em destaque também colocando ele tá vermelho e tá ainda está e eu consigo aplicar mais de uma classe a um elemento mais de uma classe A Guanabara Será que eu posso botar uma ideia em uma classe posso aqui ó ele pega um esse daqui eu posso pegar ele e colocar da classe destaque ó ele não ficou porque ele tem background-color aqui né então ele acabou não sobrepondo mas da também tá você consegue fazer se você tirar aqui eu tirar um background-color aqui ó ele ficou em destaque tá vendo ele ficou

com fundo amarelo mas eu não quero isso tá então eu consigo não mesmo documento um mesmo elemento tem uma classe e tem uma igreja só que eu AIDS sobrepõe a gente acabou de ver que o AIDS sobrepõe as configurações de classe certo então eu consigo botar aí de classe no mesmo elemento eu consigo botar só de botar só cresce botar nada que aí fica com Furação padrão e também eu posso colocar mais de uma classe é só separar ela por esse passo é E aí como você viu existe uma hierarquia né você primeiro configura o

genérico tá aqui ó até a configuração de pagar um extra e com DH um serve para todos os H1 isso daqui olhar um principal Esse é um principal a gente vai dizer que ele é um H1 Suelen vai herdar essa cor da letra mas ele vai sobrepor e vai adicionar essas configurações no caso Collor como eu tenho color aqui e colo aqui o agir sobrepõe a gente se sobrepõe as configurações desse color aqui dois tem uma regra de hierarquia Tem coisas que são ligadas antes que coisas que são ligadas depois é tipo cola o que

vai ficar valendo é o último a ser ligado Terra então o clash é ligado antes o wi-fi ligado depois então que sobrepõe são as configurações do agir mas ele sempre vai herdar o que veio da camada cima ele sempre vai trazer tudo que vem do H1 para o H1 principal e vai trazer tudo do H1 para também para a classe certo só que a classe ele vem antes do aí eu espero que tenha ficado Claro aí para você então existe uma herança Dá uma lida no material em PDF que eu explico isso também em mais

detalhe Fechou então você já aprendeu o que em HTML Wide viram no a hashtag em HTML O que é classe vira. E aqui ó no aidinha Só pode um elemento e aqui pode vários elementos com o mesmo Classe A o Clécio eu posso ter vários com agir somente um elemento ou documento HTML né Por página de uma outra parte eu posso ter o mesmo e disse entre o meu nenhum Até porque eu vou utilizar esses essa externo para facilitar minha vida Fechou então eu posso ter aí de um mesmo assim dois documentos diferentes mas eu

não posso ter dois aí dentro do mesmo HTML dentro de diferentes pode de bom então é isso meu querido é esse minha querida finalizamos aqui o básico de e-class e nos próximos vídeos a gente vai falar sobre pseudo-classes e também para o seu de elementos que são uma característica muito importante na escolha existindo um grande abraço e a gente se vê na próxima E aí [Aplausos] [Música] E aí E aí [Aplausos] [Música]