Aprenda CSS do ZERO até colocar o SITE NO AR | Tutorial PASSO A PASSO com PROJETO PRÁTICO

O que que vocês acham dessa página Web beleza é legal tem um quiz interativo a gente tem o título temos várias perguntas conseguimos interagir com elas responder mas pessoal sendo muito sincera uma página assim tá muito feia tá muito simples por quê Porque aqui apenas está sendo utilizado a linguagem de marcação HTML Então a gente tem todos os elementos que a gente precisa de uma página né com título as perguntas imagem E botão tá Bela lista mas a gente não estilizou nada não tem uma corzinha a fonte também ela tá o padrão Aí do navegador

E é isso que a gente vai aprender hoje neste vídeo então fica até o final porque a gente vai fazer este projeto HTML aqui tomar vida e se transformar em algo completamente diferente aprendendo a usar o CSS [Música] para quem não acompanhou esse projeto né que eu tô falando aqui que ainda tá Muito simples e tudo mais é de um vídeo no canal em que eu expliquei absolutamente tudo sobre HTML Então essa página aqui a gente criou em vídeo e o projeto dela também está eu vou deixar aqui na descrição para quem já quiser né

já sabe HTML já quer continuar só para aprender o CSS Ou se você quiser acompanhar como que a gente fez isso e para que que serve HTML você não sabe nada disso não deixa de assistir E aí você consegue fazer do zero e obviamente Vai aprender vender muito mais sen não entra aqui na descrição e já acompanha o projeto do HTML pronto e a gente começa agora o CSS e não apenas isso a gente também vai subir o nosso site no ar porque quando a gente tá desenvolvendo a gente só tem o nosso site aqui

na nossa no nosso computador de forma local nesse vídeo a gente vai colocar no ar esse site vocês vão poder mandar para qualquer pessoa usando um domínio e uma hospedagem também lá da hostinger então Pelo que eu falei já deu para entender html cria aí todos os elementos da página Web a gente marca o que que é o qu vou mostrar até para vocês já o código então aqui a gente tem dentro do nosso B né do nosso corpo da página o nosso título Quiz interativo para programadores que está aqui a gente tem parágrafo teste

conhecimentos aí a gente tem e várias sessões cada uma para uma pergunta agora a gente vai pegar cada um destes elementos HTML e estilizar então Eu vou pegar como exemplo esse título mesmo o H1 que tá aqui Quiz interativo para programadores para estilizar esses elementos a gente tem três opções e eu vou mostrar para vocês as três mas a gente vai escolher apenas uma delas para trabalhar no projeto em si mas eu preciso mostrar só para vocês terem uma noção Vamos então deixar ele vermelho o que que vocês acham Acho que pode ser uma cor

que a gente vai conseguir visualizar bem a primeira forma da gente Usar o CSS para estilizar o mamento é chamada de inline CSS inline e esse nome já diz bastante coisa seria Então na linha inline então é aqui dentro do próprio elemento que que a gente vai fazer essa estilização E para isso a gente utiliza o atributo Style vamos ver como que é isso vocês lembram do atributo né de como a gente faz isso ali com HTML da último do último vídeo eu vou só abrir um espaço dentro da nossa tag e escrever Style aí

pra gente Colocar o estilo que a gente quer a gente coloca ali o igual e abre as aspas e aqui dentro a gente vai colocar o nosso código CSS e ele funciona da seguinte forma a gente quer mudar a cor dele para vermelho eu vou colocar color né o CSS ele também é escrito em ingls e eu posso colocar o color red Vou salvar vamos ver como que fica Olha só pessoal lembrando também que eu tô usando o Live server né para quem não lembra uma extensão aqui do vs code é chamada Live Server você

vem aqui nessa imagem de quadradinhos em extensões aí você abaixa instala e vai aparecer a opção go Live para você você clica aqui você já vai conseguir abrir a página né a gente cria um servidorzinho local por isso que eu salvo Já venho aqui direto na no meu navegador ele já já tá aparecendo Então vamos analisar o que que tá acontecendo aqui eu estou fazendo aqui aqui tudo é código HTML até essa parte do Style aqui que é um atributo dentro desse atributo A gente escreveu um código CSS como que ele funciona então a gente

coloca uma propriedade que é o que a gente quer alterado o nosso elemento e logo em seguida o valor dela depois ali dos dois pontos Mas e se a gente quisesse então adicionar mais coisas por exemplo eu já troquei a cor mas eu quero alterar o tamanho da fonte a gente coloca um ponto e vírgula e E aí coloca também a propriedade fonte size que é para alterar o tamanho da fonte dois pontos e Coloca o valor que a gente quer então sei lá eu quero uma fonte de 70 pixels Vamos colocar enorme Vou salvar

vou vi para cá e olha só aumentou já o tamanho da nossa fonte e olha que legal para eu separar cada propriedade e valor eu também coloco ponto e vírgula no CSS lembrando né pessoal essa parte aqui é código CSS mesmo então eu posso adicionar várias e várias é estil ações que eu quero aqui para esse elemento ele tá estilizando apenas o H1 porque a Gente tá colocando aqui dentro da linha direto dele mas assim pessoal na prática a gente não usa tanto esse formato inline é importante vocês saberem porque pode ser que vocês queiram

utilizar e eu já falo o motivo mas eu vou mostrar agora para vocês a segunda forma da gente poder escrever código CSS aqui no nosso projetinho e dessa vez a gente não vai escrever na linha de cada elemento que a gente quer a gente vai escrever dentro do nosso HTML mas a gente vai Criar uma tag apenas para escrever o CSS essa tag é a tag Style e aonde que a gente coloca essa tag a gente precisa colocá-la dentro ali do nosso head do projeto lembra que o head é a parte onde a gente tem

os metadados as informações ali do projeto que não não fazem parte da estruturação do corpo da página exato então eu vou abrir aqui um espaço na linha seis e vou colocar essa tag Style dentro dela então eu vou colocar o nosso código CS SS que a gente quer vou também Voltar ó eu vou salvar só para mostrar como para vocês como tá eu tirei né a estilização do H1 vou voltar com a mesma estilização Mas como que a gente faz então para dizer aqui dentro dessa tag Style que a gente quer estilizar o H1 a

gente simplesmente coloca H1 aí a gente abre e fecha o nossos as nossas Chaves e aí aqui dentro a gente coloca toda a estilização que a gente quiser então vamos colocar de novo color dois pontos Red a gente coloca ponto e vírgula no Final e eu vou colocar já também o nosso Font size de 70 né como a gente tinha colocado Antes também vou colocar aqui o ponto e vírgula no final e os dois pontos né lembrando sempre propriedade dois pontos valor e a gente põe ponto e vírgula e aqui nesse caso a gente precisa

colocar que é o H1 que a gente quer estilizar e aí tudo que a gente quer de estilização coloca dentro de umas Chaves e tudo isso dentro do nosso elemento Style Vou salvar e olha só que Legal já alterou se eu quiser por exemplo agora mudar além do H1 o parágrafo se fosse em line eu colocaria de novo o atributo Style dentro dele então cada elemento teria o seu próprio atributo style com a estilização aqui a gente já consegue colocar dentro dessa própria tag várias utilizações de vários elementos Então eu só coloco P aqui embaixo

também abro chaves para ele e aí eu vou colocar uma outra cor Talvez um Blue né podemos colocar um azul ponto e Vírgula vou salvar e olha olha só aqui a gente tem um um detalhe né quando eu falei que eu ia alterar o parágrafo eu tava pensando aqui nesse parágrafo Que fica embaixo do nosso título mas ele alterou todas as tags PS que a gente tem no projeto porque eu tô falando estilize a tag P com azul legal isso né pessoal então a gente não precisa ficar escrevendo vários códigos para cada parágrafo que a

gente quiser estilizar porque aí a gente consegue já de uma vez Colocar eles todos de uma cor só que a gente quer e esse é o segundo for fato que a gente escreve o CSS mas também não é o que a gente usa mais ali na prática pessoal por quê Porque a gente tá aqui dentro de um documento HTML a gente pode sabe o quê fazer um arquivo apenas CSS E aí dentro dele a gente vai colocar todas as estilizações que a gente quiser que vão ser essas aqui a gente fez H1 IP mas gente

