Curso CSS Completo (7 Horas)

Olá seja muito bem-vindo seja muito bem-vinda o curso de CSS aqui do canal programação web o CSS é o que define um estilo as cores as fontes enfim a parte estética de páginas na web aprender CSS é fundamental para ter um site bonito para você ter tudo de forma estética com design elegante Então esse curso vai ser essencial para você conseguir fazer sites maravilhosos usando a programação web caso você ainda não tem assistido eu te indico que você clica aqui no card e que você Assista o vídeo que eu ensino Qual é o programa para

a gente aprender a programar qual o programa que a gente usa para digitar os as linhas de Cole vai estar aqui no card e também se você tá chegando direto nesse curso de CSS mas não tenho fundamento de html então também te recomendo clicar aqui no card e começar a assistir a Playlist de o primeiro aí depois você vem aqui para o nosso curso de CSS é porque um vai complementar o outro beleza esse conteúdo é um conteúdo 100% gratuito mais com o material que seria de curso pago então com certeza você vai tirar o

proveito maravilhoso mesmo sendo gratuito de ao que seria de curso pago com qualidade não desde já deixa o seu gostei para mostrar sua gratidão para mostrar que você realmente está gostando desse conteúdo que está sendo entregue para vocês hein por cento de forma gratuita que isso me ajuda muito beleza então vamos lá vamos para o nosso curso vamos começar CSS é uma sigla de um termo inglês que significa cascading Style sheets ou traduzido para o português significa na folha de estilo em Cascata o CSS eu gosto de falar que é o casamento perfeito com HTML

e como a gente já estudou aqui no módulo passado HTML ele forma um conteúdo já o CSS ele vai e não se comportamentos estéticos da sua página então por exemplo a cor do fundo a cor do texto tamanho da fonte os espaçamentos o layout no geral né ajustar as imagens enfim o CSS ele foi desenvolvido pelo órgão que regulamenta a internet que a w3c em 1996 por um motivo bem simples o HTML ele não foi criado para ser estiloso para trazer uma experiência para o usuário de forma visual era simplesmente para colocar as informações ali

na tela né para colocar o texto para colocar os parágrafos e assim por diante assim como a gente ver o módulo passado mas se viu a necessidade de fazer algo muito mais utilizado né você poder mudar Fontes mudar cores still só fazer uma coisa bem interessante para pessoa que tá vendo já que a internet ela é muito visual e por isso foi criado o CSS para complementar o HTML ele veio depois né um pouco mais tarde o CSS ele funciona em vez de arquivos do tipo. CSS né que é um arquivo que vai determinar com

alguns eleitores o comportamento daquele elemento HTML específico então aqui na tela a gente tem um exemplo bem básico para você entender imagina que a gente tem uma tag de parágrafo e aqui do lado a gente mostra como que a gente quer que esse parágrafo se comporte no arquivo CSS tá indicando ali por exemplo que esse parágrafo vai ter a cor vermelha ou Red em inglês é importante conhecer bem as propriedades do CSS cada uma delas e como elas funcionam para gente conseguir ter a capacidade de estilizar o nosso código HTML da maneira como a gente

deseja na maneira como a gente quer que ele se comporta agora então para gente fazer na prática o nosso projeto utilizando CSS a gente vai fazer o seguinte a gente tava aqui com as nossas aulas de html a gente tem até na nossa no nosso a pasta de sites aqui no seu: sites aí e faça chamada aula HTML nós vamos fazer o seguinte agora nós vamos fechar essa pasta vim aqui saio Close folder para a gente fechar esse projetinho aqui no nosso vs code né deixar ele zerar pode até fechar esse um título que aparece

aqui para ficar cinco símbolo do vs code e a gente vai lá na nossa pasta aqui dos nossos projetos a gente vai criar um novo projetinho aqui para a gente poder a trabalhar com CSS separado aqui nas nossas aulas pra gente tem os módulos bem definidos aqui do que a gente está trabalhando certo pessoal então vou chamar essa parte de aula traço CSS já que a gente aprendeu que não é bom a gente dar esses passos e tudo mais nem caracteres especiais eu vou colocar o traço aqui e eu vou fazer o seguinte como eu

vs code aqui ó vou restaurar ele deixar ele menorzinho vou pegar essa pasta aula é não aula HTML aula CSS e vou arrastar aqui para dentro do vs code Então vou arrastar para cá para ele já abrir a minha pastinha aqui do projeto outra maneira que eu tenho para fazer aqui é vim do ensaio o o pen poder né para gente abrir a pastinha aulas essa que a gente acabou de criar certo aqui dentro do nosso projeto aula CSS a gente vai criar um novo arquivo clicando aqui no botão para criar um arquivo chamado index.ph

TML Vamos fazer uma página HTML simples e aqui nós vamos colocar um HTML5 básico padrão pt-br Brasil aqui eu vou colocar o título do site de aprendendo CSS certo muito bem nessa aula pessoal nós vamos aprender a primeira maneira da gente colocar CSS nos nossos documentos que é o CSS chamado de CSS inline ou seja CSS em linha quando a gente coloca o CSS dentro do próprio componente HTML dentro do próprio elemento HTML que a gente está trabalhando bom então para sempre ficar isso a gente tem aqui a nossa tag Body né que é a

tag principal do corpo do nosso site tudo que a gente coloca dentro do bar e o que vai aparecer para o usuário certo eu vou rodar aqui o meu site no live-server vou clicar com o botão direito ou em live-server vou fazer dessa forma aqui Oi e aí ele vai startar o meu site Zinho aqui deixa eu restaurar deixar ele aqui no canto isso aqui também vou restaurar aqui para a gente conseguir ver assim certo beleza bom então quando a gente trabalha com CSS inline quer dizer o CSS que a gente vai colocar os comandos

no próprio elemento a gente sempre faz a seguinte forma no elemento que a gente quer trabalhar no caso aqui que vai ser a tag Body que a tag aqui responsável pelo corpo do meu site eu vou colocar uma propriedade ou atributo chamado Style assim estilo ó até que explica contém uma declaração de CSS para ser aplicada no elemento então eu coloco aqui Style do um igual a aspas duplas e aqui dentro eu passo as propriedades CSS o tipo de comportamento que eu quero que ele tem quando eu coloco Style assim dentro de um uma tag

HTML eu tô determinando que este estilo CSS só vai funcionar para esse elemento que eu estou selecionando no caso aqui só vai funcionar para TAG Bari certo então assim eu colocasse aqui uma propriedade a gente vai ver nas próximas aulas tá E essas propriedades que a gente mais trabalha certo mas para você entender como funciona o CSS que é inline CSS na própria tag HTML eu poderia colocar aqui ó background background que quer dizer fundo e eu vou colocar que o fundo é Yellow que é amarelo em inglês coloquei com estilo o fundo eu quero

que seja amarelo se eu der um control S Olha o que que vai acontecer a minha página que o meu baile ficou com o corpo dele aqui com fundo amarelo certo porque eu determinei através desse estilo desse Style que eu coloquei dentro da própria tag HTML que eu queria que o comportamento dessa tag fosse assim o mundo fosse Amarelo outro exemplo Vou colocar aqui um título 1 o meu primeiro site com CSS eu determinei aqui um título normal HTML básico mas eu poderia colocar uma propriedade CSS diretamente aqui nesse meu elemento nesse meu nessa minha

tag eu colocaria Style igual "duplas e aqui eu posso determinar por exemplo que eu quero que a cor desse texto color uma propriedade CSS seja azul Vou Colocar assim Blue don't control s para salvar olha lá o que que aconteceu eu determinei que esse meu título vai ser azul certo ah mas eu acho que essa fonte tá muito pequena então eu poderia colocar mais um atributo aqui eu colocaria ponto-e-vírgula para separar um atributo de outro e aqui eu vou colocar outra propriedade CSS que é o Font traço size o Font size eu vou colocar o

tamanho da fonte eu vou colocar é 88 PX que é 88 pixels Quando eu der um control S Olha só fiquei com a fonte gigantona aqui na minha página certo então é assim que funciona o CSS chamado inline quer dizer que você vai colocar aqui os atributos CSS diretamente no componente que você quer que seja alterado Isso é uma maneira de a gente fazer o CSS certo mas nem sempre isso é prático pessoal nem sempre isso aqui é prático porque porque isso vai funcionar só nesse componente aqui por exemplo determinei que a cor azul do

título um ia ser nesse componente aqui agora é só aqui embaixo fizesse mais um componente ó se eu colocasse aqui deixou só por aquela linha E se eu colocasse aqui mais um H1 e falar se escrevesse assim outro componente certo se eu fizesse dessa forma Olha que que acontecer ele não ia ter aquela utilização desse primeiro porque eu coloquei que esse estilo só vai funcionar para essa primeira tag aqui que eu coloquei certo então existem outros recursos que a gente pode trabalhar com CSS para que o um determinado comportamento funcione para todas as tags do

nosso documento por exemplo todos os H um certo a gente vai ver como fazer esse tipo de declaração de CSS na próxima aula CSS que é na própria página que a gente coloca as instruções e não na tag especificamente mas a gente vai ver isso na próxima aula né solo então que eu quero que você grave é o CSS inline ou em linha CSS em linha é quando a gente coloca a o atributo Style numa tag específica e "duplas e aqui dentro e aqui dentro a gente passa a instrução que a gente quer exemplo fundo

amarelo que cor vai ser azul tamanho da fonte etc na próxima aula nós vamos aprender o CSS incorporado Vejo você na próxima aula e o CSS interno ele é diferente do CSS que a gente coloca diretamente na pele como a gente viu na aula passado o CSS interno é quando a gente dá instruções de CSS dentro da página HTML onde a gente quer que aquelas instruções Socorro como que isso funciona na prática Mor vamos fazer um exemplo antes do fechamento da tag Ride você vai criar aqui uma tag HTML chamado Style e dentro dessa tag

HTML chamado Style tudo que você passar vão ser propriedades CSS que vão ser aplicados neste documento seja nessa página index ponta HTML por exemplo a gente fez aqui no baile que a gente queria que o fundo fosse amarelo que o H1 tivesse uma cor azul e tal e esse outro H1 ele é diferente ele se comportou no padrão pretinho aqui com o ponte pequena etc certo a gente poderia tirar esse estilo aqui já tiramos esse estilo eu vou tirar esse estilo aqui também do meu outro H1 para ficar normal aqui o nosso HTML só por

dois títulos um aqui certo eu vou ter que colocar esse aqui como título dois então só para gente diferenciar ó é o primeiro site com CSS outro componente em vez de eu colocar direto aqui na tag eu posso passar aqui no estilo Qual é o seletor que eu desejo quer dizer qual é o elemento que dessa página que eu quero que receba essas propriedades CSS por exemplo Bori Bori quer dizer o corpo eu tô dizendo que é os que eu quero selecionar essa tag aqui Bari certo e eu sempre coloco Abrir Chaves e fechar chaves

para conseguir colocar aqui dentro dessas Chaves os valores das propriedades CSS colocaram seja aplicadas então fazendo o exemplo do que a gente fez aqui direto na terra e vou fazer a mesma coisa background Oi e aí agora eu vou colocar Yellow eu quero amarelo se eu dou um contra o Oeste aqui para salvar e pare que o efeito foi o mesmo só que eu separei isso dentro de uma parte de estilização dentro da minha página index. HTML certo beleza então aqui ó mundo ficou Amarelo meu título um eu queria que fosse daquele jeito como a

gente é feito antes então se eu colocar assim H1 coloquei um seletor H1 vou dizer que a cor dele vai ser azul e que o tamanho da fonte ou Fontes size vai ser 88 pixels sempre separando com. E, no final tá pessoal então a gente coloca a declaração ou a propriedade CSS dois pontos e aí o valor depois eu ponho ponto-e-vírgula para encerrar um primeiro uma primeira propriedade para depois eu colocar uma próxima propriedade Lembrando que a gente vai ver nesse modo todas essas propriedades aqui é só para você entender o Johnny se ele deu

um controle aqui para salvar o lá o meu título ficou como estava antes só que eu não coloquei na tag eu coloquei aqui em separado um CSS interno dentro da minha própria página agora olha que curioso eu determinei que o seletor era H1 agora todos os H uns que eu colocar aqui se eu colocar mais um H1 e falar assim outro H1 Olha o que que vai acontecer ele vai ficar com essa propriedade porque eu determinei que todos os H uns vai ficar dessa forma certa agora é só precisar esqueça de baixo fosse diferente desse

padrão que eu já coloquei no estilo incorporado aqui da minha página eu poderia vir aqui diretamente no componente e especificar que eu quero que ele seja diferente então poderia colocar um Style e e aquele determinaria que a cor dele a cola é vermelha por exemplo rede e Dom salvar perceba que a cor dele ficou vermelha porque na ordem de é o que tá diretamente na tag vai ser mais prioritária do que tiver aqui dentro de mim do meu atributo Style do meu CSS interno certo então aqui embora eu tenho passado aqui que meu H1 vai

ser azul e seu comportamento padrão mas se eu colocar na tag diretamente um outro valor ele vai pegar o que tiver na tag sempre ela vai ser prioridade por isso que aqui ficou em vermelho e o outro em azul certo essa então é uma outra maneira da gente colocar CSS dentro das nossas páginas o chamado CSS interno ou incorporar Então você coloca antes do fechamento aqui do ride você vai colocar a tag estar e o fechamento da tag Style e aqui dentro você vai passar os valores que você quer certinho então é um outro modo

da gente colocar CSS na página primeira aula a gente viu o inline quer dizer você coloca aqui está eu coloco o CSS dentro da própria terra é uma maneira e aqui a gente viu agora a como colocar isso dentro da página diretamente usando aqui Style certo só que o que que acontece pessoal imagina o seguinte a gente que gostaria que todas as todas as páginas do nosso site tivessem o fundo amarelo só que eu coloquei aqui esse estilo incorporado nessa página que quer index.hr ml certo então se eu viesse aqui no meu projeto e fizesse

uma outra página vou criar aqui ó é outra ponta HTML só para gente fazer aquele ficar crie uma outra página que eu vou fazer um HTML5 básico certo deixou a gente aqui para português do Brasil Vou colocar aqui outra página certo e aqui dentro do Mari eu vou colocar mais um título Vou escrever sim outra a página salvei lá na minha index eu vou fazer aqui no meu corpo aqui da página eu vou fazer um link aqui embaixo para ir para essa página HF outra ponta HTML e vamos fazer ir para outra página certo vou

dar um salvar aqui então fez o link sem ali olha que que vai acontecer quando eu clicar aqui para ir para outra página repare que essa minha página não tá pegando as propriedades CSS dessa Primeira porque porque o coloquei o estilo CSS interno dentro da página index. HTML Então esse estilo aqui ele só vai valer para essa página eu coloquei ele incorporado nessa página especificamente certa mas talvez eu gostaria que todas as páginas do meu documento tivessem essa mesma propriedade por exemplo que o fundo do site fosse Amarelo Então como que a gente faria isso

bom aí a gente precisaria criar um arquivo c é o que vai ser referenciado aqui no nosso documento apontando as propriedades que vão ser em comum para tudo nosso projeto isso a gente vai aprender na próxima aula e agora pessoal nós vamos aprender a terceira forma da gente trabalhar com CSS dentro do nosso site que é através de um arquivo externo que vai ser referenciado dentro das páginas para que possa ter um mesmo CSS em comum entre elas né Nós já vimos na primeira aula desse modo que a gente pode colocar o CSS inline quer

dizer direto na tag o colocando aqui o atributo Style e passando as propriedades a gente aprendeu aula anterior agora aula passada que a gente pode fazer antes do preenchimento do rede uma tag chamada Style e aqui dentro passaram as propriedades só que ela vai valer só para a página específica em que a gente tá colocando ela e nessa aula nós vamos ver a terceira maneira EA maneira que a maioria dos Sites trabalha a maneira mais profissional seria talvez a maneira mais entre Aços correta da gente estar trabalhando embora essas daqui funciona né pessoal você possa

fazer direto na pegue você possa fazer diretamente e a página às vezes não é o modo mais produtivo da gente trabalhar com CSS Então a gente vai aprender agora criar um arquivo CSS e vai conter as propriedades da nossa página como que a gente faz isso pô primeira coisa que nós vamos precisar fazer é aqui no nosso projetinho nós vamos criar uma nova pasta em vindo aqui em mil folder nesse segundo e Cone aqui né Tava passa vou criar cliquei ele uma nova passa e vou chamar essa pasta de CSS Esse é um padrão tá

pessoal da gente criar as pastas para organizar o nosso documento então Criei uma pasta chamada CSS vou abrir essa pasta CSS e aqui dentro eu vou criar um novo arquivo cliquei aqui para criar e eu vou chamar esse arquivo de estilo. CSS o ponto CSS quer dizer que eu quero fazer um arquivo do tipo CSS que é a folha de estilo em Cascata ou cá a stylish né em inglês vou dar um enter E aí a minha página estilo pontos SS foi criada aqui dentro dessa página estilo. CSS eu vou colocar as propriedades CSS que

eu desejo para o meu documento então o que que eu vou fazer vou vir aqui na minha index em vez de eu ter esses valores aqui com essas propriedades colocadas dentro da minha index especificamente eu vou copiar esse conteúdo vou recortar ele recortei é control-x no seu teclado se você quiser recortar e cortei esse conteúdo vou vir aqui dentro da estilo. CSS e vou colar aqui dentro esses valores então específica aqui o bode vai ter um background Yellow seja o fundo vai ser amarelo e que o meu H1 vai ser a cor azul e o

tamanho da fonte 88 pixels Vou salvar salver voltando lá na minha index.hr ml eu já posso apagar essas tags está eu aqui porque eu não e agora eu preciso invocar esse arquivo aqui para que essas propriedades rhoden dentro dessa minha página nessa página index. HTML Como que eu faço isso é bem simples A gente vai passar aqui uma tag que vai dizer qual é a página CSS que a gente quer que esteja incorporado aqui dentro do nosso na nossa index.hr ml ou seja o CSS externo que vai rodar dentro dessa minha página eu faço assim

abro o Tag link escrevo réu igual "duplas Style Style sheet assim é que a folha de estilo e aqui dentro eu vou passar Qual é o caminho para esse meu arquivo CSS colocando HF igual a gente faria para lhe HS e aqui eu tenho que passar Qual é o caminho para essa minha página seria CSS estilo. Oi e aí eu posso fechar a minha tag né e eu vou dar um contra o Oeste aqui para mim salvar Olha o que que vai acontecer parece que não aconteceu nada né pessoal mais ó repare que na minha

página eu não tenho comandos ISS a não ser esse daqui que eu deixei aqui encorporado se eu tirar ele ele vai ficar azul porque ele tá pegando o valor lá na minha página externa estilo. CSS legal deixou só fechar com controle aqui essa nossa ele aqui de passos para vocês enxergarem melhor o código eu não estou usando o ao teaser pessoal assim ó porque muita gente têm se confundido para o lado linha sem ter necessidade os alunos acho que quando chegar nesse ponto que tem que por a linha Mas então eu estou usando assim com

a barra de rolagem mesmo para ficar completo assim ó vai ficar mais fácil de vocês entender o que eu tô fazendo Porque alguns alunos se confundiram nas outras aulas do módulo anterior quando eu usava o ao teaser para ficar tudo na mesma página aqui né E que ele quebra automaticamente as linhas Então vou a forma aqui fazendo essa rolagem isinha para vocês poderem acompanhando Qual que é a vantagem de usar o link externo do arquivo CSS em separado primeiro é o controle vai ficar tudo num lugar só fica mais fácil de você gerenciar né então

se você precisa mudar a propriedade CSS você tem um arquivo específico para fazer isso você já vai direto nele imagina que cada página HTML tivesse o seu próprio estilo incorporado aqui o seu próprio estilo interno na página para você fazer uma alteração você teria que procurar cada uma delas para mudar agora não você muda no arquivo principal aqui onde vai ter os seus estilos e é isso vai ser propagado para todos que estiverem usando aquela página outra coisa agora se eu quero que na minha página outra ponta HTML ou quando eu vou para página outra

ela não não tem nenhum estilo aqui nessa página certa se eu quisesse que Aquelas mesmas propriedades funcionar assim para elas que estão na index o quê o que fazer eu só corpinho o link da minha página aqui da minha referência do meu arquivo CSS vou lá em outra ponta HTML e aqui embaixo antes do fechamento do Rio de Lembrando que essa tag aqui que a gente chama o CSS é sempre antes do fechamento do vídeo tá Às vezes até antes do tá então geralmente se coloca isso mas você pode colocar em qualquer lugar onde você

quiser desde que esteja entre as tags Ride aqui na nossa página se eu for vir aqui colocar o controle e colei aqui o o link referenciando lá a minha página estilo. CSS aqui na outra ponta HTML salvar Olha que aconteceu Ele já aplicou os valores que estão aqui dentro Legal então se eu fosse aqui em outra ponta HTML colocasse aqui assim show é colocar um link para gente voltar para vamos voltar para nossa index.hr ml tá Vou colocar aqui voltar e para index voltar para index Beleza se eu aqui na minha no meu estilo. CSS

trocar aqui profundo ser vermelho mudei fundo é vermelho agora ficou até dói os olhos de olhar né mas mudei o que que vai acontecer lá na index também também vai estar com fundo vermelho porque a gente está nas duas páginas especificando aqui ó que vão usar o mesmo arquivo então se eu mudar aqui no Bari a cor do fundo isso vai se aplicar tanto para a index conto para outra página porque as duas eu estou apontando o mesmo arquivo legal a gente pode dizer que o arquivo CSS funciona em Cascatas são folhas de estilo porque

eu não necessariamente preciso ter só um tipo de folha de estilo eu posso ter várias aqui de forma simultânea certo eu poderia ter mais uma outra folha de estilo que seja por exemplo poderia separar que as coisas eu poderia numa folha de e colocar tudo que esteja relacionado a com aqui os eleitores de título por exemplo só para títulos eu poderia Chamar esse aqui de título. CSS poderia fazer uma outra folha para tamanho de fontes ou coisas do tipo certo então você pode ter múltiplos arquivos CSS dentro do mesmo projeto no geral a gente sempre

tem um que é o geralzão que a gente chama de estar estilo nem ponto CSS enfim tem vários nomes que normalmente se dá como padrão para ser ali o geralzão da sua página e aí a gente pode usar outro CSS complementares para fazer algumas mudanças e elementos específicos no nosso HTML Beleza então só para recapitular essas três primeiras aulas que você aprendeu aqui a gente tem o CSS inline quer dizer que é direto numa tag então poderia colocar aqui Style o Style Vou colocar aqui por exemplo que a cores daqui vai ser color Yellow certo

Amarelo ficou Amarelo esse título se eu for lá em outra você vai ver que ainda vai estar azul porque lá na página outra ele tá puxando aqui do estilo já aqui no nosso index.hu ml eu determinei que acordar tag esse amarelo direto no elemento que eu quero que tem esse resultado OK agora olha só se eu colocar aqui a tag interna vou colocar sempre Style ó e aqui eu vou colocar aqui o h 2 o nosso título dois ele vai ser que tá escrito aqui outro componente tá vendo eu vou colocar que a cor dele

vai ser verde Green certo Opa Green on o Olá ficou verde certo tá verdinho lá só que isso não vai acontecer nas outras páginas por exemplo seu vir aqui em outra ponta HTML colocar um título dois aqui outro título dois salvar eu vou lá para a página outra página outro título 2cv que tá preto ainda porque eu coloquei aqui um CSS interno que vai funcionar só na minha página index. HTML certo agora eu viro aqui no estilo com CSS Colocar assim ó H2 o e colocar aqui que a cor vai ser deixa eu ver uma

cor bem diferente tona aqui ó eu vou colocar esse rosto aqui o Dark Magenta certo e vou dar um salvar Olha lá ficou roxo o nosso título mas olha só que curioso se eu voltar para a index aqui ainda tá verde ainda tá verde o nosso título dois aqui porque será se eu coloquei aqui em estilo pontos SS que a cor ia ser roxa porque que aqui ainda tá verde porque aí entra A Hierarquia do CSS Qual é a prioridade de CSS que o meu documento vai dar por exemplo aqui ó dentro da minha página

index. HTML eu coloquei um estilo e incorporado dentro da página um estilo interno de que o meu título dois ia ser verde então ele pinta de verde aqui porque como está colocado dentro da própria página ele considera que isso tem mais prioridade do que um arquivo externo então em ordem de prioridade de qual que é mais prioritário para o CSS funciona assim ele vai dar primeira prioridade para o seu o que está direto na tag se não tiver nenhum CSS direto na tag ele vai dar prioridade para o CSS interno e se não tiver o

CSS interno ele vai dar prioridade para o CSS externo está colocado no arquivo então se eu colocar assim por exemplo o título dois aqui ó coloquei título dois como sendo é roxo né Dark Magenta se na minha página eu tiver um estilo aqui dizendo que o título dois vai ser verde mas aqui no meu componente eu dizer que esse título dois vai ser o acordei ele vai ser Branco qual que ele você é quando eu the control essa aqui qual que tu acha que vai ser a cor que vai aparecer aqui no nosso título dois

de encontrou S ficou branco porque porque a prioridade é o que tá na tag primeiro Só se eu tirar o que tiver na tag vai ficar verde ou vai ficar roxo que que você acha É vai pensando aí ó vou tirar Eu dei um control S ficou verde porque a prioridade agora foi o CSS que eu coloquei dentro da página agora se eu tiro aqui o CSS que tá dentro da página de um contra o s e com o rosto porque ele tá pegando o CSS que tá na minha folha externa beleza por isso que

o CSS se chama folhas de estilo em Cascata porque o efeito Cascata o efeito de prioridade eu poderia colocar vários detalhes em um que ia ser puxado por um e por outro outra outro exemplo ó aqui a gente tem um H2 que tá roxo certo eu poderia colocar que aqui é o tamanho da fonte dele font-size ia ser 100 pixels tá bem grandão o Olá ficou gigantão outro componente se eu viro aqui no meu index e aqui no meu título dois eu só dizer que a cor vai ser diferente por exemplo vou dizer que a

cor Vai ser branco color White olha só que interessante a cor ficou branco porque eu determinei que que a cor branco mas ele ainda tá pegando ali do meu peça esse externo que o tamanho da fonte é de 100 pixels então você pode trabalhar com CSS estilo de cascata mesmo quer dizer vários documentos podem especificar valores diferentes de propriedades tá vindo aqui o tamanho da fonte do estilo. CSS mais a cor tá vindo diretamente aqui na tag beleza Professor Demétrio entendi esse ponto vou fazer uns testes aqui para ver como é que funciona entende como

é que funciona então eu tenho direto na tag tem direto aqui dentro da página que eu posso colocar interno e tenho no estilo pontos SS também o externo e que eles dá para trabalhar juntos né que dá para colocar aqui as propriedades e os três tem uma ordem de prioridade diferente a trabalhar juntos mas isso não vai virar uma bagunça se eu fizer dessa forma exatamente vai virar uma bagunça por isso o que que a gente sempre orienta em vez de você usar vários várias formas de usar CSS por exemplo eu vou colocar na terra

e vou colocar interno e vou colocar externo use sempre um padrão só um padrão certo que seria qual sempre de arquivo externo Então você referencia que o arquivo Ester e tudo que você precisa mudar você vai mudar aqui dentro a gente vai ver nas próximas aulas as aulas sobre seletores que se você quiser uma tag específica tenha um valor existe uma maneira de você colocar um seletor nessa nossa página externa então para manter um padrão faça tudo numa página externa não bagunça colocando o CSS direto na tag ou na página e também externa porque às

vezes fica difícil de você gerenciar depois o seu projeto quando você precisar fazer manutenção fazer bom então faça tudo no arquivo externo que não vai ter erro Beleza espero que você tenha entendido passa aí uns testes eu quero que você mexa aí no seu código faça uma coisa bem simples como a gente fez aqui usando a propriedade de Collor que a cor que foram propriedades que você já aprendeu color que a cor do texto o background que acordou um fundo passa aí alguns testes usando o inline O interno eo externo para você ver como funciona

entender bem esse ponto e daí na próxima aula nós continuamos aí entendendo o funcionamento do CSS entendendo como a gente faz para selecionar os tipos de seletores que a gente pode usar para poder indicar como que as propriedades CSS deve se comportar eu vejo você na próxima aula valeu e 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 e a gente vai colocar aqui p vezes três três parágrafos com o ordem aqui só para a 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 e também um botãozinho para 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 qual tag 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 que eu tô 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 como eu te escuro eu posso subir aqui mais para cima deixar um pouquinho mais clarinho então contra Oeste e já ficou um pouco o meu fundo Então essa é o primeiro tipo de seletor que eu tenho que a colocando Qual é a tag específica poderia colocar também a tag P que é de parágrafo e dizer que na tag P eu quero que

seja a cor vai ser vermelho tá color red estão todos os meus parágrafos ficar em vermelho Esse é o primeiro seletor Inclusive a gente viu um pouquinho na 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 o 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

educlass 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 vamos dizer assim algo Universal dentro do meu código então poderia por exemplo colocar aqui dentro do título um que eu colocar essa classe Center ele vai centralizar o meu texto eu colocar nesse outro aqui ó que ela 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 que poderia criar por exemplo em vez de aqui uma cor chamada dizer que todos

os parágrafos nã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á está 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 e fala 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 outro exemplo 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 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 colocasse por exemplo seletor P todos os parágrafos de ficar daquela maneira certa agora eu fico Qual é o elemento que eu quero usando 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 classes de forma 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 uma letra v o 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 ele 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 classes que é com 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 os elementos da página Quero que todas as pedras 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 da margem o 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 a 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ó para a 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 a tag P vai ter essas propriedades aqui 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 agir 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 para prometi 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 uso a 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 a partir de agora Então pessoal nós vamos conhecer um por um cada propriedade que a gente utiliza no CSS e para que elas servem assim a gente vai ter um conhecimento geral das propriedades e você pode ir utilizando elas a medida do que você for precisando eu construir o seu site a primeira propriedade nós vamos aprender nessa aula é a propriedade color que é corna eu vou apagar isso tudo que eu

tenho que ir no meu CSS para gente começar do zero de novo vou apagar essas classes que a gente deixou a última aula aqui certo e vamos vamos vendo aqui as propriedades CSS uma a uma a control S salvei beleza A primeira é a cola o quê que é a color propriedade de cola é a cor do texto certo pessoal então por exemplo meu H1 utilizei ele como o seletor coloca a propriedade color e a cor que eu passo aqui vai ser a cor que eu quero que seja o meu texto vocês percebem pessoal que

existem várias cores já pré-definidas com nomes que a gente pode utilizar então eu posso colocar cada uma dessas daqui que ele já me dá de sugestão certo que já são cores com o nome pré-definido por exemplo Blue Violet Blue Green ciano Dark Blue né todos esses nomes que aparecem aqui e também a gente pode trabalhar com as cores hexadecimais ou formato RGB certo eu já mostrei para vocês em outra ocasião mas vou mostrar novamente se você vem aqui no Google digitar color picker e de um enter você vai ter a paleta de cores e o

computador ele não entende a cor da maneira como a gente entende né a gente vai tudo é vermelho azul verde ele entende isso através de padrões de código que podem ser hexadecimais como por exemplo aqui ó hashtag eb40 34 é esse tom de vermelho aqui cada uma tem um código específico repara que conforme eu vou passando aqui o mouse selecionando ele vai mudando né existe o padrão RGB que é Red Green Blue que é vermelho verde e azul a mistura dessas cores a combinação vai dar uma cor específica existe o padrão cmyk o hsv e

hsl depois se você ficar curioso o que cada um desses padrões ele significam você pode dar uma pesquisada aí por fora não é o objetivo dessa aula importante você saber que a gente sempre usa o código hexadecimal ou um padrão RGB para determinar uma cor no nosso código então por exemplo se eu quisesse esse tom de vermelho aqui ó vamos e esse tom de vermelho aqui eu teria que usar essa hashtag aqui ó vou copiar vou ver aqui no meu meu site no CSS se eu colocasse assim olha só que legal a legal naquela extensão

que pinta as cores né ó já ficou com a cor que eu determinei que era aquele tom de vermelho aqui com aquela extensão que a gente colocou que a extensão Zinha do Collor Highlight eu posso escolher diretamente aqui ó por dentro do vs code a cor que eu quero Então vamos supor que eu quisesse esse tom de verde o seu seleciona ele já deixa assim agora eu vou trocando ó ele já vai mostrando para mim que se eu dou um controle e salvei Ele já mudou para que ele tãozinho Então essa é a primeira propriedade

propriedade color tá pessoal essa propriedade Cola a gente usa para colorir um texto tão seus parágrafos também né fosse usar seletor poderia colocar Que Cola e aqui eu poderia colocar uma cor também específica por nome então vou colocar the color Blue azul e aí ele já vai pintar ali o meu texto de azul né se eu selecionar aqui uma outra cor você vai ver que ele também mostra no padrão RGB então se eu escolher aqui um outro Tom vou escolher esse verdinho aqui ó ele colocou em RGB mas também funciona igual tá pessoal tanto faz

se for padrão hexadecimal RGB ou pelo nome da cor seu digitar se aqui o nome da cor né pagasse aqui colocasse assim green-how greenyellow por exemplo se que que é diferente ó e ele vai fazer igual vai funcionar então a gente pode colocar pelo nome da cor inglês se ela existir Red por exemplo que é vermelho o ouro poderia colocar aqui qual que é o padrão aqui é o fe40 sentam se eu fizesse assim ó FF um dois três quatro é vermelho fica vermelho igual o seu digitar Red aqui ó Red da no mesmo Funciona

igual certo então quando você quiser um tão específico Às vezes você pode usar aquela função do color picker para procurar ou aqui mesmo color Highlight para escolher uma coisinha que você quer quando você usar a propriedade cola isso vai colorir o texto beleza próxima aula vamos conhecer mais uma propriedade propriedade background te vejo na próxima Alça e agora pessoal nós vamos conhecer a propriedade background aqui do CSS ou seja o fundo background quer dizer o que fica atrás ou no fundo né propriedade background ela serve tanto para a gente colocar como fundo uma cor sólida

né uma cor única como também uma imagem A gente pode usar isso para enfeitar que o o nosso a nossa página HTML então só para a gente exemplifi Car o uso dessa tag aqui por exemplo no nosso documento poderia na tag Bari né que é o corpo do nosso arquivo eu posso colocar aqui um background background um traço color que é uma cor específica e passar uma cor que eu quero por exemplo posso colocar esse vou colocar esse tom de azul aqui ó salvar Olá já ficou determinado que eu quero essa cores seu background-color Ou

seja a cor sólida né a cor do fundo poderia colocar cor hexadecimal da mesma forma como funciona aqui à propriedade Cola outra propriedade relacionada ao background é um background-image ou seja uma imagem de fundo né só para mostrar como isso funciona eu vou fazer o seguinte eu vou aí deixa eu tirar esse background-color eu vou deixar branco mesmo para não cá atrapalhando nosso nossa aula e eu vou aqui na nossa index eu vou fazer aqui uma div Antes aqui do link só para gente poder mostrar o uso desse dessa propriedade de fundo background fazer uma

div e a classe Oi livre vai ser exemplo é back the background certo e não vai ter nada aqui dentro ou até posso escrever um conteúdo aqui colocar um p1p Lauren normal que só pra gente colocar um parágrafo certo colocamos aqui um pelore no nosso exemplo Beck aqui e agora a gente vai vir aqui nas nossas classes Vamos colocar aqui. Até exemplo deck para a gente criar esse essa nossa classe e aqui um exemplo Beck eu vou dizer que ele vai ter uma altura de 100 pixels Oi e a gente vai colocar um background um

color e é Grey aqui cinza certo Olha lá a gente fez aqui uma área vizinha com um fundo sólido né até um texto Dentro a gente não precisava talvez desse texto dentro dentro eu colocar 300 pixels aqui para ficar maior Beleza vou tirar esse conteúdo do parágrafo aqui que eu quero só mostrar para vocês como funciona o atributo de background background color a gente já viu que é uma cor sólida certo está colocado aqui qual que é a cor a cor vai ser cinza Mas eu posso colocar que eu quero que uma imagem fica aqui

nesse meu componente certo então vou fazer o seguinte eu vou ir lá no no pet seus mesmo pexels nos entrar no site do Texas que eu já mostrei para vocês em outra aula vou buscar aqui a textura background Texture background aqui e vou escolher uma imagem aqui the background ou seja de fundo certo pessoal eu vou escolher deixou maximizar esse aqui e na orientação Vou colocar aqui a montar o presente pegar uma textura que esteja nesse sentido Pode até ser essa Pode até ser vamos pegar essa Areinha preta aqui ó vou clicar aqui em baixar

grátis e vou salvar isso lá dentro da pasta do nosso projeto está aqui em sites aula CSS a gente pode criar uma nova pasta chamada e MG de imagens e aqui eu posso chamar de background. Jpg o fundo né tanto faz Vou salvar baixei assim Imagem Beleza agora que que eu vou fazer eu quero que essa imagem que eu baixei ela seja o fundo desse elemento então eu vou usar agora a propriedade que se chama background traço image dessa forma aqui ó background-image certo e aí eu passo o parâmetro URL para indicar aonde que esse

arquivo Tá bom a gente está dentro de estilo. CSS certo então a gente está dentro dessa pastinha aqui para eu pegar essa imagem eu teria que voltar uma paz e traz para passo imagem dentro dessa pasta imagem eu teria meu background pouco jpg certo então você tem que sempre verificarem aonde você tá dentro da hierarquia do seu projeto das pastas é que a gente tá e estilo. CSS então para a gente achassem mais teria que voltar uma pasta para trás então voltando aqui no meu código eu vou apontar que é dentro de aspas duplas aqui

que vai estar voltar uma pasta para trás a pasta e MG e background. Jpg exatamente isso que eu quero indicando assim qual é o caminho da imagem que eu quero de fundo então background-image URL e aqui dentro dos parentes eu passo entre aspas duplas o caminho para eu achar essa imagem dentro do meu projeto Se eu der um controle S Olha lá ele já apareceu um pedaço daquele nosso daquela nossa textura só que se você observar e a textura era assim se a gente olhar aqui como é que ficou parece que ela tá com um

certo bem grande aqui Então como que a gente faz para ela caber dentro dessa área ela se ajustar dentro dessa área que a gente quer trabalhar a gente vai usar uma outra propriedade se chama deck ground o background traço size é o tamanho O que é qual o tamanho que eu quero eu tenho contém e o cover aqui para escolher Se eu escolher o contém Olha o que que vai acontecer vou dar um controle se ele apareceu aqui o background mas começou a repetir ele aqui porque ele não se encaixou não se enquadrou totalmente nesse

meu elemento certo agora se eu uso aqui o cover Olha o que que vai acontecer aí ele já tentou adaptar aquela textura aquele fundo certinho o tamanho do meu elemento agora eu vou deixar aqui o contém só para vocês verem uma outra propriedade que a gente pode usar com background que é a background repeti você vê que ele está repetindo aqui certo olha só aqui que eu posso fazer eu posso determinar que esse fundo eu não quero que ele repita então ponha background repeti e aqui eu coloco que não quero no repite não quero que

repita-se eu não contra o Oeste Olha que que vai acontecer ele não repetiu o meu background e o espaço que ficou se quisessem sem o fundo que eu escolhi de imagem ele tá pegando aqui do background-color então eu determinei Qual é a cor se a imagem não pegar toda a área então ele vai fazer assim agora eu poderia também pedir para ele repetir essa imagem usando o kit se eu coloco repeti ele repete a imagem e eu posso ainda passa aqui repeti traço x que é para ele repetir a imagem nesse sentido ou repeti traço

Y para ele repetir a imagem nesse sentido no caso aqui ele é repetir aqui para baixo se tivesse uma altura maior então se eu colocar aqui um 600 de altura Olha lá ele já tá repetindo para baixo esse meu é esse meu fundo esse meu background agora se eu colocar aqui eu repeti só e aqui já não vai aparecer ele tá repetindo para lá então se o tamanho formei na hora aqui ó e olha já vai aparecer a repetição aqui certo então você tem o controle de repetição isso daí é o hit agora se eu

coloco o cover aqui ó ele vai pegar toda a área tentar encaixar aqui mas eu posso dizer qual posição que eu quero que ele apareça aqui então eu poderia usar aqui eu vou colocar um novo Pit né para não repetir e não repeti ó e aqui eu poderia é determinar Qual que é a posição que eu quero que seja mostrado aqui então poderia colocar senha background traço positivo long E olha que que vai acontecer você viu que deslocou vou tirar aqui para você ver sem sal ver olha tá mostrando Alice eu coloco centro ele vai

e vai mostrar o miolo da imagem aqui agora eu coloco top que a parte de cima olha que que vai acontecer ele vai mostrar a parte de cima talvez com esse tipo de background aqui não fique tão claro isso daqui deixa eu mostrar para vocês um outro exemplo Vamos pegar uma outra imagem aqui para ficar mais claro o uso dessa propriedade vou pegar lá que cidade pegar um fundo de uma cidade aqui só para ficar bem mais fácil da gente conseguir enxergar deixa eu ver alguma que seja bem legal Zinho aqui a pode ser essa

daqui mesmo dessa cidade vou baixar eu vou até vou escrever sem a fundo só se for salvei beleza e vamos restaurar aqui ó e aqui eu vou trocar de background para fundo Eu salvei olha lá e quando a gente dá um cover ele tentou encaixar aqui dentro o conteúdo certo mais claro a imagem é maior do que o conteúdo a área que eu posso estar trabalhando aqui então o que que acontece se eu colocar aqui top ele tá pegando a parte de cima se eu colocar Center e ele tá pegando mais o miolo Se eu

colocar rite quer dizer que ele vai pegar mais à direita da imagem se eu pegar left e vai pegar mais à esquerda da imagem que daí nesse caso não né mas é você indica a posição que você quer então vou colocar assim Center mesmo só para dizer que eu quero a posição central dessa imagem ela vai tentar se adaptar aqui dentro do background-size né que a gente tem cover a gente tem a gente poderia colocar aqui por exemplo 100% Oi e aí vai dar a mesma coisa que o cover praticamente né então a gente pode

usar essas propriedades aí certo para gente trabalhar com fome então a gente tem o Collor que é uma cor sólida a gente tem um background-image que é para passar uma imagem dela que a gente quer que mostra o background-size que é para dizer o tamanho da imagem de fundo que a gente quer que apareça aqui né a gente pode colocar aqui cover ou contém Lembrando que isso aqui é uma imagem de fundo né pessoal desse meu elemento eu poderia por exemplo colocar conteúdo aqui dentro dessa Jimmy por exemplo um parágrafo aqui não p Lauren aqui

ó bom e o que que aconteceu é que ele ia aparecer aqui dentro dessa dívida que o fundo aqui então ele fica de furo por isso se chama background que tá atrás né tá entendendo eu poderia usar esse aqui como por exemplo um fundo para minha página e tudo mais mas geralmente quando a gente usa assim essas coisas de fundo ele pode dar um efeito meio estranho aqui na parte de leitura tem que usar com sabedoria essa questão dos background sakineh desses funguinhos agora é em vez da gente usar todos esses componentes aqui que a

gente tem um background Cola é uma cor sólida o background-image pré uma imagem tamanho repetição ou não Oposição a gente poderia fazer tudo isso daqui numa só a expressão in CSS a gente não precisaria fazer tudo isso daqui se deforma separado a gente poderia usar o chamado short Hand ou um atalho para ficar mais fácil da gente fazer tudo isso daqui como que eu faria é assim ó passando a propriedade e pronto: aqui eu posso colocar uma cor sólida para começar então eu vou usar a Grey eu tô usando o background Colour Grey beleza Dom

espaço e aí eu coloco Qual é o URL da imagem que eu quero então poderia colocar aqui esse daqui né vou até copiar para ficar mais fácil pegar e essa imagem então eu tô falando que o fundo vai ser cinza não ele pega a imagem aí eu posso passar ali o próximo parâmetros é para repetir ou não vou colocar no repite não é para repetir eu vou querer que uma alinhamento seja ao centro tá vou colocar Center assim única coisa que a gente teria colocar por fora mesmo seria o background-size cover e daí já vai

ficar tudo certo vou deixar vou apagar esses aqui pagar esses daqui vou colocar esse aqui para parte de cima é de um control é se você vê o que não mudou praticamente nada todos aqueles componentes que eu coloquei então funcionando num só certo que é o background então a gente passou todos aqueles parâmetros num num CSS sono uma expressão aqui só né para gente por Park ódio fica mais fácil a gente fazer dessa maneira o background na prática tá pessoal a gente usa mais por essas duas coisas então você pode colocar direto assim background Grey

vai dizer que eu quero que o background seja cinza uma cor ou poderia colocar direto aqui também a imagem o URL E aí eu passo onde que tá essa minha imagem MG e MG background salvei já vai aparecer lá né aí só colocar o background faço size cover para se adaptar E aí ele já se adaptou ali aquela parte Beleza então essa é a nossa propriedade de fundo a propriedade e a gente pode usar color image with each position size ou então de uma vez só usando simplesmente background passamos parâmetros aqui dentro beleza Um forte

abraço e até a próxima aula onde a gente vai aprender um pouco mais das propriedades CSS o Saulo nós vamos aprender a trabalhar com bordas a propriedade Warner é bem simples a gente usa bastante essa propriedade para enfeitar o nosso código muitas vezes ela fazer botões ao a gente poder ah tá trabalhando de forma mais utilizada Então a gente vai ver como funciona a questão das bordas agora certo pessoal então o nosso título um aqui ó meu primeiro site com CSS eu posso colocar aqui uma propriedade chamada border e dentro de borda eu posso especificar

algumas coisas primeiro é o tamanho dessa borda em pixels Então a gente vai colocar um pixel para a gente fazer o tamanho dessa borda a gente vai dar um espaço e aqui o tipo da borda que a gente vai querer o estilo existem vários estilos de bordas que a gente pode fazer eu vou mostrar para você todos os principais que a gente trabalha certo principal seria o Solid que seria uma borda sólida e o que eu quero uma borda de um pixels sólida e aqui eu vou passar Qual é a cor que eu quero dessa

bola e vou colocar black que eu quero escura; se eu der um salvar Olha que que vai acontecer lá no nosso h1na nossos título um aqui ó percebeu ele colocou uma borda em volta de todo o elemento ok a gente também poderia mudar aqui para as variações de borda que a gente tem essa é a primeira é a sólida a gente tem também o do Ted e assim que seria com pontinhos sei se vocês vão conseguir enxergar bem aqui mas são pontinhos a gente tem também o Dash and que é com tracinhos assim a gente

tem a dupla que é duble borda dupla ele fica com duas bordas dos gordinhos a gente tem a Groove que é para ser um efeito mais três de aqui olhando vocês não vou pegar teria que você um pouco mais grossa eu acho deixa eu colocar assim ó um pouco mais grossa Vou ver se dou ele vai aparecer aqui para vocês verem assim fica melhor de ver né a dupla aí é que a gente tem a gluv que é para ser um efeito 3D mas eu não sei se tem que ser bem mais grossa para poder

enxergar é não vai dar para enxergar dessa maneira a gente tem a rede e assim guide a gente tem também a inset que é por dentro o show deixar cinco sim por dentro a gente tem outros ética por fora e a gente tem anony que nenhuma e tem a ryden a ryden que é oculta também não aparece certo pessoal mas acho que a gente mais trabalha vai ser a Solid Solid que é assim e a do Ted que é as pontinhas e a Dash que é os tracinhos certo pessoal Essas são os que a gente

mais trabalho de aqui na cor a gente pode passar a cor que a gente quiser né pessoal gente pode passar aqui a Vou colocar aqui é vermelho ó vai ficar assim legal então dessa forma a gente pode fazer bordas e existe a questão da onde você quer que essa borda ela apareça deixa eu colocar aqui sólida assim quando eu coloco sua border passa o tamanho da borda o tipo dela EA cor Vai Ficar Em toda área eu tô dizendo que eu tô querendo uma borda em todo sentido mas se eu passar o lado específico ele

vai mostrar só naquele lado que eu apontar por exemplo se eu colocar bola O que quer dizer borda a esquerda Olha o que que vai acontecer ficou vermelho né então vou fazer assim ó minha borda esquerda vou deixar vermelha é a minha borda no topo me a Bordo é top eu vou mudar a cor aqui ó vou fazer Verde e olha lá a minha borda à direita o show ajeitar aqui a borda e como colocar que a direita que é White vamos trocar a cor aqui vamos dizer que é um azul salvei e a minha

borda a embaixo e seria border-bottom assim a com dois t e m no final eu vou colocar a cor aqui a laranjada que tá pessoal Deixa eu ver se eu acho que aqui laranjado control S beleza dessa forma pessoal a gente pode controlar os lábios das bordas e cada uma de forma individual então a borda em cima aborda a esquerda a borda na direita e a borda embaixo cada um pode ter uma cor pode ser de um tipo diferente a gente tá trabalhando de forma isolada com cada uma delas certo pessoal isso então é bem

tranquilo você pode fazer vários efeitos legais aí Conforme você quiser né e a gente usa também há a questão da borda arredondada né pessoal para isso eu vou fazer o seguinte ó eu vou nessa aqui mesmo eu vou apagar tudo isso daqui ó e vou deixar uma borda comum border 1px Solid Black normal e eu quero deixar essa bordinha arredondada como é que eu faço é bem fácil cê vai colocar a propriedade borda traço rádios assim ó borda arredondada e aqui você pode passar uma porcentagem ou então o valor fixo em pixels Então posso voltar

será cinco porcento; se eu der um salvar olá ele já deu uma leve arredondada mas o mais legal é colocar em pixels por exemplo 10 pixels assim ó aí vai ficar bem redondinho aqui os cantinhos você pode ir ajustando conforme você quer um nível de arredondado a 20 pixels Ó ficou bem a redonda não 30 pixels tá entendendo aí ele já vai fazer o arredondamento aqui da nossa borda certo para ficar bonitinho aqui vou usar uma outra propriedade que a gente ainda não viu mas eu text-align-center alinhar o texto ao centro Para ficar lá direitinho

a nossa gordinha olha só que legal show de bola né pessoal bem interessante e até poderia usar já um background aqui ó background Black profundo ficar escuro já que a gente aprendeu o outro sobre o black background Olá meu primeiro site com CSS E aí a gente pode colocar aqui no color né em vez desse azul a gente poderia colocar um branco aqui ó salvar Olá meu primeiro site com CSS legal então isso daí é a propriedade border a gente coloca Primeiro qual o tamanho dessa borda qual vai ser o tipo dela a gente mostrou

aqui os principais Qual é a cor e se você quiser fazer borda arredondada você coloca border-radius e o valor que você quer para que elas e não dado a forma como você achar melhor beleza próxima aula vamos ver mais uma propriedade aqui CSS forte abraço e até a próxima ao o próximo à propriedade que nós vamos aprender é a margem a margem serve para dar um espaço em branco em uma das direções do elemento em relação a partir de cima da esquerda de baixo ou da direita então o exemplo aqui de Margem nós podemos usar

esse nosso título um aqui aqui mesmo né eu posso passar sim o valor chamado margem propriedade margem e eu posso especificar margem que lado top por exemplo margem a parte de cima o cara dá uma margem para parte de cima quanto que eu quero dar a vamos dizer que eu quero 50 pixels por exemplo olha só o que que vai acontecer presta atenção que que vai acontecer quando eu the control S olá ele afastou-se eu colocar 150 pixels olá ele é fácil da parte de cima 150 pixels poderia colocar aqui também em porcentagem então poderia

colocar será cinco porcento ele afastou a cinco porcento 15 por cento o 25 porcento tá entendendo então eu posso fazer isso em relação ao tamanho da minha página ou colocar especificamente a quantidade em pixels que eu quero Então eu quero que a parte de cima seja afastado 50 pixels a parte de baixo também já tem uma margem Zinha mas eu quero que essa margem seja maior Então como que eu faço margem bottom O que é para parte de baixo eu quero que seja 150 pixels olha só o que que ele vai fazer ele afastou a

parte de baixo 150 pixels de um espaçamento aqui para mim e se eu quero afastar aqui nesse ponto para lá né é a margem a esquerda então eu faria margem Leste e colocaria aqui um supor 50 pixels Olha lá que que ele fez afastou de si canto aqui 50 pixels aí eu quero que da direita ele me afaste 50 pixels Então faço margem traço White e a direita 50 pixels assim e aí ele me afastou 50 pixels aqui 50 pixels aqui em cima 50 pixels e embaixo 150 pixels certo só para a gente ter diferenças

de tamanhos eu vou colocar senha de cima 30 e a de baixo vou deixar 150 esquerda eu vou deixar 20 e a direita vou deixar 70 certo só para a gente ter uma diferença aqui beleza de Margem Você pode passar todas essas propriedades que a gente colocou apontando a direção num atalho mais rápido né vamos dizer um short Hand que a gente chama que quando a gente faz tudo numa mesma declaração usando a propriedade uma margem só assim margem E aí a gente pode passar os valores a propriedade de Margem ela aceita os quatro parâmetros

que a gente viu aqui topo Bottom left right então o primeiro que você vai passar é sempre do Topo então o nosso topo aqui seria 30 pixels aí você dá um espaço o próximo vai se dizer respeito à direita então é topo depois direito à nossa direita seria 70 pixels depois a gente vai ter em baixo embaixo seria há 50 pixels E aí a gente teria por último a esquerda seria no nosso caso 20 pixels então colocar esse 20 fixo então com essa declaração eu tô falando de uma linha só que eu quero que ele

de margem do topo de 30 pixels margem à direita de 70 pixels a parte de baixo 150 pixels EA esquerda 20 pixels tô se eu apagar esses daqui ó apaguei e deixar só esse daqui de um control é se você vê que ele vai ter exatamente o mesmo efeito porque eu tô Passando todas as direções numa declaração só beleza a gente usa muito muito muito mesmo essa propriedade margem tá pessoal propriedade margem ela é muito importante a gente usa Principalmente para o afastamento entre itens para a gente poder alinhar tudo direitinho na maneira como a

gente quer dentro do nosso site fazer as questões de alinhamento né olha bem importante um exemplo poderia colocar aqui ó eu quero que os parágrafos sejam mais afastados como é que eu poderia fazer isso vou salvar aqui deixar sem margem nenhuma aqui no H1 mas eu quero que os meus parágrafos sejam mais afastados um do outro então eu colocaria uma margem botton uma margem embaixo Opa digitei errado aqui é de 40 pixels por exemplo olha só que que vai acontecer salvei eu afastei como tá sendo aplicado em todos os parágrafos cada um dos parágrafos afastou

40 se eu colocar mais aqui ou se senta vou ficar mais afastado tá vendo show de bola né pessoal Então essa é a propriedade margem para a gente afastar elementos a gente poderia colocar um pouquinho afastado a margem a esquerda para não ficar colada ali ó margem Leste Vou colocar aqui 10 pixels Olha já faz tem um pouquinho aqui da margem outra afastar um pouquinho mais 20 e eu ficou afastar Dinho que estava colada aqui na beira da minha página certa então as margens a gente usa bastante também uma propriedade bem importante para a gente

deixar o nosso visual aqui do jeito como a gente quer usar alinhamento a organização aqui dos elementos né a gente usa bastante essa propriedade Vejo você na próxima aula e agora pessoal nós vamos conhecer a propriedade pele o prédio é bem parecido com o margem mas como a diferença quando a gente usou o margem na aula passada por exemplo se eu usasse o margem top ele faria um espaçamento Branco entre o meu elemento que no meu caso esse H1 e o topo por exemplo né dando um afastamento certo o pede faz a mesma coisa mas

em relação ao a parte de dentro do nosso elemento a parte de dentro do nosso conteúdo aqui então em vez de ele fazer um afastamento para lá para fora ele vai fazer um afastamento dentro do próprio alimento por isso se chama perdem é como se fosse um preenchimento então só para você entender o ponto eu vou mostrar aqui para você vou colocar aqui um predinho traço top quer dizer um preenchimento ao topo de 50 pixels quando eu dou um contra o Oeste olha só que que aconteceu ele fez um preenchimento de 50 pixels aqui legal

posso fazer a mesma coisa que a parte de baixo pede botton de a 20 pixels por o olá ele deu um preenchimento Zinho de 20 pixels aqui certo mesma coisa para esquerda e para direita pede left de 10 pixels por exemplo um preenchimento de 10 pixels de um pouquinho mais espaçamento aqui e a direita também vou fazer um pedem rite Vou colocar aqui há 70 pixels para dar um Hype direita né Para dar um preenchimento mais afastado aqui beleza então preenche 50 para cima 20 para baixo 10 aqui e 70 aqui ele preenche o meu

elemento para isso que serve o pede a gente pode colocar essas declarações aqui de Topo baixo esquerda direita numa declaração só a gente pode fazer assim a pede dois pontos e aí passar os valores mais ou menos como a gente fazendo caso da margem primeiro Eu superior então eu superior vai ser de 50 pixels para gente copiar esses que a gente fez aqui em cima né meu primeiro é desse e a partir do lado direito vai ser 70 pixels depois a gente vem a parte de baixo vai ser 20 pixels EA esquerda 10 pixels Então

essa declaração que eu fiz aqui de cada um dos lados eu posso fazer uma vez só especificando os valores se eu apagar esse daqui olha só que que vai acontecer vai ficar exatamente igual porque eu passei tudo numa mesma declaração quando eu passo só um parâmetro por exemplo do pede em 50 pixels ele vai entender que para todos os lados eu quero que ele deu um preenchimento de 50 fixo então vai ficar uniforme que o preenchimento do meu é elemento do meu componente certo vocês percebem que o perdem ele já dá um efeitinho muito legal

quando a gente usa junto com o background tá vendo comecei que parece já tipo um botão então a gente usa muito pede para a gente criar botões para fazer botões estilizados gente inclusive pode fazer isso aqui vamos fazer aqui um exemplo para vocês ver no e o que que a gente tem uma embaixo nesse link aqui que tem para ir para próxima página a gente pode fazer isso eu vou tirar um pouquinho esses espaçamentos aqui ó a gente colocou nos parágrafos para não ficar muito lá embaixo para vocês enxergarem bem para a gente aproveitar que

a gente aprendeu de propriedade aqui do nosso dessa nossa Diva aqui deixa eu também diminui a altura dela Vou colocar aqui 100 pixels e mulher um pouquinho eu vou dar um afastamento para onde vai ser o nosso botão aqui que é o nosso link uma margem botton de as em pixels dá para botar mais para baixo lá que legal já ficou mais para baixo a gente pode fazer aqui um botão né Vamos colocar um botão aqui embaixo fazendo o seguinte aqui no nosso link a gente pode criar uma classe chamada botão Nós salvamos e aqui

a gente pode criar essa classe. Botão e aqui vamos passar as propriedades vamos lá só propriedades que a gente já conheceu a gente pode colocar assim ó margem left margem a esquerda Vamos colocar nos 33% Olá já ficou bem legal Zinho ali onde a gente quer esse ponto aqui né Vamos colocar também a aqui uma cor de fundo um background é ruim cor de fundo verde beleza vamos colocar que a cor do link color vai ser White branco a e agora a gente vai usar Aqui Nós aprendemos que é o pede que é o preenchimento

Vamos colocar um preenchimento de 50 pixels para ver como é que fica olha lá que legal fizemos um botão show de bola né pessoal só que 50 pixels ficou muito grande eu vou fazer 30 pixels aí ó o preenchimento de 30 pixels para cada lado se eu quisesse fazer o botão um pouquinho mais para os lados um pouco mais fortinho né eu poderia fazer assim a em vez de colocar assim o pé de indireto poderia colocar pede o top de 30 pixels poderia colocar o pede botton de 30 pixels mais o pedem left vou fazer

com 50 pixels e o perdem rite vou fazer 50 pixels Tumblr bom então eu fiz ele um pouquinho maior para os lados e um pouquinho menor para cima legal poderia colocar uma borda arredondada Nós aprendemos também borda rádios e eu vou colocar 5 pixels Olha lá já ficou um botãozinho bem legal né quando eu clico Vai para página volta já ficou um botãozinho usando as propriedades CSS que a gente usou para estilizar certo depois mais para frente aqui a gente vai ver também como que a gente pode fazer para quando passar o mouse por cima

já ficar um efeitinho legal já vou mostrar aqui para vocês como é que você pode fazer é assim ó você vai repetir a mesma classe: e aí coloca o ver que é sobre o que que acontece quando o mouse estiver sobre certo aí você pode pegar aqui o background e colocar uma outra cor aqui só para a gente ver bem claramente eu vou colocar Blue salvei Olha que que acontece quando eu passo o mouse em cima ó já o prazo legal para tirar esse esse essa linha que tem aqui embaixo você tem que colocar uma

propriedade de texto aqui ó a gente ainda não viu vai vir mais vai ver mais para frente que é o text-decoration e a gente coloca como não nenhum não quero nenhuma decoração de texto aí quando eu faço assim ele já vai tirar aquela linha ó olha que legal Zinho já fizemos um botão bem show de bola aqui só usando as propriedades CSS que nós já aprendemos legal bem legal né pessoal bem então pedem serve para isso para a gente fazer o preenchimento interno dentro do nosso elemento beleza vejo você na próxima propriedade na próxima aula

a próxima propriedade que nós vamos aprender pessoal é bem fácil bem simples é a largura EA altura o it e o leite a gente viu isso até no HTML nas aulas ali sobre imagens Mas a gente pode determinar uma largura e uma altura para praticamente qualquer elemento para a gente visualizar isso a gente vai fazer o seguinte vamos ver aqui para nossa outra página e nessa outra página a gente pode criar aqui uma de uma classe que a gente pode chamar de teste só para a gente ter alguma coisa e aqui eu vou especificar um

parágrafo dizendo esta div vai ter 300 pixels de largura por 150 pixels de altura certo então vamos fazer isso vamos ir lá o nosso estilo Vamos colocar aqui uma classe chamada teste né que a gente acabou de criar e eu vou colocar a largura o Edith de 300 pixels e ela e altura de rede 150 pixels bom então eu especifiquei tamanho desse meu elemento para a gente enxergar isso aqui melhor eu vou colocar um fundo Vamos colocar aqui um background o background e aqui eu vou colocar esse azulzinho Claro só pra gente enxergar melhor então

eu especifiquei que esse elemento tem essa largura e essa altura certinho então a o it é pra gente colocar a largura e o rei altura Se eu colocar por exemplo 250 pixels aumentei a altura Se eu colocar sem fixos diminuir a largura e o que tá dentro vai se adaptar essa largura essa altura que a gente determinar o elemento vai ficar com que preso lá dentro né porque eu coloquei essa tag P dentro dessa Diva então ela vai conter dentro desse elemento certo nós temos uma outra propriedade que se é bem interessante e se chama

Max White Max witch a essa propriedade de Max Witch ela especifica Qual é a largura máxima que o elemento pode chegar como se você dissesse o elemento pode crescer até esse determinado tamanho então por exemplo se eu colocar aqui 800 pixels é a largura máxima desse meu elemento olha só que interessante esse alimento chegou até o final se eu diminuir ele você vai ver que ele chegou até o final ele cresceu até o final do tamanho da tela mas se eu esticando a tela até passar de 800 pixels Olha que que vai acontecer ele para

de crescer por assim dizer porque ele atingiu a largura máxima que eu falei que é de 800 pixels mas quando eu diminua a tela olha só que que acontece como altura a largura máxima dele é 800 ele vai se adaptando a tela olha só vendo isso aqui é bem interessante para quando a gente trabalha com dispositivos móveis quando a gente trabalha com celular o tempo coisas com tela pequena para a gente poder fazer elementos responsivos que a gente chama que quando os elementos eles se adaptam ao tamanho aqui da janela a gente vai entender mais

sobre isso com mais propriedade CSS mais para frente mas para você saber que existe esse Max o Edith aqui é uma propriedade bem interessante para você tá trabalhando quando você precisa ter uma limitação do tamanho da largura e também uma adaptação para tamanhos menores da tela beleza na próxima aula nós continuamos vendo as propriedades de texto hoje nessa aula nós vamos aprender aqui a propriedade de texto a verdade existem várias propriedades CSS que envolvem aí os textos né o alinhamento de coração a transformação espaçamento entre outros então para isso nós vamos voltar aqui para nossa

index para nossa página principal eu vou fazer o seguinte aqui na nossa tag P eu vou tirar essa margem esquerda aqui que a gente fez na nossa outra aula vou te dar também essa cor vermelha eu vou colocar aqui Black mesmo para deixar a escuro tá E vou tirar esse essa dívida aqui também que a gente não precisa mais essa parte aqui do exemplo de background só para gente deixar tudo um pouquinho mais limpo para a gente está trabalhando certo aquele esse botão vou colocar mais para baixo dando uns BR aqui mesmo só para pular

mais umas linhas aqui vou colocar se uns quatro BR para baixo Beleza então nós temos aqui o nosso os nossos parágrafos certinho vamos fazer então alguns trabalhos Agora usando a é de texto a primeira propriedade de texto que a gente vai aprender é o text-align o text-align quer dizer alinhamento de texto existem vários tipos então se eu colocar aqui o teste online da dois pontos eu tenho todos esses o Center and just keep left right ba start início e 17 o que a gente mais utiliza é o Center left ou right então só por exemplo

colocar aqui alinhar ao centro Olha o que que vai acontecer Ele é lindo todo meu meu textual centro seria igual a gente tem lá no Word né que a gente escolhe para a esquerda direita centro certo então se eu colocar left à esquerda vai ficar normal a esquerda Se eu colocar o Haiti ele vai ficar alinhado à direita se eu colocar aqui justificado ou justify olha que que vai fazer ele vai fazer aquele que fica quadrado todos os cantos né o justificado como a gente tem também em Word em qualquer tipo de programa de edição

de texto né pessoal Então esse é o alinhamento de texto bem tranquilo né Outra coisa que a gente tem é a questão do direcionamento ou táxi Direction a gente pode fazer assim há por exemplo Direction ó e aqui eu passar que eu quero 10 da direita para esquerda ou seja rtl olha só que que vai acontecer ele vai fazer as letras ficarem invertidas tá certo aqui embaixo e já ficou contrário tá vendo e aqui a gente pode colocar uma outra propriedade que é único bid assim ó como bid over Ride Se eu fizer isso daqui

ó ele ficou tudo ao contrário né Isso é que a gente usa mais para questões assim de idiomas como japonês árabe né que é de trás para frente não é muito nosso caso aqui na língua portuguesa a gente aprendeu lá no HTML que Inclusive a gente tem uma tag específica para fazer isso né então não necessariamente você precisa fazer com CSS mas já que nós estamos aprendendo aqui sobre texto interessante você saber que tem essa opção de fazer a inversão aqui das palavras leve para o padrão vamos ver Arebaba da coisa né e dessa forma

a gente tem também aqui pessoal na questão dos textos outras tags eu vou tirar essa aqui a seguir essa direção aqui ao contrário ficar certinho outra que a gente tem aqui é o text-decoration ou a decoração do texto text-decoration esse text-decoration pessoal a gente usa bastante ele principalmente para questões de links né então Deixa só colocar mais um link aqui ó só para a gente ter mais um link só para mostrar para você só que eu não vou usar essa questão aqui da classe botão certo quando a gente coloca um link você vê que ele

já vem sempre sublinhado dessa forma por padrão certo para resolver isso eu uso text-decoration Então posso colocar aqui um Style direto na minha tag e definir que o meu text-decoration vai ser nome ou nenhuma decoração para esse texto quando eu faço isso aí ele vai tirar aquela linha que aparece aqui embaixo Tranquilo então a gente usa muito esse tecido o nome para links né para gente tirar aquela linha que fica normalmente aqui em baixo vou apagar esse aqui que era só para mostrar esse aqui para vocês rapidinho voltando lá nos nossos parágrafos existem outras propriedades

de text-decoration a gente viu o nome que nenhuma mas teria o overline e quando eu dou overland olha só que que acontece ele coloca uma linha sobre aquilo a gente teria outro kerolayne truth at th assim ó essa é difícil de escrever Line through e ele faz o Riscado né aquele efeito de Riscado em todo o nosso componente do caso aqui como a gente tá colocando no parágrafo ele tá arriscando todos os parágrafos e a gente tem também o underline que é o padrão no caso de links quer vir sublinhado certo então a gente pode

especificar um se vai ser sublinhado ou não se vai ser Riscado ou não se vai ter uma linha em cima com o nosso CSS também gente viu que a gente faz isso com HTML também Consegues específicos para esse tipo de recurso né mas você pode usar com o text-decoration essa propriedade no caso de parágrafo text-decoration se a gente deixa sem nada ele já vem por padrão sem sem nenhum já vai ser o text-decoration online né quando a gente coloca assim sem nada assim um padrão mais o caso do link ele vem com o The full

ou padrão como um sublinhado underline por isso que a gente tem que colocar o text-decoration não para a gente tirar aquele sublinha dia em que fica embaixo no caso e os links outra propriedade de texto que a gente usa bastante é o text Transform text Transform Esse é bem legal pessoal porque a gente usa ele para muitos recursos como por exemplo tudo letra maiúscula tudo letra minúscula ou capitalizar então olha só que que acontece aqui eu tenho meu texto e para o que que acontece se eu colocar o text-transform uppercase upper-case onde eu faço isso

a todas as minhas letras do meu parágrafo ficaram maiúsculas eu determinei o comportamento de transformação naquele texto para letras maiúsculas Se eu colocar lower-case lower-case Olha o que que vai acontecer tudo vai ficar minúsculo E se eu colocar o capitalize o capitalize ele vai deixar a primeira palavra sempre em maiúsculo certo pessoal então isso é um recurso muito legal quando a gente trabalha com CSS para ele fazer isso daqui para nós né Para a gente poder formatar por assim dizer o nosso texto conforme a nossa necessidade então por exemplo será um título e você quer

que seja sempre maiuscu você pode colocar o text-transform e deixar Sempre o per Case porque nesse caso você quer que seu texto esteja sempre maiúsculo certo então text-transform é uma propriedade que a gente usa bastante outra que a gente usa é também a text-indent assim até que se ident isso aqui serve para você recuar a primeira linha de um texto uma quantidade que você especificar aqui então por exemplo colocar 50 pixels olha só que que vai acontecer é Parque ele recuou só o início aqui da primeira linha do meu parágrafo a quantidade que eu colocar

aqui serve fazer aquele efeito de par É mesmo né que a gente pode colocar o text-indent a indentação para ele ficar um pouquinho mais para dentro a gente quiser fazer esse efeitinho de parágrafo Ok outro que a gente tem é o líder spacing ou espaçamento entre letras Então deixa eu tirar esse text-transform aqui e tá tudo maiúsculo né vou deixar assim normal e olha só que interessante eu vou usar o líder traço spacing para mim determinar o espaçamento entre as minhas letras Então vou colocar 5 pixels olha só o que que vai acontecer tá vendo

ele separou uma letra da outra uma distância de 5 pixels olha só que legal isso daqui o líder Space em pessoal a gente pode fazer também com valores negativos para a gente grudar as palavras então se eu colocar menos cinco olha o que que vai acontecer ficou embolada uma letra em cima da outra legal então esse aqui é legal para gente fazer alguns efeitos às vezes nos títulos por exemplo a gente quer fazer um efeito do espaçamento entre as letras Olha só por exemplo nosso título um eu vou colocar aqui ó O que vai ter

o espaçamento de 2 pixels entre elas ou vamos colocar 5 pixels para fazer um efeitinho é o primeiro site com mais afastar Dinho e tal isso é que fica legal mais grudado vou colocar menos um pixels para ficar bem juntinho às vezes até muda um pouco o estilo da fonte né Se eu colocar menos 2 pixels vamos ver como é que fica bem grudadinho você pode fazer alguns efeitos com letter spacing então que é o espaçamento entre as letras outra propriedade que a gente usa bastante principalmente com parágrafos é o espaçamento entre as linhas Então

se a gente quer fazer uma espaçamento entre as linhas de texto A gente pode usar o line-height ao altura da Linha online rei que a gente coloca geralmente em casas decimais então por exemplo 0.8 olha o que que vai acontecer Olhe reduziu ficou bem pertinho um do outro né Se eu colocar 1.8 Olá já separou 3.8 se separou mais ainda tá vendo Então eu posso colocar aqui tamanhos específicos quatro ó e aí eu já tenho aqui os espaçamentos que eu quero beleza esse também é uma outra propriedade que a gente utiliza a gente também pode

utilizar mais um uma questão de texto aqui que é o espaçamento Entre palavras que ao chamado word-spacing eu posso colocar assim World deixa eu sou salvar como é que tá ficar normal aqui ó Word traço spacing E aí eu coloco aqui quantidade que eu quero vamos ver 15 pixels Olha o que que vai acontecer ele fez um espaçamento entre uma palavra e outra de 15 pixels então cada palavra eu vou ter o espaçamento de 15 pixels legal seu word-spacing também A gente pode estar trabalhando com essa propriedade aqui beleza então essas aqui são nossas propriedades

que a gente usa contexto a gente precisa usar Claro com sabedoria cada uma delas mas são bem legais aí para gente E conforme a nossa necessidade e agora pessoal nós vamos aprender a trabalhar com fontes as fontes são com certeza muito importantes em qualquer site porque através de um bom uso de fontes bem escolhidas e a gente pode deixar as nossas letras mas destacados o nosso site com aspecto mais bonito com certeza o estilo da escrita faz muita diferença na hora de do layout final né a gente sabe que o sites já vem com um

padrão essa pontizinha aqui que é a fonte padrão dos navegadores né pode variar mas geralmente é o Arial ou times New Roman uma né conforme a gente tem também em outros programas como o Word de edição de texto e assim por diante geração as pontinhas que já vem prontas né então só para gente exemplo ficar com a gente usa as fontes aqui no nosso código a gente tem as propriedades que tem a ver com um texto e fonte que a Font Family Esse font-family é a família da fonte long o femili e quando você dá

aqui um font-family assim ó família a fonte familiar a família da fonte né alguma coisa em inglês ele já vai mostrar para nós o vs code os tipos de fonte que já são fontes por exemplo consideradas padrão dentro do sistema que vai rodar Praticamente em qualquer É navegador vai ler esse tipo de fonte aqui o que já vem vamos dizer assim de fábrica né então a gente tem Arial ou times New Roman né então por exemplo se eu vou colocar aqui e seu boy ele já vai colocar aqui para mim essa versão dessa fonte se

eu salvar olha só que que vai acontecer Ele já mudou a fonte para esse padrão legal coloquei que a família da fonte vai ser essa daqui eu poderia colocar uma outra aqui ó vou colocar Tumblr salvei Olá já ficou no estilo do câmbio aqui né enfim eu posso trocar aqui para qual quiser vou colocar aqui Areal we are All que é o pastor Ariel é o padrão vamos ver Não não é o padrão não eu acho que o padrão é times New Roman deixa eu ver aqui o areal choveu times New Roman e é esse

aqui que é o padrão mesmo times New Roman né que vem por padrão Zinho então você pode alterar aqui para qual você achar melhor Essas são as que vem por padrão né pessoal então vou deixar aqui esse seguai achei legal Vamos deixar Lucinda São João ver a Lucinda Santos beleza essa é para escolher qual é a fonte agora para eu escolher o tamanho da fonte a gente usa uma outra propriedade aqui que se chama Font size Font size e esse font-size é o tamanho da fonte a gente pode colocar em pixels por exemplo Vamos colocar

20 pixels Olá aumentei o tamanho da fonte 60 pixels o gigantona vou colocar 10 pixels já ficou menorzinho então é bem tranquilo para a gente trabalhar aqui com fontes né agora Como que eu faço para colocar uma fonte que seja externa né Não essas Fontes que já vem padrão quero pegar uma fonte diferente para usar no meu site como que eu faço um recurso que é muito interessante vou até abrir aqui maximizar vou abrir que o Google fonts Google fonte porque você talvez não saiba mais as fontes tem direitos autorais né pessoal então você não

pode pegar qualquer tipo de fonte e usar no seu site porque você pode estar violando direitos autorais mas o Google fonts ele fornece para você Fontes que são livres para você tá utilizando no seu site e isso aqui é bem prático na hora de você trabalhar então por exemplo aqui a gente tem no nosso site aqui o título Meu Primeiro site com CSS né então eu posso escrever aqui em cima ou em Type something' só para eu ver como é que vai ficar meu primeiro site com CSS certo e eu posso dando uma olhada nas

fontes que ele tem aqui vou olhando vou olhando para ver qual que eu acho legal cocô Acho interessante certo vamos supor que eu gostei dessa daqui ó que tá mais grossinho e tal esse ano e clicar aqui nela e aí eu vou selecionar aqui ó selecionar esse estilo select this Style cliquei aqui olha o que que ele vai aparecer aqui ele vai parecer para mim as configurações para mim colocar no meu projeto eu vou pegar aqui ó@Import nessa opção aqui ó rouba importe o conteúdo que tá aqui dentro das tags Style o copiar esse arroba

Import copiei vou vir aqui no meu CSS lá em cima antes do início do meu documento eu vou pedir para importar essa fonte colocando e se importe aqui que ele tá pegando da URL importando essa fonte no meu na minha página CSS aqui e depois para mim chamar essa fonte ó aquele já me explicou a fonte Family que eu tenho que usar é o copia essa font-family aqui vou ver aqui no meu código deixou retornar aqui para minha página a e lá no meu título eu vou colocar aquela font-family ali que eu importei o Font

Family Run Tom seu salvar olá que legal ele já ficou colocar uma fonte no meu site legal então você pode pegar as fontes que você quiser para aplicar aqui no seu projeto tô por exemplo vamos supor que eu quero que toda minha página todo o meu projeto tenha um certo tipo de fonte eu vou pegar uma aqui ó para exemplificar vamos dizer que eu quero que parágrafos né eles tenham esse tipo de fonte aqui que é bem diferente tona vou selecionar esses tio aí você vê que ele já vai adicionar tanto que você tinha perguntas

que é o Anton mais esse daqui que eu acabei de pegar você vai pegar no mesmo Import você pode importar isso só de uma vez não precisa colocar vários em forte aqui porque o Google ele é inteligente e Vai somando as fontes que você quer então coloquei aqui ele tá pegando tanto Anton como esse indico eu peguei aqui windflower e agora eu vou vir aqui no Font Family pegar aqui o índio flower daqui ó e vou colocar aqui no meu parágrafo Deixa eu voltar aqui nossa página só para gente enxergar bem essa alteração ou vem

aqui no parágrafo vou tirar esse mocinho da Sans e vou colocar essa que eu acabei de pegar o in the flower ó já ficou com aquela fonte ali vou mudar aqui para 30 pixels para ficar maior Zinho tua mãe olá que legal show de bola né pessoal então é assim que a gente trabalha com fontes a gente pode importar Fontes que já vem por padrão do sistema ou usando o Google fonts é bem fácil você fazer a importação dele aqui em cima e depois você especifica Qual é a família da fonte que você quer no

component.css que você quer trabalhar a gente usa também o Font size para gente poder de terminar aqui o tamanho da nossa fonte ainda existem algumas outras coisas que a gente pode trabalhar com fontes que é por exemplo font-style a gente pode colocar se a fonte traço Style É nesse ponto está aí a gente pode especificar se vai ser Itálico normal oblíquo então se eu colocar Itálico por exemplo ele vai ficar deitadinho certo normal é o padrão e a gente tem ainda o oblíquo que ele fica um pouquinho diferente um pouquinho também mais inclinar Dinho né

Isso é que a gente não precisa colocar porque normalmente já vêm por padrão já certinho o tamanho outra propriedade que a gente utiliza tamanho não não é o formato vai ficar sempre normal se a gente não colocar sua propriedade outro que a gente usa bastante a fonte é realmente assim ó o w não confunda Rei esse wait com esse daqui né hate é meio parecido em inglês mas é Cuidado esse daqui esse daqui é para gente determinar a grossura da nossa da nossa fonte a gente pode colocar por exemplo aqui olha é grito a gente

pode colocar por aqui que ela vai ser em ficou em lá tá vendo Então não necessariamente você precisa a a a tag de no HTML você pode fazer o seu texto ficar em usando CSS usando esse fonte corrente aqui e colocando a propriedade bold né ou então uma grossura dos que tem aqui ó e a essa fonte eu não sei se tem variação de grossura tem algumas Fontes que elas vêm com variações né os em sendo mais fino para o 900 mais grosso deixa eu ver se essa aqui vai ter eu acho que acha que

não vai ter deixou colocar que eu 700 deixa eu ver e ela tem variação sim ó sem seria o mais fino aí o 200 vai ficando cada vez mais escuro mais grossinho 300 400 500 600 já ficou mais grosso 700 e assim vai né ou você pode usar aqui direto hobold que é para ficar que já vai ficar tudo negritim fica legal também essa também é uma propriedade CSS que a gente utiliza bastante beleza pessoal então é assim que a gente faz para gente colocar uma fonte diferente a gente importa ela pessoalmente do Google fonts

que amar é um lugar onde tem Fontes gratuitas para a gente trabalhar sem ter medo aí de ter problemas o nosso site para usar uma fonte que talvez se tenha direito autoral a gente usou font-size para determinar o tamanho da fonte e o Font Wide aqui para a gente colocar se a se você quer mais grossa mais fina né a grossura Ltda nossas letras beleza hoje nessa aula pessoal nós vamos aprender algo bem legal que a gente fazer variações de botões com links é usando que a gente já aprendeu até agora ou seja fazer a

estilização de links Isso vai ser bem legal porque aí você pode ter ideias variações que você pode fazer no uso de links Beleza então eu vou ir aqui para outra página e aqui nessa outra página eu vou fazer essas variações aqui certo só para gente Poupatempo eu vou tirar isso daqui que a gente fez as outras aulas se eu vou deixar aqui outra página certo e aqui dentro a gente pode fazer alguns links certo então vou fazer assim ó eu vou fazer assim em vários desses links de voltar para a index fazer assim voltar voltar

voltar vários itens aqui do voltar para a index eu vou pular linhas em cada um deles fazer uma quebra de linha para cada um certo vamos fazer assim e a gente vai fazer várias variações de botões Deixa eu pôr as duas linhas para a gente poder ter variações de botões Então vou colocar aqui uma classe chamada botão 1 e depois eu vou fazer o botão U2 Oi e o botão cinco certo vamos fazer cinco variações de links aqui para a gente trabalhar com links Ok então tá beleza vamos fazer o seguinte aqui no nosso estilo.

CSS a gente vai vir aqui e colocar para a gente fazer o primeiro botão quando a gente quer fazer uma classe Com referência a links a gente pode colocar um seletor mais específico seria o a seria referente a link e depois a gente põe a classe colocando. Botão um por exemplo então eu especifiquei que a propriedade CSS só vai funcionar aqui nesse caso se for um link ou seja se for uma tag do tipo ah o link e tiver a classe botão um então só vai acontecer nesse caso então se eu colocasse a classe botão

no outro elemento por exemplo um parágrafo o que eu colocar aqui dentro ele não vai acontecer não vai funcionar porque eu tô determinando que tem que ser um link com essa classe bom então o seletor mais específico certo então vamos fazer aqui um botãozinho bem clássico Esse é o mais clássico que a gente pode fazer tá pessoal e seria colocando aqui um background um fundo de uma cor que você queira Então vou colocar aqui background vou colocar esse Dark Green por exemplo 11 um verde escuro vou colocar a cor dele color White Vou colocar aqui

um pede é de 10 pixels eu vou colocar um text-decoration como nome nenhuma decoração do texto certo ela já ficou um botãozinho bem legal né E vou colocar também aqui pessoal para ele tem uma borda vou colocar uma borda de um pixel sólida e eu vou colocar um Green greenyellow acham uma bordinha um pouquinho mais claro não sei se vai dar para enxergar Vamos colocar um pouquinho mais grossa essa bolinha Olá já ficou efeitinho bem legal vou colocar quatro que dá para enxergar melhor eu fiz um botãozinho eu vou colocar uma bordinha arredondada também porque

eu gosto de botões com um pouquinho arredondado Então border-radius vou colocar 5 pixels já ficou bem legalzinho né pessoal nosso link já demos uma bela estilizada nele mas agora a gente vai fazer o que a gente até viu na uma outra aula rapidinho que é o efeito de que que acontece quando o mouse passa por cima dele então eu posso fazer o seguinte eu posso copiar essas propriedades que eu tenho aqui o copiar só que aqui dentro eu vou passar o que vai acontecer quando estiver sobre que é assim você faz: over quer dizer sobre

quando o mouse passar sobre quando o mouse passa sobre o que que eu quero que aconteça eu vou querer que esse verde fica um verde um pouco mais claro eu vou querer que a minha borda seja um pouco mais escura bom e até que o botão cresça um pouquinho então eu vou colocar o pezinho dele para 12 pixels só para dar um efeitinho text-decoration é igual o resto tudo igual inclusive o que for igual pessoal não preciso nem repetir por exemplo color color vai ser o mesmo que eu já tenho lá então ele vai herdar

essa propriedade não preciso colocar aqui só se fosse diferente tudo que for igual lá não preciso de colocar porque ele já vai herdar Deixa eu tirar aqui só o que eu fiz de diferente o border também não preciso ele já vai herdar essa parte aqui só o que ficou diferente a gente altera aqui salvei olha lá o que que vai acontecer ó eu passei o mouse em cima então ele fez essa alteração ele fez um botão ficar um pouquinho maior porque eu coloquei o pede para ficar de 12 fixo acelera 10 então ele preenche um

pouquinho mais e as cores aqui beleza então esse aqui é um exemplo de um botão que você pode fazer usando CSS Seu botão um Vou dar mais um BR aqui pessoal e para afastar mais um pouquinho do debaixo louca mais dois aqui ó colocar mais dois em cada um para gente enxergar melhor né Beleza então agora no botão dois nós vamos fazer diferente então a ponto botão dois e aqui a gente vai fazer um outro estilo de Botão esse outro estilo de Botão vai ser como eu vou colocar aqui o text-decoration como nome então você

vai ver que é um texto mais ó ele é um texto clicável porque isso aqui é um link certo e aí eu posso fazer com que ele seja a borda ele seja vamos dizer assim invisível com uma gordinha então poderia colocar assim ó um pede de 10 pixels também Oh e vamos colocar uma borda é de um pixel sólida azul eu fiz uma bordinha eu posso colocar a cor dele Color a Blue a cor do texto aqui também ser azul e aí eu vou fazer o seguinte ó quando a pessoa passar o mouse em cima

ele vai fazer o preenchimento então eu fiz um botão vamos ver vazado né poderia até colocar aqui ó no tipo da minha borda que poderia colocar Douglas ou dupla assim ó Show aumentam o tamanho da da grossura vamos ver se vai aparecer aqui dez pixels assim ficou meio exagerado vão ver 5 pixels isso vou deixar assim dessa forma assim né então pra gente fazer um estilo diferente e aí aqui eu posso colocar aqui quando for selecionar o over botão 2 eu vou ver a gente pode fazer com que fique o text-decoration underline que é para

ele ficar com o mouse fazendo aquela linha assim embaixo o pede e a gente pode diminuir um pouco oito fazer o efeito inverso aborda a gente vai tirar só que a gente vai colocar o background agora como Blue o fundo vai ficar azul EA cor do texto vai ser branca White olha lá como é que vai ficar ó e já ficou efeitinho diferente certo legal né pessoal já tá fazendo os botõezinhos com mudanças aqui com a nossa criatividade vamos fazer o botão três o botão três a gente pode fazer o estilo de Botão mas para

menos as vezes que a gente coloca no botão superior então a gente poderia colocar aqui a ponto o botão três a gente poderia colocar a cor dele como sendo Black escura Vamos colocar o text-decoration dele como None é só que o que que a gente vai fazer quando a pessoa colocar o mouse sobre ele a gente fazer um se fosse uma seleção então a gente pode fazer assim a ponto botão três over ou sobre quando ficar sobre o que que vai acontecer a gente vai mudar a cor dele para vermelho the color red e a

gente pode colocar aqui uma borda na parte de baixo border-bottom de 3 pixels sólida escura Black um ver como é que vai ficar isso aqui ó passei o mouse em cima ó e ficou assim eu fizemos o link Zinho diferente também de terminamos o comportamento dele ou a gente poderia fazer ele continuar escuro e aqui embaixo essa borda que vai ficar embaixo e a gente poderia colocar lá mais grossinha e colocar ela se vermelha né vamos ver como é que fica ó e fica um efeitinho também beleza é ótimo mas um botãozinho o nosso botão

quatro a gente pode trabalhar com questões de fontes e também o estilo dela né então a gente poderia colocar um text-decoration como None a cor dela o Collor a gente poderia colocar como Blue ou azul e quando a gente passar o mouse em cima a gente pode fazer o seguinte então não a botão quatro over a gente pode fazer com que o tamanho da fonte aumentar o que a gente poderia fazer nesse daqui na o Font size dele cd14 pixels como aumentar um pouquinho aqui vamos colocar 18 pixels e quando passar o mouse em cima

o tamanho da fonte dele vai para 22 pixels e a gente vai colocar que a grossura da fonte também ó ponte page e vai ser bom Então olha só que que vai acontecer passe o mouse em cima eu fiz um outro efeito né então a gente tem que botõezinhos a gente tem aqui alguns defeitinhos que a gente está fazendo beleza ó a e nesse último botão eu quero mostrar para vocês uma questão que a gente tem que é de mudança de cursor não é quando a gente coloca o mouse em cima de qualquer link ele

vai ficar com esse efeitinho de de curso e se eu quiser mudar isso então isso é bem simples gente pode fazer assim a ponto botão 5 e aqui a gente pode passar uma propriedade chamada assim cursor dentro desse cor só quando você coloca aqui ele tem vários estilos de cursor que você pode escolher por exemplo se eu colocar assim o cursor como sendo nome Olha que que vai acontecer embora seja um link ou quando eu passo o mouse aqui em cima olha só até desaparece o meu mouse ó tá vendo fica só essa bolinha aqui

a amarelinha porque é o programinha que eu tô usando para destacar meu mouse certo mais o curso ele some ou se eu colocar aqui um outro Vou colocar aqui o text quer o cursor de texto quando passa o mouse em cima ó repara que ele abre o teste se eu colocar aqui um outro Bom dia aguardando quando passo o mouse em cima olha só que que vai acontecer ele vai mostrar que o padrão do meu mouse de carregando Olha que interessante Então eu posso mudar o tipo do mouse que eu vou querer que aparece aqui

com o efeito que eu quero por exemplo de ajuda tem aqui help deixou achar aqui help te ajudo E aí já vai dar aquele. De interrogação tá vendo Então eu posso de terminar aqui o comportamento do curso e aí né pessoal a criatividade é o limite para para o que você quer usar aqui né dentro dos seus links você vai ter que montar a estrutura do seu link da forma que eu vou se achar melhor né como você acha que fica bonito de acordo com a sua necessidade então tem diversos tipos de mim que você

pode trabalhar pelo menos para botões E aí conforme as combinações que você for fazendo aqui você pode criando é claro que esse esses daqui que a gente fez são bem simples não é nada muito elaborado mas à medida que a gente for criando sites aí você vai adquirindo mais ideias não é com template para botões que você pode usar usando algumas propriedades CSS que a gente pode fazer aqui beleza então nessa aula a gente vê um pouquinho aqui da estilização de links usando aqui o o ver né e fazendo alterações aqui no nosso CSS para

a gente ter efeitos diferentes eu vejo você na próxima aula e a propriedade display ela é uma das mais importantes do CSS para controlar controlar o nosso layout propriedade de spray ao específica se ou como um elemento ele vai ser exibido cada elemento HTML que a gente tem dentro do nosso código ele já tem um valor de exibição padrão né um valor de display por padrão de acordo com um elemento que ele é se ele vai por exemplo o pato da tela ou se ele vai ficar um do lado do outro o tipo de comportamento

que ele vai ter diante da tela e esse valor padrão ele é exibido através da sua propriedade display que a gente vai estudar agora no CSS você vai entender mais claramente esse conceito agora com a explicação quando você entendeu os tipos de display que a gente tem então vou fazer o seguinte eu vou limpar aqui toda a minha página aqui index tá uns tirar todo esse conteúdo aqui e vamos limpar vamos dar uma organizada aqui no nosso projetinho para que a gente possa entender esse ponto do display que é um pouco mais complexo eu vou

apagar tudo esse CSS nosso aqui para gente conseguir entender o conceito aqui do display o primeiro tipo de display que a gente tem é o display do tipo bloco quer dizer um display do tipo bloco ele começa no início da linha e vai ocupar Todo o espaço da minha página ele vai se tornar um bloco completo na página então por exemplo se eu colocar aqui ó uma div coloquei uma div e aqui eu vou pedir para colocar aqui um estilo nela colocando uma borda de um pixel sólida a vermelha certo olha só que que vai

acontecer já apareceu aqui para nós tá vendo ocupando toda a minha página tá vendo ela pegou do início até o fim porque a tag do tipo div ela vem por padrão com o display do tipo bloco outra tag que vem com display do tipo bloco é a tag de título do H1 até o h-6 então se eu colocasse o meu primeiro CSS certo e eu colocar aqui para fazer a mesma coisa vou colocar um estilo incorporado aqui ó quê que vocês vão perceber e o reparo aqui o meu elemento ele tá pegando tudo a extensão

da minha página tá vendo ela daqui do início até do final então isso aqui é um bloco por exemplo se eu colocar mais um H1 ele vai aparecer embaixo desse outro H1 mesmo se eu não der uma quebra de linha porque ele entende que é outro bloco tá vendo ele entendeu que é um bloco separado então algumas tags Elas têm um comportamento padrão de bloco seria as divs os títulos 1 até o 6 h um até o h-6 os parágrafos então se eu fizer aqui um parágrafo vou fazer aqui um Loren né um pelore se

eu for lá no início desse meu parágrafo e colocar também para ele ter mesmo estilo com borda a gente inclusive poderia fazer uma classe aqui para facilitar né vou fazer assim ó borda e vou colocar aqui borda de um pixel só Lisa vermelha Oi e aí em todo lugar que eu quero ter a Bordo agora em vez de fazer assim eu vou fazer a seguinte forma vou colocar aqui ó a classe borda fica muito mais simples do que eu tenho que digitar isso toda vez né A gente só faz uma vez lá na nossa classe

e já fica tudo certo vou colocar aqui também no parágrafo só é par então que esses elementos eles são os elementos do display do tipo bloco ou display Block que a gente chama que ele vai ocupar toda a extensão aqui do meu código além da tag P das dívidas dos títulos a gente ainda tem algumas classes que vem por padrão com esse display do tipo bloco que seria a tag form the formulário também a reader affuter e as Action a beleza todos ficaram aqui na mesma posição mas todas estão pegando a extensão total da minha

página Esse é o display do tipo bloco agora para vocês entenderem a diferença eu vou mostrar agora o display do tipo inline que seria o display em linha o display inline é quando você tem um elemento que ele não inicia numa nova linha nem ocupa toda a extensão da nossa página mas simplesmente a extensão na mesma linha de acordo com a largura que você for precisar exemplo disso é a tag do tipo a a tag do tipo ah eu colocar um a HF aqui ó vou botar assim joguinho da velha para não apontar para mim

uma página e colocar meu link aqui e você vai ver que ele vai colocar aqui ó meu link aqui agora se eu colocar mais uma tag de tipo ah olha o que que vai acontecer outro link aqui ó tá vendo que ela não pulou uma linha ela não ficou na linha de baixo porque porque ela está Ela tem o display do tipo inline ou seja na mesma linha Se eu colocar aqui a mesma classe ali ó classe borda você vai ver que o que ela vai ocupar é só o espaço exatamente do que tá dentro

dela no que está contido dentro dela na mesma linha certo ó lá tá vendo e conseguiu compreender deixou afastar um pouquinho vou dar dois BR saque só para vocês enxergar esse melhor Ó o tamanho dela vai ficar exatamente o tamanho do que tá dentro dela do conteúdo dela e ela não vai quebrar uma linha ela vai ficar tudo na mesma linha tudo que forem online vai seguir com a mesma linha isso acontece por exemplo dentro de uma tag spam por exemplo se eu quisesse um parágrafo um parágrafo é um bloco né então eu poder falar

assim aqui um exemplo de parágrafo Beleza o parágrafo só um bloco mas se dentro aqui do parágrafo eu colocasse assim ó exemplo de um spam um exemplo de esse aqui é uma tag do tipo de display online Então olha que que vai acontecer ele pegou o conteúdo na mesma linha e só preencheu Aquela quantidade de espaço necessário Então essa diferença de uma tag HTML que já vem com padrão display bloco e o display do tipo inline certo Quais que são do tipo inline quer dizer que fica um do lado do outro seria o spam o

link e as imagens as imagens também ficam uma do ladinho da outra elas também ficam em linha certo beleza entendido esse conceito agora a gente vai entender algumas coisinhas de como a gente usa essa propriedade lá no CSS deixa eu limpar tudo isso daqui essa bagunça e agora eu quero mostrar para vocês o seguinte vamos supor que eu tenho aqui um título um certo um título um meu primeiro CSS clássico é que a gente já fez Vou colocar aqui a borda usando a classe borda só para gente enxergar bem ele é do tipo bloco certo

e vou colocar aqui também um parágrafo a Glory Ah e ele também é do tipo bloco a Croácia a borda aqui só para a gente dar o styling da bolinha só para gente enxergar bem ok então tenho dois tipos de bloco aqui eu posso determinar por exemplo que essa minha tag p o tipo de display que eu quero usar ela não vai ser em bloco vai ser em linha aí olha só que que vai acontecer até colocar mais uma tag pedir para vocês enxergarem isso melhor e essa outra aqui eu não vou usar Lauren eu

vou escrever aqui alguma coisa assim é a chata vou colocar bastante assim só para vocês verem Ah beleza então em blocos beleza tudo certinho agora olha o que que acontece o display padrão de um parágrafo é o display do tipo bloco assim a display Block que ele vai fazer ele ficar na tela inteira agora se eu mudar esse display Block do parágrafo para inline quer dizer na mesma linha olha só o que que vai acontecer salvei observa aqui ele não deu aquela quebra agora ficou tudo na sequência um do lado do outro esse primeiro parágrafo

ele terminou aqui e o outro já continua aqui embaixo junto dele entendeu Se eu fosse fazer isso lá no meu título olha só que que acontecer display-inline eu tô mudando o tipo do display que ela padrão seria bloco e eu tô mudando para ir em linha Olha o que que vai acontecer vou dar um controle se percebeu como o nosso parágrafo também tá em linha e o nosso título também tá em linha ele continua a sequência como se tivesse Seguindo aqui ele não pegou toda a extensão da tela toda a minha tela não fez um

bloquinho na tela ele fez como se fosse uma sequência pegando o conteúdo dele exatamente o tamanho que ele tem de conteúdo em texto aqui e assim foi seguindo a chegou até aqui depois continua com a xaxá e assim foi inclusive fez uma barrinha de rolagem para cá por causa do tamanho do nosso texto Então esse tipo de display inline e o display Block essa diferença de um para o outro certa agora a gente pode ser que queria gostaria de pegar um elemento e esconder ele no nosso o nosso não aparecer aqui no nosso layout né

então por exemplo assim ó esse nosso primeiro parágrafo bom deixa eu voltar aqui para o padrão vou tirar aqui não deixar nenhuma propriedade no parágrafo só a borda que a gente já deixou a classe lá nesse primeiro parágrafo vamos imaginar que eu não quero que ele apareça no meu código ele até vai estar o HTML aqui vai ter as coisas escritas Mas eu não quero que ele apareça no na minha página o que que eu poderia fazer poderia comentar isso daqui como a gente aprendeu na aula de HTML só que daí o código não vai

está ativo se eu fizer assim ou salvar eu comentei ele realmente não vai ler mas navegador não tá lendo isso aqui porque esse meu código não está ativo mas se eu quiser que ele fica ativo mas não apareça o que que eu faço eu posso usar uma propriedade chamada display nome então vou dar aqui um Eyed Peas vou chamar assim de parágrafo um tá coloquei batizei com a ide e aqui no meu seletor eu vou fazer o seguinte eu vou dizer que o meu P1 eu parágrafo ele vai ter o display como nome nenhum display

nenhum eu não é triste parágrafo aqui só dá um contra Oeste olha só que que acontece sumiu o parágrafo não foi mostrando legal E aí se eu coloco o display Block Por exemplo agora ele apareceria novamente certo para que que a gente usa isso pessoal essa propriedade display Block e display None a gente usa isso quando a gente quer durante a construção do nosso site e eventos dinâmicos faço aparecer ou desaparecer elementos na nossa tela depois quando a gente aprender já o script a gente vai ver que por exemplo no clique de um botão a

gente pode disparar um evento o evento poderia ser o nosso é parágrafo tem um tá mostrando quando eu clicasse no botão eu fizesse ele desaparecer não quer desaparecer assim ó Tá certo só para vocês entender esse conceito vai dar uma bugada muito louca aqui mas vamos fazer um teste aqui para vocês verem eu vou fazer o seguinte eu vou pegar esse meu P1 e vou fazer quando o mouse for sobre ele sobre ele que que é para fazer eu vou falar que é para dar um display non eu quando eu passar com o mouse sobre

ele é para ele desaparecer olha só o que que vai acontecer ó desapareceu porque eu passei o mouse sobre ele ser tiro ó apareceu de novo ok desapareceu tirei apareceu Ele dá uma bugada porque cada vez que eu mexo o mouse dentro do elemento ele ele está verificando que tá tá mexendo tá sobre né Aí ele fica dando essa aplicadinha ali ó mas para entender o conceito sobre ó tô fazendo desaparecer o elemento ali Beleza então display sendo mostrado não mostrar no display None Will display sendo mostrado Block né Tá professor de mente mais e

na prática o que como é que a gente usa a questão do display Block do online do noni né como que a gente trabalha com isso aí na prática para que que a gente usa isso daí é só tava mostrando esses conceitos para você entender o funcionamento dos tipos de layout aqui nós vamos fazer o seguinte pessoal para nós entendermos bem esse conceito eu sei que ele não é tão fácil de entender de primeira mas nós vamos fazer o seguinte nós vamos fazer uma lista e dentro dessa lista nós vamos ter uma lista desordenada com

seguintes itens primeiro item o segundo item e terceiro item Oi beleza Como você pode perceber aqui ó esse tipo de conteúdo 1 l ou l ele tem que tipo de propriedade por padrão pelo que você entendeu Aí do tipo de display que existe se você respondeu Block o bloco você acertou porque ele tá pegando bloquinho Só se eu colocasse aqui só pra gente poder enxergar aqui ó a classe borda Olha só vou colocar aqui no l a classe borda tá pegando o bloco completo Se eu colocasse em cada ele ó o olá ele tá indo

até o final ele tá pegando cada um desse é como se fosse um bloquinho O Hélio é um bloco e o ele é um bloco certo mas e se eu quisesse que essa listinha aqui ficasse uma do lado da outra e não uma embaixo da outra como se fosse bloquinhos como que eu poderia fazer Oi ó eu posso fazer o seguinte eu posso vir aqui no meu CSS coloca aqui o seletor l e eu vou dizer que o display dele é inline o Ou seja que é um do lado do outro olha só que legal

quando eu coloco display-inline ele vai ficar um do lado do outro e não mais no estilo como ele tava antes em bloco um em cima do outro se eu coloco inline um do lado do outro compreende eu poderia inclusive colocar umas coisinhas aqui né Eu Vou Chamar esse primeiro aqui eu vou colocar classe Azul a segunda vou colocar a classe vermelho e a terceira a classe Verde vamos fazer essas classes aqui então Vamos colocar aqui azul o background Blue e como fazer vermelho o AD e vamos fazer é é verde né que é background Green

E aí e não é vermelho fiz aqui a e fiz Red o segundo olha só que misturava a beleza é mais curte mesmo então Observe o seguinte Agora eu tenho uma do lado da outra tem o vermelho ou azul vermelho verde certo mas eles têm um espaçamento aqui entre um e outro porque será né que eu tenho esse espaçamento entre um e outro se eu não coloquei nenhum tipo de Margem ela pode reparar não tem nenhum tipo de Margem a direita para cada item ó e aqui ainda aparece aqui um como se fosse assim um

espaço entre Um item e outro por que que será que isso acontece bom isso acontece pessoal porque quando a gente transforma um elemento em display-inline ele entende que o conteúdo dele passa se tornar como se fosse palavras isso aqui tem o comportamento como se fosse palavras então por exemplo lá no meu primeiro título no título um eu escrevo assim né ó é meu primeiro CSS ta observando aqui ó meu primeiro CSS cada uma dessas palavras tem como se fosse um espaçamento entre elas e ele faz isso por padrão então se eu fizesse assim o meu

primeiro CSS e salvar se assim ó ó ia dar no mesmo porque porque ele ia entender que tem o espaçamento entre palavras certo agora se eu colocasse tudo grudado aqui um um grudado no outro como é tudo na mesma linha e ele obviamente entender que isso é uma palavra só e não ia dar o espaço acontece a mesma coisa quando um elemento ali se torna do tipo online ele tá entendendo que cada ele desse daqui é como se tivesse Tornado uma palavra então quando como eu tenho um primeiro ali aqui o segundo a linha aqui

o terceiro ali ele está dando esse espaçamento entre um e outro como se cada um fosse uma palavra agora olha que curioso se eu pegar esse primeiro ali recortar ele colocar exatamente do ladinho onde acaba o outro Ó coloquei exatamente do ladinho vou fazer a mesma coisa aqui com esse copiei e eu quero colocar exatamente aqui do ladinho Olha o que que vai acontecer e é que o a ele não vai permitir isso né pessoal porque o editor que eu tô usando ele já tenta fazer a formatação já bonitinha das nossas tags ele não tá

permitindo ele já vai fazer a quebra de mim automático teria que desativar o modo aqui de deixa eu desativar só para mostrar para vocês aqui nas minhas preferências e eu vou desativar para ele formatar que eu vou tirar esses esses dois itens aqui ó o pão bom tirar esses dois itens deixa eu colocar eles aqui no bloco de notas Notepad só para depois recolocar eles aqui a beleza vou salvar esse aqui só para ele não atualizar o nosso código assim que eu mexer o que que eu vou fazer vou pegar esse l i vou colocar

Exatamente do lado da onde outro ali acabou e vou pegar esse terceiro ali aqui ó eu vou colocar Exatamente do lado da onde Aquele outro acabou Olha o que que vai acontecer vou a lá parece até uma mágica ele tirou aquela margem porque ele tá entendendo que tudo isso daqui ó tá na mesma linha e é uma palavra só é como se elencar as cada um como se fosse uma palavra tá entendendo é assim que o comportamento do display inline ele faz ele vai pegar exatamente o conteúdo do que está dentro daquele elemento dele não

sei se você conseguiu compreender é mas vamos supor que eu quisesse fazer assim um do ladinho do outro mas se cada um também tivesse um comportamento como se fosse de bloco mais um do lado do outro eu quero que seja um meio termo entre um bloco e um do lado do outro como que eu faria isso porque ela se eu quisesse aqui não tivesse margem aqui o ficar são do lado do outro eu tenho um problema porque eu teria que fazer sempre assim grudadinho como se fosse palavras né E outra coisa olha só que interessante

no display do tipo online não importa se eu colocar uma largura ou uma altura ele não vai me obedecer por exemplo se eu colocar aquela largura eu quero que cada Élida esse tenha vamos supor 33% do tamanho da minha tela e nenhum salvar olha lá não aconteceu absolutamente nada se eu colocar aqui que altura eu quero que tenha 150 pixels Olha o que que vai acontecer absolutamente nada porque esse tipo de display do tipo em linha ele entende que ele vai ficar tudo a linha e o que vai determinar a largura dele é o conteúdo

que tá aqui dentro então pelo conteúdo que ele tem aqui é o que ele vai mostrar para pessoa mas e se eu quisesse que fosse tudo na mesma linha por exemplo na tudo um do lado do outro que nem aqui mas eu quisesse que ele obedecesse essa questão de largura e altura bom essa largura aí essa altura a um único componente que obedece é o uso do tipo bloco então por exemplo assim o nosso título um aqui o meu H1 E se eu quiser que eu H1 colocando a por exemplo a altura dele de 150

pixels online me obedece tá vendo ali ó ele é Aumentou a altura altura dele aqui mas já o tipo inline não Ele não me obedece Então como é que eu faço para ter um meio termo entre os dois Aí surge um tipo de display diferente que a mistura entre os dois que é o display do tipo inline-block que é a mistura do inline com o bloco quer dizer ele vai ficar em linha um do lado do outro mas o comportamento dele também vai ser como se fosse de bloco agora olha o que que vai acontecer

quando eu quando eu salvar E olha que legal pessoal ficou um do lado do outro mas herdando essa característica do inline quer ficar um do lado do outro mas agora ele também herdou uma característica do bloco que é de você poderá especificar a largura EA altura assim eu tenho um componente do lado do outro legal isso é muito útil pessoal quando a gente vai fazer os nossos layouts as nossas dívidas né Por exemplo vamos Apagar tudo isso aqui é só para gente explicar como é que funciona esse display primeira vez que você escuta eu sei

pessoal dar uma bugada na mente mas depois conforme você vai exercitando e vai precisando dos componentes na prática você vai entendendo certo a gente viu na aula lá de html que a gente usa as dívidas para fazer as divisórias do nosso conteúdo né a gente viu isso na nossa última aula de HTML Então imagina que eu fosse te três dias tá eu vou colocar aqui uma div daí eu voltei aqui embaixo outra E aí ó e aqui embaixo outra div cada uma divisória certo e eu vou colocar aqui ó o seguinte nessa primeira diva eu

vou colocar ela como sendo a a classe dela azul já que a gente já fez né as coisinhas Azul essa que vai ser rede e essa daqui vai ser verde que mistureba né português com inglês certo então uma vai ser azul uma vai ser verde outra vai ser vermelho não apareceu nada ali porque eu eu apaguei mas é que coisa rapaziada acabei apagando deixa eu dar um controle aqui pelo menos deixasse a questão da borda das cores aqui só vou apagar esses aqui de baixo então já salvei a continuar as bordas ali só que eu

preciso ter um conteúdo Dinho aqui então vou colocar conteúdo e aqui eu vou também colocar conteúdo e conteúdo certo olha o que que acontece eu tenho três dias mas essas dívidas ela se comporta em blocos Mas vamos supor que eu quisesse dividir metal é minha tela em três partes assim um do lado do outro não daria para fazer assim bloco ela porque em bloco ele vai ficar um em cima do outro vai tá pegando a extensão toda certo eu poderia até especificar aqui por exemplo ó eu posso dizer assim a casa de Ive só vai

ter uma largura mais de trinta e três por cento bom e que altura dela e vai ser de a 150 pixels certo lá beleza ficou assim só que ficou um em cima do outro eu quero que cada um tenha 33% da tela eu queria que ficasse com um do lado do outro não vai funcionar porque porque o display padrão da telha do tipo de é bloco então quê que eu vou fazer eu vou colocar aqui um display como inline-block que eu quero que seja tudo na mesma linha mas mantém essas características de bloco olha só

o que que vai acontecer beleza ficou assim não deu certo pessoal ó porque por causa do tamanho da minha tela está muito pequenininha não tinha dado o tamanho de 33% aqui certinho agora se eu faço assim eu creio só minha tela já ficou certinho assim é o Max já cada um vai ocupar 33% posso diminuir assim que já del tamanho ali ele vai pular para baixo se o comportamento normal tá padrão eu votasse um pouquinho menor Vinte por cento aí não ia ter problema e por cento beleza E aí ele acompanhando Ah entendeu então essa

questão do display inline-block que a gente utiliza então para você entender as diferenças entre os tipos de display e também se a gente quisesse de repente fazer algum elemento desaparecer por exemplo o nosso título um lá a gente poderia usar aquela o display como sendo ryden né se eu quero fazer desaparecer essas minhas divas eu coloco aqui vida e não não única nenhum E aí ele vai desaparecer certo tem um detalhe também bem interessante o pessoal confunde é sobre essa questão de desaparecer um elemento eu tenho três elementos aqui né vamos dizer que eu quero

que esse do meio ele desapareça então poderia vir aqui nesse que é do meio aqui o head vou colocar um estilo direto na pele aqui e vou falar que o display dele vai ser nome tá eu quero que ele desapareça o que que vai acontecer como ele sumiu eu arranquei aquele elemento o verde que tava aqui no canto ele colou aqui no azul certo então eu realmente removi por assim dizer com CSS aquele elemento daquele lugar não existe mais ele não vai aparecer mais ali como se ele tivesse sido removido Mas e se eu quisesse

fazer ele ficar oculto quer dizer ele desaparecer mas o elemento ainda tá ali aí a gente poderia usar aqui uma outra tag CSS que se chama visibility a visibilidade e aqui a gente pode colocar idem quer oculta Se eu colocar a visibilidade oculta Olha o que que vai acontecer não tá aparecendo o meu elemento aqui mas ele tá que ele só não tá sendo mostrado mas ele tá aqui ele tá ocupando aquele espaço da onde ele tava certo então também é só uma diferença do da visibilidade Idem para o display como sendo None display Não

beleza então esses são alguns conceitos aqui sobre essa propriedade display pessoal dá uma assistida novamente nessa aula lembra dos padrões que ela tem porque geralmente quando o nosso layout fica bagunçado e a gente não entendi porque que o componente está lá embaixo enquanto ele deveria estar na mesma linha ou por que que ele não obedece as a gente fica louco quer ver alguma coisa que a gente fica louco a mostrar para vocês quando a gente é iniciante eu vou colocar o link HF vou chamar aqui de botão o botão não é que eu não vai

para página nenhuma ouço fazer aqui uma classe chamada botão e vou falar que aqui fazer aqui um botão Beleza então coloquei lá o nosso botão como a gente tava usando aqui o ylai Não repara que que aconteceu ela ficou lá na continuação lá em cima né então eu poderia colocar mais para baixo isso daqui isso tudo a gente poderia colocar dentro de uma div que fosse um bloco Então posso colocar aqui ó só que daí como todos estão em online né pessoal esse aqui vamos Forçar ela ficar com o bloco mesmo colocando direto na tag

aqui que ela é do tipo bloco Tali Block o display Block Oi e a largura dela Vamos colocar aqui como 100% né para ficar certinho aqui a beleza certinho para nosso botão ficar lá embaixo a gente não tem que ficar ajustando muito nosso layout aqui OK agora vamos supor que eu quero colocar aqui ó eu vou colocar aqui que a classe além de Botão vou colocar borda que é aquela que deixa vermelha né já deixamos com uma borda e eu quero que esse botão eu tenho 11 tamanho então eu vou lá todo felizão vou fazer

assim botão vou fazer minha classe botão se acontece muito que é iniciante né vou lá me até de Botão vou até botar o seletor aqui a botão e eu quero que a largura desse meu botão Edit seja de cinquenta por cento porque eu quero que esse botão tem a metade do tamanho da minha tela eu vou lá salvar e e não acontece absolutamente nada só observo não aconteceu absolutamente nada eu fico mais ué como é que pode eu coloquei aqui qualquer a largura não me obedeceu a daí eu quero fazer com que a margem se

afaste do de cima vou fazer assim margem I Left left Top né Para a gente afastar eu vou querer que seja 100 pixels afastado do de cima da um salvar aqui e Ué não aconteceu nada que estranho aí você vai lá olha classe botão botão aqui um lá tá tudo certo ele não tá me obedecendo Porque será que não funciona eu quero que esse botão ele tenha uma altura de sei lá 50 pixels e nada funciona Porque será que nada funciona pessoal tem algum palpite porque que não tá dando certo porque que não tá funcionando

porque a tag do tipo ah ela tem o display do tipo inline e o display do tipo online ele só aceita o tamanho do conteúdo exatamente de acordo com o que tá aqui dentro do conteúdo por isso se a gente passar um predinho aqui que é um preenchimento ele vai aceitar por exemplo porque ele está preenchendo a 40 agora preencheu ele aceitou isso Beleza mas a largura alto bom então nem margem ele também não aceitou então se eu quisesse que isso daqui funcionasse o que que eu teria que fazer que que você acha se você

pensou em colocar um display como sendo inline-block você acertou olha só que que vai acontecer agora ele teve o comportamento que eu queria percebeu ele teve a largura de cinquenta por cento a altura de 50 pixels ele deu uma margem de 100 pixels da parte de cima me obedeceu e ainda ficou em linha ok Porque eu misturei o em linha com o bloco e agora o texto ele ficou é como se fosse assim grudado na parte de cima agora eu poderia começou aqui para ele é uma mistura de inline com bloco o inline a gente

sabe que ele trata como palavra poderia colocar o alinhamento do texto e ele vai me obedecer eu por exemplo text-align Center Oi e aí o meu alinhamento do texto ficou certinho então só para você entender porque às vezes você quer trabalhar com elemento e ele parece que não te obedece porque pode ser que ele seja no display tipo inline ou do tipo bloco E aí de acordo com que ele for vai acontecer o resultado ou não certinho não se esquenta tá pessoal isso aqui é só para a gente ter uma noção uma ideia sobre a

propriedade entendeu os comportamentos que a gente está conhecendo entendendo quando a gente for fazer projetos reais a gente tiver necessidades aí a gente vai falar uma Lembra daquela aula que a gente viu lá sobre o display Então nesse caso aqui a gente vai precisar aplicar aquela propriedade gente vai explicar para você mas por bem Beleza só para dar uma visão geral que dessa propriedade que é importantíssima a propriedade display hoje nessa aula pessoal nós vamos entender o conceito da propriedade Max diet de uma forma mais clara agora que você entendeu Como funciona o comportamento da

propriedade Display da última aula a gente já teve né uma aula ali a propriedade o it hate sobre largura e altura onde a gente explicou mais ou menos o funcionamento do Maxxi Edite para que ele serve Mas agora você vai entender de uma forma mais completa você vai ter o entendimento mais certinho dessa propriedade certo eu vou apagar esse conteúdo que a gente fez na última aula vou tirar esse daqui tirei paguei e aqui eu vou tirar também a esse nosso tira todo esse nosso conteúdo aqui a gente não precisa certa eu vou fazer o

seguinte eu vou colocar aqui uma div eu vou chamar ela de vou colocar uma classe chamada exemplo um certo dentro dessa diva eu vou colocar aqui conteúdo com 600 pixels de largura E aí o ok Na verdade eu vou colocar maior eu vou colocar 800 pixels de largura então conteúdo 800 pixels de largura e vou fazer mais um mas div vou até colocar um espaço aqui com br mesmo para quebrar um ali vou colocar que exemplo 2 um conteúdo com 600 pixels de largura certo o que que acontece pessoal como a gente viu na aula

passada quando a gente tem uma tag do tipo div ela é do tipo bloco então se eu colocar aqui uma bordinha Vou colocar aqui a colocar direto aqui na nossa a tag incorporada mesmo só para gente verificar né só para gente ver lembra disso um pixel sólida vermelha lá e eu vou fazer a mesma coisa aqui com a nossa segunda é um pixel sólida vou colocar azul com roxo aqui tem problema então eu tenho um azul roxo ali e um vermelho certo ambas com 800 pixels de largura escrevi isso no conteúdo mas ela não tem

800 pixels de largura por enquanto ela tá pegando ocupação total da minha tela 100% porque esse é o padrão de qualquer tag no tipo de e vi que tem o display como bloco ele vai pegar o tamanho da tela Total tanto que se eu pegar aqui e redimensionar minha tela ele fica adaptado a minha tela certo mas pode ser que eu tenho que especificar um tamanho fixo disso certo eu vou especificar que o tamanho é de ouço por 800 pixels Como eu disse ele então quê que acontece se eu vim aqui fazer a classe exemplo

um e eu determinar que a largura dela é de 800 pixels e olha o que que vai acontecer repara só lá embaixo ele vai fazer uma barra de rolagem porque eu determinei que o tamanho dessa desse meu elemento é de 800 Então como a minha tela tá reduzida ela tem bem menos de 800 pixels aqui então ele acaba tendo que criar uma barra de rolagem para mim poder ir acompanhando o site que tá mais para o lado olha só a largura dele tá maior do que a largura da minha tela certo o ok tranquilo eu

vou fazer agora o exemplo 2 também ter aqui 800 pixels mesma coisa exemplo 2 800 pixels estão os dois têm a mesma largura tanto que se eu maximizar aqui ó agora ficar com a tela maior você vê que ele tem a tua mãe de 800 pixels essa minha tela tem 1920 de largura Então chegou no 800 mais ou menos na metade aqui ele parou que a gente determinou esse tamanho esse comportamento Ok Isso não tem problema quando a gente tem uma tela grande assim ela funciona belezinha o site ia ficar bem certinho estruturado e tal

mas vamos ver que esse site fosse rodado no celular que tem a telinha menor o que que aconteceu ele e Abrir barra de rolagem para pessoa poder ver o conteúdo a ter que rolar para o lado e isso não é muito legal para dispositivos móveis né pessoal não fica interessante nosso site não fica responsivo que a gente chama Oi e aí que começa os problemas né então como é que eu faço para isso se adaptar a minha tela tendo uma largura máxima que eu determinar é com a propriedade Maximo Elite quando eu determina que o

Max evite vai ser de 800 pixels eu tô falando que no máximo ele vai ter esse tamanho Então olha só que interessante ele continua chegando até 800 pixels Qual tamanho máximo é o tamanho aqui quando eu tô com a tela aberta maior mas conforme eu vou diminuindo o tamanho da tela tá maior vou diminuindo o tamanho da tela o reparo que que vai acontecer Olha lá reparo que vai acontecer no meu bloco ele vai diminuindo Sérgio estando a minha tela conforme a necessidade porque ele entendeu que o máximo que eu posso ter 800 pixels até

aqui eu tenho 800 pixels não não tem 800 pixels então eu vou parar por aqui agora quando eu chegar no 800 pixels ele vai crescendo crescendo crescendo chegou 800 ele parou e quando eu vou diminuindo ele vai se adaptando bom então quando eu faço assim usando o Max Edith eu não vou ter barra de rolagem eu posso determinar um comportamento máximo que eu posso ter pro meu elemento ó vou tirar aqui vou deixar os dois com Max Judite Olha a barra de rolagem não tem mais tá vendo não existe mais essa barra de rolagem agora

conforme eu vou aumentando aqui ó quando chegou em 800 ele parou olha só que legal pessoal olha só que interessante Então essa propriedade de maxilit ela é importante para a gente ter os nossos sites responsivos Principalmente quando a gente lida com imagens então só para você entender aí a diferença do Buriti e do Max Edith Agora vai ficar mais fácil de você compreender porque na aula passada você entendeu o conceito do display do tipo bloco que é o caso das nossas dívidas aqui que a gente trabalha e agora pessoal nós vamos aprender a propriedade position

ou posicionamento né que uma propriedade que diz respeito a como elemento vai se comportar no fluxo da nossa página essa propriedade CSS position ela costuma dar um certo não na cabeça de quem é iniciante Às vezes o quê para quê que você vai usar quando você vai usar ela então a gente vai procurar explicar para você da melhor forma possível existem praticamente as 5 tipos de posição que a gente pode ter cinco diferentes valores para essa propriedade de CSS position que é o Stitch que é o estático o relative é um relativo fixo que eu

fixa o Absolute que é o absoluto e o Stick que é o pegajoso nós vamos entender cada um deles agora nessa aula eu para fazer isso eu vou fazer o seguinte eu vou fazer aqui ó o nosso código uma div é uma classe chamada container que vai ser uma diva que vai ter outras divs dentro dessa diva eu vou colocar assim div Class II Division 1 o conteúdo vou falar primeira primeira div e vou fazer a mesma coisa com outras em 3 dias certo bom então nós temos um container de 3 dias agora nós vamos

aqui no nosso estilo fazer o seguinte o nosso container o ponto container nós vamos fazer com a o fundo azul e nós vamos colocar uma largura de cem porcento bom e uma altura colocar aqui de 400 pixels certo beleza então nós temos um container dentro desse container nós vamos fazer Aquelas nossas dívidas lá Advil um vai ter um background Yellow e a div 2 e o background dele vai ser White o que divide dois né e ative três nós vamos fazer red bom então estamos a primeira devia a segunda devia terceira de beleza como nós

estamos percebendo as nossas divas estão funcionando em bloco certo então nós vamos fazer o seguinte nós vamos colocar aqui dentro da container o display como inline-block ah e também aqui dentro dos nossos elementos para eles ficarem inline e em bloco também a beleza nós temos aí os nossos as nossas três James certo vamos colocar aqui também um tamanho um Edith de Vamos colocar 20 Vamos colocar trinta por cento certo para cada um só para gente dar aqui a largura trinta por cento trinta por cento tenta por cento e uma altura aqui ó um rede de

100 pixels vamos ver como é que fica isso fica legal para gente fazer esse exemplo aqui E aí o Ok beleza e agora pessoal a gente tem a o nosso positivo o que que é esse position position é o posicionamento do elemento em relação a tela todo o elemento que a gente começa a trabalhar ele já tem 1 position 1 marcado como static assim né positivo vamos supor essa div 1 position assim esse elemento essa propriedade CSS esthetic assim quer dizer que é estático quer dizer o posicionamento parada onde ele tá é assim que ele

vai ficar conforme o fluxo normal então um padrão de todo elemento HTML toda a tag eu já vim com a position como static Então essa aqui é tranquilo hoje Tati que é o posicionamento normal aí nós temos a position chamada relative e que essa posição relativo é o posicionamento do elemento relativo Aonde ele está presente então por exemplo a nossa primeira div tá aqui nesse ponto do nosso da nossa página certa se eu colocasse um o motivo é que relativo a esse posicionamento Inicial onde ele teria Para que tipo de comportamento eu quero que ele

tenha então para você entender Vou colocar aqui opposition como sendo relativo posicionamento relativo aparentemente não aconteceu nada Opa position relative aparentemente não aconteceu nada mas agora eu posso passar alguns parâmetros para ele de posicionamento que seria topo esquerda direita ou embaixo então repare que vai acontecer se eu fizer assim left e vou colocar como sendo 20 pixels e olha só que interessante ele foi deslocado da esquerda 20 pixels mas repara que ele ficou em como que entre as suas em cima daquele daquela outra Nossa Diva que a gente tem porque esse deslocamento não ocupa o

espaço que empurraria todos os itens para lá só repara a diferença se eu tirar aqui ó voltei se eu usar por exemplo um margem left e colocar 20 pixels Olha o que que vai acontecer salvei reparou todos os elementos Eles foram deslocados para lá porque eu dei uma margem aqui e ele empurrou todos eles para lá agora quando eu digo que a posição é relativa onde o elemento tá e eu passo que é da esquerda É como se eu passasse uma coordenada para onde que eu quero que aquele meu elemento ele se desloc dessa forma

quando eu salvo com left 20 pixels ele vai ficar por cima do outro elemento olha só que interessante bem E aí na PSOL e quando a gente usa a posição relativa a gente pode não só determinar a esquerda direita Na poderia colocar topo aqui a por exemplo topo 50 pixels desbloqueie eu tô deslocando ele certo como também eu posso determinar o posicionamento dele em relação aos outros elementos por quê que nem aqui ó a gente colocou aqui ó 20 pixels da esquerda certa mas vamos supor que eu coloque assim ó 40 pixels que ele vai

ficar praticamente o colocar um pouquinho mais que 60 fixo ele ficou Praticamente em cima da 2ª div E se eu quisesse que ele ficasse para trás dela que aquela devia aparecesse na frente dela a gente tem uma propriedade quando a gente trabalha com a posição relativa que se chama cê index esses ainda é para falar quem que tá na frente quem tá atrás o posicionamento do eixo Z né então esses ainda que ele pode ser de um número negativo até 999 então por exemplo se eu coloco menos um aqui ó e eu dou um e

olha o que que vai acontecer ele ficou para trás do Meu Container então ele ficou ele tá aqui só que ele ficou atrás do meu azul o meu Azul tá na frente dele tanto que se eu pegar aqui esse meu background aqui e eu remover e salvar removi só para a gente ver ó lá ele tá lá no mesmo lugar é a única coisa que como eu coloquei um background agora ele tem preenchimento ele ficou para trás agora se eu coloco usei ainda se ainda que isso aqui como dois olha lá ele já apareceu na

frente do azul certo agora se eu colocasse por exemplo nessa div 2 aqui um um saindo esse menor A div 2 ela apareceria por exemplo Senhor vem aqui coloco z-index e coloca o que é essa daqui é 3 por exemplo é maior não aconteceu nada porque para ter os ainda que se a gente precisa ter o posicionamento como relativo ao seu colocar aqui no segundo também posição relativo Olha lá agora a segunda ficou na frente da primeira observando porque eu usei index dela é menor e colocasse quatro aqui ó quatro é maior que 3 seu

salvar já ficou primeiro na frente se eu colocar agora cinco aqui ó maior que quatro certo eu já ficou na frente então esse position um relativo a gente usa muitas vezes para como que fazer camadas de elementos na nossa tela relativo aonde seria o posicionamento Inicial dele a gente pode usar os eixos left right top e Bottom né para definir certinho onde que ele vai ficar encaixado Então esse daqui é o a nossa propriedade CSS position chamada relative né que libera para nós usei index e também essas coordenadas esquerda direita e assim por diante agora

um outro que a gente tem que é muito interessante Pessoal esse aqui é muito muito útil a gente usa isso muito mesmo que é oposição chamado fixed ou fixo esse posição chamado fixed é para deixar um elemento fixo na tela independente da rolagem que a gente ti o elemento sempre vai ficar aparecendo naquele lugar por exemplo vou fazer mais uma div eu vou fazer uma devia até que fora do contêiner não div Class e eu vou colocar aqui Whats vamos supor sabe quando você entra no site tem um por exemplo um login do WhatsApp no

canto e conforme você vai indo navegando pela página aquele login e sempre fica ali e aí você pode clicar por exemplo para chamar a pessoa no WhatsApp da gente usa essa position fixed para fazer isso então para dar um exemplo aqui para vocês ó vou fazer essa dica chamada o Whats e aqui vou falar eu vou colocar só escrito assim o Whats Olha o que que eu vou fazer é o que essa classe chamada whats eu vou falar que o background é verde eu vou dizer que a cor color é White ó e vou fazer

que o edit dela o tamanho vai ser de 10 porcento vamos ver como é que vai ficar 10 por cento do tamanho da tela tá legal ficou um colocar fixo aqui um valor 150 pixels de altura de largura por 150 de altura Olá tudo isso aqui são propriedades que a gente já viu né eu fiz um quadradinho aqui ficou muito grande Vamos colocar aqui 80 e por 80 fiz um quadradinho ali vamos dizer que eu quisesse que esse quadradinho sempre ficasse aqui no cantinho da minha tela se eu fiquei sempre ficasse lá o que que

eu teria que fazer eu teria que usar um position como sendo fixo fixed fixed assim um posicionamento fixo quando eu passo o posicionamento fixo Eu também Libero para eu falar qual vai ser a posição em relação a minha tela ou vai ser o posicionamento a esquerda direita né ao topo em relação a minha tela então eu poderia colocar aqui por exemplo ele vai estar em relação à parte debaixo da minha tela com zero de espaçamento olha só o que que vai acontecer é vendo como elemento foi puxado lá para baixo porque eu disse que em

relação à parte debaixo da minha tela eu quero que ele fique zero quer dizer o grudei ele lá embaixo agora eu quero que ele fique à direita então faria em relação à direita que é o Haiti eu colocaria 10 também olha só que que vai acontecer ele ficou lá no cantinho então só para gente ajeitar poderia colocar 10 e 10 aqui para gente ficar um pouquinho deslocado 10 pixels e aqui 10 pixels Olha lá desloque ele 10 pixels aqui da explique seus aqui ele ficou lá no meu cantinho beleza OK agora se eu tivesse um

conteúdo aqui na minha página olha só que interessante Vou colocar aqui ó P vezes 12 Lauren só pra gente colocar bastante conteúdo aqui vou dar um entre fiz 12 12 parágrafos com Lauren aqui né para a gente ter um conteúdo olha só que que vai acontecer para que criou uma bala uma bala na barra de rolagem aqui para nós né pessoal se eu deslocar aqui olha só que legal aquele aquela minha diva e continua lá conforme o tô rolando continua lá parada naquele lugar porque porque eu determinei que o posicionamento dele oposiç Oi fixo fixed

entendeu então esse posicionamento fixed ele serve para isso para em relação ao meu ao meu elemento aqui ele em relação a tela onde o que eu quero que ele fique parado onde que ele fique fixo então não não importa se eu tiver rolagem ele vai acompanhar a minha tela naquele posicionamento dali ele não sai ele ficou como que marcado para ficar preso naquela naquele posicionamento certo então esse é o position fixed agora nós vamos ver um outro tipo de position e se costuma dar uma certa bugadinha na mente do pessoal que é iniciante que é

oposição chamado Absolut ou absoluto né esse position Absolute ele diz respeito à qual vai ser a posição do elemento em relação à o pai dele a umas estral al-mahdi viu o elemento HTML onde ele está contido então só por exemplo e ficar aqui a gente o gibs na 1ª 2ª 3ª div que tá dentro dessa div container né a gente fez assim ó nessa parte de cima nós temos um container aqui e dentro do container nós temos essas outras três dias Então essas três dias aqui é amarela branca e vermelha que a gente fez ali

Elas são filhas dessa dívida que que a div pai que é container então quando eu usar opposition como Absolut o absoluto vai ser o deslocamento dessas minhas desses meus elementos em relação a essa minha é esse meu elemento que é o pai dela então vamos exemplo ficar aqui a gente tem aqui por exemplo a div 3 né a terceira diversa que é vermelho vamos dizer que eu quero deslocar ela dentro aqui do posicionamento aqui desse meu elemento pai que é a minha div container que é o azul Ana Eu poderia usar aqui opposition como sendo

Absolut eu posso vir aqui a positio eu posso colocar Absolut E aí eu posso determinar o sempre escrevi errado né position Absolute eu posso determinar onde que ela vai ficar em relação ao ancestral dela só que vocês vão ver que não vai dar certo agora por exemplo se eu colocar assim o top é 40 pixels olha só que que aconteceu ué que que deu o fiquei foi para cima porque que ficou assim deslocado errado porque pra uma posição absoluta funcionar em relação ao ancestral dela ela precisa que o ancestral dela seja qualquer posicionamento - estático

ou seja o nosso container é que que é esse azul ele não recebeu nenhuma propriedade do tipo position tá vendo a gente não determinou então para o meu documento essa minha esse Meu Container aqui ele é estático ele tá parado tá seguindo o padrão normal e o Absolute o que que ele vai fazer ele vai procurar lá o posicionamento em relação ao pai que é o o Opa Meu pai não tem posicionamento então eu vou procurar quem tiver um posicionamento acima do meu pai e quem que é o posicionamento acima do pai aqui no caso

seria em relação ao próprio Body aqui o corpo da minha página não seria nenhum H1 tá Seria em relação ao bora então ele tá fazendo agora um top aqui ó 40 pixels em relação ao topo mesmo do meu documento por isso que ele ficou assim bugado mas agora se eu viro aqui no Meu Container e dizer que a posição dele ó é relativa Eu dei um posicionamento para esse container aqui olha só o que que vai acontecer agora essa minha div 3 tá se comportando em relação ao pai dela o posicionamento deslocamento dentro do pai

dela certo então eu poderia colocar por exemplo assim que oposição vai ser a Vamos tentar meio que deixar Centralizado a gente tem altura de 400 pixels né então eu poderia colocar aqui que do Topo vai estar e a 200 pixels e tem que ser menos né que ele já tem 100 pixels tons colocassem Pixel 150 Vamos tentar alinhar ele aqui 150 e da minha direita White eu vou colocar 50 pixels vamos ver como é que vai ficar 150 pixels também é mais um pouquinho 250 ou vamos colocar porcentagem aqui a cinquenta por cento Oi na

bom em relação ao posicionamento que ele estaria Inicial né pessoal então se eu tirar isso aqui ó você vê que ele já tem um certo posicionamento aqui afastado da desse canto né então ele vai pegar a partir daqui para onde que ele tem que se deslocar por isso que se eu coloco cinquenta por cento ele vem bem mais para o canto Mas enfim você entendeu né o conceito é entender para que que serve esse position Absolute aqui e nós temos um outro tipo deposite o último que a gente trabalha que é o do tipo Stick

Stick em inglês Quer dizer pegajoso ou grudento né mas o sentido mais certo seria o pegajoso esse Stick pessoal ele é um algo que é bem legal eu vou só fazer nessa dividir número dois aqui ó eu vou passar a cor dela para ser diferente do Branco só pra gente enxergar bem essa questão do Stick eu vou colocar aqui ó um rosa aqui ó a beleza agora a gente tá 2ª div mas está cada esse essa divido tipo Stick ela funciona da seguinte forma position Vou colocar aqui como Stick que é grudento e a gente

passa um parâmetro para quando a gente tiver uma barra de rolagem ele grudar na onde a gente posicionar então por exemplo se eu coloco assim o top-10 a gente usa geralmente position sticky nessa forma a gente coloca o positiva como Stick o top zero olha só o que que vai acontecer conforme o fazendo a rolagem Olha lá quando atingiu aquele elemento aquele elemento ficou pegajoso o grudento ele parou lá naquele naquela posição e como ela é filha né essa dívida que dois ela é filho do nosso container aqui que a nossa div pai tem uma

posição relativa quando a gente fizer ao deslocamento aqui ó olha só que que vai acontecer ela parou ela parou de acompanhar porque ela só vai deslocar ter esse deslocamento e os dentro do pai dela percebeu que interessante né pessoal isso até fazer um teste aqui deixa eu ver se a gente tirar o posicionamento dele de relativo se ela vai acompanhar até lá embaixo vamos ver continuar não ela parou ali mesmo né então é só fica contida dentro da tag pai dela mesmo certo não só para gente fazer esse teste Zinho aqui para a gente saber

Então essas são os principais tipos de posição que a gente pode ter tá pessoal o estádio que vem por padrão o relativo que serve para gente mudar o nosso elemento em relação à onde ele está na nossa página e aí a gente pode usar aqueles ainda que se não é para dizer quem vai ficar na frente que vai ficar atrás nós temos também o fixo que é esse caso aqui que ele vai ficar sempre parado no mesmo lugar na tela onde a gente quer nós temos o absoluto ou Absolut que é em relação ao pai

dele né para ele funcionar tem que lembrar que o pai dele precisa ser relativo né ou fixo o é um posicionamento que não seja o estático e nós temos por último o Stitch que eu pegajoso que é quando eu tiver um deslocamento aqui ele grudar e ficar exatamente naquela posição ali conforme a rolagem ele vai ficar com que preso né olha ele tem um comportamento como se fosse di fixo durante um período conforme a nossa rolagem o que a gente especificar aqui certo pessoal Então essas são as questões dos nossos das nossas positions e para

que que a gente usa isso na prática pessoal bem a gente usa isso muitas vezes quando a gente quer fazer alguns tipos de efeitos no nosso site a gente usa isso muito por exemplo quando a gente vai trabalhar com cards então só para exemplificar algo mais prático aqui para vocês eu vou fazer o seguinte eu vou tirar esses trem essas três dias que a gente tem aqui vou deixar só esse contém né em salvar deixei só o nosso container certo Vou até apagar essa Whats até eu vou deixar eu vou tirar esses outros dois aqui

esse container nosso eu vou fazer o seguinte vez do background se azul eu vou passar uma um background de imagem aqui para gente pegar eu vou pegar aqui MG a barra aqui a gente tem que voltar uma pasta antes né tá uma para trás e MG/vamos pegar um que a gente tem aqui fundo. Jpg certo ou salvar ou será que não é esse o caminho deixa eu me lembrar aqui qual que é e MG background fundo em um show e eu que certo e MG MG MG background Deixa eu fazer aqui background o ponto jpg

que não teve até esqueci do ponto e, aqui no final salvei tá beleza deixa eu colocar aqui fundo então eu vou colocar o background-size também para a gente ir deixar ele certinho vou colocar background-size como sendo cover a beleza e eu vou querer que isso aqui seja um pouquinho mais clarinho assim para não ficar tão forte tá pessoal eu vou usar uma propriedade que a gente até não viu aqui até agora se chama também o paciente ou para a cidade opacidade a gente pega de 0.1 até um sendo um a opacidade completa e zero. Nove

noventa porcento 0.8 oitenta por cento Então vou colocar sem a zero. Cinco olha que que vai acontecer ele vai ficar mais clarinho tá vendo ele estava com que dando uma transparência e opacidade beleza mas para que que eu tô fazendo isso daqui bom isso daqui é o nosso container colocamos uma imagem de fundo e colocamos uma certa para Cidade agora eu posso definir por exemplo um posicionamento por um conteúdo que vai ficar aqui dentro então eu vou colocar aqui ó vamos supor aqui um é a de colocar uma div chamada com a classe centro e

dentro dessa div eu vou colocar aqui um texto Central eu vou colocar 5 Centralizado certo vou pegar essa classe centro aqui cento e vou determinar que o positivo um dela o posicionamento e vai ser absoluto a Absolut porque ela é uma tag filho dessa daqui que é relativa certo e aí eu vou passar o seguinte o seguinte parâmetro para ela para que ela fique centralizada eu vou colocar aqui o topo dela vai ser cinquenta por cento Então já ficou aqui e vou colocar também que um alinhamento do texto text-align vai ser centralizado E aí não

funcionou não deu certo porque porque o nosso tipo de dívida aqui não tá com o tamanho de 100 porcento né então posso colocar aqui o edit dela de cem porcento e agora sim ficou lá Centralizado tá vendo e aí a gente poderia colocar de chover color Black não sei se tá é por causa da opacidade né pessoal aqui é opacidade ó como tá 0.5 e ele é adevipar essa daqui tudo que tá dentro dela está ficando com opacidade também deixa eu ver se eu colocar uns ainda que você aqui mais para frente em cima dele

aqui dessa outra div se vai dar certo eu vou colocar ainda que se 999 e essa daqui vou colocar um cê index e não realmente não funcionam eu poderia fazer diferente ó para ele não ficar com esse problema aqui eu em vez de colocar no background aqui com esse fundo eu vou tirar aqui vai ficar como que em branco aqui a nossa devia mas está centralizada que o nosso textos e eu vou colocar aqui uma imagem aqui dentro eu vou colocar assim uma i&m gsrc vou colocar e MG/ o fundo. Jpg eu vou colocar aqui

o tamanho dela vamos fazer aqui ó um e MG vou abrir aqui vou dizer que o tamanho dela vai ser o edit vai ser de 100 porcento ela já coloquei a imagem certinho aqui o identity 100 porcento Deixa eu tirar opacidade aqui também ó tirar também se background-cover do nosso nosso container Oi e aí agora sim agora a gente colocou a imagem a imagem tá colocada e a nossa div centralizada em relação a imagem agora eu vou colocar aqui a opacidade como sendo zero. Cinco nessa daqui porque ela já é um elemento separado Agora sim

o pessoal eu como é que funciona ou ficou um fundinho como se fosse Porque essa imagem ela tá ocupando 100% aqui da altura do nosso elemento pai que eu container então só para a gente se localizar Vou colocar aqui uma borda de 2 pixels é dash.red só para a gente ver então a gente tem aqui ó o nosso container Pai a gente tem a nossa imagem aqui vou colocar uma borda nessa imagem também ó é de 2 pixels é Solid vou colocar Green só para gente enxergar o não sei se vocês vão conseguir ver mas

ela está contida dentro desse nosso dessa Nossa div pai dela né E aí a gente colocou essa outra Diva que chamada centro com a posição com o celular absoluta já que o container aqui a posição relativa E aí a gente especificou que Doutor para a gente quer cinquenta por cento e colocar o alinhamento do texto ao centro aí vai ficar ali a gente usa isso aí para fazer efeitos de card né Por exemplo Será que podia ser um artigo de um blog por exemplo a gente tem uma imagem EA que a gente poderia colocar assim

né um título 1 o título do meu artigo O opa fechamento aqui control S Olá título do meu artigo beleza ficaria ali um texto com um fundinho então um efeito legal que daria para gente fazer certo então na sala Nós aprendemos aqui um pouco sobre o exposição aqui né os tipos de posição que a gente pode utilizar que é o estático relativo ou absoluto fixo e o Stick né Depois faça alguns testes aí para tentar entender bem qual que é esse conceito d'opposition quando a gente iniciante me ajudar uma certa travado na na nossa mente

você tá percebendo que o CSS agora tá ficando já um nível um pouquinho mais avançado né dê a gente a fazer os alimentos alguns tipos de ajustes eu vou deixar também aí na descrição dessa aula nos links complementares um artigo que explica legalzinho Como funciona essa questão dos posicionamentos pode ajudar você na leitura a ampliar um pouco mais a sua mente também e a gente se vê na próxima aula e agora que a gente vai conhecer pessoal é a propriedade overflow sua propriedade overflow ela determina o que que vai acontecer com o conteúdo quando Talvez

o elemento for menor do que o conteúdo que tem dentro dele então vamos exemplifi Car aqui para vocês verem a gente vai apagar tudo isso daqui que a gente fez aula passada vamos apagar aqui vamos apagar esse esse daqui também Ah tá uma bagunça né até ficou um resquício ali não deixar só esse nosso h1ac meu primeiro CSS Então vamos ver sempre ficar aqui como a div classe exemplo que aqui dentro dessa div nós vamos colocar aqui que ela tenha na Vamos colocar um velório em aqui tá beleza um peloi funcionou belezura Vamos colocar aqui

dentro do nosso CSS. Exemplo uma classe e aí a gente vai especificar aqui que só para gente enxergar bem que o fundo vai ser azul EA cor Vai ser branco bom então nós temos aqui o nosso elemento e ele tem o conteúdo dele aparentemente nenhum problema né pessoal porque se por exemplo eu pegasse adicionar se ainda mais um parágrafo aqui olha só que que acontecer ele tá aumentando conforme a necessidade porque a gente tá usando um display Block e conforme ele vai precisando a gente ele está aumentando aqui o tamanho mas imagine que eu Especifique

Qual que é o tamanho dessa minha diva exemplo aqui que eu determine um tamanho fixo então vamos supor que eu vou colocar que o tamanho dela é de 100 pixels altura olha só o que que aconteceu ou um diminuir mais ainda a 50 pixels e olha só o que que aconteceu percebeu Olha lá o meu conteúdo ele tá aqui só que ele está saindo para fora da minha diva deixa eu colocar aqui eu vou colocar aqui um cinzinha mais claro vizinha e vou colocar aqui a cor preto para vocês ver black Olha lá o meu

elemento é o que tá no Cinza Mais Escuro percebe Mas o conteúdo tá saindo para fora da minha caixa por assim dizer eu poderia colocar aqui vamos colocar um pouquinho mais de tamanho 150 150 aí vai dar o tamanho Total ou aumento mais um parágrafo que só para vocês verem bem esse conceito aqui ó Oi ó tá saindo para fora vou colocar mais um parágrafo aqui percebeu esse aqui é a área do meu elemento Mas o conteúdo está sendo para fora para a gente determinar como que esse conteúdo aqui ele vai se comportar dentro do

elemento a gente usa justamente essa propriedade que a gente vai ver hoje que é a propriedade overflow se escreve assim overflow o overflow ele tem alguns parâmetros o visible o visível o Rider O escrow e o alto por padrão todos eles são visible assim o overflow visible tá dizendo que ele vai mostrar o conteúdo mesmo que saia para fora do elemento então o elemento ele Tecnicamente acabou ali ó Onde está o Cinza Mais Escuro mas ainda saiu conteúdo para fora certo agora se eu colocar o ryden olha o que que vai acontecer overflow Hidden ele

vai mostrar só o que se encaixa dentro do elemento dessa altura que eu especifiquei tudo que fosse vamos e assim ficar para fora disso ele tá ocultando então ele não vai mostrar conteúdo que fique para fora esse é o Raiden outro que a gente tem é o escrow quando a gente usa o overflow scroll Olha o que que vai acontecer ele vai colocar aquela barrinha de rolagem aqui na lateral Olha só e eu posso rolar para ver o conteúdo que tem dentro beleza Esse é o overflow scroll e também a gente tem aqui Um um

outro tipo de overflow que é o alto e que esse overflow auto é automático ele parece com o do escroto Tá vendo porque ele fez o escuro mas ele só vai mostrar o scroll se tiver realmente necessidade então por exemplo se eu tirar aqui ó e deixar só dois parágrafos olha só que que vai acontecer ainda deu porque ainda Precisa Então deixa eu tentar pegar aqui três parágrafos deixa som aquele um cabe bem tranquilo aqui dentro então pode ver que a barra de rolagem não aparece porque a gente colocou a Flor vai ser alto automático

tá ele percebeu que o conteúdo se enquadra exatamente dentro do meu elemento agora se eu colocar mais parágrafos ele percebeu que vai precisar de mais espaço e ele vai acrescentar aqui a barra de rolagem certo essa propriedade overflow pessoal ela só funciona se a gente especificar uma altura para o nosso elemento porque se a gente não especificar uma altura para o nosso elemento não tenha necessidade do overflow porque ele vai fazer com que o elemento se adapte a altura né altura vai ficar adaptado ao conteúdo certo agora quando a gente se vê se fica uma

altura no nosso elemento a gente usa sempre overflow junto para determinar como é que vai ser o comportamento aqui dentro certo tão bem Tranquilo isso daí naquele sol Essa maneira de gente usar o overflow a gente também usa essa propriedade overflow para determinar o comportamento das rolagens da nossa página a que a gente usou overflow né aqui na no nosso elemento aqui nessa dias o tempo mas a gente poderia também determinar o comportamento da barra de rolagem do site em si então vou fazer o seguinte eu vou pegar aqui esses parágrafos ou até colocar mais

para baixo aqui ó vou colocar vários desses parágrafos tá salvar você vai reparar que fez a barra de rolagem aqui ó tá vendo tem a barra de rolagem aqui essa é a barra de rolagem do meu site porque eu preciso deslizar Aqui para baixo para ver todo o conteúdo mas eu tenho como arrancar por saco que essa barra de rolagem não apareça Como que eu posso fazer isso eu posso vir aqui no nosso CSS na minha tag Body que é do meu corpo do corpo da minha página e aqui eu posso colocar aqui o overfull

do eixo a y e vai ser iden E aí olha só que que vai acontecer Sumiu a minha barra de rolagem aqui tá vendo eu não consigo deslizar mais para baixo que eu não consigo ver o conteúdo que tá lá no para baixo porque eu tirei a minha barra de rolagem eu eliminei ela e todos diz que o overflow do meu corpo do meu site no eixo Y quer dizer isso que é de cima para baixo aqui em pé né que seria na vertical ele foi removido isso a gente também pode fazer para o eixo

X então eu vou fazer aqui um exemplo para a gente de terminar aqui um comportamento Vamos ver que essa Diva exemplo que a gente tem aqui em cima eu vou determinar também que é a largura dela vai ser de 1200 pixels para ele ficar bem Largo repara que eu fiz a aconteceu a barra de rolagem aqui embaixo porque tá bem para o lado aqui certo ó fiz a barra de rolagem para lá então se eu pegar que trocar que ia deixar vou deixar o eixo Y funcionando normal tá com a rolagem aqui beleza colagem certinho

agora eu quero que essa rolagem aqui para cá não funcione eu não vou colocar aqui no meu bode o overflow-x no eixo X e vou falar ryden aí olha lá removeu a barra de rolagem não consigo mais rolar para lá para aquele lado o meu documento certo eu tirei a essa barra de scroll que a gente chama que essa barra de rolagem então o ver flores serve para essa finalidade qual vai ser o comportamento do conteúdo dentro de um elemento inclusive no nosso corpo não pode tirarmos as nossas barras de rolagem quando a gente não

quer que elas apareçam ou não precisa delas algum sentido assim né quando a gente não quer que tem a barra de rolagem na nossa página Beleza espero que tenha entendido como que usa aqui esse componente aqui o CSS essa propriedade overflow bem tranquilo né não é tão complicada como as últimas que a gente viu ali e a gente se vê na próxima aula e o Flot significa flutuar a fazer com que um elemento flutue é uma propriedade CSS muito importante utilizado há bastante na construção dos nossos layouts para algumas circunstâncias específicas onde a gente precisa

ter um certo alinhamento dentro do nosso da nossa página então só para você entender mais conceito imagine o seguinte ó vou apagar esse meu conteúdo e eu vou a fazer assim ó a pagar Vou colocar aqui uma imagem Vamos colocar aqui uma div é até uma dica dá para vocês assim o pessoal quando vocês querem fazer mais rápido um atalho para digitar o código se você digita assim coisa to give ponto container vou o nome que você quiser aqui. Alguma coisa né com trainer e eu der um enter Olha que que ele faz ele vai

preencher com a div e já escrever aqui para mim Clécio e o nome da classe que eu usei então eu poderia escrever qualquer coisa aqui na div. Olá ó ele vai fazer a classe com o nome eu lá então esse tipo de atalho mais rápido para gente digitar código pessoal quando vocês ver até o pessoal às vezes fazendo vídeos no YouTube tá os caras Digitam muito rápido porque eles usam esses atalhos então poderia fazer sim né div. Container o que vamos dizer que vai ser a nossa div pai aqui né e dentro dessa nossa de

vi Pai a gente vai ter aqui uma imagem Vamos colocar aqui um essa aí cê e MG/pegar esse background. Jpg só que ele é gigantão né pessoal então vamos colocar aqui um tamanho específico Vamos colocar um Edit de células 150 pixels ou só 150 que não precisa colocar em pixels nasceu colocar aqui já vai ficar certo já ficou uma imagem eu vou até colocar um pouquinho maior 250 beleza e aqui dentro eu vou colocar também um parágrafo vou colocar um p Lauren eu vou colocar um parágrafo reparo o que que acontece a gente tem aqui

uma imagem e a gente tem um texto mas imagine que eu quisesse que esse texto estivesse aqui ó e não embaixo dessa minha imagem para isso eu uso a propriedade que nós vamos aprender hoje que a propriedade poti poti quer dizer que eu quero com um elemento futuro e ele saia do fluxo da minha página normal do Meu Container aqui da da minha div pai e ela vai para uma posição específica que pode ser esquerda ou direita Então vamos e sempre ficar aqui ó só para gente enxergar bem eu vou fazer assim o nosso container

e eu vou fazer ele aqui ó container pena vamos fazer que ele tem uma borda de um pixel sólida escura só para gente enxergar Olá eu tenho aqui esse Meu Container tá é a diva e pai beleza ele tá pegando todo esse meu conteúdo só que eu quero que essa imagem saia do fluxo desse container e ela fique à esquerda flutuante então o que que eu posso fazer posso colocar sim container e MG e eu vou dizer que ela vai flutuar ao front left ou flutuar à esquerda Olha o que que vai acontecer quando eu

fizer isso olha só que interessante esse meu elemento ele saiu do fluxo normal e agora ele está flutuando dentro do meu elemento pai aqui que é a minha div container e o meu parágrafo Ele veio para a direita porque agora com essa dificultante o espaço foi liberado para ela vir para cá então a gente usa muito e se fosse aqui para determinar com elemento vai se comportar um dos cantos do nosso da nossa div container Então vamos dizer assim eu vou colocar aqui a direita Olha que que vai acontecer o meu elemento flutuou aqui para

mim é direita legal bem show de bola né pessoal Se eu colocar ele é esquerdo ali tá flutuando para a minha esquerda então eu posso determinar um posicionamento dele dentro desse meu elemento Se eu quisesse afastar um pouquinho aqui ó o quê que eu poderia fazer poderia dar uma margem a minha direita é de 20 pixels por exemplo vamos lá a 20 pixels lá é legal já dei uma margem Zinha né já ficou bonito só que olha só que interessante quando a gente trabalha com flute o forte faz com que aquele elemento no caso aqui

a nossa imagem ela se diz prenda do container ou seja dádiva que ela está contida onde ela está dentro da div pai dela ela tá solta ela não está seguindo o fluxo aqui ela não é como o display inline-block Onde Você Vai Ficar em blocos em linha aqui não aqui ela tá solta ela tá flutuante por isso se chama flutuante como se ela se desprender seu ela ficasse isolada do Meu Container onde ela está contida certo então para que a gente possa fazer com que esse container absurda ela mesmo a Losango a tag a propriedade

forte a gente poderia usar o que a gente viu na outra aula que é o overflow a gente poderia colocar o overflow como alto dessa forma olha só que que vai acontecer ele vai entender que a gente precisa pegar o tamanho Total aqui mesmo com esse nosso elementos entre flutuante ele vai pegar altura também correspondente ao nosso ao bom Então essa é muito prático né pessoal para gente fazer esse tipo de coisa que a gente colocar a imagem de um lado e um texto do outro para a gente poder trabalhar aqui como se fosse o

texto contornando a nossa imagem né se eu colocasse aqui mais conteúdo olha só o que que vai acontecer e olha vai como que contornar essa minha imagem legal se eu colocar mais conteúdo ele vai contar contornar essa minha imagem mas o que que pode acontecer eu vou dar um exemplo aqui para vocês verem uma coisa que pode acontecer e vamos supor que eu tenho aqui a imagem e o conteúdo certo e essa imagem ela vai ter uma altura vou colocar um hate aqui ó de 400 pixels ou 400 vai ter uma altura de 400 beleza

e aqui eu tenho os parágrafos vou alinhar aqui mais um parágrafo beleza e agora eu quero colocar um conteúdo que seria já para baixo disso daqui aí se eu viesse aqui naturalmente colocasse assim vamos é um H3 falar outro conteúdo outro título Vamos fazer sem outro título Se eu colocar aqui um p Lauren e ele vai continuar contornando essa imagem porque esse elemento ele é fluxo então quando ele não passar aqui a altura da nossa imagem ele vai ficar contornando mas vamos imaginar que eu quisesse daqui para baixo ele já vamos dizer assim não levasse

em conta a flutuação que ele já viesse parar aqui embaixo como se fosse o comportamento padrão de uma imagem então o que que eu poderia fazer aqui no meu H3 usar uma propriedade que se chama vou colocar incorporado direto aqui nele que se chama Clear o Clear quer dizer para limpar um ponto de flutuação eu posso colocar aqui o Clear boot aqui que é para a gente ir limpar a flutuação Quando eu fizer isso olha só que que aconteceu Ele especificou que daqui desse elemento para baixo a flutuação a não ia valer por assim dizer

então eu faço com que aquele meu elemento continue no fluxo seria convencional não levando em conta o que a consequência por assim dizer entre aspas da nossa flutuar a pena legal Lembrando que essa flutuação pode ser esquerda EA direita também né Posso colocar aqui forte left Foot right vai ter o mesmo tipo de efeito certo se eu não especificar que o Clear como boot ó salvar ele vai continuar Seguindo aqui o fluxo certo continuar até contornar imagina se eu colocasse aqui um mais um super aqui ó lá ele é contornar essa imagem continuar aqui normalmente

né Deixa eu colocar aqui forte é left eu poderia colocar aqui também que a margem da nossa imagem também ia ter uma margem embaixo né para gente dar uma margem Zinho margem botton 20px também para a gente dar uma margem Aqui para baixo legal então a gente pode fazer essas questões de Margem tal pra gente fazer uma diagramação bem legalzinha até o dia de morrer aqui um pouquinho 10 já Ficaria legal e já fez uma diagramação Zinha bem legal do nosso conteúdo show de bola né pessoal outra coisa que a gente usa bastante o forte

é quando a gente trabalha com menos e a gente quer e o nosso menu tem é Talvez um botão isolado num canto tão mais uma aplicação prática aqui do forte para vocês verem eu vou fazer antes desse texto eu vou fazer um menu aqui vou fazer um menu usando uma lista não-ordenada 1l Então vou colocar aqui um ele com um a HF a ponta para lugar nenhum não é para o joguinho da velha aqui vou colocar aqui link Se tem uma coisa legal para ensinar para vocês pessoal quando vocês quiserem copiar linhas fazer com que

uma mesma linha se repita para baixo é só segurar o shift Alt e a setinha para baixo no seu teclado então dá um shiftout setinha para baixo no teclado ele vai copiando aquele mesmo elemento Olha que legal show de bola né então eu fiz aqui a um menuzinho de links vamos utilizar ele agora então vou vir aqui vou colocar que o seletor o l e é vai ter um background aqui é black o suas ele escuro vamos dizer que o nosso L vai ter o display Oi Elaine Block a rua poderia também dizer forte left

também funcionaria tá pessoal a gente usar se for outlet left ele é pegar cada um ele desses colocar a esquerda também vai funcionar mas eu vou usar display inline-block para ele ficar assim e nuelle a né que é o nosso link eu vou dizer que acordo ele vai ser branco e que o text-decoration dele e vai ser nome para a gente não tem nenhuma decoração do texto legal aqui ainda posso colocar aqui um pede um preenchimento Vamos colocar de 20 pixels de um preenchimento Zinho né e eu posso colocar aqui também 1l a Uber que

é o que que acontece quando o mouse passa em cima né Vamos colocar aqui o background dele vai ser a Vamos colocar aqui um cês e assim ó cinzinho não passar o mouse em cima Beleza vou colocar assim mesmo pedem aqui também no meu L para gente ficar com o preenchimento igual agora com legalzinho né Oi e a gente pode colocar aqui também que a cor Vai ficar para a gente ter um determinado efeito ó fizemos como se fosse um menuzinho aqui bem simples certo tá com muitos links eu vou tirar um pouco só para

gente ver bem o efeito que eu quero mostrar o respeito ao forte a beleza vamos imaginar que esse último link aqui ó eu quisesse que esse link ele viesse para aqui nesse canto do meu elemento que se tem fosse para cá para extrema-direita Como que eu posso fazer isso é só eu falar que eu quero que ele futuro e para a direita então eu venho aqui nesse meu ele aqui eu poderia até colocar uma classe especial nele né eu poderia dizer assim vou colocar uma classe especial nele aqui vou dizer assim o login tá E

aqui eu vou fazer assim eu vou até colocar escrito assim login ó e aqui eu vou fazer o seguinte login tu foste Light flutuar o login para a direita Olha que que vai acontecer beleza nosso login foi para a direita já temos ele separado vamos dizer me desmembrado do menuzinho mandei que ele flutuasse lá para a direita eu poderia fazer com que esse login aqui tivesse algum tipo de comportamento diferente quando o mal Se passasse por cima sim poderia poderia colocar sem login ou ver quando tiver sobre o que que vai fazer o background dele

vai ser orange-red por exemplo que a laranja ó eu acho que tem que ser no login a é isso login a beleza esqueci de falar o seletor de link aqui tá pessoal porque ele é um link eu esqueci desse detalhe então coloquei login aquelas login o seletor a over Então olha só que legal todos esses aqui são é cinzinhas tal esse aqui que foi flutuado para mim direito quando eu passo em cima o mouse ele já tá diferenciada ele já tá laranjinha até posso colocar aqui que é a cor vai ser White Então já queremos

ou menos em bem legal aqui usando o foguete para a direita né pessoal bem show de bola isso daqui então para isso que serve essa propriedade Font para você fazer um ponto flutuante na tela para ele poder ir para direita para esquerda como ele achar melhor quando você não quer que isso seja aplicado mais você pode usar o Clear né o criar boot para você fazer com que ele continue tendo mesmo comportamento do fluxo inclusive esse login só de curiosidade se eu colocasse ele para ser flutuante a esquerda olha só que legal que que acontecer

oi olha lá ele ficou como sendo o primeiro item Porque como ele é um item solto agora flutuante ele vai ficar na frente dos outros itens que são display inline-block que são de blocos então ele vai ficar aqui na ponta mesmo que aqui no meu código ele tá começando o último ali seria o último item da lista ele aparece com o primeiro porque ele é o ponto flutuante a esquerda Só uma curiosidade bem legal aqui do uso dessa classe CSS beleza pessoal espero que vocês tenham entendido essa aula vou deixar ele aqui a direita que

ficou bem melhor e o nosso Nossa propriedade Font basicamente serve para Essas funções que eu mostrei aqui ó hoje nessa aula pessoal nós vamos conhecer a propriedade opacity ou transparência na verdade a gente já até viu em outra aula essa propriedade mas agora a gente vai dar uma atenção especial para ela para mostrar também alguns defeitinhos que a gente usa com essa propriedade de Transparência certo eu vou apagar aqui esse conteúdo que a gente fez da última aula e eu quero inclusive aproveitar e mostrar para vocês um recurso bem interessante de quando a gente trabalha

com imagens que é um site chamado lorem pixum Olha que curioso quando a gente usa os parágrafos a gente usa o Loren Nelore Y que aquele textinho para os parágrafos existe um site que faz mais ou menos a mesma coisa como se fosse um llore Y mas para imagens Ou seja quando você precisa de imagens aleatórias para colocar um projetinho de teste ou alguma coisa assim uma imagem que você já precisa de um tamanho específico você pode usar o lar inpixon é como se fosse assim o lar Y de imagens né o site Epic som

ponto fotos esse O Preço Fixo com ponto fotos e ele funciona bem fácil é só você passar nessa URL a opção ponto fotos o tamanho da imagem que você quer na largura e na altura usando aqui pelas Barras na URL então por exemplo aqui eu voltando aqui para o meu projeto eu vou colocar aqui uma tag MG src igual vou lá no meu Lori pixon posso pegar aqui uma imagem com tamanho 200 por 300 né então 200 de largura por 300 de altura ou então se eu pegar aqui só 200 ficção. Fortes/200 eu vou dizer

que eu quero uma imagem quadrada de 200 pixels eu coloco aqui no meu src e fecha a minha tag de imagem olha só que interessante ele já vai colocar uma imagem para mim aleatória aqui com esse tamanho quadradinho certo então esse é um link bem legal de imagens que você pode usar como se fosse um Loren Y né só que para imagens que é bem prático bem fácil e como você pode passar os parâmetros aqui direto pela URL você também pode atestar com tamanho de imagem diferente é legalzinho para a gente usar esse aqui então

um recurso Zinho a mais aí para ensinar para vocês certo pessoal então para a gente poder trabalhar com a nossa propriedade opacidade que eu quero mostrar para vocês hoje eu vou colocar três imagens aqui ó com esse nosso pixon fotos né só três imagenzinhas uma do lado da outra com 200 pixels de largura só para gente até aqui um exemplo a propriedade eu pa cidade ela serve para determinar uma transparência no elemento então eu vou chamar essa aqui vou dar a classe aqui de img1 e eu vou fazer a mesma coisa para os dois e

m g1em G2 e G3 certo tão um dois e três o seu vem aqui no meu CSS vou pagar o que a gente fez a nossa última aula aqui se eu vim aqui no meu CSS e faça assim a ponto e mg1 é a nossa primeira imagem aqui eu poderia determinar que ela vai ter uma opacidade Então essa essa propriedade que o paciente que pode ser de zero. Zero até o 1.0 certo até um quer dizer de 0 até um sendo um 100% quer dizer sim eu passo idade nenhum e por exemplo se eu colocasse

0.1 é dez porcento de opacidade 0.22 por cento é vinte por cento 0.3 trinta por cento e assim por diante até a gente chegar lá no nosso um que seria um inteiro ou seja 100% sem nenhuma transparência então por exemplo vou colocar aqui o 0.9 Se eu der um salvar você percebeu que ela ficou um pouquinho mais claro vou fazer agora com a imagem 2 e aqui a nossa imagem dois vou colocar senhor 0.7 Olá já ficou um pouquinho mais transparente e eu posso pegar minha imagem três e colocar 0.3 ela vai ficar Opa que

tá imagem2 imagem3 0.3 Então olha só os graus de Transparência você que tá quase cem porcento essa daqui tá zero está com setenta por cento eu sei que com trinta por cento certo então a gente pode fazer efeito de Transparência para quê que isso serve nem Qual é a utilidade deste na prática é para gente fazer alguns defeitinhos tanto imagens contém botões quando a pessoa passa o mouse em cima então por exemplo assim eu poderia fazer o seguinte a minha imagem um ela vai ter aqui a opacidade dela para a cidade dela vou deixar em

um mesmo tá que vai ser o 100% aqui em 21 100% beleza todas elas eu vou deixar em cem porcento Então se a gente deixar Olá pessoal sem nenhuma propriedade aqui ele já vai ficar sem por cento igual então o default ou seja um padrão Jardim 100% Ok eu poderia colocar que quando o mouse passa sobre a imagem a imagem over quando o mouse passa em cima ao para a cidade dela vai para zero. 15 por exemplo vou dar um salvar Olha que que vai acontecer quando eu passo o mouse em cima e para que

ele faz o efeitinho usando ou para a cidade como um efeito para mostrar que eu tô passando o mouse sobre aquele elemento certo poderia ser 0.9 para dar uma diferença bem de levinho Ó tem uma diferença bem de levinho Tá mesmo isso é legal pessoal para a gente fazer efeito Especialmente quando a gente colocar o mouse sobre ele né opacidade eu vou colocar aqui 0.5 por exemplo bem mais forte eu passo idade ó bom então a gente pode fazer isso certo e se a gente pode fazer não só com imagens tá gente poderia fazer isso

com botões também para fazer não é feito no botão então eu vou fazer aqui ó bem rapidinho botão botão bem simples vou colocar uma HF voltando para lugar nenhum a classe o botão aqui eu vou escrever botão beleza temos aqui o nosso link nós vamos fazer o seguinte nós vamos fazer esse botão O opa botão assim sem acento né botão vamos fazer dele um prédio de 15 pixels os colocar um background Green é uma cor White Tá certo vamos um botãozinho aqui nos colocar em um decoration o nome um text-decoration né text-decoration None beleza fizemos

um botão e aí a gente pode fazer que quando passar o mouse em cima né botão over a opacidade dele vai para 0.9 aí o que que acontece ó ficam efeitinho quando a gente passa o mouse sobre o nosso elemento na teria que colocar aqui a nossa tag aqui nosso seletor e aqui também esqueci do seu retorno é botão a ou melhor a o botão se e isso que eu contrário a o botão over primeiro seletor depois da classe e dando espaço a mais aqui passou mais agora sim tava com os espaços a mais aqui

tem que ter Charlie e assim grudadinho na pessoal nosso seletor então o ar a classe e aí certinho que que acontece quando passar o mouse em cima aí ele vai fazer esse efeitinho aqui até achei engraçado aqui que eu colocar opacidade como sendo um porque ele não tá pegando e o preenchimento Ah eu acho que é porque ele tá sobre o outro lá né pessoal deixa eu dar uns beijos aqui ó é só para gente afastar no de cima E ai agora sim eu passei o mouse em cima ficou ele todo já certinho como eu

tinha outro lá que tinha um efeito de opacidade parecer que ele tava pegando a partir de cima do botão mas era por causa do outro elemento certo então beleza é o qual cidade faz isso faz esse pequeno efeitinho aqui que a gente pode estar utilizando em botões e imagens né a gente pode fazer assim fica bem legal o efeito só lembrando que quando a gente usa uma propriedade é opacidade tudo que tiver dentro daquele elemento vai ser opaco né vai ter uma certa transparência então por exemplo se eu fosse fazer aqui em baixo uma div

é o presente e ficar para vocês vou colocar aqui transparente tá uma diva chamada transparente aqui eu vou colocar um velório em para a gente ter um texto Então eu fiz uma diva e chamada transparente aqui se eu viro aqui no meu estilo e colocar aqui assim. Transparente que é o nome da diva eu colocasse um background o azul bom e a cor do texto vou colocar Branco certo onde tu ficou azul com branco ainda vou colocar um pezinho aqui para dar o charme um pouquinho mais bonito de 40 pixels ó ó só para ficar

certinho se eu determinar que a opacidade desse meu elemento vai ser 0.5 por exemplo e eu salvar Olha só todo ele ficou transparente tá vendo e o que que acontece o texto que tá aqui dentro também vai ser afetado por esta transparência Ok então a transparência ela vai pegar todos os elementos que estiverem dentro daquela tag então por exemplo essa minha tag aqui como a transparente o texto dela também ficou com transparência Então a gente tem que tomar cuidado com essa propriedade nessa questão aí E outra coisa como o botão tava invadindo aqui a parte

onde aparecer essa medida que tem transparência você vê que parece que ela pintou o botão mas na verdade é que o botão tá na atrás da Transparência do meu elemento né então dá esse efeito bizarro aqui e show afastar um pouquinho aqui ó para você eu vou dar uns beijos aqui ó que daí resolve isso daí ó como ele foi mais para baixo né resolveu isso se eu não quisesse dar os BR como a gente tem uma dívida que é do tipo display Block a gente poderia dar margem top também para afastar desse daqui não

ia ter problema beleza mas só para vocês entenderem então o conceito aqui de Transparência né que a gente tem então é bem legal para a gente usar com imagens com botões e com cuidado né quando a gente for usar em elementos como dívidas e textos para não atrapalhar a visualização dos nossos usuários e na sala pessoal nós vamos aprender um efeito muito legal aqui do CSS que o efeito drop-down é o efeito de quando a gente passar o mouse sobre um elemento por exemplo um botão ou então uma parte do menu aqui de navegação ele

abre um quadradinho com mais opções para pessoas selecionar talvez você já tenha visto isso né quando a pessoa vai navegar e tem mais subitens que aparece no menu o às vezes um carrinho de compras que a gente passa o mouse em cima abre aqui um seletor com as opções do que que ele tem no carrinho de compras né muita gente acha que isso talvez precisa do JavaScript para fazer esse tipo de efeito mas não dá para fazer 100 porcento com CSS inclusive com as propriedades que a gente já aprendeu até agora então nessa aula eu

quero ensinar para vocês esse efeitinho aqui do drop-down como que a gente pode estar fazendo então vou fazer o seguinte vamos criar um menu de navegação vou criar aqui uma lista não-ordenada 1l e dentro de si huele a gente vai fazer alguns ele está é desse ali eu vou colocar um link não há HF e aqui apontando para lugar nenhum e eu vou colocar esse link certo como a gente já viu outra aula Se você quiser repetir uma linha você pega o shift Alt e setinha para baixo no seu teclado shift Alt setinha para baixo

no seu teclado e aí você duplica aquela sua linha certo e aí você pode fazer vários links vinhos assim beleza nós temos aqui os nossos links Ok vamos fazer a estilização então desses links aqui passando aqui no nosso CSS como vai se comportar Então esse nosso L nós vamos fazer ele com um background é com uma cor aqui pode ser Black né pode ser escuro os nossos eles a gente pode fazer usando aquela propriedade que a gente viu numa aula anterior que é o flúor em vez da gente usar o display inline-block vamos usar a

propriedade left Ó ficou dessa forma aqui parece que deu uma bugada né pessoal mas por quê porque na verdade a gente não tem altura na nosso l e então não vai a fonte como a gente já viu ele é um ponto flutuante né então não vai funcionar Mas não tem problema a gente pode inclusive já tirar essas bolinhas aqui esses efeitos usando uma propriedade CSS que eu não me lembro se eu já mostrei pra vocês se chama list-style-type list-style-type aqui a gente pode colocar como não nenhum estilo na lista como a Welly é a lista

né então se eu colocar que eu não quero nenhum estilo na minha lista Ali vai tirar as minhas aquelas bolinhas de enfeite que tem aqui sem ser com text-decoration né sim precisar fazer o display inline-block com o nosso link e assim por diante Inclusive a gente pode dizer que que ele não vai ter nada de pele Ou pede ainda ele vai ser zero a gente também não precisa dar nenhum tipo de Margem uns dar aqui uma margem zero também ficou tudo zeradinho agora o que que a gente vai fazendo o nosso ele com o seletor

a que seria os nossos links agora a gente vai colocar o display dele como sendo o Block a verificar em bloco A gente pode colocar uma cor color Vamos colocar o Art E aí parece que desapareceu tudo porque ele ficou branco né a gente pode colocar um pezinho de 14 de altura 14 pixels e 16 pixels de largura e um uma decoração de texto Um text-decoration há nenhum nome tá tudo branco não funciona nada a gente pode tentar passar aqui um o ver flor como sendo ryden e como vocês podem perceber esse mesmo que eu

tô fazendo aqui ele já é diferente do menu que a gente fez uma outra aula passada só mostra que não existe só um jeito da gente tá fazendo na pessoal a gente pode usando as propriedades com criatividade existem inúmeras maneiras diferentes a gente criar por exemplo menu CSS então não necessariamente a gente sempre precisa fazer da mesma maneira certo pessoal Então esse é um aprendizagem do que a gente tem aqui também nessa aula né a gente poderia colocar esse texto alinhado no centro também né text-align centro e para deixar eles alinhadinho no centro Ok beleza

agora o que a gente vai fazer a gente pode colocar que quando passar o mouse em cima aqui do item a gente vai querer que esse item fique com uma cor diferente então vamos colocar aqui que vai acontecer quando o mouse passa sobre esse tem vamos dizer que o background dele a cor vai ser vermelha color red bom então quando a gente passa o mouse em cima lá que legal Zinho já ficou com o cheirinho dele já vermelhinho para nós tudo tranquilo até agora né pessoal então fizemos um simples menos vim aqui com os itens

agora o nosso último item aqui a gente vai querer que quando eu passe o mouse sobre ele abre uma caixinha com mais opções Aqui para baixo o famoso é drop da o efeito drop-down né Então como que eu vou fazer isso eu vou fazer algumas alterações aqui então nesse nosso último ali primeiro eu vou passar aqui para baixo e se para a gente organizar nosso código ficar mais visível passei o nosso link aqui mais para baixo para ficar mais visível certo e eu vou dar uma classe aqui para esse nosso ele chamado drop-down que é

o nome do nosso elemento coloquei aqui o nome dessa desse nosso ele e o drop-down Vou colocar aqui também uma classe no nosso link tem o nosso botão chamado drop btn quer in the drop que é onde vai a pessoa vai passar o mouse sobre ele e aqui agora a gente vai querer construir a parte que vai aparecer aqui embaixo certo que é ao nosso conteúdo do drop-down então a gente poderia fazer uma div e com a classe drop-down drop-down contente que seria conteúdo drop-down certo drop-down contente e aqui dentro do drop-down contente a gente

pode colocar alguns links né Vou Colocar assim lá HF contando para lugar nenhum e vou colocar sem link e a gente pode copiar assim colocando a shiftout setinha para baixo Vamos colocar quatro links certo aqui dentro a princípio parece que tá tudo bugadão aqui ficou tudo esquisito agora né mas a gente vai fazer com que funcione agora a parte do CSS vamos organizar isso daqui usando os nossos estilos primeira coisa que a gente vai querer fazer que esse nosso botão drop btn que a gente fez ele tem as mesmas propriedades que já tinham antes né

que seriam aqui da nossa tag ar então a gente poderia acrescentar que a na tag a uma vírgula e colocar que a classe também Drop btn e ela também vai ter as mesmas propriedades que tinham antes certo só para gente deixar isso certinho outra coisa que a gente vai querer é que esse nosso drop-down aqui é que também é um ele assim como os outros também tem esse fundinho vermelho para que quando a gente passa em cima fique vermelho né E o nosso próprio drop btn também quando é passe o mouse em cima dele ele

também tem o fundo vermelho aqui né então a gente pode fazer assim a, a gente pode colocar. Drop Down over também fique acontecer quando o drop down for ou ver o que que vai acontecer com o drop btn também vai ficar vermelho certo ou por enquanto é só para a gente acrescentar esses nossos novas classes aqui reaproveitando o que a gente já tinha feito a gente tá colocando vários elementos dentro de um só isso é bom para estruturar a nossa o nosso código aqui agora o que a gente vai fazer a gente vai querer que

o nosso l e com a classe drop Down e ele seja display inline-block também seja em bloco certo agora nós vamos construir o conteúdo aqui dessa parte pessoal olha só que legal quando eu passo o mouse e e fico com o mouse sobre os outros itens aqui ó já repara que aquele primeiro ali já ficou marcado ali não desativa mais antes só se eu passasse aqui passasse nos outros ele desativaram agora se eu passar nos de baixo que é o que vai ficar no grupo então ele já fica ativo direto isso acontece porque a gente

fez que quando for em cima do drop-down estiver over Europe btn vai ficar em vermelho ele vai ficar ativado dessa forma certo a gente passou essa condição aqui nessa parte aqui ó agora eu vou organizar isso daqui então o nosso drop content que é essa parte aqui do nosso da nossa div o drop content a parte que vai ficar aqui para baixo a gente vai especificar o comportamento dela agora então a gente vai fazer assim drop-down contente e como é que ele vai se o primeiro que ele vai ter que ter uma posição a posição

ou seja um position como sendo absoluto como a gente aprendeu o Absolute né como a gente aprendeu lá na aula dos position quando a gente coloca a posição absoluto ele vai ficar em relação ao elemento pai certo ou por enquanto aqui não tá aparecendo ainda certo mas ele vai ficar em relação ao elemento pai a posição dele absoluta em relação ao elemento de cima mais próximo que ele tiver como mais próximo que ele tem aqui essa dessa dívida que eu coloquei como absoluto mais próximo que ele vai ter vai ser o drop-down então ele vai

se comportar em relação a esse alimento aqui certo como a gente viu lá na aula sobre position certo a posição dele vai ser Absoluta eu vou colocar que o background dele aqui ó Vai ser branco o tamanho dele a gente pode especificar um Edition um tamanho fixo de 150 pixels por exemplo tamanho de 150 Picos e Por enquanto ainda não vemos nada mas agora a gente vai fazer aqui a questão dos links que estão dentro dele então vamos pegar aqui o drop Down a drop-down contente até guiar ou seja os links que estão dentro dele

e vamos fazer o seguinte a cola dele a cor vai ser preto black Olá já apareceram os links para nós e já dá para a gente visualizar eles né porque a gente eles estavam brancos então estavam invisíveis agora vai dar para ver vamos fazer que o display deles a gente vai querer que seja em tipo de bloco para que ele pegue o tamanho Total olha só já ficou em bloco cada link separado em bloco beleza certinho a gente vai querer que o alinhamento dele seja a esquerda tão text-align os colocar left já ficou alinhamento à

esquerda você já tá conseguindo visualizar aqui o seu drop-down certo a gente pode colocar também que ele não vai ter nenhuma decoração de textual porque quando a gente passa o mouse aqui não tranquilo não tá aparecendo nenhum tipo de decoração né Mas se a gente quisesse poderia colocar um text-decoration como nome beleza por enquanto tá legal tá show de bola isso daqui a gente poderia inclusive colocar uma uma bordinha né borda 1px é sólida rede vamos ver como é que se E aí e ela fica meio a meio esquisito eu acho que dessa forma não

fica tão legal assim né Não deixasse engorda mesmo é uma gordinha bem clarinha que a gente poderia colocar um cinzinha bem clarinho vamos ver como é que fica é um cezzinha bem clarinha até que é a razoável né Ah beleza tranquilo só que o que que acontece isso daqui não pode ficar aberto direto assim né pessoal e se não pode ficar visível assim direto a gente quer pelo menos ó aparece quando eu passo o mouse em cima aqui do meu drop-down isso aqui não pode ficar visível então o que que a gente vai fazer a

gente vai colocar aqui no nosso drop-down contente que o display dele aqui ó agora que a gente já tá vendo como é que ele vai ficar o display dele vai ser não vai ser nenhum para ele desaparecer ó sumiu o nosso drop-down ele não aparece mais mas agora que a gente vai fazer a mágica acontecer olha só que que a gente vai fazer a gente vai dizer que quando o ponto drop-down tiver over quer dizer quando a gente passar o mouse aqui em cima disso daqui o que que é para acontecer a gente vai colocar

com a condição de que o drop-down contente é o conteúdo do nosso drop Down e vai receber o display como bloco aí olha só que show de bola tem aqui quando eu passar em cima desse olha só o que que acontece ele mostra que o meu drop-down porque é meu drop-down tava como display None ou seja para ele ficar desaparecido mas eu coloquei que quando tiver sobre o drop-down aqui ele vai ter que aparecer o conteúdo dele aqui para mim olha que legal fiquei sem feitinho aqui agora a gente poderia dar uma estiliza Dinha né

para ficar um pouco mais legal quando o mouse estiver sobre aqui o nosso drop-down contente quando tiver sobra né a gente poderia colocar aqui ó que o nosso. Drop-down contente tag are over quando estiver sobre os links né a gente poderia colocar aqui que a cor dele o Color dele vai ser o arte né só para gente ver como é que vai ficar melhorzinho assim ó e só ficou já bem melhor com a cor estando sendo como White show de bola né pessoal então a gente fez aqui esse efeito o grampo da hora se eu

tivesse múltiplos links aí eu já teria que as Como selecionar vários links diferente Só se eu solto aqui a área ele já sai fora mas se eu tô selecionando aqui dentro ele fica funcionando então é legal que dá para fazer esse tipo de efeitinho aqui ó só com CSS sem precisar de Java script nem nada do tipo passa o mouse em cima vai aparecer as opções aqui para a pessoa escolher né então um dos eles como sendo drop-down colocamos um botão chamado drop-down também que é o link que aparece aqui e o que que tá

o culto mas que vai aparecer depois que a pessoa passar o mouse por cima beleza pessoal vou deixar esse arquivo aqui para vocês estudarem aqui nas leituras complementares para vocês fazerem download porque esse aqui já está um pouquinho mais avançado a gente já usou vários e vários componentes que a gente aprendeu aqui no CSS né Pode ser que por dá uma forçadinha mais já que usar um conteúdo um pouco mais denso o Tico Teco já não acompanha muito né eu vou deixar aqui para vocês poderem ver o que a gente fez e aí vocês façam

exercício tentando fazer um drop Down aqui o de menu ou de botão eu vou fazer com que aconteça esse tipo de efeito como a gente mostrou aqui para vocês beleza é muito bem pessoal agora nós vamos aprender nessa aula sobre especificidade no CSS o palavrinha difícil em que cada treinar para falar especificidade mas que raio quer dizer isso que é especificidade quer dizer assim ó se você tiver duas ou mais regras CSS elas forem conflitantes talvez apontando para um mesmo elemento qual que o navegador vai executar qual que é o mais específico Qual que é

o navegador considera como sendo mais importante a gente já falou isso sobre isso um pouquinho na primeira aula que do nosso módulo de CSS a gente falou ali nas primeiras aulas né sobre o que que é considerado o mais importante ou não dependendo de como você faz o teu CSS mas na sala a gente vai ver mais alguns detalhes vinhos que às vezes é a razão pelo qual quando você tá fazendo seu site quando você tá querendo suas páginas seus sistemas o teu CSS parece que não te obedece e principalmente se você trabalhar com o

tremor que pronto ou com CSS pronto que você já pega aí pela internet e às vezes parece que você passa uma classe alguma coisa e não dá certo que a gente vai entender bem esse ponto da especificidade agora nessa nossa aula então vou fazer o seguinte vou apagar esse nosso signo de navegação vou apagar também o nosso estilo pontos SS aqui para a gente fazer alguns exemplos básicos de especificidades tá então como a gente vê hoje a Anna as primeiras aulas deste módulo tudo que você coloca diretamente na tag ele vai ter mais prioridade do

que o que tiver colocado dentro do estilo aqui na página incorporado e por último ele vai dar prioridade Aqui Ao estilo que está numa página externa então em ordem de importância seria assim então por exemplo aqui ó tem uma classe chamada borda certo aqui eu vou chamar esse aqui O que é de rede por exemplo de vermelho para gente fazer o nosso clássico background Red Então vou colocar aqui uma classe Red chama com background como sendo vermelho certo a beleza salvar aqui beleza agora é seu estipular aqui diretamente na minha tag HTML ou Style o

e dizer que o meu background vai ser heello e eu dei um salvar Olha lá ele ficou com um background Yellow amarelo porque entre a minha classe que tá no meu estilo é aqui separado na minha página CSS estilo. CSS externa entre o que eu coloquei diretamente na tag essa daqui tem uma especificidade maior ela é mais importante vamos dizer assim para o navegador certo se eu colocasse aqui em cima uma tag aqui ó HTML incorporado na minha página Style e colocasse aqui que o background back ground' vai ser azul ou Blue a Esqueci de

colocar o seletor né pessoal vamos colocar sem H1 e o McDonald é azul que cor que vocês acha que vai ficar vai ficar vermelho vai ficar Amarelo ou vai ficar azul quê que vocês acham Vou salvar aqui e olha lá ficou amarelo porque o que tá na tag é sempre prioridade especificidade a maior se eu tirar aqui o amarelo vai ficar será da classe Red ou será que vai ficar aqui do azul seu salvar olha só que interessante ficou vermelho não ficou azul mas que estranho porque a gente aprendeu que aquilo que tá na nossa

página ele tem mais prioridade pelo que tá na externa Na verdade ele tá pegando vermelha aqui porque será bom pessoal por um detalhe muito importante sobre especificidade que é o tipo de seletor que você tá usando aqui na nossa página a gente tá usando o seletor o tipo da tag que é H1 já ano nossa página externa o seletor que a gente está apontando é uma classe uma classe aqui no CSS o ponto rede que tá aqui nessa classe classes sempre têm prioridade em relação ao seletor simples nesse caso setor simples a gente tá passando

que é uma tag de te pagar um É genérico tá falando de tags eu te pagar um quando eu passo uma classe Ela é bem mais específica então classes tem uma prioridade maior do que um seletor Simples então por isso mesmo isso aqui estando incorporado na minha página ele tá dando prioridade porque a classe é mais forte do que um seletor simples agora claro se a classe fosse igual aqui por exemplo aqui é head e aqui essa classe também se chama-se Red eu salvasse olha ficar azul porque entre as duas na externa ou na interna

vai dar prioridade para interna porque as duas têm o mesmo nome de classe Mas entre o seu vetor simples por exemplo E aí bom e uma classe A classe sempre vai ter mais força certo agora olha só que interessante nós temos uma classe que chamada rede e eu vou colocar aqui um identificador um ai de chamado título tá bem um identificador e aqui em vez do seletor se 1h um normal né um seletor simples eu vou colocar aqui que o seletor vai ser título agora qual que você acha que vai ficar vai ficar azul ou

será que vai ficar vermelho qual regra que o meu navegador vai dar prioridade Se eu der um salvar você vai ver que vai ficar azul porque identificadores são mais fortes do Que classes certo pessoal então identificadores são mais fortes do Que classes isso é especificidade você entendeu o que que vai ter mais força certo então vamos fazer um exemplo aqui ó para você entender o que que é mais forte eu vou até tirar esse aqui da página certo eu tirar esse daqui e vou deixar aqui ó dentro da minha e na mesa do nosso mesmo

e CSS o seguinte nós temos aqui a classe que se chama rede nós vamos ter aqui em um Raid que se chama título e nós vamos ter aqui no H1 e colocar o background aqui como Yellow e joga um e aqui o background do título vai ser Blue eu vou salvar perceba aqui tanto o título aqui como agir como a classe Red como o seletor H1 todos eles se aplicariam é esse meu elemento por quê Porque ele tem esse agir ele tem essa classe e ele é um H1 Então os três aqui se eleitores que

eu tô usando esses três seletores podem-se aplicar e esse elemento só que o navegador vai dar ordem de prioridade para dizer qual o comportamento ele realmente vai executar e em ordem de prioridade é sempre assim guarde é mais importante depois vem a classe como sendo mais segundo mais importante e terceiro vem o seletor simples certo existem seletores ainda mais específicos por exemplo nós temos esse essa classe que se chama red red Deixa o fundo vermelho mas se eu colocasse assim ó ponto rede H1 eu tô dizendo que é no na classe chamada Red mais e

atributos chamar e eu vou colocar aqui ó que o background vai ser é orange-red que vai ser laranja tá eu vou dar um salvar continuar obviamente azul porque aquele tá dando prioridade para o meu Eyed vou tirar aqui só Wide só para gente ver qual que você acha que vai funcionar agora a classe que a gente passou aqui é head então na classe Red não teria que ficar com background vermelho mas aqui embaixo eu passei a classe rede e o seletor H1 eu fui ainda mais específico Se eu der um controles para salvar olha só

que curioso pessoal ainda assim continuou vermelho não foi orange-red mesmo passando com a classe aqui seria Red e o seletor H1 agora olha só que que acontece se eu quiser ao contrário H1 Red ah ah agora sim o seletor ficou correto eu coloquei primeiro Qual que é o elemento HTML e Então qual é a classe aí ele me deu prioridade porque o selecionei o seletor e mais a classe então é comparação com a classe sozinha Ele tem muito mais força porque você quer muito mais específico tá conseguindo compreender como funciona então basicamente A Hierarquia que

você tem que pensar é assim o que é mais forte primeiro é se você passar um estilo CSS direto aqui na pele então se eu colocar assim Caio e colocar que o background vai ser Green por exemplo isso aqui com certeza vai ser mais forte se eu passar direto depois disso daqui o segundo mais forte que vai vir vai ser o Eyed então se eu colocar o aí de um santo por exemplo título né eu coloquei o Edi como o título que eu voltar aqui para mostrar que título certo guarde vai ser o mais forte

ficou azul o caso é a gente tem aqui uma classe por exemplo Red e a classe vai ser o segundo mais forte então como eu tenho aqui um título um agir eu vou deixar aqui agora a classe A classe é depois do agir o mais forte e depois da classe vem o seletor comum certo mais claro antes da classe simples né vamos dizer só que o head se eu passar um seletor simples mas a classe ele passa a ser mais forte Olha só do que só uma classe simples certo Então essa é especificidade e uma

coisa curiosa pessoal vamos supor assim ó São Outro exemplo aqui para vocês Imagine que eu tenho aqui ó várias regras iguais aqui no meu CSS por exemplo que o background vai ser vermelho ó e vou pegar e vou colocar a mesma regra repetida três vezes vai ser vermelho verde e aqui vai ser azul ó as três apontando pro H1 qual fundo você acha que vai ter e a resposta quando der control S ó Azul sempre vai ser o último tá então se você usar um seletor igual em várias partes do seu código CSS eles forem

idênticos sempre o último vai ser o que vai valer ele vai ser o mais importante certo dentro da especificidade e dentro da especificidade de arquivos a gente viu que é na tag depois dentro da própria página e depois externo né mas claro isso sempre vai respeitar essas especificidades que a gente mostrou aqui do Eyed da classe e do seletor simples espero que vocês tenham entendido essa aula entendido como se funciona nas leituras complementares eu vou deixar aqui também uma referência sobre Como se calcula essa especificidade né até com uma certa pontuação que você pode dar

para cada tipo de atributo mas o jeito mais fácil de lembrar do meu ponto de vista é assim o mais forte tão de todos é o aí depois vem é o seletor comum vamos dizer assim tag. Classe certo esse é o segundo mais forte depois a classe simples depois a tag simples o seletor comum vem por último nessa sequência aqui de forças então aí de depois até demais a classe só a classe e a tag simples né Essa é a ordem de forças aqui de especificidade que o CSS respeito Isso vai ser importante nós entendemos

bem isso daqui porque dá para gente burlar essas regrinhas a gente tem como dizer para o nosso navegador que mesmo tendo um conflito entre a elementos ali no nosso CSS tem um que a gente tem como mais prioridade prioritário que é a regra do importa isso a gente vai ver na próxima aula e agora que a gente aprendeu sobre especificidade vai ser interessante você entender como funciona uma regra que a gente pode dar no CSS que se chama importante é o sinal de ponto de exclamação importa essa regra pessoal ela serve para determinar para o

nosso navegador o que que é realmente importante para a gente dentro da hierárquica gente que ignorando vamos dizer assim o fluxo normal de hierarquia do que seria mais importante para o CSS nós vimos na aula passada que vai dia mais importante depois vem a tag com a classe depois da classe simples e a tag tag Sim certo mas olha só como funciona a regra do importa Então eu tenho aqui o meu H1 esse meu amigão eu vou colocar uma ide chamado meu Eyed nós vamos colocar uma classe chamada minha classe certo e a gente tem

o seletor simples dele que é o H1 mesmo certo se eu viesse aqui e fizesse assim né o meu Eyed colocasse aqui que acordar letra vai ser vermelho só veio me acordar vermelha se eu colocasse a classe aqui. Minha classe e colocar aqui a cor vai ser azul ainda vai continuar vermelha porque o arde é mais forte certo e se eu colocasse aqui o H1 que é o seletor simples né como a color sendo Green ele ainda continuaria vermelho porque obviamente entre o grau de especificidade que a gente aprendeu ou mais forte sempre vai ser

o agir o ar dia sempre mais específico do que a classe que a classe vai ser mais específica do que uma tag simples só que se a gente usar essa regra que a gente tá aprendendo nessa aula de hoje a regra chamada importa ela vai simplesmente ignorar todos os valores que você passou anteriores a esse dando prioridade para aquele que você considera como prioritário então por exemplo se eu viesse aqui no meu H1 fizesse assim. é importante tô dizendo que isso aqui é o mais importante Se eu der um contra o Oeste olha só que

curioso ele vai Ignorar as regras de importância dos outros itens e dizer que essa daqui é a regra é importante para mim eu estou especificando que isso daqui é o que eu quero que vale os outros lá embora tenho ordem de importância maior elas estão sendo ignorados Por que o importante para mim é essa regra aqui é como se a gente tivesse uma regra para burlar as regras tá entendendo então quando a gente usa o importante ele vai dar prioridade para a propriedade que a gente marcar como importa agora é uma palavra de cautela né

pessoal com respeito ao importa o importante ele é interessante Quando você vai usar talvez por uma medida paliativa Quando você vai usar ele em um ou dois uso justos ali um elemento que você precisa para fazer algum teste para mudar alguma parte visual ali na hora de estar você construindo o seu template mas é legal você usar o importante porque senão vira uma verdadeira bagunça se eu CSS interessante você saber também que você pode colocar importante em vários elementos Vamos ver que nesse segundo eu vou colocar importante também olha o que que vai acontecer Os

dois têm importante mas na especificidade a classe é maior então esse importante vai ser o que vai ser executado não o outro só que Pare para pensar comigo se é para usar importante em vários lugares diferentes então não tem por que usar o importante era melhor que eu usasse especificidade comum do CSS assim ele já ia determinar o que que era melhor não é verdade então tem que ter cuidado ao usar o importante porque se de repente você começa a colocar importante em tudo perde o sentido de você usar essa regra né eu pego e

passo assim importante nesse primeiro eu coloco importante no segundo importante no terceiro vai acontecer que o primeiro vai ser o que vai valer porque ele tá seguindo a regra de especificidade comum agora se eu pego e deixo só lá no último que nunca jamais ele seria prioritário porque primeiro vir eu aí depois da Índia ainda viria a classe aí vale a pena na hora de eu estar fazendo coisa para um teste para ver como vai ficar esse por diante eu fazer dessa forma certo ainda um outro detalhe às vezes em vez a gente usar o

importante o que a gente pode usar é direto na tag aqui a cor eu poderia vir aqui na tag e colocar uma cor que eu pira por exemplo eu vou colocar aqui a cor vai ser Yellow Oi e aí ele funcionaria se aquela o detalhe né eu coloquei que esse daqui é um importante esse daqui é importante então ele vai inclusive ignorar a regra mais forte que seria diretamente na tag não tá funcionando porque eu determinei que isso daqui é mais importante agora se eu tiro esse daqui ó ó agora ficou amarelo porque ele seguiu

especificidade como então tem que ter muito cuidado com o importante porque de repente se você coloca ele numa posição Ali no lugar que você depois esquece que você fez aquela alteração E aí o elemento não se comporta mais certo aí você vai fazer inspecionar o elemento não consegue achar qualquer o erro onde é que tá o problema é porque talvez determinou que ela é uma regra importante certo pessoal então ela é bem legal mas tem que lembrar que ela vai forçar né aquele comportamento Então a gente tem que tomar cuidado para não exagerar no uso

dessa regra aqui e o melhor mesmo é usar e especificidade comum do CSS para gente fazer tudo certinho e de vez em quando dependendo da sua se você precisar burlar entre "as regras você pode usar sim essa regra do importante para fazer com que um elemento se comporte numa especificidade de grau menor Beleza espero que vocês tenham entendido para que que serve essa regra do importante e pode ser muito último a mão na roda às vezes na nossa modificação mas tem que ter cuidado na hora de usar e agora pessoal nós vamos aprender a fazer

o efeito de Gradiente Então vou apagar isso aqui na nossa última aula e a gente vai aprender a fazer um efeito muito legal com CSS que é o gradiente show só apagar isso daqui a gente deixar meu primeiro CSS direitinho aqui beleza perfeito Gradiente é que ele é feito onde a gente vai fazer uma transição de uma cor para outra dentro de um mesmo elemento então vou fazer aqui um anime ou colocar aqui um AD chamado Gradiente e vou especificar aqui no meu CSS o seguinte vou colocar que vai de Gradiente poderia ser uma classe

tá pessoal tô fazendo só por aí de porque eu achei que seria interessante mas pode ser uma classe também sem nenhum problema certo para a gente fazer esse efeito de Gradiente a gente vai fazer o seguinte primeiro deixa eu passar algumas propriedades aqui eu vou dizer que o a largura vai ser de cem porcento Oi e a altura dele corrente eu vou colocar de 300 pixels Oi e a gente poderia ter aqui um background Blue só para gente ver se elemento certinho na nossa tela Beleza quando a gente passa assim o background com uma cor

ele vai ficar uma cor sólida Mas vamos imaginar que eu gostaria que fosse assim no azul indo para o vermelho o efeito que eu quero fazer aqui como que eu faria isso né então a gente usa uma propriedade que se chama background-image sim a mesma coisa que a gente usaria para imagem tá pessoal só que nesse caso a gente vai usar uma propriedade especial se chama linear-gradient então eu falei assim ó background-image e aí aqui dentro eu passaria o seguinte parâmetro linear Gradiente até me deu aqui o já opção o linear-gradient abre parentes abre parentes

E aí a gente passa alguns parâmetros aqui dentro de como que a gente quer a gente pode passar a direção e as cores que a gente quer aqui dentro Em que direção esse Gradiente ele vai e quais são as cores que vão fazer um efeito de degradê né esse efeito Gradiente Vamos fazer um exemplo Simples então eu poderia colocar direto aqui por exemplo Blue seria azul e Red que seria Vermelho Se eu der um controle para salvar Olha que que vai acontecer ele já fez um efeito vindo do azul para o vermelho do Topo para

baixo então o azul como a primeira coisa ele tá vindo para cá e ele vai se transformando em vermelho então eles são primeiro padrãozinho que a gente tem quando a gente coloca apenas duas cores assim ele vai ficar vai de uma para outra aí o que que aconteceria se eu colocasse outra cor aqui se eu colocasse por exemplo Green uma terceira cor ó repara ficou Gradiente Entre uma e outra o azul indo até o vermelho vermelho indo até o verde certo do Topo para baixo Essa é uma das maneiras que a gente pode fazer é

a vamos dizer assim o padrão mas isso tá vindo de cima para baixo e se Gradiente né eu poderia fazer especificado aqui o código que eu quero que seja de uma direção específica por exemplo da esquerda para direita para isso só eu escrevi assim ó tu rite quer dizer para a direita coloca aqui uma, quer que vá para a direita Olha lá ele vai agora da esquerda para a direita fazendo o efeito de Gradiente certo então teamfight e se a gente quisesse talvez fazer na diagonal a gente poderia fazer bottom-right da de cima para baixo

para baixo direita se eu fizesse a sinto top-right ó então é para o topo à direita tá entendendo Então você tá passando qualquer direção que você quer o movimento Beleza a gente também pode passar aqui por ângulos tá pessoal então a gente poderia passar qual o ângulo que a gente quer então se eu colocasse aqui por exemplo 180 eu ia dizer que eu tô querendo o ângulo de 180 graus só que aí tem que colocar bag o 180deg quer dizer 180 graus se eu colocasse 90 deg 90 graus a parte de cima se eu colocasse

45 délhi Olá 45 graus ele vai fazer a inclinação conforme os graus que você passar por aqui certo e o número de cores que você quer usar é basicamente ilimitado por exemplo a gente poderia fazer aqui ó eu poderia colocar para a direita teamfight eu poderia passar aqui por exemplo para gente fazer tipo as cores do arco-íris né pessoal Deixa eu fazer aqui vou apagar esses essas coisas que a gente já colocou aqui ó o rite e aqui vou passar as cores do arco-íris Então vamos fazer lá red-orange heello um Grimm a Blue um Indigo

e Violeta o Olá salvamos fizemos tipo um efeito de arco-íris aqui usando o nosso degradê certo pessoal então é basicamente é assim que a gente faz um linear né o linear quer dizer em linha então a gente poderia colocar aqui por exemplo 45 graus né para fazer ele assim 45deg né para ele fazer assim de lado a fazer um efeitinho de arco-íris Beleza então estamos fazendo aqui um degradê Zinho dessa forma aí a gente pode passar então as cores e como que a gente quer que ele se comporte de baixo para cima da direita para

esquerda da esquerda para baixo a gente pode passando as direções ou então os graus aqui que a gente quer que ele se comporte Esse é o do tipo linear mas existe um outro tipo de de Gradiente que a gente pode utilizar que é o chamado Radial é quando a gente quer fazer esse efeito de Gradiente mais em formato de círculo então é basicamente a mesma coisa só que em vez de a gente colocar aqui como linear a gente vai passar a Radial olha só a diferença Só que nesse caso a gente tem que passar aqui

não com os graus né pessoal Radial ele não usa essa questão dos graus ele usa a questão das cores certo então você passa lá qual as cores que você quer e ele vai fazer um efeito como se fosse a em círculo assim né Então deixa eu tirar aqui deixa eu tirar aqui essas várias coisas aqui mas o meu mouse está ruim rapaziada vamos lá lá que ele não tá querendo me obedecer muito hoje vou apagar aqui ó nós vamos deixar assim só vermelho e laranja vai ficar um efeitinho assim ó tá vendo como se fosse

um círculo para as bordas então eu feito bem bonito também bem interessante você também pode fazer em porcentagens de valores certo pessoal eles também podem fazer assim por exemplo eu poderia colocar eu quero que seja vermelho a em cinquenta por cento e laranja 10 porcento e não salvar Olha lá ele já pegou como que a gente quer que seja o efeito em relação a uma cor para outra certo como que vai ser vamos dizer assim essa transição eu coloco aqui dez porcento Olha já ficou bem menos do que o laranja aqui ó a 90 deixa

eu ver aqui ó tenta ó já fez um efeito mais esparramado enfim se a gente coloca assim ele fica automático a gente pode passar também essas porcentagens para a gente tentar fazer uma coisinha mais bem feita né é que poderia colocar sem cinquenta por cento e esse aqui a gente podia até fazer Ser branco né Vamos tentar fazer a bandeira do Japão aqui ó a 10 por cento aqui vai ficar cada vez mais cem porcento E aí a força que a gente quer né Deixa eu ver aqui é cinco porcento aí vai ficar meio esquisito

né mas enfim vocês podem mudar esses parâmetros aqui para achar Qual que você quer que fique mais legal efeitinho aqui no caso do Radial certo então são basicamente esses dois tipos o tipo Radial e o tipo linear-gradient você passa aqui as cores que você quer o comportamento e ele vai fazer esse efeitinho de degradê isso daqui a gente poderia usar para botões poderia usar para dizes né para enfeitar como a gente quisesse a questão de fazer um efeitinho Geralmente os degradês que ficam mais legais né pessoal é seriam aqueles que são as vezes com a

mesma cor mas assim de uma cor mais escura para mais clara né então por exemplo assim a gente poderia fazer aqui assim e a o Rádio Gradiente vamos dizer aqui ó Blue seria um azul indo para um deixa eu ver os tipos de cor que a gente tem aqui vamos colocar aqui um joguinho da velha e abrir aqui o nosso seletor me pegar um azul mais clarinha e pegar um azul assim a gente pode passar também cor hexadecimal tá pessoal não precisa ser só uma cor específica assim a gente pode passar uma cor hexadecimal RGB

também vai funcionar ó então fica bem mais bonito quando a gente trabalha assim com cores que combinam né pessoal e por isso com azul com azul mais claro você já vê que ficou bem show de bola poderia colocar que assim né que vai ser 45deg né de 45 graus Olha já fica um efeito bem mais legal Zinho para a gente está utilizando a gente poderia estar usando esse tipo de efeito para o nosso Bardi aqui em vez de usar nesse nosso componente a gente poderia fazer assim Bari aí como colocar background image linear gradient e

a gente poderia colocar por exemplo 45 deg 45 graus que poderia colocar um cinza indo para um branco por exemplo e eu já vai fazer um certo efeitinho aqui no fundo né Talvez um Cinza Mais Escuro indo para um cinza mais claro a gente poderia especificar aqui ainda para um cinza mais claro É só para fazer um certo efeito né na nossa página ou se a gente não quer 45 graus a gente poderia pagar esse aqui e deixar ele assim de cima para baixo tá mais escura em cima e quando mais claro para baixo a

criatividade é o limite né pessoal para construção aqui dos elementos usando esses defeitinhos de degradê que a gente pode tá utilizando a é bem pessoal agora nós vamos conhecer aqui as propriedades de sombra do CSS seria a propriedade Shadow né seriotex the shadows o efeito de sombras no texto e o box Shadow que é feito de sombra encaixa por assim dizer que seria em elementos como o The hives e coisas do tipo assim donas vamos ver como que a gente usa essas propriedades de sombras é uma propriedade que dá uma estilização bem legal aqui nos

nossos projetinhos então vou deixar só o meu título um aqui para gente exemplo e ficar e a propriedade de sombra no texto O text-shadow a gente faz assim a text-shadow quer sombra no texto e aí a gente vai passar alguns parâmetros sombra na horizontal e vertical Qual o desfoque o quanto de desfoque o suavização dessa sombra a gente quer que cor ela vai ter então por exemplo vou colocar dois pixels 2 pixels quer dizer na horizontal e na vertical quanto que eu quero que tenha de sombra ó e vou dar um salvar só para a

gente ir vendo que que acontece percebeu ele deu uma aplicação de sombra ali para nós se eu colocar uma cor aqui ó por exemplo vermelho ele vai colocar uma sombra então de 2 pixels por dois pixels vermelha eu colocasse um pixel ali diminuiria faria uma sombra bem de levinho tá vendo quanto maior eu colocar aqui e mais vamos dizer assim vai ser maior vai ser a minha sombra né mas ela também acaba que desloca um pouquinho para baixo certo e aí a gente tem aqui uma outra propriedade que a gente pode passar que é o

blues o blues seria um desfoque para uma suavização dessas sombras que os eu coloco por exemplo a suavização de 5 pixels olha lá o que que ele vai fazer ele vai pegar essa sombra e dá uma suavizada nela certo o text-shadow pessoal para ser bem sincero com vocês ele não é muito fácil da gente conseguir acertar assim só de botar o olho aqui quantos fixos como que vai ficar o efeito de sombra você tem que ir testando você vai colocando lá os valores e vai vendo como é que fica o deslocamento a posição né o

como é que vai ficando se você quer mais bolor ou menos ler certo a cor que vai ficar Então você tem que ir como que verificando com as mudanças que você faz aqui dos valores Como você quer que vai ficar o teu resultado estético certo mas existem várias coisas que a gente pode é preciso feitinhas por exemplo a gente poderia fazer aqui a um efeitinho legal a 2 fixos por dois pisos 5 pixels de blues e a que a cor a gente poderia trocar para para vermelho mesmo e o head né poderia até deixarem Red

ó como efeitinho legal aqui para o nosso texto né a gente poderia colocar aqui um outro seu salvar vou colocar um outro H1 e eu vou chamar ele de branco aqui Branco certa que vou colocar outro texto e eu vou colocar aqui ó a classe Branco vou colocar que a cor Vai ser branco então ele vai desaparecer que o elemento mas a sombra eu vou fazer um text-shadow 2 pixels por dois pixels vou colocar quatro fixas de suavização e escuro Olha lá Fiz um efeito Então o texto na verdade ele é branco mas a sombra

da um efeitinho aqui nele né então a gente pode usando a criatividade para fazer vários tipos de sombras diferentes existe também a possibilidade de múltiplas sombras você faz múltiplas sombras da seguinte maneira então vou colocar aqui um H1 com a classe múltipla as múltiplas sombras E aí você faz a seguinte maneira o vou fazer aqui é classe. Múltiplas O que é multipla múltipla você faz a seguinte maneira isso daqui você vai colocar o text Shadow e Como por exemplo o primeiro colocar aqui que a cor vai ser só para não pegar a cor dos outros

ele vou pegar a cola ele como Black mesmo só para garantir tem que ser Shadow a gente pode passar aqui então que vai ter por exemplo assim ó não vai ter nenhuma sombra vai ter umbler de 3 pixels e a só pra gente ver como é que cê vai ficando ó ele tá fazendo bem de leve um efeitinho aqui só de boa naquela que seria aquele efeitinho tipo de ofuscado né de como se fosse um desfoque sei se vocês vão conseguir enxergar aqui bem certo mas eu posso passar uma cor eu vou passar aqui um

efeito aqui ó ff000 40 sequer seria um vermelhinho ele ficou com leve efeitinho aqui de efeito the Blood 3 pixels vermelhinho né porque eu não passei aqui nenhuma sombra específica mas eu quero colocar mais um outro efeito por fora eu coloco aqui uma Oi e aí eu vou colocar mais uma mais um efeito de sombra uma sombra à mais eu quero adicionar então eu vou colocar aqui assim por exemplo 2 pixels por dois pixels e eu vou falar que essa sombra vai ter umbler de 5 pixels EA cor dela vai ser amarela Yellow bom Então

olha só Ele misturou as duas tá vendo eu misturei as duas se eu colocasse aqui um pouquinho mais a 10 pixels do vermelho já fica uma sombra que é amarela com vermelha elas estão misturadas entendeu então esses são alguns defeitinhos de sombra em texto que a gente pode usar e dependendo da de como a gente usa fica bem legal Às vezes dá para procurar na internet você digita ali no Google efeitos de texto com sombras e tem alguns malucos aí que já fizeram várias coisas já prontas pré-definidas que você pode copiar e aplicar no CSS

um projetinho seu essa questão do efeito de sombra em texto né pessoal mas vamos ver agora o efeito de sombra em caixa ou seja o box-shadow então para isso nós vamos fazer aqui uma div vamos fazer aqui Uma div para a gente ter um é como se fosse uma caixa né Vamos colocar aqui uma de uma classe Box ou cai Vamos colocar se encaixa em inglês e vamos fazer aqui ó esse nosso essa nossa classe Caixa e aqui dentro eu posso fazer assim que ele vai ter a largura de 100 porcento tamanho da minha tela

altura dele vai ser é 300 pixels e eu poderia colocar aqui o background dele a cor dele o McQueen aonde vai ser e é vermelho vamos ver uma coisa aqui mais vamos ver aqui um cinza Vamos colocar Grey aqui um cinza certo então a gente tem o nosso Element in aqui agora vamos imaginar que a gente queira colocar um efeito de sombra nele encaixa quer dizer pegar toda a extensão aqui da nossa caixinha a gente faz assim box-shadow e é muito semelhante ele o que a gente fez com a o nosso texto Vou colocar aqui

as 5 pixels por 5 pixels por exemplo se eu dou um contra o Oeste para salvar você para que ele colocou aqui uma sombra na horizontal e na vertical né posso suavizar essa sombra fazendo mais um aqui ó 5 pixels por exemplo já vê que ele dá aquela suavização dobler poderia suavizar um pouquinho mais 15 pixels Ó ficou bem mais suavizado então eu fiz um efeito de sombra ele fica um pouco mais como se fosse assim parece 3D né mas afastado eu poderia também adicionar aqui uma cor também que eu poderia colocar sim Red E

aí é uma sombra com uma cor repara que ele tá no fundo não é como se fizesse sim um efeito no fundo da nossa caixa da nossa da nossa Diva geralmente quando a gente quer trabalhar com cards pessoal quer dizer que ele é feito assim que seria como se fosse um card né a gente faz a seguinte maneira eu vou colocar aqui o tamanho de vinte por cento Vou colocar aqui com o tamanho desse Card que vai ser de vinte por cento comer pequeno nada escola quarenta por cento aqui ó e altura pode ser e

300 pixels existe um certo um tipo de box-shadow aqui quer tipo um padrão que a gente usa para efeitos de card assim tá pessoal eu vou colocar cor de fundo dele aqui da nossa caixa Vou colocar aqui background vou colocar ele como branco mesmo tá background White e ficou branco e a sombra que vai determinar aquele efeito de Card como se fosse assim uma caixa né a gente faz a seguinte maneira isso aqui é um padrão que geralmente se utiliza zero depois 4 pixels 8 pixels zero de novo e a gente usa o padrão RGB

rgba assim zero, zero, zero, zero ponto dois é tipo um cinzinha com uma certa sombra certo depois você dá 1,06 pixels 20 pixels zero rgba ó e aqui dentro a gente vai passar 0,0 0,0. 19 E se a gente dá um control S olha lá o efeito que ele faz ele deve ser feitinho de sombra aqui como se fosse de card que fica um pouquinho mais afastado certo pessoal então dá para usar esse efeitinho aí eu a gente pode colocar aqui dentro por exemplo uma imagem né vem aqui e MG src o e MG/um pegar

aqui fundo por exemplo em salvar vai ficar gigante a gente pode colocar aqui direto ou Stein Max diet e sem por cento o Olá eu com styling de card aqui onde a gente colocou uma imagenzinha e aqui embaixo a gente poderia colocar um texto alguma coisa qualquer que a gente poderia colocar aqui né por exemplo poderia colocar aqui um título 21 H2 isso é um card E ai são Card eu poderia colocar aqui nessa nossa classe o nosso texto comum nosso text-align e como Center Oi e aí a gente já tá fazendo aqui um card

Zinho né pessoal a gente poderia colocar aqui parágrafo Oi tudo bom isso é um carne o olá que legal fizemos um card Zinho que bem simples usando a propriedade das Sombras o Blocks Sheldon Professor Dimitri Mas você sabe de cor nesse esses valores aqui não pessoal eu tô colando aqui na do meu outro monitor deixei aberto aqui numa página onde tem esse é feito E aí eu coloquei no meu então quando a gente trabalha principalmente com sombras esses efeitos de sombra é muito ruim de você acertar aqui Quais são os valores tá pessoal eu mesmo

de cabeça e geralmente não sei esses valores então eu vou lá a internet coloca o efeito de sombras Card coloca o boxe Shadow Card por exemplo E aí um vai ter algum Caboclo lá que tem o código Zinho dos valores que você vai ter que colocar aqui na sombras você copia aqui no colo aqui no teu projecto e tá acabado você fez o efeitinho ali de tarde na hora bem rapidinho tá bom então sempre uso o Google também é o seu favor então esse aqui é o efeito de text-shadow o efeito de texto é de

sombra o texto e o boxe Shadow com efeito de sombra em elementos como the hive o alimentos que você quer fazer como se fosse encaixa Olá tudo bem pessoal nessa aula nós vamos aprender aqui algumas questões defeito contexto não sentido de a gente deixar nosso texto mais bonito mas principalmente de formatação de texto em algumas circunstâncias que com certeza você vai acabar se deparando ao longo do tempo conforme você for fazendo os seus projetos né a gente vai aprender algumas propriedades que são bem úteis em relação aos textos que a gente usa dentro de elementos

que tem o tamanho das vezes fixos ou tamanhos pré-definidos e o comportamento que a gente queira que ele tenha dentro desse elemento então na aula passada nós fizemos esse Card Zinho aqui bem legal bem bonitinho mas a gente imagina o seguinte Imagine que esse título que a gente tem aqui ele fosse um título bem mais longo e que esse parágrafo também fosse bem mais longo por exemplo às vezes essa informação Vem de um banco de dados externas vai ser alimentado de forma dinâmica talvez com título de um blog um pequeno um pequeno o artigo que

vem aqui e talvez isso aqui não vai ser só uma frase vai ter mais coisas né mas a gente especificou que o tamanho desse card de 300 pixels ele tem o tamanho fixo aqui eu como é que a gente pode fazer para manter o padrão por assim dizer para que tudo isso fique direitinho mesmo que a gente tem muito conteúdo Então vamos supor que a gente tem assim isso é um card é exemplo de título muito longo certo lá ficou bem grandão o nosso título certo mas vamos imaginar que a gente tem mais aqui um

texto eu vou copiar essa frase aqui mas o parágrafo que a gente tem aqui embaixo né Vamos colocar pa Ok então nós temos aqui saindo para baixo e esse título muito longo a gente ainda poderia aumentar ele mais ainda vou copiar toda essa extenção aqui ó e colocar aqui na continuação né então eu vou ter bastante título bastante texto Oi beleza talvez a nossa tendência né já pensando no que a gente já aprendeu aqui no curso pensa assim bom isso aqui é um texto que tá saindo para fora da área que do nosso na nossa

caixa né então eu poderia vir aqui na minha caixa e eu poderia colocar o overflow como ryden E aí olha só beleza a gente vamos dizer assim já tirou para não aparecer o conteúdo ficar dentro dessa área como a gente aprendeu lá na aula sobre o ver flor só que isso causa um problema no causa a gente gostaria que me mostrasse o título e mostrar se o texto e ele é muito longo só aparece esse pedaço e corta tudo o resto Será que dá para gente fazer melhor do que isso dá para fazer sim pessoal

e a gente vai fazer isso agora vamos fazer o seguinte a gente vai colocar aqui ó uma classe chamada nesse nesse nosso título um aqui ó nesse nosso título dois melhor dizendo a gente pode chamar uma uma classe chamada reduzido tá O que é uma classe chamada reduzido e aqui vou fazer essa classe chamada reduzido agora a gente vai fazer algumas propriedades que vão fazer o efeito que a gente vai querer fazer dele ficar dentro do limite que a gente quer uma primeira propriedade que a gente pode passar é a propriedade white-space essa propriedade white-space

quando a gente usa esse tem aqui ó no rappi a gente faz com que o item que tenha várias quebras de linhas ou uma continuação para baixo fique tudo numa linha só então se eu der um contra o Oeste Olha o que que vai acontecer ficou tudo numa sequência de uma linha só legal então a gente já tem ele todo indo para o lado beleza sem por cento mas a gente vai querer que esse título nosso não saia não extrapola que o limite do tamanho dele né não indo lá para para fora do nosso a

da nossa área aqui então quê que a gente poderia fazer um overflow gente poderia colocar com E aí Oi e aí ele vai cortar ali onde acaba o nosso elemento aqui o nosso nosso título beleza por enquanto tá tranquilo a gente poderia até colocar aqui uma borda de um pixel sólida Black só para gente ver aqui ó como é que tá ficando beleza tá ficando assim dessa forma mas não seria é esse tipo de formatação não fica muito legal né pessoal ficar a meio ruim em relação assim ao texto que tá cortando bem seco aqui

será que a gente teria uma propriedade para deixar isso aqui um pouquinho mas legal Zinho mais enfeitando Tem sim essa propriedade é a propriedade text overflow Uber flor como a gente já viu É o Fluxo da nossa página até onde vai o nosso elemento o text-overflow vai determinar o que que vai acontecer com o texto quando o overflow o overflow foi atingido por exemplo a gente colocou que é para quando chegar no limite daquela daquele espaço e ele vai cortar vai ficar invisível mas no text-overflow posso passar um comportamento desse texto O que que ele

vai acontecer quando ele chegar naquele limite e aqui eu posso passar uma propriedade chamada elipses então text-overflow ellipsis quando eu fizer isso olha só que legal Zinho o que vai acontecer ele vai colocar... No Limite Então antes da onde vai ser o limite ele vai acrescentar... Como que mostrando para o usuário que ali vai ter uma certa continuação olha só que legal que isso fica né então já fica bem legal a gente já tem Um textinho aqui a já com uma certa continuação olha só que a gente poderia fazer a gente criou essa essa classe

chamada reduzido certo que faz todo esse efeito que a gente viu aqui será que a gente não poderia pegar essa classe colocar também no nosso parágrafo aqui com certeza a gente fez uma vez a classe Vamos colocar aqui ó reduzido também no nosso parágrafo e olha só o que que vai acontecer beleza ele também reduziu o nosso parágrafo agora tá assim dessa forma se a gente tirar a borda aqui Claro a gente não vai deixar essa borda né é porque senão era só para gente ver olha só que legal que aconteceu Ele ficou com o

texto contido aqui dentro do nosso show de bola né pessoal bem legal então nosso texto já está contido aqui dentro a gente poderia fazer ainda algumas modificações aqui nesse nosso card para que ele ficasse mais legal por exemplo em vez da gente colocar uma altura específica a gente poderia colocar bom vamos fazer o seguinte vamos fazer que quando a gente vai a caixa ou quando passar o mouse sobre a caixa O que que a gente vai fazer a gente vai fazer com que esse nosso reduzido mude as propriedades dele então quando passa o mouse aqui

em cima dessa desse na sua nossa caixa que seria o Card aqui né o que que vai acontecer com a nossa classe reduzida a gente pode colocar aqui ó que o nosso white-space vai ser normal bom Então olha só que que vai acontecer eu passei olha só que show de bola pessoa passei ele vai mostrar o conteúdo ó tá reduzido por causa do que a gente colocou aqui nas propriedades do reduzido passei o mouse em cima ele mostrou conteúdo só que que acontece o nosso Card tá com tamanho específico então ele não tá conseguindo acompanhar

isso então quê que a gente poderia fazer a gente poderia mudar aqui altura para auto automática E aí ele já vai ficar como que pegando ó qual que é certinho a nossa altura do nosso Carne Legal e a gente poderia ainda colocar aqui no nosso reduzido um pede para baixo né Vamos colocar um pezinho botton um preenchimento para baixo de uns 20 pixels ou para dar uma preenche Dinho aqui ó um pouquinho para baixo é um pouquinho mais talvez 30 pixels Oi beleza e até esse nosso primeiro título aqui talvez a gente poderia colocar nele

direto aqui para não ter aqui o estilo só para ele não ficar tão afastado do de baixo a gente poderia colocar aqui a margem é bota um dele vai ser zero a margem embaixo e hopped in Bottom dele também vai ser zero tá e vamos ver como é que isso fica aí ficou bem melhor já chegou mais perto nosso texto do nosso parágrafo aí a gente colocou a propriedade direto na tag então isso vai acontecer só nesse nosso h2ac específico certo então já fica bem legal efeitinho olha só o nosso Card ele tá respeitando aqui

um limite de texto ele vai chegar até aquele determinado. Vai colocar os... Ou conteúdo também E aí quando eu passo o mouse por cima aí ele vai me mostrar qual que é o conteúdo legal então isso a gente fez só com CSS usando essas propriedades vizinhas aqui do text-overflow de White Space né Isso aqui é muito útil com certeza vocês em algum momento vão se deparar com esse tipo de situação é por exemplo lá no WhatsApp web se você tiver usando WhatsApp web você vai ver que tem lá a parte onde tem o nome do

usuário lá na janelinha onde você vai estar conversando com a pessoa mas se de repente o nome daquela pessoa for muito comprido ele vai colocar... Como tô fazendo isso ele tá fazendo isso através dessa propriedade text overflow ele passou o tamanho talvez ali daquela área específica colocou overflow Hidden e para ele colocar os três pontinhos que o teste overflow quando ele atinge aquele tamanho certo e esse White Space aqui é um recurso bem legal para a gente está utilizando a para ficar tudo numa linha só mesmo que tenha Várias Vários conteúdos fica tudo numa linha

só beleza então esse aqui é um recurso muito legal que a gente tem aqui com efeitos de texto certo Pessoal espero que vocês tenham gostado dessa aula entendido para que que serve esse text-overflow também como a gente pode usar white-space e eu vejo você na próxima aula é muito bem pessoal nessa aula nas uns aprender algo muito importante aqui do CSS eu diria que essa aula é uma aula chave uma aula fundamental que é o conceito de media queries isso na verdade muda o jogo por assim dizer essa propriedade de sucesso que nós vamos aprender

nessa aula ela talvez uma das mais importantes atualmente dentro do CSS para os nossos projetos Então você prestar bastante atenção na sala vai ser importante tanta salva que nós vamos ter aqui das mídias queres como a próxima aula do fluxbox também vão se aulas bem importante na verdade é a parte mais fundamental de você entender dentro do CSS o que que acontece pessoal como você vai ver aí na até hoje em dia nós temos diferentes dispositivos para rodar o nosso site nosso sistema usando a internet como base a gente tem computadores nós temos notebooks tablets

celulares E aí a tendência cada vez mais outros aparelhos fazer esse tipo de trabalho a gente tem hoje em dia também ter vez né Smart Então os dispositivos Eles são muito variados a gente tem aí o nosso site podemos ser apresentado em telas de tamanhos muito diferentes e em todas essas telas Independente de qual é o tipo do aparelho que a pessoa está vendo nosso site ele tem que se comportar de maneira adequada de maneira bonita independente vamos dizer assim de qual tipo de aparelho tá rodando ele isso esse conceito a gente chama também de

responsividade ou é layout responsivo que quando um layout ele se adapta à tela então voltando aqui para o nosso projetinho é só para mostrar para vocês um exemplo e eu vou entrar aqui no site do criar aplicativos.com que é o meu site aqui de desenvolver o curso de desenvolvimento de apps né se nós prestarmos atenção pessoal o que que acontece aqui ó o nosso site tá rodando no tamanho Total aqui da minha tela estou fazendo isso no laptop do seu teclado f12 aqui ó eu vou ter como vem em diferentes tamanhos de dispositivos aqui no

meu Google Chrome ele aparece essa opção né aqui quando eu tô com essa opção todo o device to bar ativa para a gente ver e como ele se comporta em diferentes resoluções então perceba que a medida como vou diminuindo o tamanho da resolução aqui do meu site ó ele vai como que se adaptando por exemplo aqui ó pra celulares celulares um pouco menores maiores para tablets é para notebook então conforme eu vou reduzindo que o tamanho da minha janela o meu site ele tem que ir se adaptando o percebe entendeu o conceito tenho só para

a gente ter esse conceito de forma bem mais simples as mídias queres elas basicamente abarcam cinco tamanhos para gente trabalhar sem futuro que a gente precisa o tamanho para smartphone para dispositivos um pouco maiores que o smartphone cê deixa por exemplo um tablet né menor dispositivos de tamanho médio que já seria um tablet quando ele tá deitado tamanhos largos que seria laptop desktop já computadores e tamanho super largos né poderiam ser aí desktops e laptops com a tela bem grande ou às vezes até maior do que isso por exemplo uma TV Smart né então eu

vou copiar aqui um trecho de código já deixei preparado e vou colar aqui no nosso estilo. CSS para você já ter a esse tamanhos já pré-definidos tá deixa coladinho aqui e você vai ter na descrição da aula a já esses tamanhos para você copiar e colar nos seus projetos para você ter tamanho de é diferente dependendo da tela Mas vamos entender aqui como funciona as questões aqui de mídia queres certo pessoal para a gente definir uma mídia quer a gente usa essa syntaxin esse texto escrito@média-média se escreve média né only ou apenas tela né porque

a gente tem aqui várias coisas que a gente poder passar tela a gente poderia passar impressoras em vários outros parâmetros que não são interessantes da gente saber no momento mais importante aqui é o screen que é a tela é o que a gente quer trabalhar aqui que são as telas do nosso site certo e aqui a gente passa o parâmetro que a gente quer por exemplo o senhor aqui a gente está especificando um tamanho para smartphones e até 600 pixels de tela de tamanho de largura aqui ó então tamanho máximo o Max diet 600 pixels

o que que vai acontecer se o tamanho máximo por 600 pixels certo é isso que a gente tá de e esse é segundo a dispositivos um pouco maiores quando o tamanho mínimo da tela é a partir de 600 pixels Então até 600 pixels vai executar o que tiver dentro aqui dessa mídia quer e aqui se o mínimo for 600 quer dizer vai ser maior que 600 aqui o que que vai acontecer a gente vai passar as propriedades aqui dentro dessa condição aqui como se fosse uma condição se a tela for tamanho mínimo de 600 né

vai acontecer isso daqui dispositivos médios se a tela for o tamanho mínimo de 768 pixels Então chegou em 768 pixels de tamanho mínimo então o que que vai acontecer os dispositivos largos o que que vai acontecer se a tela tiver 992 pixels certo o que vai acontecer e aqui super largos se a tela tiver o tamanho mínimo de 1200 pixels o que que vai acontecer então essas aqui são algumas mídia quer vez que a gente geralmente USA e não tá essas cinco normalmente de abordam todas as circunstâncias do que pode acontecer então vamos exemplificada seguinte

maneira a gente pode especificar que por exemplo o nosso Bari Quando a nossa tela tiver um tamanho até 600 pixels que o nosso bar ele vai ter um background da cor azul certo então até 600 pixels ele vai ter esse comportamento aqui se ele for um pouquinho maior de 600 pixels quer dizer o mínimo tamanho mínimo por a partir de 600 o que que vai acontecer se ele for a partir de 600 a gente vai colocar aqui que o background dele vai ser verde a Esqueci de colocar aqui qual que é o seletor na pessoal

Mari aqui olha só estou esquecendo de colocar o seletor tão baile vai ser o background Verde você vê que ele já até apresentou esse resultado aqui eu já ficou verde certo porque a gente deve estar dentro dessa dimensão aqui mínima de 6 anos O seu certo agora se for um mínimo de 768 vou fazer que o nosso Bari e vai ter um background Amarelo Então vamos colocar aqui que ele vai ter um background Amarelo Se for g992 para cima vai ser o background dele vai ser o vermelho e se for maior de 1200 pixels o

background dele vai ser a vou esquecer que de colocar o seletor de novo né tô esquecendo o seletor background dele vai ser a pode ser esse Violeta aqui certo Então olha só a gente especificou comportamentos de acordo com o tamanho do seu tamanho da tela for o máximo de 600 pixels ele vai dar azul se for entre 600 e 768 né porque a gente colocou aqui que no 768 como mínimo Então vai dar verde se for de 768 992 vai dar amarelo se for de 992 para cima vermelha até 1.200 de 1.200 por cima vai

dar Violeta certo então vamos ver o que que vai acontecer agora medida que a gente for redimensionando a nossa tela dá uma olhada ó eu baixei de 600 pixels ó a condição que ele ativou foi que o background vai ser azul certo E agora se eu for aumentando vai passar de 600 pixels Olha que que vai acontecer um nosso background ficou verde porque o tamanho da tela aqui passou de 600 pixels Então essa condição foi ativada e vamos continuar aumentando aqui ó vou aumentar passei de 768 Olha que que vai acontecer ao nosso background ficou

amarelo porque a gente passou aqui de 768 certo quando a gente passar de 992 Olha que que vai acontecer ele vai ficar vermelho Então vamos lá 11 continuando aqui e ficou vermelho Olha só interessante né pessoal e se passar de 1.200 ele vai ficar Violeta Então vamos continuar aumentando aqui ficou Violeta e daqui para frente vai ficar Violeta porque essa condição da sempre sendo ativa então reparou dependendo do tamanho da resolução eu passei propriedades diferentes comportamentos diferentes para você ver isso com os pixels da do tamanho da tela Você pode teclar no seu Google Chrome

S12 ele vai abrir provavelmente para você aqui embaixo assim o docker certo que é onde a gente pode ver inspecionar os elementos e tudo mais né a gente pode ter alguns recursos a mais aqui do nosso navegador aí que que você vai fazer você vai vir aqui na opção aqui dos três pontinhos escolhe essa opção aqui o doctorid para ele ficar aqui no cantinho no de você provavelmente vai estar desmarcado assim esse item aqui ó que é um símbolo que parece tá vendo um celular e um tablet que o ícone esse Rico o poder ver

a o tamanho da resolução da tela e fazer simulações de tamanhos e se tornou device to bar você clica aqui e ele vai abrir para você ó para você poder verificar os tamanhos dos itens aqui tá vendo né só que eu mostrei aqui no início da aula né E aqui mostra o tamanho da resolução tá 768 por 705 tô 768 de largura por 705 de altura eu conforme eu vou diminuindo baixei de 7:30 8:00 768 Amarelo baixei um pouco de 768 já entrou naquela condição entre 600 e 768 certo se eu for para baixo de

600 ó vai ficar azul Então eu posso ir acompanhando o comportamento de acordo com o tamanho da minha tela né pessoal isso é muito legal para voltar ao normal se aperta f12 de novo ele vai mostrar o site no tamanho normal certo você também pode redimensionar aqui pelo restaurar né e puxando aqui pela lateral Zinha assim você também vai ver se é feito OK aí você tá Não me pergunte está Professor Dimitri para que que serve isso é só para mudar o fundo do meu site não né pessoal a gente mudou o fundo do site

só para você entender o conceito aqui porque fica visualmente mais fácil de entender o conceito de que você redimensionando o tamanho da tela ele vai ter comportamentos diferentes o que normalmente a gente faz é construir o site pensando nos vários tipos de tamanho de resolução de tela que a gente vai ter e adaptando as nossas classes e por exemplo assim vamos fazer um exemplo esse Isso muda o jogo é um H2 certo eu poderia fazer aqui fora dessas nossas mídias queres eu podia colocar aqui ó que o comportamento padrão desse meu H2 vai ser uma

cor é branca e ficou branco e que o tamanho da fonte dele font-size vai ser 14 pixels ó ele ficou menorzinho certo ok Esse é o comportamento padrão Mas eu posso especificar em dispositivos com tela bem maior por exemplo ele poderia ter um tamanho de fonte maior no concorda comigo então eu poderia colocar aqui por exemplo esses dispositivos aqui mais largos que o nosso H2 ele poderia ter um tamanho de fonte maior um Font size e por exemplo 22 pixels então ele tá pequenininha aqui porque tá pequeno conforme eu fosse aumentando aumentando ó Olá já

aumentou o tamanho da letra tá vendo da fonte ó Nem tô tamanho da fonte Então essa adaptação eu poderia estar fazendo né Outra coisa que a gente vê muito em sites como é que é É de comportamento de coisas que podem aparecer ou desaparecer dependendo do tamanho da resolução da tela Então vamos imaginar que essa nossa propriedade esse nosso parágrafo aqui eu vou colocar que ele vai ter um estilo eu vou colocar nele assim vou colocar uma classe nele exemplo tá bom então poderia dizer que esse parágrafo Por exemplo essa classe exemplo em dispositivos de

tela a por exemplo em computadores e laptops ele não vai aparecer então poderia vir aqui botar aquelas exemplo Oi e o display dele poderia ser nome eu não quero que apareça Então olha só o que que vai acontecer eu tô aqui um tamanho de tela pequeno tal tá aparecendo aqui meu parágrafo essa minha classe exemplo certo conforme eu vou aumentando ó quando chegar na aula que que aconteceu quando chegou no mediano ele desapareceu tá vendo ó quando eu volto para menorzinho ele aparece se eu subo ele desaparece então eu removi aquele elemento de acordo com

o tamanho da tela certo a gente usa isso muito para menos de sites né Isso é muito comum em menos de site você tem aquele menino que é para computador que fica na vertical mas conforme você por exemplo vai reduzindo a tela você quer que aquele menu desapareça um exemplo disso é o meu site do criar aplicativos aqui.com é para uma coisa quando eu tô no modo para computador eu tenho que aulas gratis e um botão de login certo olha só que que eu fiz conforme eu vou diminuindo aqui o tamanho esse minha mãe não

vai vai ficando cada vez menor e eu quero o Holandês pelo tamanho da minha tela verifica na hora que eu tô programando quando eu chega num dispositivo de tela bem menor Olha o que que acontece com o meu botão de login ele desaparece tá vendo eu programei para ele sair nesse tamanho de resolução ele não vai aparecer mais fica só aulas gratis e ele vai parar Olha só lá embaixo assim eu for lá rolar minha página ou tá lá em baixo o botão de login ele apareceu aqui ó agora sim aumentar aqui ó ele desaparece

diminuir ele aparece aqui tá vendo porque eu mandei que um elemento que tava escondida aqui então aí resolução maior não aparecesse mas quando eu diminuísse a tela naquele naquela altura ele aparecesse então a gente pode gerar Esse controle de como nosso site vai se comportar de acordo com a resolução da tela Oi tá conseguindo compreender o significado disso então é basicamente isso a gente constrói o nosso site geralmente pensando numa resolução pode ser uma resolução por exemplo para computador você constrói ela primeira e vamos dizer Pensa numa resolução comum de computador e depois você vai

adaptando aqui conforme as resoluções você vai diminuindo vendo comportamento delas os tamanhos das coisas e aí você vai poder fazer o teu site se adaptado a todo tipo de dispositivo compreendeu aí o funcionamento o significado disso bem tranquilo né pessoal então as mídias querem são muito importantes são muito interessantes inclusive esse método que a gente mostrou aqui para você é já definidos cinco tamanhos pré-definidos né que já seriam basicamente abarcando smartphones positivos um pouco maiores positivos médios positivos largos e super largos você tem também uma outra maneira de fazer Vou até apagar esse daqui só

para facilitar que a nossa visualização que é especificando um Oi e um tamanho máximo na mesma definição na mesma mídia quer que a gente vai passar aqui então se tiver entre esse tamanho e esse tamanho eu quero que aconteça x Então vou dar um exemplo aqui a roupa mídia né scream.and a que faltou eu não coloquei online né mas tudo bem aqui vai funcionar igual você colocar assim media screen and aí eu posso colocar aqui ó o tamanho máximo Max diet tamanho máximo vai ser vamos supor aqui há 900 pixels tá coloquei entre parentes aqui

and e o tamanho mínimo o mínimo e o e-bit e vai ser de 600 pixels Tá certo e aí eu abro Chaves e fecha o Chaves para o que que vai acontecer aqui dentro condição né então se tiver entre 600 e 900 não tamanho mínimo 600 e o máximo de 900 o que que é para acontecer então vou fazer aqui uma div é o calma div chamada Vou colocar aqui é classe A classe dela vou colocar exemplo vou copiar esse aqui eu vou recortar na verdade do nosso parágrafo Vou colocar aqui uma classe chamada exemplo

mandinho certo e aqui fora é vou fazer o seguinte bom não vou fazer nada vou fazer que só quando tiver aqui dentro de Max Edith 900 e 600 entre esse esse tamanho essa nossa classe exemplo e vai ter um background Yellow é o tamanho dela o edit vai ser de 100 porcento de já é bloco né já não tem porque eu passar porque ele já vai ficar sem por cento mas eu vou colocar que altura vai ser 400 pixels Ok Então olha só que que acontece entre 600 e 900 essa minha diva e ela vai

aparecer agora qualquer resolução que for diferente disso ela não aparece tá vendo olha só que legal ó meu elemento desaparece que eu coloquei esse comportamento vai acontecer entre 600 e 900 pixels então poderia colocar múltiplos tamanhos aqui e comportamentos diferentes dos meus elementos de acordo com o tamanho da tela e conforme eu vou programando o desenvolver no meu site eu vou vendo como esses componentes eles vão se comportando na minha tela Então como você pode perceber as mídia querem elas são extremamente importantes são extremamentes utilizados aqui com CSS e quando a gente Domina o uso

aqui das mídias queres a gente consegue fazer sites incríveis e independente da resolução da tela Se for para um celular se for contado Se for para o computador ela vai se adaptar a nossa realidade mais para frente aqui no curso nós vamos aprender o Freio work do Bootstrap que facilita essas questões de mídia queres de tamanhos de elementos na tela à disposição que Vai facilitar bastante quando a gente usar aí o funcionamento Ingrid que você vai entender mais para frente por enquanto que eu quero que você entenda neste módulo é esse conceito aqui de mídia

que Elvis e depois quando a gente for ali na parte prática fazer um projetinho construindo você vendeu usando tudo isso que você tá vendo aqui adquirindo conhecimento nesse módulo aí você vai ver isso que sendo colocado na prática vai te clarear muito mais a mente dá uma brincada aí com o teu HTML com o teu CSS agora que você aprendeu funcionamento disso para você entender bem o comportamento dela e na próxima aula nós vamos aprender um conceito novo de CSS até para mim que ao que venha pouco tempo que é o fluxbox é muito bem

pessoal né sala nós vamos conhecer aqui a propriedade de display do tipo Flex O fluxbox que é o conjunto aqui de regras do CSS para deixar o nosso site responsivo de uma forma mais simples Nascente a gente tem que ficar trabalhando muito com mídia queres e determinando o tamanhos específicos para cada tipo de resolução não flex-box senão a propriedade de spray relativamente nova e que muitos desenvolvedores ainda não conhecem ou não dominam Então vai ser interessante se você já começar a desenvolver seus projetos que você for fazer na mão na sem nenhum Framework se for

fazer com HTML CSS Direto você sempre usar esse tipo de display que nós vamos ver nessa aula que o display do tipo Flex nós vimos na aula aqui de CSS sobre display a propriedade de spray já três tipos de display que a gente trabalhou né o Block o inline e o inline-block a gente também viu o deslocamento e de modo flutuante usando a propriedade flutina outlet flat White gente viu também as questões de posicionamento composition não é o position relative o Absolute então a gente normalmente usava essas propriedades aí combinadas de forma que o nosso

layout Ficasse ajustada na tela como display do tipo Flex isso ficou muito mais simplificado e ele vai se adaptar já de uma forma vamos dizer assim um pouco mais automática vamos entender isso mais a fumo então para isso nós vamos criar aqui uma diva e pai mas devo chamada a flex-container tá uma uma div pai Flex ou para facilitar eu vou chamar sindflex pai tá para ficar mais fácil de vocês entender o conceito vou chamar de Flex pai e aqui dentro dessa Flex Pai a gente vai colocar a Vamos colocar umas três dias eu vou

colocar senha de vi um shiftout setinha para baixo para gente duplicar né E vou colocar div 2 Ed Ah beleza então tenho lá as minhas três dias aqui no meu estilo eu vou fazer uma classe chamada Flex pai a flex Pai a gente vai colocar um fundo aqui um background nos colocar como Azul um colocar Blue ou com fundo azul e a gente vai fazer aqui na classe Flex pai Divina as nossas redes a gente colocar aqui a Vamos colocar um background o White colocar uma borda de um pixel a sólida White nós vamos colocar

aqui ó é black a a borda né só pra gente poder enxergar os colocar aqui uma margem de 20 pixels entre um e outro só para a gente ter uma margem Izinha a gente pode colocar um pezinho também de 30 pixels aqui para dar um preenchimento nessas nossas divas aqui beleza ok pessoal o que que acontece aqui como nós já vimos na aula de display o padrão de todo tipo de divi é que o display dela seja em bloco por isso ele tá pegando toda a área aqui na nossa Flex pai né que essa parte

azul aqui tá pegando tudo Claro ele tem essas margens para a gente vê se ficou aqui margem a gente especificou um pede também a gente inclusive poderia colocar um texto alinhado ao centro certo text-center para ficar o texto no centro da nossa Diva Ok mas a gente quer que fique um do lado do outro a gente usava para isso flute Ou inline-block certo agora quando a gente vem aqui na nossa Diva e pai aqui Flex Pai a gente pode colocar o display como sendo Flex ou flexível display-flex quando a gente passa display como Flex olha

só o que que acontece vai ficar Um item do o outro certo eu vou até diminuir um pouquinho essa margem vou diminuir ela para 5 pixels para ficar mais fácil da gente ver dessa forma aqui certo 5 pixels o display Flex então ele é um display bem melhor da gente trabalhar porque ele tem várias propriedades ligadas a ele que fazem com que a gente tenha mais domínio do layout da nossa página esse display do tipo Flex ou flexível então vez a gente usar aqui um display inline-block ousar se opor Atlético é um método vamos supor

entre aspas antigo da gente usar o CSS a gente vai trabalhar com esse display-flex para ter mais opções por exemplo uma das opções que a gente tem junto do display Flex é o flex-direction ou a direção dos nossos elementos aqui dentro dessa nossa Flex pai que pode ser coluna ou linha na comum ou Raul que a linha em inglês quando a gente coloca como sendo coluna Olha o que que vai e ele vai deixar os nossos itens são aquele comportamento como se fosse de bloco porque ela vai como que tomar toda a área como se

isso se tornasse uma coluna única certo flex-direction comum agora quando a gente usa como ou ele vai ficar como linha e vai ficar Um item do lado do outro e dessa forma eu tenho controle se eu quero que ele fique um e tem do lado do outro ou se eu quero que fique um embaixo do outro então eu tenho aquelas flexibilidade de ter tanto um bloco como é em linha com elementos só que o flex-direction tomou display flexível e no flex-direction eu posso determinar o comportamento dele eu poderia usar isso aqui em conjunto com mídia

queres por exemplo em tamanhos de tela menor para ficar no estilo de coluna ou column e quando for telas de resolução pequena e quando for telas de resolução maior ele ficarem vinha então a gente poderia usar esse em conjunto com as mídias queres por exemplo poderia fazer aqui ó@mídia scream máximo Max witch nós vamos colocar que é 500 Vamos colocar 600 pixels e se a resolução máxima for de 600 pixels bom então o nosso flexpai e vai ter o flex-direction dele como coluna E se for maior do que isso a gente vai deixar ele como

linha que o padrão é linha quando ele for maior do que 600 porque chegou na resolução máxima de 600 ele vai ficar com uma linha olha só que que vai acontecer ó Então eu tenho o meu display aqui é a minha página grande vai ficar Um item do lado do outro Quando ele chegar aqui ó não 600 olha só que que vai fazer ele adaptou para ficar estilo para celular tá vendo olha que legal isso simplesmente passando a propriedade do flex-direction podendo Controlar se ele vai ser coluna ou linha Isso facilita muito na verdade pessoal

vez a gente ficar trocando os tipos de display ficar datando isso daqui com flute com o clear para gente deixar tudo ajeitado dava muito mais trabalho assim fica muito mais simples a gente trabalhar com dispositivos móveis e com dispositivos grandes móveis e grandes está vendo Então essa é uma das vantagens aqui do display do tipo Flex One Direction vou tirar esse aqui só era para exemplificar aqui para vocês tá pessoal só para vocês verem uma utilidade disso e te usei isso por exemplo para - navegação no site né são uma aplicação muito utilizada eu acho

uma primeira propriedade que a gente usa o flex-direction ele também tem uma coisa bem legal aqui na flex-direction que é o controle de seu universo ou não então poderia colocar aqui ó por exemplo horinha e inverso row-reverse linha reversa olha só o que que ele vai acontecer ele vai jogar para o lado contrário e ele mudou a ordem formato reverso tá vendo tá o 321 eu poderia fazer a mesma coisa com coluna e com colo reverse E aí ele vai ficar com três para cima do três pluna do último primeiro vamos ao contrário Então isso

também é um controle que a gente tem aqui com o flex-direction beleza mas vamos deixar aqui como ROM mesmo que é line uma próximo à propriedade que a gente trabalha também aqui com o display do tipo Flex é o Flex hop se escreve assim o rap em inglês teriam sentido de embrulho invólucro né Por padrão o Flex rappi ele vem com essa propriedade no rappi quer dizer que ele não vai levar em consideração vamos dizer assim o tamanho da div pai aqui do nosso Flex pai ele não vai ter um embrulho essas coisas não vão

estar contidas dentro dele por padrão vem assim então se eu colocasse mais dívida aqui ó deixa eu fazer aqui para vocês verem vou colocar mais divisa aqui nove Vou fazer 10 aqui tá pessoal 10 e olha só que que acontece chegou ali no 7 ele já tá com tamanho menor aqui a minha tela tá tá pequena certo então ele já criou uma barra de rolagem e os outros itens estão saindo vamos dizer assim da minha diva e pai certo foi para lá se aumentasse que o tamanho da tela como Meu display é Flex ele tá

se adaptando aqui e aí eles aparecem Mas se eu for diminuindo Olha só ele tá criando uma barra de rolagem e indo para o lado porque o meu rappi está como no rappi que é o padrão inclusive se eu tirasse esse daqui deixasse assim e você vai ver que ele se comporta dessa forma porque o padrão é um novo rápido vendo agora quando eu passo aqui o nosso Flexx rap com sendo Olaf assim olha só o que que ele vai acontecer quando atingir o tamanho limite aqui na nossa div pai tchau Flex pai ele vai

jogar para linha de baixo Então olha só que interessante essa flexibilidade ó o quanto tamanho da tela está comportando o tamanho do elemento ele aparece ali agora se eu vou diminuindo olha só que que vai acontecer ele vai jogando os elementos para baixo Olha que interessante muito legal né pessoal bem interessante ó olha o comportamento captou como funciona então esse Flex rápido também ele é bem útil para isso para ver se os itens vão ficar contidos ou não ele lembra muito o o ver flor é que era uma outra propriedade de amanhã a gente estudou

aqui né e separado Beleza agora em vez a gente escrever esses dois assim de forma separada a gente pode escrever esses dois numa só propriedade o chamado short Hand como a gente já aprendeu que quando a gente tem uma propriedade que a gente passa duas numa só que é o flex-flow o flex-flow É para juntar essas duas propriedades então o primeiro posso passar que eu quero que seja em linha e a segunda o item que eu quero que seja o rappi então eu passei tanto Flex dir e como o Flexx rap numa propriedade só que

se chama flex-flow é como se fosse um atalho então eu tô passando que eu quero que seja em mim e que ele caiba dentro aqui dádiva e pai legal então teve a mesma função do que a gente fez antes com aquelas duas outras funções agora a gente vai começar a ter um estudo sobre alinhamento dos itens dentro aqui da nossa Diva e pai as questões de alinhamento para a gente fazer alinhamento a gente sempre tinha que usar e propriedade de posição absoluta relativa passando a direção era um trabalho tanto quanto chatinho de você fazer com

as propriedades que a gente aprendeu até agora usando o flex-box isso fica bem mais simples de você trabalhar então eu vou só para agente facilitar Diminuir a quantidade de divs aqui ó vamos deixar sua quatro dias para ficar mais fácil da gente enxergar certo a gente tem aqui uma propriedade de alinhamento no sentido horizontal o alinhamento nesse sentido no sentido de linha e o justify-content o gente faz contente ele tem vários várias propriedades que a gente pode trabalhar flex-start left-right space-around Space between todos estão aparecendo aqui start Stretch né e tal como que ele funciona

ó sempre o padrão dele é começar como flex-start quer dizer que os itens vão ficar alinhados à esquerda no início de onde a nossa div Pai ela está funcionando certo agora se eu passar flex-end quer dizer no fim dela Então olha só que ele vai fazer vai jogar os itens lá para o Finn como se fosse o flat Ride que a gente usava Antes aqui no CSS jogou lá para o fim beleza e a gente tem o alinhamento no centro eu posso dar um Center aqui e ele vai deixar certinho no centro da minha página

esses meus itens eu estou como que determinando como que esses meus conteúdos vão funcionar né nesse sentido no sentido horizontal mais Às vezes a gente também tem e nesse sentido aqui no sentido vertical né pessoal então para isso que que eu vou fazer vou colocar só que uma altura vou colocar mais em cima só pra gente Vou colocar aqui uma altura de 600 pixels tá para o nosso Alive pai tem uma altura de 600 pixels então homem ter ela se vê que como o padrão as dívidas elas cresceram até lá embaixo Porque como padrão aqui

no nosso display do tipo Flex o as nossas dívidas elas vão ocupar Todo o espaço da div pai dela então ela tá pegando a altura 100% aqui da nossa Diva pai isso vem na propriedade online online itens vêm com o padrão Street que é essa propriedade que deixa assim ó um tamanho total da minha tela mais um alarme itens e a gente pode dizer o posicionamento dos itens individual em relação à parte horizontal na nossa página Então olha só que que eu poderia fazer eu poderia colocar o align-items como Center também bom então na horizontal

eu queria que ficasse no centro e na vertical queria que ficasse no centro também online itens vai fazer nesse sentido aqui ó então se eu coloco align-items-center ele ficou no meio em relação a altura se eu coloco flex-start ele ficou na parte de cima do nosso A nossa div paz eu coloco flex.ind ele vai ficar na parte de baixo da nossa div pai dessa forma aqui eu posso controlar o posicionamento dos elementos dentro aqui da minha dívida container da minha Flex pai em vez de eu ter que ficar usando o positivo relativo Absolut compreendeu Olha

só por exemplo lá eu quero que fique no meio e na esquerda que que eu faria deixaria o justify-content como Center ou como Flex o start na verdade para ele ficar à esquerda e o align-items eu vou deixar aqui ó como Center bom então eu deixei a esquerda e no centro aí eu quero que fique na parte de baixo aqui é bem nesse cantinho aqui os meus itens então o que que eu faria eu colocaria o justify-content como flex-end para ele para a ponta e o align-items eu colocaria como flex.ind também e vai ficar lá

naquela ponta de baixo aí eu quero que fique nesse cantinho aqui nesse outro canto aqui do meu ele tem que que eu faria aqui seria Flex start e o outro seria Flex and tá entendendo Então você tem o controle do posicionamento dos seus elementos dentro da sua Live e pai de uma maneira bem simples Passando só 22 parâmetros aqui o justify-content que seria como se fosse o alinhamento na horizontal e o align-items que vai ficar o alinhamento na vertical legal isso é bem show de bola né pessoal bem mais fácil de você ter o controle

dos itens ainda com respeito ao alinhamento dos itens aqui no justify-content no align-items a gente tem algumas outras opções são bem interessantes por exemplo justificar justify-content eu deixar isso aqui no centro só para vocês verem melhor e eu tenho uma propriedade aqui que se chama deixa eu mostrar aqui para vocês que é o space-around e o Space between esse Space between é espaço entre si eu deixo o justify-content como espaço entre olha só que que vai acontecer ele vai adaptar os itens dentro do Meu Container pai para ele tem um espaçamento de forma uniforme entre

um e outro então se eu pegar aqui e aumentar o tamanho da minha tela olha o que que ele vai fazer ele vai respeitar um espaçamento de tamanho uniforme entre um e outro certo isso é o espaço entre um e outro se Space between a gente tem um Space em volta o space-around que ele vai fazer o que tenha um espaçamento uniforme em toda a volta de cada elemento dessa forma se eu aumentar o diminuir ele sempre também vai ter um respeito com relação ao espaçamento aqui dos itens certo a gente tem também o alinhamento

de conteúdo não o alinhamento de itens mas o alinhamento de conteúdo Ah entendeu alinhamento de conteúdo a gente vai colocar mais umas tags aqui ó para a gente colocar aqui mais opções a 56 e quando a gente trabalha só com o align-items olha o que que acontece os itens eles ficam desordenados quando a tela fica pequenininho olha só que interessante ou quando ela tá grande fica tudo certo fica alinhada aqui no centro nesse sentido horizontal e tal mas como a gente colocou que é para ele se adaptar ao quando ele ver que precisa se adaptar

e pulou o item lá para baixo o número 10 ver que ele ficou é como que deslocado ele tá Centralizado mas ele tá não tá correto tá o funcionamento dele até porque também a gente tá usando especialde aqui né Vamos colocar aqui com Center também ó e deixar tudo certinho centralizar enfim ó os conteúdos não estão com que juntos e se a gente quisesse que todo esse bloco aqui ele ficasse alinhado ao centro aqui então a gente vai usar o align-content o align content Center vai fazer com que tudo fique no mesmo bloquinho Centralizado ao

centro se eu colocasse align-content Flex parte Olha que que acontecer e ficar todo conteúdo grudado lá em cima flex-end todo o conteúdo grudado lá embaixo até aconteceu com Flex align content a gente pega tudo bloco de conjunto E vai fazer ele tem aquele comportamento com o align-items a gente vai pegar itens em nível individual entendendo essa diferença basicamente de um para o outro é E conforme a sua necessidade na hora de você está construindo sites você pode usar o align-content online itens para o que você precisar Lembrando que se você tirar que o align-items deixar

sem ele dá Você conhece vai funcionar igual com contente o seu colocar a flex é vamos colocar Center vai dar no mesmo também o alinhamento só que ele vai pegar o bloco inteiro conteúdo todo todos os itens e não são itens nível individual vamos ver mais um item aqui ó que é bem interessante do display do tipo Flex vou deixar quatro itens aqui só para a gente verificar que é o chamado flex-grow que é flex-grow quer dizer o crescimento dos nossos items em relação a tela de forma automatizada então se eu vem aqui nas minhas

divs determina o sempre na div filho isso nunca dentro da div pai essas que a gente viu até agora é dádiva e painel a gente passa essas propriedades dentro da div pai que vai ter o conteúdo dela agora na div filho a gente pode colocar aqui o flex-grow o crescimento das nossas dívidas e a gente pode colocar que o flex-grow dele vai ser por exemplo um quer dizer que vai ser o uniforme todas as divas vão se adaptar no mesmo tamanho para que elas se encaixem dentro da nossa div paioça eu dei um contra o

s olha só que que ele vai fazer ele criou a largura ou crescimento da minha div de forma que todas elas olha só a cresçam de forma uniforme uma em relação a outra olha só que interessante dessa forma assim ah não importa se aumente ou diminua elas vão estar uniforme E se eu colocar mais uma dívida aqui ó ele vai acrescentar e isso em relação a mais essa div Olá cinco o crescimento uniforme 16 é só que que acontece Conforme você for tendo muitos itens dentro de uma mesma linha olha só o que que ele

vai fazer tá vendo ele jogou a minha dividir número 8 para linha de baixo porque ele já viu que tá no tamanho menor possível aqui determinado ó e aí ele jogou para debaixo só que como eu tô com o flex-grow como um ele vai fazer sempre de forma uniforme a divisão das minhas divas aqui então conforme a necessidade ele vai dividindo na tela ela só ó tanto aqui que seu diminuir mais ainda os sete também vai lá para baixo junto com oito dividir de cinquenta por cento os outros continuam naquele tamanho lá ele vai adaptando

as minhas divas aqui ó para ficarem já organizadas dentro da minha página aqui de forma flexível comtrend Isso é bem legal do nosso flex-grow o crescimento da nossa dos nossos itens né mas eu posso determinar também um flex-grow de tamanho diferente em relação ao bom então poderia por exemplo aqui no três eu passar aqui no estilo que o flex-grow dele o crescimento dessa minha tag de um número três vai ser três vezes maior do que os outros itens o flex-grow três ele vai ficar maior aqui não deu para reparar muito porque a gente já encolheu

o nosso item bastante né mas conforme eu vou crescendo a tela o repara como o número 3 tá bem maior em relação aos outros itens tá vendo o crescimento dele tá maior aí conforme eu vou reduzindo abre a mente para ele se adaptar aos outros itens que tem um flexbrow né ele vai também se diminuindo aqui para ficar de forma organizada certo mas a gente pode trabalhar essas questões do flexbrow aqui também agora pessoal a gente vai ver como é que agente faz para trabalhar com tamanhos responsivos aqui dos nossos itens na por exemplo assim

a gente vai querer que tenha um deslocamento um tamanho específico de cada item desses dentro do nosso da nossa div pai E se a gente pode usar o nosso estilo Own Style e com propriedade chamada Flex e aqui dentro de Flex a gente pode passar o tamanho que a gente quer que se tem tem então vamos supor assim que eu quero que aqui essa minha dívida de número um ela vai ter quinze por cento tá quinze por cento como todos os outros itens são Flex Eles continuam seguindo o mesmo padrão organizado entre um e outro

então para a gente ter múltiplos itens Flex aqui dentro e ele se comportarem com tamanhos específicos a gente precisa passar propriedade Flex para todos eles dentro da div pai para que eles têm um comportamento exatamente como a gente quer então eu poderia passar aqui que essa minha primeira vai ter quinze por cento e essa minha segunda vai ter a 75 por cento Isso daria 90 porcento né ó o que não deu certo porque a gente ainda não passou as propriedades Flex em relação aos outros tá pessoal a além disso a gente vai ter que colocar

aqui uma propriedade vizinha aqui na parte de cima o asterisco e dizer que todos eles vai ter como box-size no tamanho da da Caixa como border-box porque daí isso incorpora também dentro de cada caixa os nossos Perez As Margens aí tudo mais você quer um padrão que a gente sempre faz de todo o CSS que a gente trabalha sempre tem que colocar isso daqui tá pessoal daí ele vai ficar certinho aqui nos tamanhos que a gente passou ó então conforme eu vou aumentando aqui ó o três apareceu lá conforme eu fui diminuindo 3 foi para

baixo tá vendo porque se eu coloco 15 mas 75 isso vai dar 85/90 né então sobra 10% ali de espacinho e o 3 conforme a gente cresce ele vai conseguir entrar ali mas a gente pode passar que os valores para cada um deles né então a gente poderia colocar que eu três aqui ó ele vai ter dez porcento ou vamos usar cinco por cento e ele tá na linha de baixo né pessoal que que tem que levar em consideração também né em consideração que a gente tem margem é três itens na ó nossa Diva aqui

ó tem uma margem de 5 pixels entre cada um quando eu tirar só essa margem só para gente ver eles grudadinhos com situações certinhas né então você vê 15 mais 75 mais cinco Deus hein por cento né vamos ver se deu sem por cento é 85/90 não aqui dava para fazer mais assim né 10 por cento ainda daria certo e isso agora vai caber eles aqui dentro então primeiro tem 15 o segundo tem 10 outros 75 por cento e a gente poderia fazendo esses tamanhos você Observe que ele vai se adaptando ao conforme ele vai

crescendo ele vai se adaptando é esse tamanho que a gente passou mas se não couber ele vai jogar para baixo e vai continuar mantendo a estrutura dos tamanhos né só que para isso ficar bem certinho a gente todo o nosso conteúdo a gente vai ter que passar esses valores que a gente quer então esse aqui é 10 vamos dizer quatro aqui vamos dizer que vai ser cinquenta por cento e os cinco vai ser cinquenta por cento também então vai ficar dois numa segunda linha aula que legal show de bola né pessoal aí esse daqui vai

ser 25 esse outro 25 Oi e esse último Vai ser cinquenta por cento bom Então olha só a gente fez um comportamento como se fosse do de Grid que a gente que o pessoal está acostumado só que usando Flex ó tons itens eles estão se alinhando estão se comportando da forma como a gente determinou em relação a um e outro certo ó em relação um e outro aí fica certinho aqui o funcionamento a gente Claro poderia conforme o tamanho aqui das nossas mídias querem determinar valores diferentes também para cada item certo para ele ficar adaptado

mas dessa forma a gente consegue fazer aqui com que os nossos itens tenho essa flexibilidade aqui certo então o fluxbox Ele é bem interessante existem muito mais coisas tá pessoal mais complexas com o Xbox mas no momento talvez vai dar uma fritada no cérebro de vocês já isso tudo que eu já passei já é bastante coisa né desses alinhamento desses funcionamentos e tudo mais é mas é bem interessante usar esse esse sistema de display do tipo Flex né Lembrando aqui que a gente poderia colocar para eles aparecerem lá em cima flex-start beleza Flex em dia

a gente tem toda a questão de alinhamento bem simplificado né pessoal bem legal mesmo claro que se a gente tá usando aqui o justify-content-center não tem necessidade porque a gente passou os tamanhos Flex do conteúdo eles vão respeitar o tamanho Flex do conteúdo talvez a gente tivesse que alinhar ele certinho né mas tudo são propriedades aí que a gente pode já predefinir a gente poderia colocar esses Flex também em classes diferentes com o tamanho já específicos e especificando as classes conforme a gente for se fazendo os itens também dá para fazer dessa forma então só

para fixar bem esse nosso conteúdo aqui que a gente fez com Flex a gente vai agora fazer o mesmo template Zinho basicamente do que a gente fez naquela nossa aula de HTML final mas agora vocês vão entender o e fazem certo com o conteúdo que a gente aprendeu até agora então vamos fazer o seguinte aqui ó e esse nosso H1 flex-box ele vai ficar aqui dentro de uma div ou uma gente pode fazer se um reader como a gente já viu lá em HTML semântico com a classe vida Oh e vamos colocar esse H1 aqui

dentro e lá no nosso CSS a gente pode colocar aqui o Bari aqui vai ter uma margem 0 só para gente colar tudo na margem não ficar com o espaçamento nenhum e agora a gente pode criar esse nosso reader aqui em cima vamos fazer aqui a classe ida os colocar aqui que Opa vamos colocar aqui com o background dele se você Green colocar esse greenyellow que que vai ficar um pouco mais bonitinho né Vamos colocar aqui que ele vai ter um pezinho é de 80 pixels o alinhamento dele text-align-center como a gente está trabalhando aqui

com a divido tipo bloco A gente não precisa especificar o display dela aqui no reader tá pessoal porque a gente já quer uma dívida tipo bloco para pegar o conteúdo completo aqui da minha página então a senhora fizer assim ó ele vai funcionar porque ele já é bloco ele vai pegar o cumprimento da tela completo certo vou colocar aqui um color White só para gente deixar esse nosso textinho branquinho e não ficou muito legal né pessoal deixa até pegar uma cor aqui um pouco pouco mais escura só um pouquinho mais escura assim ó beleza e

a gente poderia colocar aqui um parágrafo também né e este é um layout flexível beleza show de bola OK agora a gente poderia fazer aqui um menuzinho né pessoal aqui em baixo uma o menu de navegação Oi E para isso a gente vai usar agora o display do tipo Flex Então vou criar aqui um nave para a gente fazer o nosso HTML semântico vou colocar clássico como navbar que a barra de navegação e aqui dentro eu vou colocar uns links para a gente poder ter algum tipo de navegação supostamente né a gente não fez nenhuma

outra página mas vamos dizer que a gente vai teria que os links estão Vou colocar aqui HF Vou colocar aqui para ir para link e aqui vamos duplicar essas esses nossos links fizemos vários links em os aqui agora nós vamos criar aqui no nosso CSS esse nosso Nossa classe navbar Vamos colocar que o display dela como é que vai ser agora vai ser Flex display Flex para nosso display flexível e a gente pode passar aqui ó o justify-content dela para ser ao centro que a gente viu né e para deixar os nossos link só centralizados

em relação a nossa página legal e a gente pode colocar aqui que o fundo o background o background vai ser vou colocar Black mesmo para a gente não ter nenhum tipo de mistério aqui para o nosso na nossa navegação ficar escura certo agora vamos fazer os links navbar a que seria a tag are the links Vamos colocar aqui que a cor Vai ser branco color White e a gente pode passar aqui que o ped e vai ser de altura 14 pixels e a direita 20 pixels o Olá então 14:20 assim o text-decoration None e o

alinhamento do texto A gente pode colocar o teste online como Center Beleza agora a gente vai fazer o que acontece quando o mouse passa por cima né então ponto navbar a ouvir o que que acontece quando o mouse passa por cima a cor do fundo background e a gente pode colocar um OK se Greyck a cinza mesmo xô ver se fica legal ó tá legal cinza e a gente poderia colocar que a cor vai ser preta né e o texto Black a gente poderia colocar aqui a fonte também vai ficar mais escuro então font-weight-bold que

é para deixar ele ó Então posso em cima vai ficando assim legal show de bola a se eu quisesse que isso fosse lá para aquele canto lá no meu Flex aqui eu posso colocar o Flex ind o Olá vai ficar naquele canto de lá a quero que fique no início flex-start o que a gente já aprendeu né sol mas eu vou deixar no flex-center aqui para deixar um flex-center não só Center né pra deixar ele alinhado no centro beleza o Ok vamos continuar fazendo aqui o nosso projetinho a gente pode fazer que quando tiver diminuindo

aqui o tamanho aqui ó assim dessa forma quando chegar num determinado o tamanho que a gente acha que fique para celular é que esse menu ele não fique assim em linha mas que se minha não fique assim em sentido vertical de coluna como que a gente pode fazer isso podemos fazer aqui uma mídia quer me né@mídia scream o emd se o tamanho máximo Max diet for 700 pixels e o que que a gente vai querer que aconteça o nosso. Navbar e vai ter o flex-direction dele como coluna: Tá certo então olha só que que vai

acontecer quando chegar no tamanho máximo de 700 ele vai virar coluna então aqui tá normal tá no centro da tela quando for meu vou diminuindo Olá viu que legal Ó ficou com menu e estilo coluna ó a adaptação que a gente tá tendo aqui beleza mas para frente aqui no curso a gente vai aprender também pessoal fazer algumas alguns nave bares aqui né muito mais interessante mas complexo mas é só para você entender o que a gente pegou nessa aula aqui do fluxbox né tentando usar aqui a as propriedades do fluxbox que a gente pegou

nessa aula e também de midscreen que a gente pegou na aula passada de mídia queres ó beleza sem por cento e a gente podia colocar aqui um conteúdo Dinho né pessoal a gente poderia fazer aqui algum conteúdo então a gente pode colocar div Class como corpo e aqui a gente criar aqui uma div com uma classe chamada Card e dentro dessa divicard a gente vai fazer algumas coisas tá pessoal nós vamos fazer assim por enquanto Então a nossa classe corpo o que que a gente vai fazer uns criar aqui corpo e ela vai ter o

display do tipo Flex Oi e o flex-flow dela vai ser Row e rappi para caber tudo aqui dentro desse involu certo e agora a gente pode criar que o nosso Card o nosso Card pode ter um Flex de cinquenta por cento e ele vai ter um fundo um background Vou colocar aqui um cinzinha clarinho altura dele vai ser de 100 pixels Vamos dar um margem I Left the um por cento só que daí ele vai pular para linha de baixo né PSOL chover margem left de um por cento e aqui então vai ter que ser

48 por cento tamanho de cada um porque vai ter dois que a gente vai colocar aqui dois cards lisas ou com 12 caixas e isso muito bem então tem a esquerda um por cento a esquerda um por cento a gente pode colocar também a direita um por cento né o gente poderia colocar em todos os sentidos aqui como sendo um por cento E aí vai ficar certinho beleza ó Então olha o nosso Card lá o comportamento dele ó ó o olá que legal show de bola né pessoal nosso Card Zinho beleza e a gente poderia

até com tamanho maior aqui 200 pixels há 400 pixels e já fica flexível beleza bom beleza ok se a gente não quisesse passar esse Flex a gente poderia colocar assim o flex-grow como sendo um e também ia funcionar igual ao porque ele ia respeitar que o tamanho deles tem que ser uniforme entre um e outro e funcionaria da mesma forma legal enfim a gente poderia ir construindo layout com base nisso né pessoal só para gente fazer uma simples bem rápido aqui para vocês ver o funcionamento de usar as propriedades flex como facilita para gente trabalhar

quando a gente usa essas propriedades espero que vocês tenham gostado dessa aula eu sei que o módulo de CSS é um módulo mais difícil é um módulo que tem muitas propriedades muitas opções de funcionamento mas à medida que você vai colocando em prática essas propriedades testando tentando fazer os seus layouts você vai conseguindo entender para que cada uma delas funciona da maneira correta e na hora correta E se a gente consegue adquirir o tempo mesmo tá pessoal com a aplicação tentando usar mais para frente a gente vai ter também os prêmios que a gente vai

utilizar o Multi Strap que facilitam bastante na hora de você fazer o seu layout sem ter que ficar pensando muito em porcentagem de uso de display etc você já tem as classes prontas que você usa em determinados momentos tá bom é muito bem pessoal agora que nós terminamos de estudar o CSS conhecer todas as propriedades basicamente que a gente utiliza Nada mais justo do que a gente Pôr a mão na massa e juntar o primeiro e o segundo módulo o HTML o CSS para fazermos um site de verdade bem bonito simples mas que a gente

possa colocar a mão na massa aí para a gente ir aprendendo a usar as propriedades de acordo com a necessidade Então isso que você tá vendo aqui na tela é um template que nós vamos fazer nessa aula pessoal um template bem legal bem bonito mesmo simples mas que já vai te ensinar muito eu tenho certeza à medida que você praticar nessa aula a gente fez aqui é uma simulação de uma agência fake a gente tem o menu na parte de cima né com três links um botão de chamada de ação Fale Conosco esse mesmo ele

acompanha o rolamento da página que ele é um menu fixo Observe que é um menu fixo aí temos aqui uma Redline né uma chamada também O que você achou a melhor agência digital botão contrate agora uma imagem né E aí a gente tem aqui o que podemos fazer pelo seu negócio três carros vizinhos simples com alguns ícones quando a gente passa o mouse em cima eles põem um texto diferente ó é para que ele vai mostrar outro texto como se fosse assim por exemplo a pessoa Violet desenvolvimento de sites ela passa o mouse em cima

vai ter uma explicação sobre aquele serviço ali né conforme passa em cima e um rodapé simples aqui a gente usou também o degradê e vários recursos que a gente aprendeu ao longo do curso aqui no cantinho nós temos também um botão fixo aqui para falar no WhatsApp Fale Conosco para que quando a pessoa clique possa abrir Whatsapp e conversar com a agência Além disso O template ele tá responsivo então se a gente tecla f12 para gente ver como é que ele vai ficar nas várias resoluções a gente pode colocar por exemplo aqui para celular olha

como é que fica para celular é bem legal né a gente tem aqui para o celular um pouco mais largo a gente tem para tablet e ir para computadores de aparece o menor aqui em cima né para já a pessoa poder Navegar normalmente como se fosse um site então ele vai se adaptar conforme a o tipo né do dispositivo usando as mídias queres então a gente pode ver aqui ó vou restaurar ele ó Conforme a gente vai mexendo aqui ó ó ele vai se adaptando lá bom então um site totalmente responsivo certo vamos ver como

é que a gente vai fazer isso na prática do zero absoluto nessa aula tô super empolgado vai ser muito legal então vamos lá colocar a mão na massa Então a primeira coisa que eu vou fazer eu vou vir aqui no disco local C né Vamos lá na nossa pasta site onde a gente tem os projetos e aqui dentro eu vou criar uma pasta com o nome de agência fake é seu projeto que a gente vai fazer nessa aula certo já tem a pasta aqui que que eu posso fazer abóbora que houvesse Cold já tá com

a pasta que a gente usava ao longo das aulas eu fechei eu fui with Close folder né para fechar aquela pasta que sempre ficava aberta aqui das últimas aulas eu não quero que apareça nenhuma vou restaurar ele aqui vou pegar essa faixinha do agência fake arrastar aqui para dentro do meu vs code E aí pronto já tem a pasta do projeto aqui dentro do vs code e agora eu vou criar um novo arquivo chamado index.hu de ML para gente ter o nosso arquivo base né o index e aqui a gente vai colocar um HTML5 com

o idioma pt-br aqui o título a gente pode colocar agência fake aula Vou Colocar assim e aí a gente pode colocar aqui umas meta tags né pessoal que não vieram já por padrão a gente pode usar a meta name discription que a descrição do site então a gente pode colocar que nem me discription o contente a gente pode colocar aqui é um site de exemplo do módulo de CSS nessa descrição do site EA que a gente poderia colocar também a a meta name o keywords ou palavras-chaves que é sempre interessante gente colocar Vamos colocar que

as palavras chaves como sendo agência digital CSS HTML Vou Colocar assim tá pessoa claro que isso aqui é só porque a gente tá fazendo um exemplo na de vocês vocês colocaram palavras-chaves relevantes que tem a ver com conteúdo realmente do site que vocês estão fazendo beleza eu coloquei descrição palavra-chave tenho título E aí a gente pode rodar essa nossa página clicando com o botão direito ou pen with Live server para ele abrir o nosso live-server E aí a gente já tem a página aqui é repara aqui na parte de cima pessoal que eu tenho agência

fake aula que a gente vai fazer agora do zero e aqui eu vou deixar aberto aqui já tá pronta que é agência fake aqui só para a gente ter uma referência porque quando a gente é iniciante pessoal você tá uma dica que eu quero dar para vocês quando a gente é iniciante é difícil e imaginar do absoluto 01 site certo é meio difícil de você conseguir fazer isso do zero absoluto Então o que a gente normalmente faz é ir lá na internet procurar algum template algum site de referência que a gente acha bonito e a

partir desse montar o nosso próprio então eu vou usar como referência esse site aqui que a gente já tem pronto para fazer o nosso beleza para a gente ter uma base aqui para ficar mais fácil da gente trabalhar ok então a primeira coisa que a gente vai querer fazer aqui é essa parte de cima nessa parte aqui que é o nosso navbar a parte de navegação onde a gente tem os links e também o logo né que é essa é a agência fake aqui ok então a gente vai fazer o seguinte aqui dentro do bar

né que é onde a gente coloca o conteúdo nosso corpo vamos criar uma tag do tipo nave que é de navegação e só HTML semântico né pessoal dentro desse nave a gente pode colocar até uma classe navbar o poder colocar as características dele para a gente poder trabalhar com CSS vamos fazer o seguinte aqui no nosso projeto Vamos colocar vamos criar uma pasta chamada CSS e dentro dessa pasta SSS Vamos colocar um arquivo chamado estilo. CSS Vamos criar esse arquivo e vamos referenciar ele aqui ó dentro do nosso HTML então vamos fazer um link réu

Tyler cheat o HF e vamos apontar para pasta onde é que tá o nosso arquivo então CSS barra estilo CSS beleza tá referenciada que o nosso arquivo agora aqui no estilo. CSS isso aqui geralmente é o padrão que a gente faz quando vai iniciar o nosso trabalho com CSS tá pessoal é fazer* que é para todos os itens da nossa CSS receber essa característica a gente coloca o box saizen como border Box Box size em como border boxe que é para encorporar margens e perdem estudo dentro de uma caixa nessa seria a explicação mais simples

dessa propriedade e a gente coloca também o Bari aqui como margem 0 bom então isso daqui geralmente quando a gente cria um arquivo de estilo CSS novo zerado a gente sempre faz esse padrão você já não precisa nem pensar vamos dizer assim seja vai colocar o asterisco box-size engorda box e o Bari com margens 0 é um padrão Zinho que a gente utiliza OK agora a gente precisa criar aqui ó as propriedades desse navbar a gente já fez aqui o nosso nave e colocamos a classe navbar Então vamos fazer aqui essa nossa Classe navbar A

gente pode colocar que altura vai ser de 100 pixels só para a gente poder enxergar por enquanto vamos colocar um background aqui nele é vamos pegar aqui uma cor vou pegar esse aqui esse azulzinho aqui só para a gente já poder ir visualizando então coloquei uma altura um background vamos ver se está aparecendo já fizemos aqui a parte de cima do nosso menuzinho e a gente vai querer né pessoal que tenha duas partes esse nosso menor a gente vai em uma primeira parte onde a gente vai ter aqui a área onde a gente vai colocar

o nosso logo e uma segunda parte por assim dizer que é onde a gente vai ter a navegação então a gente poderia dividir em duas partes esse nosso menu aqui você não quer essa parte onde tem o logo ela é um pouquinho menor e essa um pouquinho maior então uma proporção assim quase praticamente de uns vinte por cento de espaçamento para a área do logo e uns oitenta por cento das obra para a área de menu né pensando que a tela tem 100 porcento de tamanho então essa parte mais ou menos uns vinte por cento

e essa parte mais ou menos uns oitenta por cento a gente poderia pensar assim então aqui que a gente pode fazer vim aqui no nosso código e a gente pode criar aqui uma div e com a classe chamada logo ó e aqui dentro dessa divide com a classe chamada logo a gente vai colocar um h um título principal agência sei quê que é o título aqui da nossa agência e vamos ver como é que tá ficando a agência fake beleza só que precise tens eles ficarem certos aqui dentro a gente vai ter que trabalhar com

algum tipo de display né mas a gente já faz vamos fazer agora também a outra parte ali que é o menu fazer uma diva e chamada menu e aqui dentro Vamos colocar um link só HF colocar apontando para lugar nenhum vou colocar sem link e a gente pode fazer uma cópia desse daqui a quatro vezes né a gente pode chamar esse primeiro de home o signo do dia sobre nós é o terceiro de serviços Oi e o quarto de Fale Conosco que na verdade vai ser o botão que vai ficar lá no canto certo vamos

ver como é que tá ficando aqui por enquanto tá meio esquisito né mas a gente já vai ajeitar isso então a gente tem o nosso navbar que é toda essa área a Quina toda a área que o que tá Tem azul que a gente colocou a gente tem uma primeira div que vai ser o logo que a gente quer que fique nesse canto aqui e a gente tem uma segunda div que é Ameno que a gente quer que fique nesse outro canto aqui mas elas precisam ficar alinhadas né a gente tá vendo que por causa

do display Block que vem por padrão elas não estão certas Então a gente vai lá no nosso estilo. CSS e aqui em cima a gente pode usar o nosso display Flex E aí ela já ficaram em linha na uma olhadinha lá já ficou certinho alinhado certo a gente também pode usar as propriedades que a gente aprendeu na última aula do flex-box né o flex-flow a gente pode colocar como em li o you aqui para ficar dentro do invólucro e vamos ver como é que isso tá ficando Olá já ficou dessa forma aqui já ficou um

pouquinho melhor certo agora Vamos ajeitar que a parte do logo né então a gente tem aqui essa div logo a gente pode criar essa classe aqui com s Então logo ó e aqui a gente pode usar a propriedade Flex já que a gente está trabalhando com display do tipo Flex a gente pode colocar um tamanho de vinte por cento certo vamos ver como é que tá ficando ó como a gente quer enxergar esse aqui um pouquinho melhor vamos criar uma borda de um pixel a sólida rede para gente conseguir enxergar o tamanho dela aqui né

Isso é sempre interessante você fazer tá pessoal usar as vezes um background uma borda à medida que você tá construindo para ser mais fácil de você visualizar o tamanho do componente em relação a tela então a gente observa que a gente colocou Flex de vinte por cento mas como a gente não especificou outro Flex ele tá pegando essa área toda aqui e tá bem lá no cantinho o nosso menu então a gente pode pegar agora e fazer aqui o menu né classe do menu aqui essa classe aqui menu e o tamanho dela vai ser que

pode colocar aqui um Flex de oitenta por cento certo vamos ver como é que está ficando Olá então a gente poderia até colocar aqui uma borda de um pixel sólida a verde não sei vamos ver se vai dar para enxergar Oi e aí a gente tem aqui os nossos elementos beleza parece certinho a gente pode tentar aqui no nosso navbar colocar algumas propriedades para o alinhamento ficar correto aqui aqui dentro né pessoal alinhamento dos itens aqui dentro dessa área então a gente pode usar aqui o justify-content como Sentra a&u online itens como Sentra e ficou

dessa forma aqui agora ele alinhou né o no sentido vertical no meio aqui do nosso menu beleza e a nossa agência fake a gente pode colocar aqui ó em logo a gente pode colocar que o text online dele como Center para alinhar o texto ao centro Para ficar aqui no meio do nosso componente e no caso do nosso menu a gente pode colocar o text-align dele o alinhamento do texto a direita então teste online hiit para a gente colocar lá no cantinho Lá jogamos lá para o canto o nosso menu certo e para dar um

afastamento um preenchimento nos colocar um pede uns 20 pixels aqui ó e para ele ficar mais preenche Dinho já ficou mais preenche Dinho ficou legal beleza já tá tomando um pouco de forma né pessoal tá ficando legal agora a gente para deixar esse nosso login aqui um pouco mais interessante a gente precisaria talvez achar uma fonte que seja legal né pessoal uma fonte que seja mais bonitinha Então o que a gente pode fazer a gente pode ir lá no nosso Google fonts Oi e a gente pode adicionar algumas Fontes aqui eu vou pegar que todo

meu site vai ser essa fonte do robô to aqui que é uma ponte mais básica vou pegar aqui selecionar todos os estilos o adicionando e os estilos Oi beleza ah e também vou pegar aqui pessoal a para o nosso logo ficar bonitinho eu posso pegar uma que seja assim um pouco diferenciada vamos ver aqui qualquer gente pode usar uma que fica uma que fique bonitinha aqui ó vamos usar essa lobster aqui certo então eu vou adicionar também essa fonte aqui beleza vou vir aqui em porte como a gente viu a aula de fontes né vou

copiar esse conteúdo vou vir aqui em cima no meu HTML antes de tudo colocar essa importação dessas Fontes está importado E aí a gente pode colocar aqui ó no nosso bari e todos as fontes de tudo do nosso site vai ser Roboto certo e aqui todos vou ter essa fonte aqui vou ver se já mudou aqui já mudou já tá diferente só que o logo aqui ó o nosso logo ele é do tipo H1 tá vendo Então a gente pode fazer aqui na questão do Logo logo H1 a gente pode colocar que ele vai ter

uma fonte diferente a fonte que a gente vai usar para o nosso logo vai ser a lobster aqui ó Então vamos copiar aqui a font-family lobster Oh e vamos colocar aqui ó lobster vamos ver como é que tá ficando Olha já ficou bem mais legal já ficou bem mais utilizar Dina e aí vamos mudar a cor dele também aqui vamos colocar aqui um color eu já tenho um código Zinho que eu deixei aqui separado que é o 180 S4 a que é um tipo de um azul assim Meio puxado pro roxo que fica bem legal

bem bonito certo então vamos colocar esse azul aqui ou lá como é que tá ficando show de bola podemos aumentar um pouquinho tamanho dessa fonte né Vamos colocar aqui o Font size dele como 34 pixels Oi ó bem legal beleza show de bola só que o seguinte né pessoal eu também não vou querer que ele fique exatamente grudado aqui ó bem no cantinho eu vou querer dar uma margem um pouco para ele ficar um pouco para dentro para todo meu site eu dar uma certa margem observa que todo o meu site ó ele tem uma

margem aqui em relação ao início aqui da minha página tá vendo que aqui o logo ali acompanha aqui o que vai vir depois mais para baixo então eu vou colocar essa margem Zinho aqui também na nossa página aqui em logo eu vou colocar um margem a esquerda margem Leste de 10 porcento o Olá como é que ficou aí quebrou né o nosso a nossa nosso navbar Porque daí vai passar de cem porcento né Pensa que eu dei 10 por cento aqui aí eu tenho aqui mais vinte por cento de trinta por cento com mais de

oitenta por cento de Deus 110 aí passou de cem porcento né então a gente vai precisar modificar que o nosso menu para setenta por cento para ele cabelo ali e ficar certinho Agora botei setenta e setenta por cento ficou certinho OK tá tomando forma né pessoal está tomando forma vamos continuar agora a gente precisa fazer aqui os links né ficarem estilizados Então vamos fazer a estilização dos nossos links então menu tag a aqui a tag dos links e a gente pode colocar a mesma cor aqui e do logo essa mesma cola o text-decoration a gente

pode colocar nome né para não ter uma decoração no nosso link para não ficar com aquele sublinhado em baixo vou ver como é que tá ficando aqui beleza a gente pode aumentar o tamanho da fonte EA gente pode colocar um font-size aqui de uns 20 pixels eu acho que vai ficar bom eu ver como é que fica um pouquinho maior e a gente pode fazer aqui um pede de 20 pixels de altura por 16 de largura tons ver como é que vai ficar Olá já ficou bem legal Zinho na pessoa ficou bem show de bola

e a gente pode fazer que quando o mouse estiver sobre esses links Então vamos fazer omenor a over né ou se tiver sobre ele quando o mouse estiver sobre que que vai acontecer a cor com uma cor que eu também tenho que preparada separado que é FF 2978 é um tipo de Rosa aqui e combinando com esse nosso tom de azul e a borda do topo um border top a gente pode colocar de quatro pixels sólida da mesma cor que a gente tem aqui em cima se a cor desse azul aqui a gente vai usar

ao longo do nosso template vamos ver como é que tá ficando lá então passa o mouse em cima ou lá como é que fica bem legal né pessoal show de bola mas a gente vai querer agora que esse botão aqui do Canto Fale Conosco ele seja diferenciado né pessoal então como é que a gente vai fazer aqui no nosso HTML a gente pode colocar nesse botão aqui um identificador único ai de eu vou chamar de Botão mesmo e aqui no nosso estilo eu vou fazer aqui algo para o botão Lembrando que o Wide né esse

seletor de tipo de identificadores e sempre vai ter prioridade em relação as classes vai dia ele é sempre superior na especifi o final do CSS em relação as classes então que eu passar aqui ele não vai obedecer o que tá antes vai obedecer o que tá aqui dentro porque ele é mais específico Então vou colocar que a cor de fundo dele o background dele vai ser essa cor aqui que esse azul que a gente tá utilizando certo a gente pode colocar aqui que eu pede em dele para a gente fazer um botão o pede em

vai ser 10 pixels por 25 pixels tão 10 de altura por 25 de largura vamos ver como é que ficou legal já ficou tipo um botãozinho Vamos colocar a cor dele o Collor como sendo arte Para Ser branco ou ver como é que tá ficando É legal vamos colocar aqui uma borda arredondada border-radius de 15 pixels só para gente dar um toque Zinho aqui de uma bordinha arredondada bem bonitinho né pessoal só que a gente vai querer também que esse menino não esteja grudado aqui nesse canto aqui né pessoal não esteja grudado aqui então e

a gente vai fazer o seguinte vamos colocar uma margem e a direita o que uns quinze por cento tá para gente afastar ele dá direito a uns quinze por cento vamos ver como é que fica afastou quinze por cento daqui beleza até para ficar padrão com outro lado aqui ó a gente tem o nosso logo afastado 10% né então a gente pode fazer aqui ó se afastar 10 por cento da direita para a gente manter o mesmo padrão dos dois lados 10% aqui dez porcento aqui e esses itens aqui também ser um pouquinho afastado dele

aqui então a margem a esquerda margem left vamos dar aqui 15 por cento aqui de afastamento certo Olá Pastor cinco porcento os itens que estavam para cá então ele fica um pouquinho mais isolado Dinha que ficou legal dessa forma só que que acontece quando eu passo o mouse em cima dele é repare que aquela borda que a gente tem aqui em cima dos outros itens também pega nele ó Então a gente vai ter que fazer o que acontece nesse botão específico quando o mouse passar sobre ele então botão um Rover ou quando estiver sobre ele

então quando estiver sobre ele a gente vai dizer que a borda dele vai ser nenhuma a gente não quer nenhuma borda e o fundo o background quando o mouse passar por cima dele vai ser esse Rosa aqui ó a gente tá usando ao longo de toda a nossa página vai ter esses tons de azul e rosa Então vamos ver como é que tá ficando aqui ó já ficou bem legal nosso botãozinho a passa o mouse em cima fica naquele tom de rosa e aqui os outros itens Então beleza pessoal a gente já fez aqui a

nossa parte de cima agora a gente pode corrigir a essas coisas que a gente deixou aqui para a gente só poder enxergar que ao background aqui a gente não precisa que o background seja desse por dessa cor azul gente pode deixar que ele vai ser Branco certo então já vai ficar branco e a gente pode tirar essas bordas aqui que a gente tava utilizando até a gente pode usar o contra o KC bem rápido né para ele colocar comentário aqui o a escola com uma/o* depois fecha com asterisco e barra para só comentar isso daqui

porque de repente a gente precisar de novo colocar essas bordas a gente só tira essa esse comentário seus barras aqui eu já fica tudo certo beleza pessoal então uma dica que eu vou dar para vocês então vou comentar aqui na questão do logo e também aqui na questão do menu certo beleza agora olha como é que vai ficar show de bola já temos o nosso menos vim aqui em cima já funcional agora vamos parte próxima próxima etapa que vai ser essa parte aqui que é o nosso Líder né o cabeçalho do nosso site uma dica

que eu dou para vocês pessoal em todo o desenvolvimento que vocês for fazer isso tem a ver com experiência do usuário tem a ver com layout que dá resultados é que a parte de cima do site isso que a gente chama de ridder essa primeira parte que a pessoa vai bater o olho e vai ver o teu site pela primeira vez é crucial ela é chamada de área mais quente de qualquer site Então você precisa ter uma chamada para ação uma chamada bem interessante bem bonita o impacto visual legal se você não impactar nessa primeira

visualização aqui provavelmente vai ser mais difícil do usuário fechar com a empresa ou Continuar rolando para baixo para ver o site essa primeira vamos assim fachada que a pessoa ver faz muita diferença então é legal que você tem uma chamada bem grande chamativa né com uma imagem bonita e tudo mais para você tá fazendo a o teu site chamar atenção das pessoas os seus clientes né a um detalhe sobre essas cores que a gente tá usando aqui né pessoal esse tom de azul e esse tom de voz o porquê que a gente tá usando é

por causa dessa nossa imagem que a gente está trabalhando certo essa imagem aqui ela tem esses mesmos tons reparam tons de rosa e os tons de azul então site inteiro fica combinando e dessa imagem que a gente vai estar utilizando nesse template então para eu poder os usar essa imagem no meu template e todas as cores combinaram usei as cores relacionadas essa imagem como você faz para saber quais são as cores dessa imagem no formato que de código hexadecimal né você faz assim você vai teclar aí no seu teclado a função print screen né Cada

teclado pode ser diferente no meu tem que apertar o fn e a tecla print screen ele vai bater um print você pode vir aqui e digitar assim ó é print screen color até eu já tinha digitado print screen color E aí você vai procurar aqui uma página que essa página aqui ó color picker from screen os até pode tá isso aqui é melhor digitar no Google isso aqui ó color picker from scream que é um site onde você pode colar o print que você fez então eu vou vir aqui agora vou dar um control V

aqui nessa PA é porque eu já dei um print scren vou dar um controle ver ó ele vai mostrar aqui a foto que eu acabei de tirar com a o meu print screen E aí eu posso selecionar aqui a área do dessa foto vamos dizer assim que eu tirei da minha tela que eu quero pegar a cor então por exemplo eu quero clicar nessa parte aqui mais escura eu clico aqui em cima ó ele já vai me dar o código da cor que é desse tãozinho ali e aí se eu quero pegar do rosa O

clica aqui ele já vai me dar a daquele Rosa então eu posso selecionar aqui ó para descobrir os tons de cor que eu posso tá usando baseado nessa imagem aqui na minha página entendeu a gente faz dessa forma para toda a página ficar combinandinho legal então essa dica aí que eu também quero passar para vocês de como que a gente chegou nessas cores aqui que a gente tá utilizando Beleza então tá continuando vamos fazer o nosso reader daqui nessa parte aqui debaixo Então vamos voltar lá no nosso index aqui debaixo do nosso nave vamos fazer

agora o nosso Reader e o nosso HTML semântico Vamos colocar aqui então nosso Rida Oi e esse nosso reader ele vai ter uma altura Vamos colocar aqui um hate que 600 pixels mais ou menos Vamos colocar um background Grey só para gente enxergar que o nosso reader já na nossa página certo e a gente tem que colocar que a classe né Não esqueci de colocar aqui a classe como líder beleza então beleza queriamos aqui a classe querida beleza e já está mais ou menos assim a área que eu imagino que vai ficar aqui já de

forma visual para gente enxergar até legal para gente ver a divisa aqui com o nosso menu da parte de cima agora A gente vai precisar fazer como se fosse dois blocos a duas áreas repara a gente tem essa área aqui que poderia ser tipo como se fosse um bloco um quadrado a gente vai colocar a Red Line que a gente chama que a chamada para ação botãozinho esse textinho e a gente vai ter um outro bloquinho onde a gente vai ter a nossa imagem que vai ser um ponto de destaque aqui no nosso site Então

a gente vai fazer esse nosso Líder ele teu display é do tipo Flex e o flex-flow dele também vai ser do tipo linhaa orou rap e um ok Por enquanto não aconteceu nada agora a gente precisa colocar mais conteúdo Então a gente vai colocar o conteúdo dentro aqui do nosso Líder a gente vai ter que ter um primeiro quadrado a gente vai colocar essas informações aqui e um segundo quadrado onde a gente vai colocar a imagem bom então vou criar aqui uma div com a classe chamada Red Line Red Line inglês é a chamar a

linha do cabeçalho seria uma tradução é quando você tem essa chamada aqui mais importante a gente não realmente chama esse aqui de Red Line tá pessoal então por isso que eu coloquei essa classe você pode dar o nome que você quiser não vou criar essa Redline com essa classe com a chamada de Redline e vou colocar aqui um H2 escrito você achou a melhor e outro h2ac a agência digital certo porque que eu tô usando H2 aqui né pessoal porque eu tô usando H2 porque eu usei o H1 aqui na agência fake que ao título

da minha página o meu logo que é o principal aqui né então eu vou usar o H2 porque o ideal é a gente só ter uma vez o nosso H1 na nossa página só uma dá um certo Por isso que eu tô usando o H2 Lembrando que a gente aprendeu isso lá no módulo de html vamos ver como é que tá ficando aqui por enquanto tá uma bagunça mas a gente já vai ajeitar isso aqui e vamos fazer agora um quadrado pode ficar classe e MG Red Line que é para onde a gente vai colocar

a nossa imagem aqui dentro né então a gente poderia já fazer esses dois quadrados para a gente já enxergar aqui então vamos lá no nosso estilo e vamos criar aqui o Red Line Red Line aqui dentro do Red Line Vamos colocar aqui que ele vai ser um Flex de 40 vou pegar mais ou menos uns quarenta por cento aqui da nossa página certa e a gente pode colocar que ele vai ter uma margem left de uns 10 por cento para gente seguir a margem que a gente tá dando já desde o nosso login aqui né

ó Então vamos dar uma margem de 10 porcento beleza para a gente tentar enxergar isso daqui vamos colocar uma borda né Vamos colocar aqui uma borda de um pixel sólida é Black para a gente enxergar e por enquanto ele tá pegando a área total Mas ele deu a margem aqui certinho então beleza tá legal esse aqui só que a gente precisa agora fazer também o bloco aqui do nosso da nossa Redline Então vamos colocar aqui essa classe ponto e MG Redline e aqui vamos fazer o seguinte margem White à margem da direita Vamos colocar de

10 porcento Oi e o Flex dele vai ser de quarenta por cento e para o pessoal que você sempre tem que prestar atenção nos tamanhos para formar sem por cento só tô dando uma margem de 10 porcento e o meu bloco vai ter quarenta por cento de tamanho e se deu 50 por cento certo mesma coisa que com outro bloco ele vai ter dez porcento de imagem à direita e quarenta por cento de tamanho vai totalizar 50 então 50 com 50 por cento eles vão ficar na mesma linha certo então vou colocar aqui uma borda

também ó de um pixel sólida vou colocar um rosa que Deep Pink só para você enxergar o Olá você tá vendo aqui ó tô aqui a gente tem área da nossa imagem que a gente tem a área do nosso texto agora vamos colocar já a imagem aqui para a gente ir até essa imagenzinha aparecendo né quando você quer pegar uma imagem de algum site você vai entrar no site qualquer lá clica com o botão direito sobre ela Você pode abrir uma imagem em uma nova guia ou salvar imagem como já para você baixar ela né

alguns sites que eu já mostrei para vocês lá no módulo de html para gente pegar imagens seria frupic a gente pode pegar no pé que os seus um Slash tem muitos lugares né então se eu fosse lá na frente pique eu poderia vir aqui e digitar assim por exemplo na busca que por marketing por exemplo ou alguma coisa relacionado a social olha só que legal essas imagens que tem aqui poderia estar utilizando acha que é bem legalzinha também ó você pode procurar alguma imagem que se enquadra essa daqui poder e tem várias bem legais que

você pode estar pegando certo pessoal essa aqui bem legal também para agência aí você poderia usar as cores de base você clicaria aqui em cima dela oi vem aqui fazer download certo para poder usar essa imagem então ficaria bem legal mas eu vou usar essa mesmo que a gente já tem aqui esse padrãozinho então vou clicar com o botão direito fingindo que eu tô pegando de algum outro lugar De algum site Vou salvar como e vou salvar aqui ó dentro da nossa pasta aqui em sites agência fake aqui dentro eu vou criar uma nova pasta

chamada e MG para gente ter de imagens e aqui dentro dessa passe MG eu vou deixar esse nome aqui mesmo girou rite certo que é o padrão que ela já veio vou salvar aqui Salvei Minha imagem agora vocês vão ver aqui na minha árvore aqui já apareceu a minha parte MG que eu acabei de criar com essa imagem virou rite ponto.png e vamos adicionar que a imagem Então a gente vai fazer a tag MG src vamos apontar Nossa pasta e MG barra e rite e vamos ver como é que tá ficando vamos lá Oi beleza

e parece que quebrou né porque a imagem ela ficou muito longa e aí Não tá cabendo aqui dentro então o que a gente pode fazer a gente pode passar aqui direto nela mesmo estilo Max o edit o tamanho máximo 100 porcento Porque daí vai ficar o tamanho certinho aqui dentro Olá já deu certo mas a gente poderia passar aqui um tamanho pouquinho Menor Vou colocar Max Edith noventa porcento para ela ficar um pouquinho menor que daí você já vê que ela encaixa um pouquinho melhor aqui no nosso no nosso layout né eu vou colocar também

aqui no nosso MD Red Line aqui ó que o texto Vou colocar sim text-align-center só para gente centralizar a imagem dela ficar no meio aqui ó viu que ela deslocou mais por meio para ficar certinho aqui beleza tranquilo né pessoal aqui o tamanho também do nosso reader a gente não precisa deixar ele fixo aqui com 600 pixels gente pode deixar ele alto né para ele a ficar conforme os tamanhos aqui ele vai se adaptar a gente não precisa fazer dessa forma aqui OK beleza então a imagenzinhas já tá aqui já tá certinho a gente pode

inclusive tirar essa borda que a gente tem aqui né só borda rosa que a gente usou por só para gente ver com trocar a cena para deixar comentado aí beleza agora vamos fazer vamos nos concentrar nesse lado aqui essa parte aqui de a gente fazer essa utilização aqui bem bonito no Nossa Redline bom então a gente pode fazer aqui que os nossos h2na Redline então Redline H2 vai ter algumas propriedades por exemplo a gente pode colocar que o fonte O leite dele vai ser 900 Talvez para fazer uma fonte um pouco mais grossa mas estilo

né o tamanho da fonte fonte sais a gente pode colocar de 20 pixels talvez bom e a cor o Collor a gente pode colocar essa padrão que a gente tá usando esse azul aqui e vamos ver como é que tá ficando beleza pelo menos a cor já ficou legal mas a gente vai ter que ajeitar as coisas aqui né então a gente pode fazer aqui direto na tag ó por exemplo a gente pode botar esse agência digital aqui a gente pode colocar um font-size dele aqui diretamente na nossa tag de uns 70 pixels vamos ver

como é que vai ficar com 70 pixels Olá já ficou grandinho já ficou bem legal Dá para aumentar até um pouquinho mais né Vamos colocar uns 80 pixels aqui ó show de bola aqui nesse nosso H2 aqui a gente pode colocar um Style também direto aqui um letter-spacing o espaçamento entre letras e vamos colocar uns 15 pixels para ver como é que fica o Olá já espaçou as letras e ficou efeitinho bem legal mas eles estão separados um do outro né pessoal então pra gente tirar essa separação a gente pode colocar aqui um pad 10

e vamos ver como é que tá ficando e uma margem né uma margem zero também nos nossos h2ac o Opa aí sim já ficou um grudadinho o outro já ficou bem melhor agora vamos deixar isso aqui alinhado no centro aqui desse nosso elemento como que a gente vai fazer isso com aquelas propriedades que a gente já aprendeu na aula passada de flex-box né então a gente pode colocar aqui o justify-content como sendo Center para ele ficar alinhado no centro e a gente pode colocar o align items e também alinhado no centro e vamos ver como

é que tá ficando Olá já ficou ajeitada aqui no meio beleza certinho e o conteúdo ele vai crescer conforme o que a gente colocar aqui então a gente pode colocar aqui no um conteúdo a mais aqui embaixo Desse nosso dessas nossos títulos né vou colocar um pé Lauren e aqui embaixo a gente pode ter aqui um botão vou colocar uma HS contando para lugar nenhum mas vou colocar uma classe nele eu vou chamar essa classe de contar btn o botão de contato certo e aqui vou colocar assim contrate agora certo então vamos ver como é

que tá ficando beleza Vamos ajeitar agora esse essa questão do parágrafo e do botão é tão parágrafo a gente vai fazer com Red Line b e colocar aqui a cor dele como sendo color Grey e vamos colocar aqui com o alinhamento do texto vai ser text-align left né alinhamento do texto a esquerda vamos ver como é que tá ficando aqui o texto tá aqui mas como nosso fundo também é Grey parece que ele desapareceu os aproveitar e já deixar o fundo do reader aqui no jeito né Vamos colocar o background dele como o Haiti ou

branco para gente deixar ele já visível tirar essa marca embaixo beleza já está tomando forma Vamos colocar agora o nosso botãozinho ali né esse botão do contact btn aqui então sozinho aqui. Contact contact btm e vamos colocar o a cor dele é um background nós vamos colocar aquele nosso Rosinha podemos fazer um pede de 20 pixels a cor dele White Branca né vou ver como é que tá ficando olá legal show de bola a gente pode colocar aqui que ele seja maiúsculo né o contrate agora vamos colocar aqui em text-transform para upper-case quer dizer tudo

sempre maiúsculo a gente também pode colocar que ele vai ter uma bordinha borda rádios uns colocados 5 pixels o Olá tá ficando bem legalzinho text-decoration né vai ser text-decoration esse no nenhum para a gente poder tirar essa linha asinha Que fica embaixo beleza só que ele ficou aqui né pessoal meio que em cima aqui do do outro né Porque ele está com display dele padrão que é o slime Então vamos usar o display inline-block para que a gente possa ter um controle melhor sobre ele olha aí ele vai deslocar para baixo em relação ao nosso

parágrafo que a gente tem aqui beleza Ficou bem legal Zinho e a gente pode fazer quando o mouse passar sobre ele né pessoal que que vai acontecer quando o mouse passar sobre ele então vamos ter que eu contar tbtm o que que vai acontecer quando for over ou sobre né bom então quando tivesse sobre ele a gente vai fazer o background dele ficar naquele Tom do azul que a gente está trabalhando aqui esse azulzinho aqui vamos ver o resultado bem show de bola passou Mouse contrate agora aqui em cima também bem legal a gente já

pode tirar essa nossa borda que a gente tá usando aqui só para a gente ter uma referência Então vou ver aqui no nosso Redline e vou tirar essa borda a roupa contra o KC beleza comentei já tirei Ficou bem legal Zinho aqui isso daqui só que só que repara uma coisa a nossa agência que não está alinhada com essa parte aqui né porque que será que não está alinhado deixa eu ver onde é que tá o nosso logo aqui nosso logo ao alinhamento do texto dele tá Centralizado né deixou dar uma olhadinha aqui como é

que ficou o componente só para eu ver aqui a Olha só ele tá na mesma linha aqui só que a escrita tá no centro né pessoal então vou deixar aqui o teste online como left ou seja à esquerda E aí ó ele vai ficar no cantinho lá vai dar certo alinhamento Agora sim então contra o KC comentar agora sim ficou alinhadinha aqui esses dois itens beleza show de bola por enquanto tá ficando bem legal você vê que é relativamente simples para você tá criando né pessoal você vai criando assim uma sequência lógica vai criando os

blocos vai encaixando vai colocando as alturas o tipo de display isso vai fazendo aqui a formatação agora a gente vai precisar fazer essa parte aqui o que podemos fazer pelo seu negócio esses itens aqui debaixo essa seção aqui debaixo certo então vamos voltar lá no nosso HTML e vamos continuar aqui para baixo do nosso Líder criando a nossa Fashion ou nossa sessão né então para criar essa nossa sessão essas Action Bom vamos lá para baixo no nosso CSS vou fazer aqui umas Action e dentro dessa seção a gente pode fazer que ela vai ter uma

margem de 80 pixels margem Top né o margem top de um 80 pixels em relação a partir do nosso reader dele de cima para ela ter um afastamento Vamos colocar uma borda aqui de um pixel sólida Black PSOL para a gente poder enxergar nós vamos colocar uma margem à esquerda de cinco porcento bom e uma margem e a direita também de cinco porcento e vamos ver como é que tá ficando aqui por enquanto ela não aparece muito lá embaixo Vamos colocar um tamanho aqui uma altura só para ficar mais fácil da gente chegar colocar uns

400 pixels só para gente já ver esse bloco aqui na nossa Terra Então tá aqui a nossa sessão certo beleza essa sessão a gente pode fazer com que ela seja o display dela display vai ser inline-block a gente não vai usar Flex nela porque não tem a necessidade a gente só vai colocar alguns itens simples aqui dentro dela então a gente pode usar como imagem inline Block e vamos colocar agora um conteúdo aqui dentro dela vamos fazer o seguinte vamos colocar aqui um H2 escrito assim o que podemos fazer pelo seu negócio que podemos fazer

pelo seu negócio não dá uma olhadinha que podemos fazer pelo seu negócio Oh e vamos fazer aqui os Action O H2 e no sexo H2 nós vamos colocar aqui o tamanho dele o edit dele vai ser de cem porcento e vamo chegar que ele quer o tamanho Total Vamos colocar aqui o que o Font size dele vai ser de 50 pixels a margem vai ser zero e o Font Family dele a gente vai usar aquele mesmo do nosso logo pessoal que vai ser o lobster aqui ó vamos pegar esse font-family aqui para gente pegar a

mesmo estilo de fonte que a gente está trabalhando lá com o nosso logo então o cálice font-family lobster Curse a gente pode colocar que ele vai ser Vamos fazer um fonte Leite aqui de tipo bold de e a cor color Vamos colocar aquele nosso tom de azul que a gente está trabalhando se azul roxo sei lá vamos ver como é que o que podemos fazer pelo seu negócio beleza tá tranquilo mas tem algum problema aqui pessoal algum probleminha que ele tá pegando só esse esse espaçamento aqui vou colocar aqui o alinhamento do texto text-align-center ficar

centralizado Tá certo vou colocar aqui também um pezinho de 15 por cento Vamos colocar aqui um pedem e cinco porcento e já deu um mas os espaçamentos vinhos que ficam melhores né Tá bom vamos fazer o conteúdo e depois eu acho que conforme a gente for colocando o conteúdo ele também vai-se alargando aqui né a gente pode fazer assim ou então a gente poderia especificar uma largura dele aqui também qualquer coisa é levando em conta que a gente tá dando uma margem de cinco em cinco daria 90 porcento né a gente poderia colocar aqui um

elite de noventa porcento só para gente já ir vendo deixa eu ver se vai dar certo ó aumenta por cento e cinco em cinco Beleza já ficou tamanho certo ok vamos continuar aqui então com a nosso desenvolvimento aqui vamos fazer uma dívida aqui ó com a classe chamada serviços dentro dessa dessa de serviços a gente vai criar os nossos Card zinhos então a gente pode fazer uma div com a classe Card Oi gente vai colocar três cards aqui dentro certo então essa div serviços né Vamos colocar aqui a classe serviços ela vai ser do tipo

também display inline-block e a gente pode colocar aquela vai ter uma margem do topo de cinco porcento para gente afastar ali daquela parte escrita certo Por enquanto não vai dar para ver nada mas ela tá passando essa parte escrita aqui e aqui agora vamos fazer os nossos cards certo pessoal então nosso Card vai ter o seguinte ele vai ter display também inline-block ele vai ter uma largura de trinta por cento e ele pode ter um pedem O interno dele uma margem de um por cento entre cada um como vão ser três Então vai gastar três

por cento de Margem por isso que o Stitch tem que ser trinta por cento e juntando vai dar 33 33 33 vai dar 99% né tem que fosse fazer o cálculo do tamanho da tela e para gente enxergar a gente pode colocar uma borda aqui ó borda e um pixel sólida a gente pode colocar aquela cor Rosinha que a gente tá usando trabalhando Vamos ver como é que tá ficando por enquanto tá bem pequenininho aqui e a gente pode colocar aqui dentro dele agora alguns conteúdos para a gente poder ir recheando esse nosso Card né

que pode colocar aqui dentro um H3 com o título desenvolvimento de sites Oi e a gente pode colocar embaixo um velório em aqui só para a gente ter um conteúdo colocamos isso nosso primeiro aqui vamos ver como é que tá ficando Olá desenvolvimento de sites um pé Lauren Beleza a gente pode tirar lá da secção àquela altura que a gente colocou Olá aqui é o rei que a gente colocou 400 por cento 400 pixels nós podemos tirar que daí ele fica automático conforme o conteúdo que ele tiver dentro Ali vai se adaptar beleza certinho desenvolvimento

de sites a gente pode fazer agora A copiar esse daqui e eu vou colar no outro Card aqui o desenvolvimento de apps bom e no último aqui é marketing digital e vamos ver como é que tá ficando Olá já tenho os três itens aqui desenvolvimento de sites desenvolvimento de Apps e marketing digital certo aqui a gente vê que quando passa o mouse ele dá uns enfeitinhos a gente já vai ver como é que agente faz para esses efeitinho serem criados né mas a gente quer ver agora esses ícones que estão aqui ó vocês ver que

tem um ícone Zinho Rosinha aqui né que a gente tá usando em cima como que a gente pega esses ícones como que a gente faz para colocar ícones assim dentro do nosso site O que que a gente vai fazer é vi um site chamado flat icon of flat icon acho que eu já mostrei aqui no curso esse site do Flash ai com e aqui dentro você pode passar eu vou entrar aqui com uma conta que eu tenho fake ó eu vou fazer o login com a conta do Google é bom que você tenha feito o

login aqui tá pessoal com uma conta do Google deve ter-se site do Flash ai com 11 você procura o que você quer achar que dica Então vou colocar assim por exemplo é web por exemplo que é de desenvolvimento web que eu quero fazer sites né Olá já vai estar aqui aquele ícone que eu usei ali ó vou clicar aqui nesse ícone ele vai abrir para mim eu seleciono aqui em cima a opção editar ícone ó e aqui eu posso mudar a cor Qual cor que eu vou querer vou querer aquele tom de rosa que a

gente tá usando ao longo do nosso código então vou copiar aqui esse tom de rosa aqui vou vir aqui onde a gente tem essa área com os códigos Vinhos e vou colar aqui ó ele já vai deixar o ícone com aquele tom de rosa vem aqui em baixar e vou baixar ele como png 1.png de tamanho pequeno tá pessoal pode ser 64 pixels não precisa ser um ícone muito grande ele já vai pedir aonde que eu quero salvar eu vou salvar aqui dentro da nossa pasta e MG e eu vou chamar esse ícone aqui de

PC tá PC. Png salvei agora eu posso até colocar essa imagem aqui né antes aqui então do nosso desenvolvimento de sites eu posso colocar aqui dentro desse nosso Card 1mg src e apontar passa ali para o ar nosso arquivo PC. Png que eu acabei de baixar vamos ver como é que tá ficando é bem show de bola né pessoal ficou bem bonito mesmo bem legalzinho Então já temos aqui a imagem do PC vamos fazer o mesmo agora com com um smartphone né então a gente pode procurar aqui smart phone e a gente pode pegar um

ícone aqui que a gente acha que se encaixa por exemplo esse como é que eu fica bem legal mais ou menos no mesmo estilo no mesmo padrão com as linhas né vem aqui em editar e quando eu vou colocar aqui aquela cor que a gente pegou ali que aquele rosadinho Olá vamos ver aqui em baixar png 64 pixels o smartphone ponto.png já vou até copiar esse Joice caminho aqui é um salvar aqui e vamos colocar aqui e esse nosso smartphone ponto.png beleza nós já colocamos outro ícone vamos ver como é que tá ficando lá olá

bem show de bola né pessoal bem legal e o último vamos procurar aqui por um ícone de marketing digital Vamos colocar marketing marketing e a vamos pegar aqui um que tenha mais ou menos o mesmo estilo Então vou pegar um diferente daquele que a gente tava usando antes lá que eu vou pegar esse aqui ó o que ficar quem é de tar ícone vou pegar o mesmo Rosa lá que a gente quer Opa tem que pegar aquele tom de rosa lá e aqui xô copiar E aí vamos baixar ele com png aqui 64 pixels o

marketing né Vou deixar só marketing aqui para deixar o tamanho certinho aqui marketing beleza vamos voltar lá no nosso index e vamos colocar mais essa imagem aqui ó bom então antes do título aqui marketing né E aí e vamos ver como é que tá ficando aqui Olá show de bola né pessoal bem legal a gente já tem os nossos Card zinhos aqui agora a gente pode fazer eles ficarem um pouquinho mais arredondados os cantos né então aqui no nosso Card a gente pode colocar um border radius de uns 10 pixels né vai ficar acho que

legal deixa eu ver como é que tá ficando já ficou com as gordinhas arredondadas bem legais aqui ficou bem show de bola esse daqui gostei e quando eu passar o mouse em cima a gente quer que dei aquela sensação de que algo que que tenha clique né que seja clicável algo assim então a gente pode passar aqui uma propriedade chamada cursor como Pointer para que ele fica com aquela aquele símbolo do cursor de mãozinha beleza que ao como se fosse clicado Beleza agora como que a gente faz esse efeito aqui ó a gente vai querer

esse efeito aqui quando passa o mouse por cima e para que ele mostra um outro texto aqui ó ele fica Rosa Olá tudo rosa ele dá um efeito assim ó como se fosse um deslocamento e ele mostra um outro texto aqui como que a gente faz esse tipo de efeito aqui nos nossos cards Então vamos lá vamos ver como é que a gente faz isso a gente pode chamar esse conteúdo que a gente tem aqui ó que é do título e do parágrafo a gente pode chamar isso aqui colocar isso dentro de uma div com

uma classe chamada por exemplo card-text que é o texto original o texto que aparece por primeiro certo vou colocar aqui ó fechamento dele é em volta aqui do dos nossos do nosso título do nosso parágrafo aqui ó para que ele fique aqui dentro elas ficaram contidos aqui dentro então vou fazer a mesma coisa com os outros só que eu vou copiar assim ó e vou colar para ficar mais fácil a gente vai pegar aqui é aquele desenvolvimento de sites e vou fazer isso aqui no último também só para a gente ir ganhar tempo que é

marketing né vamos lá o marketing Ok aparentemente não vai acontecer nada porque a gente simplesmente colocou os conteúdos dentro dessa de card text Então a gente tem uma div principal que se chama card-text onde vai estar o nosso conteúdo colocado lá dentro e a gente vai ter agora um conteúdo que vai ser um conteúdo que vai estar oculto a gente vai copiar esse conteúdo do nosso card-text aqui colocar aqui embaixo Mas eu vou chamar ele de essa classe aqui ó de o texto oculto tá só para a gente saber que a texto oculto é seu

nome dessa classe aqui nesse título eu vou colocar assim outro conteúdo Em qualquer é que eu vou deixar um lado Y só para gente ver se a gente for lá no nosso site você vai ver que tá dois conteúdos aqui repetido certo mas a gente vai fazer o seguinte esse texto oculto a gente vai vir aqui ó e a gente vai colocar senha. Texto oculto nós vamos colocar o display dele como nome que é para ele desaparecer olá agora ele não aparece mais ele está desaparecido mas a gente vai querer que quando o mouse passa

por cima do card ele apareça Então a gente vai precisar fazer esse efeitinho aqui quando o mouse passa em cima ele apareça e desse efeito aqui então quê que a gente vai fazer agora vamos fazer aqui que quando clicar em cima passar o mouse em cima do cardiocard Over primeiro que a gente vai querer de efeito ao seguinte o background fundo vai ser aquele rosa que a gente quer vai ficar com fundo todo rosa a cor do texto vai ficar branco o White e a gente vai dar um pede um preenchimento de uns 40 pixels

para aquele deu um enfeitinho de tipo uma some Fun é óbvio Olá ó tá vendo ele deu um efeitinho por causa do preenchimento mas esse repare que ainda tem as imagens aqui ó tá vendo como as imagens são do mesmo tom de rosa que o tom do fundo elas não estão aparecendo certo ela dá até uma uma bugadinho aqui o que que a gente vai fazer a gente vai fazer que quando o mouse passa por cima do card então Card ou ver o que que vai acontecer com a imagem com a imagem da dentro da

nossa classe Card on que que vai acontecer com as imagens aqui dentro da classe Card seletor é classe Card sobre imagem o que que vai acontecer a gente vai fazer com que o display fique Noni para desaparecer as nossas imagens Não repara agora que que vai acontecer ó e quando eu passo o mouse em cima ele não aparece mais as imagens aqui porque a gente tá mandando as imagens desaparecer certo beleza por enquanto tranquilo mas a gente quer que apareça agora o outro conteúdo lá que a gente preparou aqui né que é esse texto oculto

Então a gente vai ter que fazer com que o nosso Card text eu desapareça né então vou fazer aqui um card eu vou ver que que vai acontecer com card-text o display dele ficar nome né display None bom Então olha só que que vai acontecer agora o passei o mouse em cima não tá aparecendo mais nada passei o mouse em cima não tá aparecendo mais nada mas o que que a gente vai querer que aconteça que o nosso texto oculto apareça então vou fazer Card over o nosso texto oculto texto oculto vai ter o display

como Block ou seja vai aparecer display Block aparecer vamos ver como é que isso vai ficar aqui ó agora olha só que interessante ó quando eu passo o mouse em cima e para que ele vai aparecer o texto oculto e vai desaparecer o texto padrão ó olha só que legal o efeito que ficam então a gente tá fazendo aparecer e desaparecer conforme a nossa necessidade conforme o mouse passa por cima ali que legal Zinho fica um efeito bem nota 10 né PSOL bem legal mesmo só para ti tudo de organização esse nosso texto oculto vamos

puxar ele mais e aqui logo depois aqui do card texto oculto para depois a gente colocar aqui os eventos de mouse over certo e vamos fazer a esse texto oculto a gente colocar nos outros cards também então aqui para baixo da onde a gente tem o nosso card-text Vamos colocar o texto oculto você poderia estar colocando aqui o texto que você quisesse que aparecesse quando mal Se passasse por cima né ó outro qualquer outro qualquer outro qualquer show de bola né pessoal bem legal mesmo fica bem bonita que esses nossos Card zinhos dessa forma Vamos

tirar essa borda agora da nossa sessão vamos tirar a borda aqui ouvindo aqui em estilo vamos lá na nossa sessão sexo e a gente pode tirar essa borda aqui que a gente não quer a gente não precisa o Ok vamos tirar esse o edit de noventa porcento que eu acho que agora não vai precisar por causa que a gente já tem os conteúdos de preenchimento aqui ó bem Legal né Bem show de bola mesmo agora vamos fazer aqui o rodapé essa parte de baixo que tu Nossa do nosso site lá nosso roda pezinho o nosso

footer bom então vamos lá no nosso HTML aqui debaixo da nossa secção vamos fazer aqui o footer Né footer que é o rodapé na nossa tag semântica e aqui a gente pode colocar assim um a dá um grito agência a agência fake Tá certo e aqui a gente pode colocar um baixo isso daqui um parágrafo a escrita que um site feito com HTML e CSS puro a beleza vamo vamos ver como é que tá ficando ó ó agência feio que tal mas não tem nenhum conteúdo aqui no nosso CSS Então vamos fazer agora o nosso

futuro aqui embaixo né então vamos colocar o seletor Ultra com 2 o e aqui vamos passar algumas propriedades primeiro que a gente vai afastar da parte de cima ali da nossa section dá uma margem top de um 100 pixels e o tamanho dele a altura um rei que a gente poderia colocar de uns 300 pixels certo de altura vamos ver o lá beleza pra gente poder enxergar ele vamos fazer um background só que o background que a gente vai querer fazer é aquele background com efeito de degradê Então a gente vai usar o background-image a

gente vai usar o linear gradient é um 180 graus 180 degrees né e aqui a gente vai passar os seguintes as seguintes cores a gente vai passar primeiro aquele nosso Azul F4 a aquele azul que a gente tá usando aqui ao longo das nossas aulas ou fazer um outro azul um pouquinho mais escuro então aqui o código que eu vou usar é 090 a 422 que é um azul um pouquinho mais escuro e um Black que é um preto mesmo para gente fazer um efeito indo do azul um pouco mais claro para um azul mais

isso por um azul mais escuro e por fim por Preto Olá o efeito como é que fica um azul mais claro depois ele vai pro mediano depois ele vai para um mais preto certo ok vamos continuar aqui vamos fazer o alinhamento do nosso texto text online como Center botar o alinhamento do texto ao centro já ficou centro e a gente pode colocar uma bordinha na parte de cima um border top de 5 pixels sólida e a cor que a gente vai usar é aquele nosso Rosinha tradicional e olha lá que bonitinho já ficou bem legal

né pessoal e agora a gente poderia colocar esse conteúdo Dinho aqui ó dentro de uma div que vai com tela Vamos colocar aqui uma div com a classe é logo rodapé é para gente conter o H1 e o parágrafo dentro dela e a gente pode passar aqui ó que esse nosso logo rodapé e vai ter um preenchimento de um 100 pixels que eu acho que vai ficar legal aqui embaixo Vamos colocar aqui um pede de 100 pixels e olha lá ele já vai afastar mais ou menos para para o meio aqui né do nosso item

porque se a gente colocar aqui uma borda só para vocês verem ó border 1px Solid White E aí e ele tá pegando o conteúdo inteiro você tem um bloco né é Não deu para gente enxergar aqui e também ele tá sobrando aqui embaixo um pouquinho de espaço em branco certo então eu vou colocar aqui o aumentar que o meu fo ter a altura de 400 pixels aula agora sim já ficou legal Vamos colocar aqui ó algumas propriedades para gente controlar esse H1 aqui ó vamos colocar essa é uma classe aqui chamada agência você pode colocar

aqui um um CSS incorporado mesmo vamos colocar que acordar ele vai ser Branco certo só para a gente ver aqui a loja ficou com a cor branco e aqui vamos fazer aqui agência. Agência é só para gente fazer o mesmo efeito do logo lá da parte de cima né a gente pode ir lá no logo copiar esse daqui vamos descer lá embaixo o colar aqui só única diferença aqui que acordar gente pode deixar ele como branco né color White o Olá já ficou bem legal né pessoal bem show de bola mesmo agência feito um site

feito com HTML e CSS puro deixa eu ver mais o que tem que ir lá o curso programação web completo né então vamos colocar aqui ó nosso HTML aqui fora do nosso logo rodapé Vamos colocar aqui em é para fazer aquele símbolo de copyright Eu sempre faço assim pessoal vem no Google escreva assim copirraite símbolo assim e aí eu copio da aqui do texto que aparece aqui ó não contra você vem aqui coloca aqui o símbolo então todos os direitos reservados colocar sim é só que isso aqui tem que ter uma cor branco né então

vamos colocar um estágio aqui color White Olá Todos os direitos reservados Beleza então fizemos o nosso rodapé Zinho aqui o nosso site Zinho a faltou também né pessoal aqui esse símbolo Zinho do Whats aqui né Fale Conosco que fica aqui fica aqui no cantinho esse símbolo Zinho do Whats Fale Conosco eu fiz usando o botou pé e o Photoshop online né eu vou mostrar para vocês como é que eu fiz isso daqui eu vim aqui no photopea.com que é tipo um fotos Photoshop online eu venho aqui e já já vou procurar por WhatsApp símbolo ou

vem aqui em imagens para pegar um símbolo do WhatsApp aqui para para mim tá utilizando até vou pegar um Prontinho aqui pessoal para a gente não perder muito tempo tendo que fazer essa arte né Apesar de que seria legal acho que vou fazer assim vou fazer a arte aqui para vocês verem como que a gente Tá certo tô aqui no foto pé eu vou criar um novo projeto vou chamar aqui o tamanho a largura dele vai ser um 100 pixels altura dele e vou colocar aqui uns 300 pixels de altura ou criar se não ficou

muito bom esse tamanho Peraí deixa eu ajeitar aqui vou fazer um novo e como fazer 150 por 300 Vamos colocar aqui transparente criar beleza aí aqui dentro a gente vai fazer os nossos trabalhos eu vou pegar esse login aqui show de Ciel mais fácil de pegar um sorvete aqui e esse aqui eu vou copiar copiar imagem vou vir aqui no posto pé arquivo novo criar vou colar essa imagem aqui vou clicar com a varinha mágica aqui do outro lado de fora Lembrando que esse curso não curso de Photoshop Eu tenho um mini curso de Photoshop

que você pode ver no meu canal do YouTube caso queira aprender sobre a edição de imagem vou copiar aqui control c ouvir aqui naquela minha área onde eu tô querendo me imagem control V control alt te ver ou melhor Tem que criar uma nova camada Aqui Deixou deletar essa control ver aqui agora control alt ter pra eu diminuir para eu ajustar que o tamanho e esse meu símbolo aqui vou deixar ele assim Oi beleza É sim e aqui eu vou fazer assim eu vou criar uma nova camada vou pegar aqui o quadrado vou fazer assim

um quadradinho assim e colocar aqui a cor balde de tinta cor branco eu vou colocar aqui com o laço poligonal' para a gente fazer como se fosse a pontinha aqui do balãozinho né apontando aqui para o nosso WhatsApp e vamos pintar aqui e para ficar pontinha e aqui dentro eu vou colocar o texto Então vou pegar o texto aqui e fale conosco é um diminui o tamanho pouco dessa esse texto e Fale Conosco poder movimentar ele um pouquinho control.alt te para aumentar aqui a gente pode colocar assim clique aqui vou colocar só clique aqui e

vamos deixar ele num tom de verde aqui né pra chamar atenção Olá clique aqui e Fale Conosco e chá linha Dinho aqui beleza dessa forma aqui agora eu vou vir aqui em arquivo exportar png que é o formato com fundo transparente vou clicar em salvar eu vou colocar aqui na minha pasta de imagens da do meu projeto Então vou chamar esse aqui de What's essa imagem salver e agora eu vou fazer o seguinte aqui fora do footer vou colocar uma tag MG src e apontando pressa imagem então Whats. PNG é só que eu vou colocar

nessa imagem a classe chamada Whats certo olha vamos ver como é que tá ficando lá no nosso site bom então por enquanto tá solto aqui dessa forma aqui beleza agora aqui no nosso estilo a gente pode colocar a classe whats ó e aqui passar aqui o positivo um dela a posição dela vai ser fixa fixed e a posição dela vai ser em relação à parte de baixo do nosso site de 5 pixels EA direita também 5 pixels o Olá como é que vai ficar Beleza já ficou a imagem ali assim dessa forma só que acabou

que ficou até muito grande né pessoal ficou muito grande isso daqui a gente poderia diminuir bom diminuir direto aqui pelo vou colocar a largura dela de e vamos ver aqui 60 pixels não sei 100 pixels colocar direto aqui pelo nosso CSS Olá beleza já ficou um pouquinho menor Fale Conosco beleza certo só que isso a gente teria que fazer você clicável né pessoal você clicava Então como que a gente faz para ser clicável a gente tem que colocar isso em volta de um HF né uma garra F um link a taça imagem vai ter que

está dentro de um link e a classe e vai estar no link não na imagem E aí e isso só que agora deu problema por causa do tamanho aqui ó se o init aqui ó vamos colocar direto aqui na imagem ó Style Edit 100 pixels é isso agora apareceu aqui agora você vê que já tem a opção de clique né e para você fazer com que abra o WhatsApp mesmo pessoal que que você faz você vem aqui em gerador de link de WhatsApp e você vai pegar esse primeiro link que tem aqui e vai colocar

o número do celular então vou colocar 4:49 9807/1999 meu número o Olá peguei seu contato no site eu Fechar essa janela que abriu lá peguei seu contato no site gerar link Copie esse link vem aqui cola aqui não deu HF aqui ó peguei contato no site certo e aí você coloca também o target como sendo Blank tá pessoal para abrir em uma nova janela para não sair de dentro do teu site beleza Tô voltando aqui se eu vim aqui clicar olha só já vai me redirecionar para o WhatsApp já para iniciar conversa ó peguei seu

contato no site então já tá funcionando aqui o nosso botãozinho agora o que que acontece é que o nosso menu aqui em cima ele tá ele não tá acompanhando aqui o deslocamento tá vendo aí no nosso exemplo aqui ele acompanha como é que a gente faz isso é bem simples A gente tem que colocar aqui em cima no nosso estilo nosso navbar lá e aqui no nosso navbar opposite um dele ou a posição position como sendo fixed ou fixa Oi e aí olha só que que acontece ele até tá acompanhando aqui o deslocamento do meu

site Beleza mas ele ficou todo esquizofrênico né pessoal ficou todo esquisito e agora como é que eu faço para resolver isso daqui bom é bem simples Você só tem que passar que o tamanho dele o Elite vai ser sem por cento da tela para dar ele poder se adaptar certinho beleza olha só que legal agora ele já ficou certinho sem nenhum problema só que agora ele engole entre Aços por assim dizer a parte aqui da imagem esse nosso é essa nossa Redline aqui nessa parte de cima nosso reader né pessoal então a gente precisa afastar

o reader um pouco da parte de cima a gente pode fazer isso vindo aqui diretamente no nosso reader vamos achar que o nosso River tá aqui e a gente pode colocar um preenchimento um pede em top nele na parte de cima de um 100 pixels só para a gente poder afastar um pouco da parte de cima deslocamos a gente colocou um preenchimento é só para o menu não atrapalhar que esses em pixels aqui que a gente tá colocando na verdade diz respeito à altura aqui que a gente colocou do nosso navbar aqueles em pixels também

então a gente tá colocando um preenchimento para cima simplesmente para até a quantidade de tamanho certinho para o nosso o menu não atrapalhar essa parte de baixo aqui do nosso Líder certo olha só é bem legal né pessoal bem legal mesmo então a gente fez o site do zero absoluta que junto com vocês só que tem um detalhe né agora a gente vai querer que ele fique responsivo porque se a gente for colocar para diminuir aqui o tamanho do nosso site ó olha só conforme a gente for diminuindo e ele vai ficando todo quebrado tá

vendo fica muito legal não fica quebradinho Então a gente vai querer fazer adaptação desse daqui né para que ele fique certo Olha que a parte de baixo também ó vou diminuindo olha como é que fica aqui ó fica bem bem esquizofrênico fez né então Vamos ajeitar esse daqui para ficar tudo certinho como que a gente faz isso com mídia Carris então para a gente criar uma mídia que a gente vai vir aqui na nossa pasta de CSS Vamos criar um novo arquivo vamos chamar de responsivo. CSS o que dentro do responsivo pontos SS onde a

gente vai fazer os nossos trabalhos aqui no nosso index.hr ml vamos referenciar ele aqui vamos pegar aqui copiar esse aqui do nosso estilo o colar e vamos escrever responsivo. CSS já está referenciado agora no nosso responsivo com sucesso e vamos fazer a nossa mídia quer então os fazer a roupa mídia scream.and Vamos colocar aqui que o Max o Edith dele vai ser vamos supor assim uns deixa eu ver aqui qual o tamanho que vai ficar legal Vamos dar um s12e ver quando mais ou menos ele quebra o reparo aqui que tem o tamanho e a

gente vai diminuindo aqui ó para ver mais ou menos um que altura ele dá aquela quebrada vamos ver ó então para baixo de mim ó já começa a ficar um pouco estranho para baixo ir 900 mas precisamente mas mais ou menos aqui uns mil ó e vamos ver aqui ó 1000 1005 a já fica um tamanho legal menor que isso já começa a ficar meio estranho aqui a as coisas como é que elas ficam né então vamos fazer que o tamanho máximo vai ser de 1.005 pixels tá começar por aí e vamos fazer o quê

que acontece quando chega em 1.005 pixels quer dizer abaixo de 1.005 o que que vai acontecer acima de 1.005 ficou padrão abaixo o que que vai acontecer nessa mídia quer então a primeira coisa que a gente pode fazer é fazer com que esse menu aqui ele desapareça né Esse - in a gente vai querer aquele desaparecia gente vai querer que esse logo fique centralizada olha só o que que acontece aqui quando eu reduzo a o nosso exemplo ó ele vai ficar com o lobo Centralizado e aquele menino ele desaparece porque a pessoa vai rolar é

não dispositivo móvel site assim né assim para ela ir o conteúdo não precisa necessariamente do menu aqui mais para frente quando a gente Nagel escrito que a gente pode fazer um menu mais especial para celular mas por enquanto um suas eles só desaparecer Então vamos lá e o nosso menu então menu a gente vai fazer com que o display dele seja no né ou seja ele desapareça né vamos ver aqui como é que fica Olá vai baixar de 1.005 desapareceu ó desapareceu apareceu desapareceu desapareceu beleza show de bola e o nosso navbar a gente não

vai querer que ele fique mais fixo ó Conforme a gente rola a gente não tem não tem mais porque ele se fixo dessa maneira então a gente vai fazer o seguinte navbar Oi e a gente vai mudar que positivo onde vai ser relativa só para gente não deixar ele fixo tá pessoal ó então ele já voltou com a posição relativa vejo que ele não acompanha mais conforme eu vou descendo aqui o nosso logo eu vou colocar ele então com a margem margem 0 e o que ele que não tenha nenhum tipo de Margem a gente

tinha antes uma margem esquerda lembra que ficava aqui com uma margem esquerda eu vou querer que se quiser essa margem e vou querer que o texto fique alinhado ao centro até que celular em center o Olá show de bola agora ele tá pegando o tamanho total e o meu item aqui o meu meu logo tá ficando bem centraliza Dinho beleza o nosso reader ele tá bem afastado aqui do nosso da parte de cima porque a gente tem lá no nosso estilo. CSS a gente colocou que o padrinho top é de 100 pixels por causa do

nosso menu que tava fixo né então não tem mais a necessidade da gente fazer isso então vamos colocar o nosso reader como pedem top Vamos diminuir na metade uns 50 pixels vamos ver como é que tá ficando já deu uma diminuída aqui da distância entre um e outro certo agora a gente não vai querer que ele fique assim dividido em cinquenta por cento cada um a gente vai querer que isso aqui Fique no tamanho Total aqui na nossa tela né então quê que a gente vai fazer a gente vai fazer com que o nosso a

nossa Redline aqui que é essa parte né ah vamos ver aqui no nosso código aqui ó e a gente tem a reader a gente tem a Red Line que é esse lado aqui onde está você achou a melhor agência então nessa classe a rede lá então a gente pode fazer aqui com que a nossa Redline tem o tamanho de Flex de 100 porcento para ele pegar o tamanho Total antes ela pegava quarenta por cento Redline tinha um Flex de quarenta por cento mais uma margem left 10 por cento então gente vai deixar sem por cento

e a gente pode deixar as margens de todos os lados em 15 por cento para ela ficar mais encaixadinha e o texto a gente pode colocar alinhado ao centro bom Então olha lá que legal show de bola né pessoal ó vamos diminuindo ficou sem por cento só que esse nosso parágrafo ainda não tá com alinhamento certinho né então é o Redline P aqui ó a Red Line P Vamos colocar também que o teste dele vai ser Center roupa text-align Center é isso agora ficou no centro legal beleza a nossa imagem aqui também a gente vai

querer fazer com que ela seja a flex dela 100% né então a gente pode ver o nome dela aqui é MG Redline né então a gente vai ver aqui no responsivo ponto e MG é de Laine podemos colocar aqui que ela vai ter um Flex de cem porcento é uma margem para todos os lados de cinco porcento e o texto também alinhado ao centro Esse text-align-center é só para deixar a imagem bem centraliza a Dinha tá pessoal vamos ver como é que ficou lá já ficou bem legalzinho né ó a beleza essa parte de cima

ó tá bem legal a já já dá um trabalho bem show de bola já para o responsável e já tá ficando bem bom deixa eu ver aqui o tamanho celular olha só que bonitinho o celular que vai ficar bem chamativo agência digital e tudo mais ficou bem legal isso daqui a gente pode tirar esse nosso whats a gente não vai querer que ele apareça Então vamos tirar ele só fazer assim. Whats põe que o display dele vai ser None nenhum aí ele já não vai aparecer nesse tamanho de tela ó já desapareceu e agora a

gente vai precisar ajeitar esses nossos cards aqui né Isso é bem fácil a gente só vai pegar aqui colocar que o nosso Card vai ter o tamanho o Edith de 100porcento 100porcento do tamanho da tela o Olá eu ficou sem por cento tamanho da tela E aí nós terminamos o nosso site pessoal repara que ele tá sem por cento responsivo Olha só ele se comporta legal aqui para os dispositivos móveis se eu vou aumentando ele se comporta também para computadores olha só que legal show de bola né pessoal um site Zinho bem bonitinho com alguns

efeitos bem legais mas não colocamos muitas sessões em muitos componentes para a gente não exagerar muito aqui no que a gente ia fazer nesse site O que é para gente poder só usar o que a gente aprendeu nesses módulos a gente vai fazer bem mais site mais para frente também depois principalmente que a gente aprendeu Java scrip mas ficou muito interessante muito bonito espero que vocês tenham gostado dessa aula e que a sala tem ajudado você entender aí pelo menos a colocar um pouco em prática por a mão na massa e tentar fazer um template

do zero absoluto certo pessoal uma sugestão é que você tem que fazer isso daqui sozinho depois a assistir essa aula pega e tenta reproduzir esse template aqui do zero você sozinho tentando fazer as coisas que você vai aprender bastante e também vou deixar aqui para download esse projetinho para você baixar Caso você deseja estudar ou usar até mesmo se template com isso nós concluímos aqui o nosso módulo de CSS essa linguagem de marcação essencial para os nossos designs para a criação dos nossos sites que trabalham em conjunto com HTML sempre é bom lembrar pessoal que

o nosso conteúdo aqui no canal é 100 porcento gratuito mas com qualidade de curso pago então apoio nosso canal deixando o seu gostei mostre sua gratidão se inscrevendo no canal e compartilhando esse conteúdo com um amigo seu que talvez não possa pagar para aprender programação se você quiser também nos ajudar de maneira monetária aqui na descrição do vídeo tem uma explicação Zinho de como você pode fazer isso dá uma contribuição e aí do outro lado você também se for uma empresa talvez queria fazer algum tipo de parceria a nossa comercial na descrição do vídeo também

tem uma explicação de como pode fazer isso agora se você quer continuar aprendendo se aprimorando cada vez mais em programação web aqui tem uma playlist de JavaScript linguagem de programação que você tem que aprender muito importante mesmo uma playlist show de bola de JavaScript aqui embaixo também tem um outro vídeo para você assistir Se não for inscrito no canal clica aqui no símbolo do canal que você também pode se inscrever por aqui beleza Um forte abraço e até a próxima valeu