Estilos CSS internos - @Curso em Vídeo HTML5 e CSS3

e vamos dar continuidade aos nossos estudos do capítulo 12 falando sobre estilos e vamos aprender uma técnica nova [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem vindo a mais um vídeo aqui do seu curso de html com CSS e a gente vai continuar aqui no capítulo 12 a gente viu no vídeo anterior o princípio dos estilos como aplicar estilos dentro de um HTML só que eu te mostrei no uma técnica que eu já tinha de quem que não é tão boa assim já vou te mostrar uma outra técnica nesse

vídeo que é uma técnica de CSS interno ou chamada também de CSS local onde nós vamos aplicar um estilo de forma separada você vai ver nitidamente o que que é estilo e o que quer conteúdo Isso vai ser um ótimo passo pra gente e se você não fez aula anterior e não botou o exercício para rodar você volte lá e faça porque nós vamos utilizar como base aquele exercício para poder fazer esse daqui vem comigo nessa aula aqui o recado que eu vou te passar é da Ruth let mais uma vez e não dos recados

anteriores eu falei que a Rosinete pode criar o seu próprio site para você seja ele um site e uma loja uma plataforma de educação a distância é do vídeo apareceu uma coisa do tipo ah mas eu já tenho um site mas eu queria levar para Rosinete porque ela especializada em WordPress ou porque em um outro recado eu falei e quem é assinante de certos planos ganha cursos venha também ferramentas depoimento de muita gente entra em contato falando Poxa mas eu já tenho hospedagem um outro lugar e queria migrar para Rosinete Isso é muito difícil pois

o recado que eles vieram daqui para você não não é nada difícil você consegue fazer sozinha com alguns tutoriais que a gente tem mas se você não se sente apto ou apta a realizar esse processo você pode contar com atendimento da hostnet também E a equipe de suporte deles vai realizar essa migração toda adaptação de um outro local para o local da hostnet E aí você passa a ter acesso a todos esses recursos para você na sua hospedagem Então se por acaso você está hospedado em um outro local e que a migrar para rosto net

até nisso os caras te ajuda vamos voltar a nossa aula normal né E então é só eu nem fechei nada tá gravação anterior eu tô com exercício 13 aberto é com esses arquivos e esse resultado a gente fez né a gente viu Senão a passada tá muito confuso tem muito HTML essa parte HTML essa parte SS depois vem HTML de novo tá muito confuso separar visualmente o que que é estilo do que que é a conteúdo e também já falei né já tipo aqui no vídeo anterior que Isso dificulta a manutenção se tô que nem

fala assim não eu quero que todo H2 eu quero que todos esses subcapítulos aqui não sejam vermelho feijão verde você vai ter que alterar a cada um desses aqui e aqui no meu caso são só três mas não site completo é muito mais eu já vou te mostrar uma técnica que vai melhorar isso primeira coisa a gente vai fazer é fechar tudo vamos fazer o seguinte já tô aqui com a pasta de exercícios abertas nós vamos criar uma cópia do exercício 13 então clique uma vez vou dar control c control V ele vai ter uma

cópia certo eu vou renomear botão direito renomear e vamos renomear para E como eu tô fazendo aqui é basicamente pegar o mesmo exercício 13 e chamar ele de exercício 14 Então vamos botão direito mandar abrir com Cold ele vai abrir exatamente mesmo quando eu uso né tá vendo aqui ó o ainda é que está exatamente igual aqui nós vamos falar sobre estilos locais ou internos locais ou internos basicamente que eu vou fazer deixa eu abrir aqui o exercício 14 para você ver que ficou igualzinho exercício 13 tá e a primeira coisa que eu vou fazer

é tirar todos os estilos contra todos para tirar esse cara daqui vou tirar o estilo do H1 pode tirar o estilo jogador já não trabalhei mas eu vou tô fazendo aqui contigo então com certeza você vai conseguir fazer na sua casa aí também Cuidado para você não apagar errado tá tem que apagar aqui deixar a tag e bonitinha como tava antes não deixa com espaço aqui senão vai dar problema tá então vamos lá vamos tirar aqui mas esse H2 tirar mais esse estilo aqui que não todos os estilos eu vou deixar o HTML puro aqui

exatamente como tava no São Paulo anterior pronto tirei aqui pa não sobrou nada de estilo se eu tirar aqui ó só atualizar né já perdemos um estilo todo agora que nós vamos fazer é aplicar o estilo de uma outra maneira né que é são os estilos locais como você viu também aí no nosso material é basicamente que você vai fazer aqui na área de cabeça dentro da área de cabeça aqui na cabeça embaixo do Thai ou pode ser em cima do time Enfim vou colocar aqui embaixo do Tarot eu vou criar uma tag chamada Style

dentro dessa tag Style tudo que eu escrever aqui vai ser considerado CSS vai ser considerado a configuração de estilo e você viu durante o capítulo 3 se eu não me engano aqui no material como que a gente aplica esse estilo esse estilo ele vai ser baseado em seletores então por exemplo eu quero configurar o Bari Então tem que dar um seletor probare a tag Bari ela escreve assim né entre colchetes entre em constante e angulares aqui eu vou fazer assim ó bari e bota de Chaves quando eu abro e fecha a chave eu vou fazer

de novo vou escrever by vou abrir chave ele já fechou e eu vou dar enter tava no consultório tá aqui no meio já tô dar enter ele já abriu um espaço aqui tudo que eu colocar aqui dentro vai ser aplicado o baile então a gente fez lá sei lá um background-color que eu botei lá com azul clarinho botar aqui lá existiu ó ele já aplicou aqui a cor não foi a mesma mas enfim tá lá então eu fiz aqui o corpo ele vai fazer o lá estímulo a gente mudou também a fonte né Font Family

Font Family Family E aí eu botei o areal mas quando sem serifa não é para ele ficar assim o tamanho da fonte font-size ficar 25 seus atualizei e já tá lá é outra coisa que a gente fez foi o seguinte aí é que vem a grande vantagem o meu H1 ele tava azul escuro lembra então vamos fazer aqui ó vamos fazer um seletor pegar um h11 h13 o seletor então fazendo assim ó color vai ser Dark Blue era meio de um bloco só não me engano acho tudo bem A grande vantagem o seguinte antes eu

tive que botar a cor vídeo blu blu nesse H1 e também esse outra num certo Tive que colocar aqui as configurações nos dois aqui eu só fiz uma vez olha só todos os meus H1 aqui e aqui ficaram azuis outra coisa botar aqui ó meu H2 color Dark Red; não esquece do ponto e, depois de cada declaração tá essa linha toda a gente chama de declaração que o conjunto de propriedade e valor a gente já viu isso antes atualizei ó todos os meus H2 ficaram vermelhos a gente fez também um background-color aqui não é um

lembra disso background-color é botei Light sei lá tem alguma cor azul aqui bem clarinha voltar aqui Light Blue tá lá tá vendo Então assim depois a gente vai trabalhar com cores tá o próximo Capítulo a gente vai falar mais sobre cores e vai perceber que aquela porcaria Mas enfim isso aqui que eu tô dizendo isso aqui que eu tô criando né então basicamente quando você faz a configuração de H1 e H2 aqui e ele aplica para todos os H1 para esse para esse e para todos os H2 olha aqui em vantagem o parágrafo lembra que

eu falei a você para selecionar o parágrafo aqui ó ele tá todo bagunçadinho né Se eu fizer isso aqui ó para se fazer isso me deixa eu botar aqui no final P querer um escritor para botar aqui text-align justify já foi já tá todos os parágrafos estão alinhados E aí olha só olha a visualmente como seu código ficou mais organizado Olha isso aqui ó essa parte é o seu conteúdo principal do teu site Olha que legal esse aqui é o seu conteúdo e esse aqui ó é o seu estilo Olha que organização Olha que simplicidade

Olha que praticidade eu fazer um H1 uma vez só ele fazer para todos os h11 H2 ele fazer para todos Ah mas Guanabara meu cliente pediu para que só esse título aqui ficasse verde dá para fazer dá para fazer eu vou te ensinar mais para frente para a gente falar sobre classe e sobre a rede que não esquece mas entendo e essa técnica aqui das CSS locais ela é muito mais vantajosa do que a anterior a gente ela tem uma terceira que é mais vantajosa do que essa mas essa daqui a gente vai usar bastante

no seu dia a dia quando você tiver uma uma página simples e quiser fazer configurações locais que não vão ser aplicados aos autos documentos você pode utilizar você deve utilizar essa forma daqui e jamais de forma alguma Eu repito que maneira nenhuma você vai utilizar a fonte color bar igreja color porque isso já é antigo isso não existe mais isso é coisa da época da html4 tá HTML5 acabou com esses parâmetros com esses valores e com essas tags Beleza o próprio visual Studio code já te dá a dica e tênis olha não use ficou vermelho

não use perto então tá aí ó a gente conseguiu fazer com que isso daqui ficasse separado disso daqui visualmente Com certeza Existem várias maneiras de você apoiar o canal do com é mais uma das mais importantes é entrando no site do curso em vídeo pensa que tá aparecendo aqui do lado e clicando na parte de cima do link seja um apoiador você ajuda muito projeto a se manter gratuito e como recompensa a gente oferece alguns vídeos exclusivos alguns vídeos de backstage alguns cursos exclusivos como um curso básico de programação usando Portugal estúdio algumas aulas adiantadas

do curso de html que você tá vendo aqui e de quebra muito em breve também vamos oferecer certificados para quem é apoiador então não perca tempo se você pode ajudar a gente acesso a conseguido pontocom e clica no link que está na parte superior do site Seja um apoiador essa técnica ela tem uma ligeira desvantagem duas grandes desvantagens a primeira desvantagem é bem simples ela incomoda porque geralmente você vai perceber que essa que tá feio geralmente o estilo ele ocupa muito mais linhas do que o conteúdo Então vai acabar com você vai abrir um arquivo

vai ter um estilo gigante para você chegar no conteúdo você tem que ir lá para é a primeira desvantagem que eu coloco bem simples bem basicona a outra desvantagem é maior ela é mais incômoda que a seguinte se por acaso você tiver essa aqui é uma página é do do nosso site se eu tiver 30 páginas e eu quisesse mesmo estilo eu vou ter que copiar isso daqui e colar nas 20 nas 30 páginas que eu já não lembro o que eu falei uns pouco à frente vai se 30 páginas e quisesse aplicar esse mesmo

estilo aqui você teria que copiar isso daqui para os 20 30 lá agora agora é só controle grande problema é aquilo que eu falei no vídeo anterior chegou no marca de Natal o cara falou agora eu não quero mais que meu site fique azul eu quero que o meu site fique vermelho por conta do Natal aí você vai ter que entrar em todos os 20 30 documentos e modificar uma cor eu tô dando um exemplo simples quer mudar um a cor agora se fosse por exemplo coisas de design muito mais profundas você teria que mudar

em todos os 20 e 30 arquivos porque é o seu Cliente mudou de ideia e isso faz parte do dia a dia é assim que funciona então essa técnica é é essa aqui que a gente aprendeu tá quando a gente vai fazer a configuração de um documento apenas certo sem participar dois ou mais documentos aí a gente tem que aprender a terceira técnica mas como a gente vai trabalhar bastante nesse exercícios simples ou uma página única esse estilo local ele vai nos atender baixo beleza deu para entender a diferença entre os códigos locais inline utilizando

CSS eu espero sinceramente que sim Espero sinceramente que você esteja praticando e no próximo vídeo eu vou te mostrar a terceira técnica que são as folhas de estilo colocadas externamente ao seu arquivo HTML Fechou então Vai praticando Vai querendo seus exercícios aí não esquece pega o seu caderno vai anotando tudo o que é só lutando que você vai preservar esse conhecimento por muito mais tempo e quando bater aquela dúvida lá na frente é só você botar no seu caderno ó uma consulta rápida resolve seu problema um grande abraço e a gente se vê no próximo

vídeo [Música] [Aplausos] [Música] E aí E aí [Música] E aí