num projeto Pensa a quantidade de elementos que a gente quer estilizar Cada um de um jeito vai ficar enorme esse negócio aqui no dentro do Head do HTML vai ficar muito desorganizado imagina também se fosse em Line ia ficar pior ainda putsa AF Então para que que existe tantas formas assim da gente escrever CSS Por que que a gente já não usa só a terceira forma ali de criar um novo arquivo CSS para colocar os nossos e as nossas estilizações Então pessoal cada um desses formatos diferentes aí que eu mostrei para vocês eles têm uma

Eles têm uma hierarquia aí de especificidade e o que que isso significa às vezes quando você tá escrevendo um código Se eu colocar aqui por exemplo a gente deixou o nosso parágrafo Azul nessa estilização ali do e interna né que seria a segunda forma se eu colocar aqui ele em line e eu decidir que a cor vai ser amarela qual cor Será que ele vai seguir a que eu deixei aqui em cima que é azul ou ou a que eu deixei aqui dentro que é Amarela eu vou salvar e a gente vai ver olha só

aqui Ele deixou não dá nem para ler né direito ele deixou Amarelo o parágrafo que a gente escreveu veu o código inline e o resto tudo ele deixou azul por quê porque primeiro que o inline ele só vai estilizar aquele elemento mas segundo por que que ele não ficou azul se a gente colocou aqui que é para ser azul porque existe essa hierarquia sempre que a gente colocar o CSS inem line Ele vai ser prioridade de Estilização mesmo que é em outro no arquivo CSS esteja outra cor mesmo que aqui na tag CSS que é

o segundo formato teja outra cor e A Hierarquia é a seguinte é o inline o CSS interno que é esse com a tag Style E aí depois vem o CSS no arquivo Vamos criar então um arquivo é style.css né o ponto CSS é extensão como a gente já imagina porque o index P HTML é a extensão do HTML então o style.css é o arquivo CSS Vamos então aprender como Que a gente estiliza em um outro arquivo ué Rafa mas pô se A Hierarquia é melhor a gente colocar um inline ou é maior ainda se a

gente colocar no HTML gente é por causa de organização essa parte da hierarquia e tudo mais a gente consegue ter um bom planejamento pro nosso projeto pro nosso código e a gente não vai precisar fazer isso é muitas vezes o que a gente faz é tipo Nossa não tô conseguindo aqui no meu arquivo CSS deixar de jeito nenhum o parágrafo Azul Tem alguma coisa errada aí você vai lá para fazer uma gambiarra para aquele elemento você vai lá e joga em line e deixa a cor azul mas é meio que como uma gambiarra mesmo sabe

que você acaba usando se você tomar cuidado e seguir todo o passo a passo bonitinho aqui no arquivo para deixar aquele parágrafo específico azul que eu já vou mostrar para vocês também como que a gente pode separar cada elemento que seja ele do mesmo né do mesmo tipo você não vai ter Esse problema e não vai precisar usar inline e nem esse interno aqui da tag Style no R eu vou até tirar isso daqui e agora a gente vai pro nosso CSS no arquivo primeira coisa que a gente precisa fazer é linkcar esse arquivo com

o HTML mesmo que ele esteja na mesma pasta né a gente tem aqui a pasta meu site que a gente estava usando ali no outro vídeo A gente já tem até outro arquivo sobre mim que eu tinha criado ali também no final para mostrar para Vocês interação entre páginas HTML e temos também uma pastinha assets com a imagem da pergunta oito que é aquela do Java mesmo assim ele não vai entender que esse é o CSS para essa página específica a gente precisa fazer um link entre essas páginas então aqui dentro do nosso head mesmo

que é a parte das informações eu vou colocar a tag link aí ele já me completou aqui com emet Hell Style sheet e é isso mesmo que a gente vai usar é uma folha de estilo o nosso CSS pode deixar dessa forma esse é o atributo Hell e ele já veio com esse valor Style sheet o href como vocês também lembram no outro vídeo ele é aonde a gente coloca o endereço do arquivo que a gente vai querer colocar aqui e qual que é o endereço Ele está na mesma pasta então a gente não precisa

colocar aquele barra ponto barra barra a gente pode só colocar aqui o nome do nosso arquivo beleza pessoal a gente já vai testar quando a gente começar a Escrever o CSS se está funcionando ou não esse link Vamos então começar a escrevê-lo e aqui a gente vai fazer exatamente do formato que a gente fez ali na nossa tag Style a gente escreve Qual é o elemento que a gente quer estilizar coloca as chaves e aqui a gente coloca as propriedades e valores da estilização por que que eu já coloquei aqui a tag Body porque ela

é a primeira que a gente começa estilizando né a gente não estiliza aqui o head a Gente vai estilizar o bor que é onde é o corpo da nossa página E aí cada um dos elementos que estão dentro dele inclusive ele entendeu porque se a gente quer estilizar algo de uma forma mais raiz né se a gente quer estilizar a página por exemplo a gente não quer que tenha nenhuma margem na nossa página a gente quer que a nossa página ela fique completa pegue todo o lugar do navegador por exemplo já vou mostrar para vocês

o porque que a gente vai utilizar o body Vocês estão vendo aqui que o HTML puro a gente tem um espaçozinho ó deixa eu até dar mais control mais a gente tem um espaço entre o início aqui da nossa página na esquerda e as coisas que a gente escreveu então tem o q aqui ele tá com um espaço aqui que espaço é esse sabe esse T aqui tudo tá com um espacinho O que que a gente pode fazer a gente pode zerar todas essas margens que tem por padrão já no nosso navegador e a gente

pode zerar também algo chamado Padding que é a margem interna do nosso elemento também é o laçamento dentro dele e a gente vai fazer isso no B porque é mais fácil a gente já tirar a margem do B que é realmente o corpo da página do que a gente tirar elemento por elemento Então vamos lá eu vou colocar aqui Margin 2.0 e vou colocar o tal do pading 2.0 também ponto e vírgula salvo volto para lá e Olha só pessoal Ele já tirou a margem isso é algo um pouco importante da gente fazer quando a

gente Tá começando o nosso CSS do projeto e existem vários É reset CSS que a gente chama que é quando a gente já padroniza o nosso projeto pra gente ter noção de tudo essas margens por exemplo e vem direto do navegador se a gente já não não sabe qual o tamanho da margem a gente não quer aquela margem pra gente ter controle de toda a estilização a gente zera essa margem a gente zera o pading também que eu já vou mostrar para vocês exatamente o que é essa margem Interna para ter todo esse controle Eu

fiz um vídeo aqui no canal também explicando o tal do box Model que é esse modelo o de caixa dos elementos HTML ó deixa eu mostrar para vocês eu vou clicar com o botão direito no navegador inspecionar elemento e olha só aqui eu não sei se vocês já tinham entrado nesse né inspecionar ou não às vezes entra errado também mas ele é muito usado enquanto a gente tá aí programando é uma página Web Porque a gente já consegue Analisar tudo da nossa página como ela tá sendo estilizada qual que é aqui o nosso HTML se

você fizer isso em qualquer página Web você vai conseguir ver o htm L da página olha só eu vou passando aqui o mouse ele vai até destacando onde eu tô ó eu tô passando o mouse em cima do tal do header aí eu coloco aqui para maximizar e ele tá destacando o quiz interativo para programadores tal que é o nosso header mesmo do HTML coloco passo o mouse por Cima ali do H1 que é o quiz interativo para programadora ele também tá destacando mas olha só tá destacando em azul o conteúdo e aí tem um

destaque também em laranja olha só que interessante aqui embaixo a gente tem o nosso modelo de caixo box Model que eu tô falando para vocês que eu fiz um vídeo explicando os elementos HTML eles são formados do conteúdo que é exatamente o que tá escrito ali o quiz interativo para programadores se a gente For no nosso HTML o conteúdo vai ser aquilo que tá escrito dentro das nossas tags e aqui no caso ele tá ocupando 372.54 que é a largura versus altura e os nossos elementos HTML além do conteúdo eles podem ter uma borda neste

caso a gente não tem borda Mas se a gente quiser adicionar uma borda a gente pode eu vou colocar aqui ó a gente já estilizou o b Vou colocar aqui agora o H1 vamos adicionar uma borda no H1 a gente é border dois pontos aí a gente Pode colocar uma borda por exemplo de dois pixels de espessura ela vai ser uma borda Sid que ela é retinha mesmo poderia ser tracejada poderia ser de várias várias formas pontilhada também e ela vai ser uma borda preta eu vou colocar aqui Black também no final ai Rafaela Como

