Variáveis em CSS - @Curso em Vídeo HTML5 e CSS3

e esse é mais um vídeo do Capítulo 17 onde a gente está construindo o nosso primeiro mini projeto é [Música] [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 não consegui ir nós vamos dar continuidade ao nosso projeto que ensinando uma coisa muito legal que é como usar variáveis no CSS por acaso você caiu nesse vídeo aqui que Você pesquisou sobre variáveis em CSS Eu recomendo que você se inscreva no nosso canal do curso em vídeo e assista os outros vídeos cara a gente está no Capítulo 17 de um material em PDF muito bem estruturado Nós estamos montando um mini projeto para construção de um site bem legal utilizando apenas CSS HTML e eu quero te convidar sinceramente abertamente a ser um dos nossos alunos aqui no com o canal é gratuito disponível para todo mundo e o nosso objetivo é simplesmente formar o maior número de pessoas atender ao maior número de pessoas que está iniciando na área o nosso foco do projeto é sempre nos alunos iniciantes estão seja muito bem-vindo e se inscreve no canal e assistir a Playlist completa e sempre presente em interatividade então eu vou te mostrar como eu disse anteriormente como a gente vai aplicar o modelo de variáveis vamos utilizar variáveis dentro das folhas de estilo e antes que você fale assim a Guanabara você mostrou lá no início do curso que CSS não a linguagem de programação eu sei que toda linguagem de programação tem variável está CSS tem variável Mas isso não torna ele uma linguagem de programação CSS é uma linguagem de marcação assim como HTML toda linguagem de programação tem variáveis Mas nem toda linguagem que tem variável é uma linguagem de programação beleza antes que começa as discussões aí que nos comentários e nas redes sociais Então vamos nessa Vamos aprender a utilizar variáveis em CSS antes de dar continuidade a esse vídeo eu tenho um recado bem rápido para te dar como você já deve saber esse curso de desenvolvimento web que tá caprichado por sinal só está sendo possível graças ao apoio de algumas empresas queridas do meu coração e aos poucos conforme o curso foi avançando você vai conhecendo algumas iniciativas e oportunidades que elas e para você que ela sou Luna que não consegui e dessa vez eu vim aqui falar da Record que é uma organização social que tá fazendo 25 anos de vida no ano que eu tô gravando esse vídeo e o seu objetivo principal é promover o que eles chamam de empoderamento digital eu ainda vou mostrar umas histórias bem emocionantes por aqui você não perde por esperar e para você que é nosso aluno do curso em vídeo a Record tá trazendo uma série de cursos grátis de tecnologia que vão deixar você mais preparado ou preparada para entrar no mercado de trabalho e para ter acesso a esses cursos e outras oportunidades que a Record Vai disponibilizar durante o andamento desse curso é só você apontar a câmera do seu celular pro pode que tá aparecendo aqui na tela o link também vai estar disponível na descrição desse vídeo Obrigado repúdio pelo Patrocínio e pelo apoio constante em toda essa curso de HTML e CSS em muitos outros projetos do curso em vídeo que estão por vir não eu e ela só antes de mais nada para quê que eu vou usar variáveis cara eu vou usar variável para facilitar minha vida assim como se você tá usando para programar né se você tá aprendendo a programar você sabe que variáveis que facilitam nossa vida porque elas guardam valores para serem usados mais na frente no nosso programa então basicamente que eu vou fazer o seguinte ó vou dar uma diminuída aqui para a gente poder usar direitinho esse é o nosso projeto até aqui por isso que eu falei que você tem que dar uma assistida nos outros vídeos gente tá montando um projetinho aqui um site simples a com imagem com vídeo tudo bonitinho tá tudo ensinado no nosso curso ou fazer o seguinte olha só aqui no estilo eu vou te mostrar Primeiro vou te colocar aqui as cinco cores que eu escolhi para nossa paleta tá tá lá no material vou dar uma colada aqui na outra tela eu vou trabalhar com três cores nessa escala Tadeu mais fraco por mais vez mais escuro optei por uma paleta monocromática tá se 5 EBD 6 E foi exatamente essa cor que eu utilizei aqui no fundo a esse aqui é a primeira cor eu tenho a segunda coisa aqui que é o 83 é um AD você não sabe nem e esse código aqui também falamos isso no capítulo de cores tá a terceira cor numa escala um pouco menor é 3D de de não dc184 a próxima cor é 2f a 866 e a última ou penúltima cor 1 a 5 ce-371 23455 Já botei uma cesta cortar um bem escuro quase preto que é o 063 de um é essa foi a escala de cores monocromática que eu usei na minha paleta é são as coisas que eu vou utilizar dentro da paleta vou substituir o preto eu vou usar o preto na verdade mas sempre que eu quiser um preto Mas um pouquinho tãozinho de verde rolar esse último aqui esse primeiro aqui é o verde mais claro que eu tenho isso aqui é o mais escuro Então essa escala aqui vai de cima para baixo um tom de verde mais claro que é esse aqui esse aqui até um tom de verde mais escuro que esse aqui toda vez que você for usar por exemplo aqui no bar tá eu tenho aqui dentro do Rider 1 a 1 né eu botar aqui header dentro tem um e aqui eu tenho e eu vou usar sei lá por exemplo não é isso que eu vou usar mas ah eu quero esse daqui Aí eu copiei aqui e Colégio a maioria das pessoas tá indeciso né Queria lá e tá lá a beleza aqui no meu man todo olhar um que tiver eu também vou colocar eu vou colocar uma cor mais escura eu vou colocar essa daqui enfim você consegue fazer isso daqui tá vendo Então consigo configurar é só copiando e colando aqui de cima então geralmente o que as pessoas fazem bota aqui a paleta já aqui já Cup com ela vou te ensinar uma maneira muito melhor Olha só eu vou pegar e vou criar aqui uma referência uma pessoa do classe chamada Rute que todo o documento tem essa que a raiz da árvore do nosso documento tudo que eu colocar tudo que eu defini aqui em cima vai servir para o documento inteiro tá então basicamente eu posso criar variáveis aqui dentro se você já problema linguagem ser ele tiver em qualquer linguagem Você tem uma área né que a sua área principal e você pode declarar suas variadas de globais no dizer assim essa área roxa aqui do nosso CSS todas as variáveis nesse SST E você começa aqui é o contrato traço e bota o nome da variável vou chamar aqui de cor 0 a minha cor 0 Mas essa aqui Deixa eu fazer o seguinte vou control ser vou copiar aqui eu vou fazer isso essa daqui vai ser a minha cor um essa daqui vai ser a minha cor dois três passos no nome da variável tá por favor três bota; no final deles aqui por quatro pode botar nomes nas cores tá no de acordo com a tua palha Tem sim a cor de destaque cor de fundo Pode ser mas eu vou botar sempre assim ó porque eu vou usar essa cor aqui em vários outros lugares falando essa cor dela que ele é quase branquinha e essa forcinha corta na escala de verde aqui o degradê que a gente voltou e aí é o seguinte cara na hora de colocar a cor aqui eu não preciso colocar essa maneira eu posso botar background-color E aí eu posso apertar contra o espaço e olha que maneiro tem as cores escritas rola até o final rola até lá embaixo tudo lá embaixo quando você fala tudo lá embaixo ele já te dá as opções de cores aqui cara olha que maneiro então por exemplo o fundo essa cor vamos supor que no header eu quisesse a cor o espaço ele já coloca lá embaixo para mim eu quero mais escuro de todos aqui eu também quero mais escuro de todos ó só apertar contra os passos escolher de coloca a função Vá dá para você digitar isso aqui na mão tá você pode digitar diretamente vara alguma coisa mas aqui umas casas e aí ó olha lá todo escuro aqui também tudo escuro aqui ficou cinco se você quiser Ah não eu quero um tom mais claro aqui só botar a cor três falar ele já ficou com um tom mais claro você viu É muito mais fácil imagem para frente se o cliente falou assim ah eu não gostei dessa paleta Verde muda a paleta é só você mudar aqui em cima cara você mudou uma vez vai mudar toda Por exemplo essa coisa era aqui vamos supor que o cara mude para amarelo assim quando você mudar tudo que foi configurado com essa cor vai ser automaticamente adaptado Cara isso é muito muito legal então fica a dica aí para você conseguir trabalhar com variáveis outra coisa que eu vou botar variável eu vou tirar isso daqui que eu não preciso mais desse comentário eu nunca mais você vai usar isso é colocar as fontes aqui para poder organizar meu conteúdo Lembrando que eu vou e aqui ó vou criar um negócio chamado assim dois traços fonte padrão a minha fonte padrão vai ser Arial Verdana helvetica sans-serif ela for lá na barra mais polícia votantes assim se você tá perguntando isso é porque você não viu o capítulo sobre tipografia a gente falou sobre tipografia E por quê que é importante você colocar uma sequência de fontes e não somente uma outra fonte que a gente usou a gente veio aqui no Google fonts e vai colocar a a fonte delas cliquei aqui a gente já viu isso no capítulo né vou incluir aqui a minha fonte no estilo e eu vou incorporar ela embebedando na importação de CSS você não sabe fazer isso volte lá no capítulo de tipografia e aprenda a fazer para eu utilizar isso eu vou usar essa aqui ó essa é o meu font-family só que eu vou criar o seguinte ponte destaque a minha fonte de destaque vai ser essa daqui eu coloquei o código daqui de uso outra coisa a gente baixou também uma fonte especial o nosso projeto que o Android então eu vou adicionar a importação dele aqui também então vou colocar aqui ó mais uma regra que a fonte fez e vou adicionar aqui ó meu fone Evelyn vai ter um nome de Android só cotação Android Vamos colocar aqui o Sr separa URL aí na URL aqui ó você "e você pode colocar Só/ou Bota/aí vai deixar você escolher/Fontes/idroid a e o meu Informante é o pentai Livros também durante o uso Capítulo de tipografia a gente também tem um som Leite aqui que é normal né E tá lá eu também vou ter uma fonte ó fonte Android e vai ser essa Android aqui esse não funciona nada eu vou botar cursiva tá é a genérica tá genérica sempre tem que estar no final Beleza já tenho as fontes aqui se você quiser no Bari o meu font-family vai ser quando eu aperto contra o espaço eu já melhor opção aqui ó fonte padrão já preencheu aqui com a variável o Éder eu vou querer o Font Family já bota aqui a fonte de destaque lá já vai ficar com a fonte de destaque ano já tá aqui a outra coisa no meu h1no bem H1 E no meio H2 vou colocar o Font Family a fonte Android aqui também onde Android E aí quando ele colocava ele não carregou esse negócio aqui essa essa fonte aqui ela é a fonte cursiva que que aconteceu eu botar um ponto ponto aqui na frente e se funciona funcionou porque se ponto ponto aqui a gente precisou desse ponto. Esse ponto com significa o seguinte eu estou no arquivo style. css o arquivo style.

css ele está dentro da pasta estilo deixa eu mostrar aqui na pasta e fica melhor olha só eu tô aí você quer meu projeto certo esse arquivo que tá aberto aqui para eu abrir o estilo eu tive que abrir a pasta estilo e aí esse aqui tá lá para eu acessar a fonte que eu tenho que fazer voltar uma pasta eu tive que volta uma pasta e abre fontes como que eu digo isso Volta uma partida abre fonte de nós aqui ó ponto. BA o ponto significa um ponto significa a pasta atual: a ponto ponto significa a pasta anterior Será que então volte uma pasta abra a pasta fontes e abra o arquivo AirDrid.