que você sabe essas informações todas por que tem que colocar aqui três valores pessoal essa parte de propriedade e valor do CSS o CSS ele tem uma Infinidade de propriedades sendo muito sincera tem várias propriedades que eu acho que eu nunca usei na minha vida e grande parte delas eu ainda hoje pesquiso para saber como que é o formato ali de você escrever o valor é que o borda é algo que a gente realmente usa bastante então acaba decorando que você coloca a espessura o formato e a cor também mas assim vocês vão ver que

eu vou escrever na propriedade o valor isso é algo que com a prática a gente vai Decorando Se você não conseguir decorar agora tá tudo certo ninguém decora essas coisas a gente acaba pesquisando e Relembrando também enquanto a gente tá desenvolvendo o foco na programação sempre não é a decoreba é a lógica por trás como que estiliza e qual que é a ordem que que é esse Box Model aí que a gente tá é Aprendendo agora então coloquei a borda e olha só aqui já mudou o nosso border tá mostrando que a gente tem dois

dois pixels de borda já aqui no Nosso modelo da caixa no inspecionar e ele tá dizendo também que temos aqui uma margem de 21.44 se a gente zerar essa margem por exemplo que na verdade esse 21.742 H1 a gente consegue controlar a margem da forma que a gente quiser quero colocar sei lá dois pixels por exemplo vou salvar e agora a gente tem essa margem e o tal do pading o padding é o espaçamento entre o conteúdo e a borda então se eu colocar aqui um pading eu Posso colocar um pading de 30 pixels por

exemplo vou salvar Olha só o nosso conteúdo tá aqui agora distanciou muito da nossa borda que a gente tinha então pedinha é diferente do margem o margem é para fora da borda mesmo quando a gente não coloca nenhuma borda a gente tem que sempre entender a diferença dos dois mesmo quando a gente não coloca uma borda Beleza então pessoal como funciona aí o modelo de caixa justamente por isso que a gente lá no bor já colocou a Margem e o pading zero para não termos esse problema outra coisa que a gente pode fazer né que

eu já mostrei para vocês aqui por exemplo é que a gente ainda tá com uma margem em cada um dos elementos a gente tirou a margem do body em si Mas cada elemento ele tá com uma margzetta né o seletor seria é que nem a gente tá selecionando B ou a gente tá selecionando p a gente chama isso daqui ó de seletor existe um seletor que a gente consegue usar para selecionar Todos os elementos da nossa página ele é o asterisco então a gente pode usar para estilizar por exemplo o Margin padding ao invés da

gente e zerar só o body a gente pode zerar todos os elementos Então olha como que fica Pessoal vou até fechar aqui fica tudo grudado mas porém todavia com isso a gente tem muito mais controle do nosso CSS para poder saber que que cada um tem de Margem ao invés de ficar vind aqui no inspecionar e checando o tamanho e tudo mais beleza Até aqui pessoal eu vou então tirar aqui do B A gente não precisa disso e mais uma alteração que a gente normalmente faz quando a gente tá também começando o nosso CSS é

definir todos os nossos elementos com Box sizing border Box oh meu Deus que que é isso deixa eu já escrever só para vocês conseguirem visualizar Box sizing border box para que serve essa propriedade Box sizing ela vai definir como que a gente vai é escrever a altura e largura dos Elementos existe a opção de você escrever Box sizing content box em que se você utilizar desse formato que inclusive é o padrão do navegador por isso que a gente vai alterar Você quando fala que que é a altura x e a largura Y você vai tá

alterando o conteúdo apenas esse content lembra que eu expliquei para vocês o que que é o conteúdo é apenas a parte que tá escrito essa parte aqui de dentro Dent é só o que a gente escreve agora se a gente trocar para Border Box quando a gente for estilizar altura e largura a gente vai est alterando a borda E também o padding do elemento então para um botão por exemplo se a gente deixar ele como content Box a gente vai tá alterando apenas altura e largura do que tá escrito dentro do botão o botão em

si ele não vai aumentar ou diminuir pelo menos não da forma correta agora com o box sizing border Box quando a gente coloca com altura e largura ele vai est alterando já até a Borda então o botão inteiro ele vai aumentar e vai ficar mais largo colocando esse padrão a gente tem muito mais controle também do que que a gente vai fazer aqui de tamanhos e larguras eu sei que essa parte ela é um pouco teórica ela é um pouco chata esse começo de border Box Box sizing mas vocês TM que entender porque é muito

fácil a gente saber fazer ali o background de mudar a corzinha essa parte aqui pessoal é onde muita gente tem problema tem bug A a a estilização começa a não dar certo se vocês prestam atenção no básico vocês não vão ter problema no futuro e Óbvio vocês vão se tornar bons desenvolvedores aí é seja no front end ou seja como for porque aqui a gente tá falando básico do CSS mas existe o básico de várias linguagens enfim bora então começar a mudar Aí os nossos elementos da página a gente tem então novamente primeiro o b

e nele a gente já pode colocar um fundo legal pra nossa página o fundo ele é é Realmente o background color a o nome né da da nossa propriedade e o valor vai ser alguma cor eu mostrei para vocês a gente alterando cor usando Red escrevendo mas aqui Pessoal esse Red e tudo mais são cores padrões e normalmente a gente não vai ficar usando essas cores que já estão é escritas aqui com os nomes a gente vai usar o formato hexadecimal das cores eu acredito que vocês possam já ter visto isso que é quando a

gente coloca o hashtag E aí a Gente coloca seis e números ou letras né que estão dentro dentro do sistema hexadecimal para representar uma cor eu já separei aqui nesse caso eu vou usar a cor F4 f0 EA isso daqui então eu já tinha apego gente eu já é guardei Vou salvar e pronto eu sei que parece que não tem muita diferença mas é um branco bem menos Branco sabe e eu quero também trocar a cor das Letras de tudo que eu escrevi PR isso a gente usa a propriedade color então não confunda opa Não

confundam quando a gente escreve Color a gente está trocando a cor das Letras quando a gente usa background color é para mudar o fundo ou qualquer outra coisa color é para mudar qualquer outra coisa e a cor que eu vou colocar aqui é um verde que eu adoro também deixa eu pegar só o código 79 8252 Vou salvar e olha só Tchan já estamos alterando aqui um pouco a nossa página né já tá outra Vibe Além disso eu quero também colocar uma fonte diferente Eu não quero usar essa fonte deixa eu até ver qual é

inspecionar tem aqui a fonte nome times e é isso gente tipo não é essa fonte que eu quero ela também tá com tamanho 2dm não é exatamente o que eu quero eu quero alterar a fonte para isso a gente vai no Google fonts clicamos aqui no Primeira opção Google fonts browse fonts e eu vou querer a fonte chamada cabin aí também V do que vocês gostam vocês podem pesquisar qual você mais gosta tem uma Infinidade também de fonte aqui no Google Fontes ó ela já apareceu aqui em primeiro lugar eu clico nela e olha só

tá escrito aqui um botão get Font eu clico nele e olha ele tem algumas opções que é é fazer o download dessa fonte Mas a gente não precisa fazer isso ou get embed code é isso que a gente vai usar aqui ele vai mostrar pra gente como que a gente pode colocar a fonte né no nosso caso vai ser pra web a gente tá na fazendo uma página web e a gente tem Duas opções usar o link ou usar o @import eu gosto de utilizar o @import esse da tag link como vocês podem perceber é

uma tag e HTML já o Import esse @ vai ser dentro do CSS lembra que eu mostrei PR vocês que quando a gente usa tag Style a gente tá usando CSS dentro do HTML e tal a gente não precisa então copiar isso tudo a gente pode copiar apenas o ar até o final a gente não copia a tag porque a gente vai colocar no nosso arquivo CSS copiei Venho aqui em cima na primeira linha antes de tudo e eu colo esse código todo ele tá me trazendo aqui ó fonte Family cabem aí ele tá trazendo

em Itálico aqui também são é as grossuras da fonte então Itálico tudo mais agora a gente importou a fonte lá do Google fonts mas a gente precisa estilizar precisa colocar ela em algum lugar então eu vou aqui no nosso Body porque eu quero colocar a fonte em todos os elementos dentro do B fonte size não fonte Family E olha só quando a gente tá no G fonts ele também entrega pra gente como colocá-la dentro do nosso código CSS tá um pouco zoado aqui mas olha só ó ele tem o Font Family cabin s sherif e

é exatamente assim que a gente coloca ó Font Family cabin Opa S sherif pode copiar ou você pode escrever também aqui é entre aspas E aí depois a gente coloca a escrição serif depois da vírgula vou salvar e vou ver como está aqui olha só já mudou completamente também a nossa Página deixa eu fechar esse inspecionar ele já tá com uma fonte muito mais legal do que aquela padrão do times além disso a gente pode colocar também o fonte weight por exemplo deixa deixa Itálico E no caso né como eu falei você tem que importar

é os formatos direto lá do Google fonts então é importante checar Quais são as opções que tem vou colocar fontweight 400 que eu acho que deixa mais é normal regular mas por exemplo se eu colocar 700 e salvar Olha Só fica tudo mais eu não sei se dá para vocês conseguirem visualizar vou tentar colocar aqui na tela para vocês verem e agora o 400 salvar e o regular vou deixar o regular mesmo mesmo quando a gente quiser a gente grifa Ah aqui ó lembra que a gente usou o strong para essa parte do do parágrafo

esse está em por padrão e aqui já tá o regular também legal pessoal vamos deixar então essas estilizações no Body porque ele vai acabar estilizando Né tudo que tá dentro dele e aí especificamente precisamos utilizar cada um dos elementos começando então pelo nosso cabeçalho Lembrando que o cabeçalho são esses dois é elementos aqui é o título e o subtítulo né a gente sempre pode checar dentro do nosso arquivo HTML o cabeçalho ele tá dentro do B dentro da tag header cabeçalho então podemos comear estilizando o header em si ao invés da gente utilizar primeiros elementos

sempre vai ser nessa Ordem que a gente faz para padronizar o CSS é na ordem do elemento mais P né primeiro a gente começa com aquele asterisco depois o b e aí depois a gente vai pro heer e a depois a gente vai pro H1 e pro P então sempre em ordem para ficar organizado vamos utilizar então o nosso header header a gente abre aqui as chaves e que que a gente pode fazer aqui primeira coisa que a gente pode fazer é colocar uma marzin Para nosso cabeçalho ai Rafaela mas você tirou a margem lá

no começo sim pessoal pra gente poder agora ter controle das coisas que a gente vai colocar mas eu não vou colocar uma margem eu vou colocar um pading Eu gosto muito de sempre colocar o pading a invés do margem para isso não alterar é o lugar dos outros elementos ao redor eu gosto de ter controle já que a gente tá usando o box sizing border box de ter controle do elemento em si o que tá dentro quando A gente usa o border Box a gente coloca uma largura ou uma altura ele não vai colocar o

margem dentro disso né É só o border e o padding por isso eu gosto sempre de colocar o padding aqui pra gente e colocar ou não algum espaçamento mas isso vai de pessoa para pessoa Vou colocar aqui um padding dois pontos ã de dois Rin Hum por que que a gente não tá utilizando PX PX não é é pixels o tamanho do do do espaçamento Sim a gente pode utilizar Pixel pro espaçamento mas Eu vou colocar R porque ela é uma unidade de medida relativa então se a pessoa tá utilizando uma tela bem menor né

Por exemplo e olhando o navegador no celular ou ela tá usando a tela ali do navegador Qual que é o tamanho padrão que ela escolheu Às vezes tem gente que gosta de colocar e as letras muito grandes dentro ali do celular para poder enxergar melhor ou Muito pequenas se a gente tá utilizando Rem a gente tá fazendo com que isso se AD ao que o Próprio usuário decidiu que fosse sabe ele vai se adequar ao que já está pré-definido e aos elementos pais também se a gente coloca Pixel ela é uma unidade de medida fixa

E aí vai ser 12 pixels para qualquer lugar que você coloque Você pode até depois é fazer uma estilização diferente para dispositivos móveis Mas você também vai usar Pixel também vai ficar fixo Às vezes o dispositivo móvel pode ser ainda menor então é melhor a gente utilizar aí eu Gosto bastante de utilizar unidade de medida relativas vou salvar então e olha só a gente já tem aqui então um pading vou até clicar aqui no especional elemento a gente já vai poder com o nosso botãozinho aqui de alvo vim colocar o mouse em cima e olha

só a gente já tá com o verde Deixa eu voltar aqui para o modelo de caixa o nosso modelo de caixa então ele mostra que a gente tem um pading de 32 Tá tudo funcionando Tudo ótimo então mas eu acho Que uma coisa que ficaria legal aqui no nosso header seria colocar um fundo diferente para mostrar que é um cabeçalho mesmo né o título assim da página então eu posso colocar um background color apenas ali pro header porque dentro do header que eu tô estilizando eu vou colocar a cor 33 1 f19 que foi uma

cor que eu já selecionei né Eu já fiz esse estilo todo antes Aí da página para poder ver o que fica legal vou salvar e olha só Pan deixamos Aí o fundo marrom eu adoro essa junção de marrom com verde você aí de casa pode fazer do jeito que você quiser a estilização e outra coisa também que dá pra gente mudar é aqui não está Centralizado né o eu ia gostar de deixar o título ali mais Centralizado eles estão alinhados à esquerda que é o padrão então eu posso colocar aqui a propriedade text align dois

p Center Vou salvar e olha só que legal já tá tudo Centralizado agora Sinceramente não tem Nada que eu queira alterar no meu título Nem no meu parágrafo então eu não preciso estilizar eles né às vezes você quer colocar então uma outra cor pro título né não sei quer estilizar de alguma forma você pode mas eu não vou eu vou pular direto para o próxima tag que a gente tem no HTML vamos checar Qual é venho aqui no index novamente Não quero estilizar H1 nem p vou estilizar então a nossa tag Main e essa tag

Main o que que ela tem ela tem várias se eu Minimizar Aqui né Cada section ela tem várias sections cada uma para uma pergunta pra introdução para cada coisa que a gente desenvolveu ali no HTML então o que que eu vou mudar nela eu quero colocar o espaçamento entre cada uma dessas sections de forma padronizada e bonitinha eu posso fazer isso no m porque aí fica tudo perfeito a gente não precisa ficar estilizando dentro de cada section um espacinho menor e aí a gente não se perde também como que a gente vai Fazer isso vou

pegar então a tag Main né que vai ser o nosso seletor aqui no CSS vou abrir as chaves e aqui eu vou utilizar algo chamado flexbox porque eu gosto muito de flexbox tem até dois acho que vídeos aqui no canal em que eu ensinei assim gente passo a passo porque o flexbox Ele tem muita coisa legal para você posicionar elementos né então não deixa de conferir depois desse vídeo aí você pode até pegar Muito mais coisa e para deixar ainda mais legal seu projeto Mas eu vou mostrar de forma mais resumida aqui primeiro de tudo

eu vou colocar também um pading de dois Rin que nem eu tinha colocado ali no nosso cabeçalho para eles terem também esse espaçamento um pouquinho maior tá vendo que aqui o nosso background color do cabeçalho ele pega des aqui da borda que não tem borda mas é transparente né Teoricamente aqui finaliza a borda e todo o pading também e daqui da borda do header a gente tem o pading até o nosso Elemento Main e agora então bora usar o tal do flexbox para poder separar cada um desses dessas sections que a gente tem aqui para

usar o flexbox a gente precisa Obrigatoriamente colocar aqui display dois pon Flex que é a primeira propriedade para utilizá-lo Vou salvar vou voltar meu Deus que que aconteceu por padrão quando a gente já coloca display Flex ele alinha todos os elementos filho do nosso seletor que no caso é o m ele alinha todos os elementos Então todas as sections elas estão alinhadas de forma horizontal nesse caso eu não quero forma horizontal eu quero alinhar de forma vertical Então como que eu escrevo isso eu coloco Flex Direction tudo que é Flex alguma coisa é quando a

gente tá usando Flex box e a gente precisa primeiro colocar o display Flex Flex Direction colo a gente estava com por padrão com o tal do Row que é em linha mas a gente quer colum em coluna Vou salvar e pronto já Voltou aqui para nossa pra nossa visualização de coluna agora o que eu queria com isso tudo na verdade é espaçar entre esses elementos sections aqui do Index HTML que são os elementos filhos de Main E para isso utilizo o tal do GAP o GAP também faz parte aí do flexbox com ele a gente

define Então qual que é o espaçamento Entre todos os itens é filhos desse nosso seletor Vou colocar aqui dois sem Vou salvar e olha só Pronto agora a gente já tem um Espaçamento melhorzinho aqui é uma section aqui é outra section aqui é outra pode ser dois ou talvez um 1.5 né eu tô achando bem grande eu vou deixar 1.5 acho que esse espaamento tá mais legal por que que tá tudo tão grande né na verdade eu tinha aumentado aqui o meu navegador não sei nem quanto por cento tá mas provavelmente aí nos no o

seu projeto vai est um pouquinho menor a fonte aí todos os elementos beleza pessoal já então estilizamos o Main Usamos o Flex Box Bora estilizar a nossa section cada uma dessas sections aqui gente eu também quero um espaço dentro dos elementos dela vocês percebem que o flexbox quando a gente usa a gente usa é num elemento pai para estilizar os elementos filhos a é se eles ficam em linha se eles ficam em coluna isso daí é flexbox pessoal agora para cada section eu também vou querer um espaçamento entre os elementos filho aqui por exemplo na

introdução a gente tem é um Subtítulo a gente tem três parágrafos aqui a gente também tem o subtítulo aí a gente tem o formulário com as respostas que a gente pega ali do nosso usuário então aqui no CSS deixa eu colocar a nossa section também vou usar o display Flex vou salvar ele mudou para deixar tudo horizontal vou colocar o tal do Flex Direct colum Vou salvar Pronto já voltou agora a coluna e eu também vou colocar um GAP agora entre esses elementos de um Rem Vou colocar ponto e vírgula e pronto ó agora tá

bem mais bonitinho os nossos parágrafos com espaçamento mais legal né pessoal ó agora tá mais mais chique uma coisa que eu acho que daria pra gente fazer que vai ficar legal é mudar a cor dos subtítulos porque aí eles também estão grandões aqui mas a gente pode destacá-los com alguma corzinha diferente eu já tenho até o código da cor que eu quero pro nosso subtítulos e os nossos subtítulos eles são os H2 né Que estão dentro de cada uma das sections também então eu vou colocar aqui color dois pontos aqui a corzinha que eu quero

colocar e olha só pronto deixamos ela marronzinha porque aqui o fundo ele vai ser branco então a gente conseguiu destacar de uma forma bem mais legal aqui os nossos subtítulos para cada pergunta para cada parte do projeto outra coisa que a gente pode fazer que eu tô achando que tá muito grande esses subtítulos eu vou colocar um tamanho de Fonte um pouco menor acho que eu vou testar 1.2 R ponto e vírgula deixa eu ver como que fica pronto acho que ficou melhor assim né ele ainda tá maior do que os parágrafos mas tá um

pouco menorzinho do que tava antes os parágrafos aqui eu acho que tá legal já a gente não precisa mudar aqui nesse nessa introdução por exemplo mas aqui a gente pode deixar mais bonitinho esse nosso input como que ele tá funcionando né aqui no nosso HTML Relembrando ele tá Deixa eu Minimizar essa parte aqui dessa section ele tá aqui nessa linha 22 a gente adicionou o comentário da pergunta um e olha só ele tem o H2 que a gente já estilizou também que é essa parte aqui e ele tem aqui dentro do form input e label

input e label então o input é o botão lembrando e o Label é o que tá escrito gente isso é HTML se você não lembra não entende não deixa de assistir o vídeo em que a gente construiu essa página inteira Então bora estilizar Primeiro esse nosso input Eu quero alterar primeiro de tudo a cor desse botão mas agora por exemplo eu quero alterar o input aqui do nosso Radio Button né que é esse eh de seleção múltipla mas Lembrando que por exemplo esse input aqui de texto ele também é input esse também é input esse

também é input mas eu quero mudar só esse aqui que é de multiple escolha esses botões que que a gente faz para estilizar só ele a gente tem a opção de Estilizar um elemento por atributo como que isso funciona a gente coloca aqui o input que é o que a gente quer estilizar e aí entre colchetes a gente coloca qual input a gente quer dependendo do atributo Então a gente vai pegar o atributo Type que é este daqui que tem o valor Radio Então a gente vai acabar estilizando apenas os inputs que tem esse atributo

com este valor então tudo que a gente colocar agora entre as nossas Chaves só vai servir para esse Aqui se a gente tivesse é mais de um input Radio além desses quatro que a gente tem aqui além desses quatro botõezinhos também estilizar mas a gente não tem mais nenhum isso daqui por exemplo parece mas é checkbox Então bora estilizar a cor aqui do nosso botãozinho a propriedade que a gente vai usar para fazer isso é accent color e aqui eu vou colocar uma cor que eu também já tinha selecionado que é CC D5 9 5

Vou salvar gente olha que gracinha que gracinha que Já ficou vou até dar um zoom não sei se também vocês estão conseguindo ver mas tá uma cor muito bonitinha melhor do que aquele azulzinho agora tá combinando mais com o resto dos itens do nosso projeto ai Rafa eu adorei essa cor aqui por que que a gente também não faz o mesmo pro checkbox podemos fazer neste caso pessoal ao invés da gente né esperar de chegar na parte de desenvolver o checkbox como a gente já está usando essa propriedade accent Color e a gente vai usar

a mesma ali pro checkbox a gente pode colocar os dois seletores aqui como que a gente faz isso a gente coloca que a gente quer colocar essa propriedade valor para esse input com esse tipo e também a gente coloca uma vírgula para o input do tipo checkbox quando a gente usa uma vírgula aqui pros nossos seletores a gente vai estilizar mais de um seletor com os mesmos estilos então isso também é algo legal da gente fazer vou salvar vamos Ver se o nosso checkbox funcionou tchã Olha só tudo verdinho bonitinho também então a gente não

precisa ficar escrevendo novamente input type check Box E aí colocar dentro das chaves a mesma coisa a gente pode apenas utilizar a vírgula mas tem que escrever tudo do seletor novamente beleza pessoal gostaram de como ficou eu achei muito legal bora então estilizar esse esses inputs aqui de texto que é a partir da nossa pergunta número dois a gente tem Aqui na dois a gente tem na três que na verdade é o tipo password Então vamos lá vou pular linha vou colocar o nosso input com o atributo Type que vai ter o valor text né

Qualquer dúvida a gente volta no HTML dá uma lida ó a gente tá aqui nessa parte da section 2 né com a pergunta dois de texto aqui o input Você tá vendo que ele tem o Type text aí a gente abre as nossas Chaves primeiro de tudo eu vou colocar a width que é na verdade a Largura dele de 100% Vou salvar e pronto olha só ela já tá ocupando aqui todo o espaço que ela pode Além disso eu vou colocar também um pading aqui no nosso inut de texto vou pôr um pading de 0.6

R vamos ver como que fica salvar e olha só ele já ficou maior mas na verdade é porque ele criou um espaçamento maior entre o nosso Place holder né que tá aqui e o valor que é o que a gente tá escrevendo e a borda E no caso falando de borda Vamos definir uma borda mais Legal que vai ser de 2is PX aqui eu acho que não tem problema nenhum a gente deixar PX né porque realmente a borda gente é um tamanho fixo vou colocar Solid e a cor vai ser essa daqui deixa eu pegar

CCD 595 vocês vão ver que na verdade já é uma cor que eu tava usando aqui né A mesma do da bolinha Vou salvar e olha só gente que legal agora a gente já tem para pergun de texto uma borda Verde Já tá combinando um pouco mais aí com o nosso projeto também a invés Daquela borda estranha mas tem o seguinte quando a gente clica a gente consegue ver esse azulzinho em volta também esse daqui é o outline às vezes é interessante deixar o outline por causa de acessibilidade mas por estética Se você quiser mudar

existe essa propriedade aí a gente coloca outline None coloca ponto e vírgula salva e pronto quando a gente clica não aparece mais que está destacando por mais que pra acessibilidade é importante ter esse Outline outra coisa que a gente pode fazer é deixar arredondados input para isso a gente usa a propriedade border radios e aqui no caso eu vou colocar cinco pixels deixa eu salvar e mostrar para vocês né O que que é cin PX olha ele deixa minimamente arredondados 100 pixels ele vai deixar bem arredondado mas eu gosto desse desses cinco pixels aí um

pouquinho mais discreto Além disso tá muito branco eu acho esse Fundo do Nosso input a gente Pode deixar esse fundo transparente usando background color transparent Vou salvar e olha só Pronto agora tá da mesma cor do fundo mas a gente tem aqui o nosso a nossa borda mostrando que é aqui que a gente tem que escrever a resposta mas Rafa como que eu faço para mudar esse Digite sua resposta como que a gente altera o tal do Place holder né aqui no HTML o placeholder ele é um atributo do nosso input de texto esse digit

sua resposta né a gente colocou Aqui ó dentro do do próprio da própria tag então o placeholder ele é um pseudo elemento do CSS ao invés da gente utilizar tipo input e colchetes Place holder E aí o Place holder Tipo ele já colocou aqui uns dois pontos nada a ver porque no caso a gente estaria fazendo a estilização ainda assim do input e não do placeholder in seria um input que tem o placeholder mas não é assim que a gente vai fazer para estilizar pseudo elementos dessa forma a gente coloca Dois pontos e aí sim

Play holder ai Rafaela Mas quais são osos elementos que existem gente isso daí não é coisa de se decorar isso daí é coisa que a gente pesquisa a gente vai treinando a gente vai praticando e vai aprendendo que existem enfim vamos estilizar então o Place holder só para eu mostrar para vocês né porque eu tô grande parte das das e estilizações aqui eu coloquei para poder ensinar para vocês o máximo de conteúdo possível esse negócio de pseudo Elemento aqui também fazer iação com seletor por atributo isso é muita coisa legal é muito interessante Então bora

lá eu vou trocar a cor do nosso Place holder vou colocar o Color # CBB b7 Vou salvar e olha só P Pronto já trocamos Ela tá com uma corzinha marronzinha Clara e olha só que interessante já trocou o Place holder Aqui de baixo também porque eu não defini qual input exatamente todos os inputs que tiverem Place holder vão ter o Place holder Estilizado dessa forma pôr o ponto e vírgula aqui beleza e aqui pessoal eu acho que eu quero deixar exatamente a mesma estilização também para é input de password e tudo mais então Lembrando

que nem a gente fez aqui de colocar vírgula a gente também vai colocar vírgula para os inputs de outros tipos então no caso teremos input type password que é dessa terceira pergunta aqui ó se eu salvar Pronto ele já mudou também podemos trocar o input type date que no caso é Dessa daqui e podemos trocar input do tipo e-mail que a gente colocou gente lá embaixo ó Lembra do nosso forms ele já trocou o input do nome porque é do tipo texto e ele já trocou o input de e-mail que é do tipo e-mail depois

a gente vai também trocar aqui essa parte do text area que é outra tag não é tag input né lembrando do HTML Beleza então voltando aqui pra nossa página Seguindo aqui a ordem a gente tem também aqui a data Isso daqui a gente não precisa alterar né ele é é bem legal essa interação do tipo date que a gente consegue selecionar a data no calendário bonitinho aqui a pergunta cinco legal pergunta seis acho que tá legal também esse escolher arquivo bem padrão dá para estilizar se você quiser mas eu acho que tá bem tranquilo nemum

arquivo selecionado com verdinho já também já aqui na pergunta 7 eu acho que a gente podia deixar mais legal esse nosso Select Então vamos no HTML vamos dar uma olhada ó pergunta 7 é do menu suspenso ele tem aqui a tag select ele não é com input é a tag select que aí a gente monta esse menu suspenso E aí cada option É uma opção que a gente tem aqui então vamos lá vamos colocar aqui o nosso select primeiro né primeiro eu vou mudar um negócio que eu acho muito legal que é o cursor dois

pontos Pointer isso daqui serve para quando a gente passar o mouse por cima o mouse mudar ó o mouse Muda pra versãozinha de tipo aqui você consegue clicar eu acho isso daí muito legal aí a gente pode mudar a cor cor do nosso select eu vou colocar então o background color a cor CCD ó ele já até traz para mim que eu já tô usando bastante essa corzinha verde clara tã pronto posso mudar a cor do texto que é só com color lembra que aí eu vou colocar 331 f19 Vou salvar e pronto ele vai

ficar com marrom ele tá marrom mas parece Preto né o marrom Ele é bem Escuro vou colocar um border radios também pro nosso select ele já tem um arredondador com o nosso cinco pixels e vou também tirar essa nossa borda eu não tô gostando muito dessa borda que tem aqui preta pro nosso select então a gente pode colocar border None e também tem o tal do outline né Vocês estão vendo que a gente clica aparece esse azul a gente também pode colocar o outline None Vou salvar e agora ficou bem mais estilizado aqui a nossa

Caixinha de selecionar mais uma coisa que a gente precisa mudar no nosso projeto é estilizar imagem tá enorme Esse logo aqui do Java Então bora aqui pro nosso CSS eu vou colocar o IMG que é a tag de imagem do nosso CSS e eu vou colocar para ela uma widget que é a largura né Essa parte daqui para cá aqui é altura que se chama height e aqui a largura da esquerda pra direita eu vou colocar width isso aqui gente dá um nó de Escrever mas às vezes vai vou colocar de cinco R vou colocar

ponto e vírgula salvar e pronto ó já alterou junto a altura também Além disso eu posso deixar também arredondada a imagem então eu posso vir aqui e colocar por exemplo border radials de 5 PX que é o padrãozinho assim do nosso projeto é sempre legal você ter um padrão assim para algumas coisas para ficarem todas bonitinhas né com a mesm arredondamento e olha só ficou bem bonitinho aqui a Gente tem o iput da nossa resposta também já tá estilizado porque a gente já tinha eh colocado ele é do tipo texto né a gente já estilizou

aqui legal per pergunta oito tá ótima Vamos então agora estilizar essa tabela inteira gente a tabela vai ficar muito legal começando então pela nossa tag table a gente pode começar deixando ela com a largura de 100% também vou salvar e pronto ela ficou agora bem é alinhada com os nossos outros inputs que a gente tinha colocado De 100% pegando todos os passo da página outra coisa também gente é que olha só tem uma borda um pouco estranha Parece duas bordas ela é meio 3D assim para fora a gente pode fazer com que a nossa borda

ela fique que colapsada vira uma borda normal aqui na nossa tabela isso aí que tá agora é por padrão então eu vou aqui embaixo a propriedade que a gente usa para isso é border traço colapse e a gente vai colocar o valor collapse vou salvar e olha só Pronto Agora a gente tem uma borda normal agora vamos estilizar a primeira linha da nossa tabela que lembra lá no nosso HTML que era o tal do th H né porque a nossa tabela a gente tinha separado em cabeçalho que é esses dois aqui essas duas cédulas esses

dois aqui a gente tem também cada TD separada em linhas Então a gente tem aqui esses dois na primeira TR a gente tem esses dois TDS na segunda TR Então bora primeiro estilizar esses dois aqui do cabeçalho no nosso CSS a Gente vai colocar então th vou abrir aqui as chaves e vou colocar um background color CCD 59 C Vou salvar e olha só Pronto já temos aqui um fundinho diferente pro nosso cabeçalho vou também mudar a cor que eu acho que não tá muito legal ali do texto 331 f11 Vou salvar vamos voltar aqui

pontuação avaliação legal agora tem um destaque melhor né para esse fundo verde claro e vou colocar também um padding um espaçozinho porque eu tô sentindo que tá Muito grudado colocar aqui pading de pading de um Rin salvar Pronto agora ficou um pouquinho maior já mais espaçado hora então de estilizar cada uma dessas dessas informações dentro do corpo da tabela elas estão em cada TD Então vamos colocar aqui as as chaves vou mudar a cor do texto Primeiro de tudo também vou usar esse 331 f19 ponto e vírgula legal vou colocar um pading também de um

R ponto e vírgula opa salvar ótimo legal também já tá ficando Bem mais bonita a nossa tabela e uma coisa que eu posso fazer é trazer esse texto mais para cá vamos mudar o alinhamento dele text align deixa eu ver como fic com o Center por ponto e vírgula muito bom hein gostei do text Line Center a gente pode também alterar apenas esse boa sorte na próxima estud dem mais para melhorar porque ele como fica dentro de um TD né aqui na nossa tabela ele fica dentro dentro do T fut porque ele é realmente ali

o o rodapé da Nossa tabela né eu coloquei dessa forma no nosso HTML aqui é o TB aqui é o t Head e aqui é o tfoot mas ele tá dentro de uma tag TD como que a gente fala então pro nosso CSS alterar apenas a célula TD que tá dentro de um tefo porque todas as outras não tão elas estão dentro de terra e que tá dentro do tbor no CSS a gente pode definir isso a gente coloca o TD novamente né A para as nossas Chaves Mas se a gente quer um TD que

esteja sempre seja sempre Descendente de uma tag tefo a gente coloca aqui tefo espaço TD isso mesmo quando a gente utiliza um espaço no CSS a gente tá falando que a gente vai utilizar esse item o segundo TD mas só os que forem descendentes do tefo porque eu digo descendentes porque ele não é filho direto se você for ver ele tem um TR aqui temos um elemento tr entre o TD e o tefo mas tanto o TR quanto o TD são descendentes do tefo legal né pessoal e também já é um outro formato da gente

Conseguir selecionar os elementos aqui no caso eu acho que eu vou adicionar um fundinho com a cor 331 marronzinha Vou salvar Beleza agora vai ficar complicado porque o texto ele tá da mesma cor a gente coloca também a cor do nosso texto # F4 f0 n também já usamos antes vou salvar e pronto agora ficou muito legal a nossa tabela pessoal muito bonitinha Vamos estilizar então aqui a nossa lista de respostas né lembrando no Nosso HTML como que a gente fez isso a gente colocou um subtítulo verifique suas respostas e aqui a gente tem essa

tag details que é o que faz com que a gente consiga abrir e fechar a nossa lista a nossa lista começa aqui com ol e cada item da lista é o Li e esse clique para ver as respostas é só o escrito né o summary ele fica no escrito ali do nosso da nossa tag details Então vamos começar pela tag details aqui no nosso CSS eu vou mudar o fundo dela Vou colocar aqui um background color # CCD n Vou salvar Legal e quando eu abro o background color ele já pega todo o conteúdo que

tá dentro mas ainda a lista tá para fora a gente vai estilizar isso daí tudo vou colocar um border radios de 5 PX salvar também ó já ficou mais arredondado o nosso fundinho aqui e eu vou pôr um pading de um Rin também para ter um espaçamento legal ó agora ficou Muito mais bonitinho o nosso details Vamos então estilizar primeiro aqui o nosso summary né o que tá escrito aqui então a gente pega a tag summary eu vou abrir aqui os nossos Chaves e primeiro eu quero mudar a cor dela eu quero deixar com aquele

33 Vou salvar e olha só bem legal e uma coisa que eu acho que a gente pode colocar aqui é uma margem por quê Porque aí ela vai espaçar vou colocar um espaçamento entre aqui o summary e o Início da lista então eu vou colocar aqui um margem mesmo de 0.5 ren deixa eu ver se fica bom vou salvar tchã Pronto já tem um espaçamento melhor porque tava um pouco mais grudado e acho que dá pra gente colocar aquele cursor Pointer aqui também né que muda o nosso é o nosso Mouse cursor Pointer Vou salvar

e tchã Pronto agora ficou chique demais gente vamos então estilizar a lista em si Vou colocar aqui o ol que é o início da nossa lista olhando pelo HTML e aqui Gente o que que a gente precisa fazer colocar uma margem na esquerda para ele vir mais pro lado e é isso que a gente vai fazer nesse ol vou colocar uma margem quando a gente quer colocar a margem apenas de um dos lados a gente define que é um dos lados que a gente quer vou colocar esse margem left vai ser uma margem na esquerda

a gente poderia colocar margem botom que é embaixo margem top que é em cimaa margem é right que é na direita mas a gente vai Usar só no Left e nesse caso vou pôr 1.5 R vamos ver se vai ficar já suficiente para ficar dentro da lista perfeito Pode pôr até um pouco mais Se quiser mas acho que para mim tá ótimo esse 1.5 R vamos utilizar também o nossos os nossos itens né cada linha aí da nossa lista a gente pode colocar o li se quiser coloca também o li que está sempre é descendente

de um ol a gente coloca só o espaço né coloca o elemento é lista e depois o elemento item e aqui nesse caso A gente pode alterar a cor eu vou colocar um pading também de 0.2 100 para ficar um pouco mais espaçado entre cada um dos itens né porque cada Li é uma linha legal pessoal acho que ficou ótima essa nossa lista né esse background e tudo mais vamos então estilizar essa parte do feedback que nada mais é do que uma section que tem um Farm e dentro do Farm a gente tem esse Fi

de set o fi de set É exatamente esse essa borda aqui que a gente tá vendo informações de Contato Então vamos começar sair estilizando esse fio set aí fi de set Fi set a gente abre aqui as nossas Chaves primeiro eu vou mudar a borda dele eu vou colocar aqui border 2 PX Solid E aí eu quero mudar a cor eu quero colocar aquela CC D5 que é o verdinho Claro vou salvar e não funcionou Ah eu escrevi Field com tem o e aqui tanto que ele tá até de outra cor né no vest code

Vou salvar Pronto agora nossa nossa linha ficou bonitinha com verde Claro vou Deixar ela um pouquinho arredondada também essas pontas com o border radials de 5 PX vou pôr um pading para também espaçar de um Rin mais ou menos Olha só nossa gente ficou muito melhor já agora com esse espaamento e agora eu quero alterar esse Legend que é essa essa tag aqui ó dentro do fi de set que tá escrito informações de contato deixa eu colocar aqui Legend vou colocar a cor eu quero colocar aquela 331 que é um marronzinho isso mesmo vou salvar

vou deixar aqui ó informações de contato e vou pôr também um pading nela e esse pading ele vai abrir uma distanci Zinha tanto em cima quanto dos lados mas no caso eu quero deixar ela um pouco espaçada aí dessa linha verde né tem um espacinho aqui a gente vai colocar um pading apenas dos lados a gente podia usar o pading top left right n n nã mas gente existe também uma forma da gente escrever pading Margin em que a gente Coloca vertical e horizontal no caso vertical primeiro a gente não quer pading na vertical a

gente coloca zero e na horizontal a gente coloca Não sei vou colocar 0.5 R Vou salvar e pronto colocou aqui um espaçamento então quando a gente quer apenas vertical e horizontal a gente coloca e vertical o primeiro valor e horizontal o segundo agora a gente vai utilizar o nosso text area que é exatamente essa parte aqui né que tava Em branco Vou colocar aqui text area vou abrir as chaves primeiro eu vou mudar o fundo do background color vou colocar o CCD n para ficar clarinho já temos que mudar o Place holder mas a gente

já vai fazer isso eu vou colocar aqui o outline n também que ele tá aparecendo aquele azulzinho vou colocar um border radios de 5px também para padronizar o arredonda a gente pode colocar dois peese Sid com qual cor não sei gente acho que dá pra gente na verdade trocar Esse fundo e colocar na borda né Eu acho que vai ficar mais legal do que esse background color Vou colocar aqui CCD né esse verdinho Claro acho que vai ficar mais bonitinho é bem mais bonitinho E aí o background color a gente deixa transparente transparent né É

acho que ficou melhor beleza pessoal acho que tá bem legal agora precisamos também alterar esse botão né que tá Bem feinho assim envio o feedback Vou colocar aqui então a nossa Tag Button vou abrir as chaves Vamos colocar um fundo para ele que pode ser o CCD Nan né para ele ficar verdinho Olha só muita coisa que a gente pode mudar aqui vou colocar border nun acho que eu não quero uma borda aqui para esse botão ele tá com background color apenas vou colocar um padding para poder deixar o texto um pouco mais longe aí

da nossa borda né da onde começa o background 0.8 R talvez deixa deix ver É tá bom ficou grande mas acho que ficou legal vou Mudar a cor do texto né acho que vai ficar melhor a gente colocar aquele 33 nã que é o marronzinho a em vez de deixar o preto vou colocar um arredondamento na borda então a gente coloca um border Opa border radios ui Ah eu não fechei ali o border radios de C pixels e a gente pode também colocar aquele cursor Pointer para poder deixar o nosso Mouse bonitinho na hora que

a gente de passar por cima do botão olha só que legal gente falta apenas mudarmos Aqui o nosso footer E aí pessoal precisamos aprender mais um negócio no CSS por quê Porque aqui por exemplo Gente isso aqui esse é footer esse copy quiz de programadores ele é um parágrafo e a gente já utilizou o parágrafo lá em cima Esse parágrafo ele tá sendo utilizado aqui aqui só que eu quero estilizar esse parágrafo do footer de uma forma diferente dos outros ah eu posso colocar então o parágrafo que é dentro do footer né que nem a

gente Tinha feito ali com com outros que nem o o nosso TD que é apenas dentro do te fut mas gente existe algo que a gente usa muito muito no CSS que se chama classes E aí o que que são essas classes a gente define aqui no nosso HTML o atributo Classe A gente escolhe o nome para uma classe Então seria por exemplo parágrafo traço footer a gente escolhe o nome E aí gente essa classe aqui vai ser utilizada como seletor aqui no CSS E aí quando a gente estilizar essa classe vai Se referir ao

elemento que tem essa classe só que com classes a gente pro CSS entender que isso é uma classe A gente tem que usar o ponto no início aqui no código CSS no HTML a gente coloca apenas como valor dentro do atributo Class e tem um detalhe a classe permite que você adicione esse nome parágrafo footer para vários elementos então aqui embaixo por exemplo eu posso colocar também a classe parágrafo fter então a gente pode usar uma classe para Mais de um elemento aí o que acontece tudo que a gente utilizar aqui dentro vai ser colocado

para para todos os elementos que tiverem essa classe e lembrando daquilo que eu tinha falado para vocês de hierarquia quando a gente usa classe ele vai usar a estilização que está dentro da classe e não a que tá no parágrafo então é muito mais específico a gente utilizar classes do que apenas a tag P Então não precisa se preocupar de ai mas eu tinha já Estilizado a tag P de tal forma agora vai sobrepor vai sobrepor porque você tá usando classe antes era apenas um seletor de tag de elemento agora é um seletor de classe

tem um detalhe também a gente pode e no CSS estilizar por ID que também seria um atributo ID que a gente coloca aqui no nosso HTML mas o ID eu gosto de usar apenas para o JavaScript o ID ele é um seletor no CSS né Se você usar pro CSS que você só pode usar para uma vez em em um elemento Dentro do HTML então às vezes você quer estilizar apenas o parágrafo footer e E aí você usa um ID para ele você pode E aí você tem que colocar ao invés do ponto aqui no

CSS a gente coloca um hashtag para estilizar ids o problema é que você não vai poder colocar um ID igual para outra coisa isso Não não é uma coisa que a gente faz a gente tem que colocar Class quando a gente quer usar para mais de um E como eu falei o ID a gente usa mais no JavaScript Pessoal mesmo a gente normalmente coloca uma classe e usa apenas ela se a gente quer colocar apenas um elemento Então bora estilizar aí esses esses parágrafos do footer utilizando a classe Vou colocar aqui o ponto de novo

né para mostrar para vocês mais esse esse formato que a gente utiliza E no caso o que que eu quero trocar eu quero trocar a cor eu vou colocar a cor aqui do nosso texto de F4 f0 que vai ser o Branquinho vou salvar eu venho aqui ainda tá é Branco mas por que que eu quis trocar a cor porque eu acho que eu quero deixar um fundo aqui pro nosso footer né a gente pode até colocar aqui em cima Esse footer eu devia ter utilizado antes o footer porque né na ordem ali do nosso

documento HTML Vou colocar aqui o background color dele aquele 33 n que é o nosso marronzinho aí agora fica mais bonitinho né o branquinho com marronzinho ele fica também destacado que nem a gente tinha aqui pro título Mas dessa vez eu coloco o branquinho aí eu posso colocar aí eu posso colocar também um padding de dois R pra gente não deixar ele grudado ali né a gente tem aqui Um espaçamento e também alinhar o texto no centro então text align Center Vou salvar e pronto aqui gente lembra aqui que a gente tem esse clique aqui

ele é uma tag a é uma tag Âncora que tá aqui ó dentro do nosso parágrafo footer embaixo para conhecer mais sobre mim temos aqui o a e aí tá escrito o Clique aqui esse clique aqui é dessa tag A então a gente pode também estilizar para não ficar esse azul meio estranho Então a gente vai colocar aqui a tag a que tá dentro do footer pra gente a gente podia colocar uma classe também né mas eu vou colocar aqui desse dessa forma acho que a gente nem tem outro a na verdade no documento para

precisar fazer isso mas o que que eu preciso fazer aqui text decoration None por qu quando a gente e usa esse text Decoration a gente tá tirando o sublinhado que a gente tinha antes no clique aqui agora a gente não tem essa decoraçãozinha de texto A gente pode também trocar a cor Então vou colocar aqui a cor aquele Verde claro que Ero o CC D5 n Vou salvar e Olha só pessoal que legal que ficou clica aqui e beleza a gente tá indo lá pra nossa página sobre mim e gente é basicamente isso vocês aprenderam

muita coisa de CSS nesse vídeo que a gente fez na prática né de Fato a gente tinha o projetinho já de HTML e a gente transformou ele com o CSS e fica de desafio para vocês estilizar o sobre mim que eu já tinha também deixado como desafio no vídeo de html vocês deixarem mais legal essa página quero ver vocês estilizar Também já dando uma dica vocês podem criar um novo arquivo CSS e linkar ele aqui nesse sobre mim porque aí você tem um arquivo para uma página e outro arquivo para outra mas pessoal para fechar

com chave de ouro eu Vou mostrar para vocês como que a gente sobe esse site no ar por a gente tá visualizando esse site aqui usando o server o Live server que é um servidor local se eu mandar esse site aqui para alguém ninguém vai conseguir visualizar isso a gente precisa hospedar ele em algum lugar e para isso eu utilizo a plataforma da hostinger que lá eles têm hospedagem de diversas formas tem até servidor VPS tem e-mail tem criador de sites também tem domínios o domínio se Você não sabe o que que é cada uma

dessas coisas eu também tenho e vídeo aqui no canal explicando sobre domínios hospedagem e tudo mais também eu vou mostrar aqui para vocês na prática como que a gente sobe esse site até porque na plataforma da hostinger gente é muito simples muito fácil então entrei aqui já na minha conta para você que ainda não tem uma conta na hostinger é eu vou deixar aqui o meu cupom de desconto para vocês poderem utilizar vale muito a pena E Olha só pessoal eu tenho várias e várias coisas aqui na hostinger vários domínios hospedagem rolando eu vou colocar

o meu site esse site aqui nessa hospedagem single web hosting que eu atualmente est usando com o domínio Rafa balerini se você não sabe o que é domínio não sabe como juntar isso numa hospedagem não deixa de assistir o vídeo vou clicar aqui em gerenciar vamos em gerenciador de arquivos aqui ele vai abrir para mim já uma pasta escrito Public eu vou entrar nela e dentro dela é onde a gente vai colocar os arquivos que a gente desenvolveu então eu vou entrar aqui no meu site vou pegar aqui os arquivos né do meu projeto dentro

da do meu explorador de arquivos e gente eu vou copiar os arquivos eu não vou copiar a pasta eu vou copiar os arquivos e arrastar aqui para esse Public HTML eu só arrasto e jogo pronto já subir aqui os arquivos e agora para visualizar o site basta eu entrar em Rafaberaldo assim com a rosinger é impressionante a única coisa que eu percebi é que realmente tá com umas coisas erradas ali a parte do tio a parte do ces dilia mas isso daí ver se é algo que a gente vai arrumar aí num próximo vídeo O

legal é que a gente já subiu gente o site nor se você entrar aí agora na sua casa rafabin pcom você vai ver exatamente essa nossa página que a gente criou a gente fez o html no vídeo agora o CSS e já subiu com a hospedagem E domínio da hostinger e é isso pessoal ainda tem bastante coisa pra gente ir alterando aí nos projetos o CSS também isso foi uma introdução porque a quantidade de coisa que tem pra gente aprender é enorme se você gostou do vídeo e quer acompanhar mais desses conteúdos que eu vou

soltar no canal eu vou trazer mais coisas de CSS coisas de JavaScript também a gente vai melhorar esse projeto ainda não deixa de se inscrever também deixa o like um beijo e Até a próxima semana [Música]