Aprenda CSS: do básico ao profissional

1. Introdução: Você já quis criar seu próprio site? Nesse caso, você precisará conhecer e dominar o CSS. Hoje, vamos fazer exatamente isso construindo esse projeto. Oi, meu nome é Zoe. Sou engenheiro de software e ex-professor que adora ajudar outras pessoas a começar a programar Eu criei muitos sites e aplicativos da web usando React, CSS, HTML e muito mais. Hoje, abordaremos os fundamentos do CSS e usaremos essas habilidades para adicionar estilo ao nosso Se você não está familiarizado com HTML, eu recomendo conferir minha aula anterior, na qual criamos o código base para este projeto. Mas de qualquer forma, terei o código inicial vinculado na guia Projeto e Recursos abaixo Nesta aula, falaremos tudo sobre cascata, folhas de estilo e as diferentes regras do CSS Primeiro, começaremos com uma visão geral do que é CSS e como ele é usado. Em seguida, mergulharemos diretamente em nosso tutorial. No tutorial, você pode esperar aprender como escrever CSS, como conectar seu CSS ao seu HTML, como usar uma folha de estilo de forma eficaz e como usar CSS para dar vida rapidamente a um design Este curso é para qualquer pessoa interessada em criar e estilizar seus próprios sites e aprender a trabalhar com CSS Ao final deste curso, você poderá fazer isso sozinho. Então, vamos começar. 2. Projeto de curso: Projeto de classe. Nosso projeto para esta aula será criar um site simples usando apenas CSS. Para esta aula, será essencial ter acesso a um computador no qual você possa executar o código do Visual Studio ou outro editor de código de sua escolha. Você também vai querer ter um navegador como o Google Chrome instalado e funcionando, pois o usaremos para exibir nossa página da web Como mencionei antes, haverá algum código inicial disponível se você quiser acompanhar o tutorial Deixarei links para todos os ativos e recursos que você precisará na guia Projeto e recursos abaixo. 3. O que é CSS? : O que é CSS? CSS significa folhas de estilo em cascata e é uma linguagem de folha de estilo usada para descrever a forma como o HTML é apresentado ao usuário CSS pode ser vinculado usando uma planilha externa ou escrito no próprio documento HML Exploraremos as duas opções ao longo deste curso. Como linguagem, o CSS é composto de duas partes principais, seletores e regras Vamos nos aprofundar no que cada um deles é. 4. Seletores e regras: Seletores e regras. Os seletores são indicadores que informam ao computador a quais elementos devem ser usados os estilos desejados, e as regras são Cada regra CSS começa com pelo menos um, mas possivelmente mais de um seletor Eles podem selecionar um tipo de elemento, como H, P ou imagem, uma classe específica de elemento ou a ideia de um elemento singular. Tanto as classes quanto os IDs podem ser adicionados a qualquer elemento HTML para ajudar a agrupá-los ou identificá-los. Mas há uma diferença fundamental entre classes e IDs. Já as classes podem ser adicionadas a vários elementos para ajudar a transmitir um conjunto consistente de estilos, espécie de página da web ou um site inteiro Os IDs, por outro lado, devem ser exclusivos de apenas um elemento. Dependendo da sua meta de estilo, talvez você queira usar classes, IDs ou ambas A maioria dos sites tem uma combinação saudável dos dois. Os seletores de classe são escritos em CSS prefixando o nome da classe, que você mesmo escolhe com um ponto Os IDs são escritos quase da mesma forma, mas em vez de um ponto, você usa um hash 5. Cascata: Cascata. Como você pode ver, há várias maneiras de selecionar um elemento usando CSS. Mas como você sabe se sua regra será aplicada corretamente ou não ? O CSS tem dois recursos que podem ajudar nessa cascata e especificidade Como o nome indica, os estilos em CSS são aplicados em cascata Isso significa que os estilos escritos na parte superior do arquivo são aplicados primeiro e, à medida que você desce, os outros estilos são aplicados sobre esse estilo inicial. Se acontecer de você ter escrito dois estilos conflitantes para o mesmo elemento, como nível básico, o que aparece posteriormente na planilha CSS será aquele que será aplicado No entanto, isso não é muito fácil de manter, especialmente se você tiver várias folhas de estilo com as quais trabalhar Portanto, há uma maneira de anular esse comportamento. Vamos dar uma olhada em outro recurso chamado especificidade. 6. Especificidade: Especificidade. A especificidade nos permite substituir as regras estabelecidas anteriormente com base na especificidade com que o elemento é selecionado Por exemplo, se todas as tags P fossem configuradas para ter a cor vermelha, mas então atribuíssemos a uma tag P específica a classe de especial e atribuíssemos a essa classe a cor azul da regra, independentemente de onde essa regra foi declarada no documento. Portanto, independentemente da cascata, essa tag P seria forçada a assumir a cor azul porque as classes são mais específicas do que os seletores de elementos O mesmo vale para IDs. Se dermos à mesma tag P o ID de exclusivo e definirmos a regra para que essa ID seja a cor verde, essa tag P assumiria a cor verde. Isso ocorre porque os IDs são os mais específicos de todas as nossas três opções de seletor Então, indo do menos específico para o mais, temos elementos, depois classes e depois IDs. 7. Declarações: Declarações. Depois de segmentar corretamente o elemento ou elementos com os quais gostaria de trabalhar, é hora de escrever seus estilos. Como você já deve ter percebido, as regras CSS são escritas usando um conjunto de declarações que cobram o uso de propriedades e valores A propriedade no lado esquerdo da declaração é o recurso estilístico que queremos modificar com nossa regra O valor no lado direito é a escolha de estilo específica que fizemos. Quando combinamos a propriedade à esquerda e o valor à direita, obtemos uma declaração CSS. Essas declarações ficarão dentro nossos conjuntos de regras ou regras CSS e, em seguida, serão aplicadas ao nosso HTM 8. Informações adicionais: Informações adicionais. Como você pode imaginar, CSS tem centenas de propriedades diferentes, mas não se preocupe, você não deve memorizar todas elas. Você pode usar sites como W three Schools, Mozilla developer dots e stack overflow para pesquisar a propriedade CS correta para usar sempre que precisar Cada propriedade pode ter muitos valores diferentes que precisam ser escritos corretamente ou escritos na ordem correta para que Portanto, se você não tiver certeza sobre a propriedade ou o estilo com o qual está trabalhando, é melhor consultar a documentação 9. Tutorial: Tudo bem. Então, agora é hora de adicionar um pouco de CSS, um pouco de estilo à nossa página Mas como podemos trabalhar com CSS, onde ele vai e como ele se conecta? E vamos mergulhar desde o início. O melhor lugar para escrever CSS é em seu próprio arquivo. Então, o que vamos fazer é criar nosso próprio arquivo CSS. Então, para fazer isso, vamos até nossa pasta onde está o Indext HTML e vamos criar um novo arquivo Vamos chamá-lo de files dot CSS. Incrível. Criamos nosso arquivo CSS. Perfeito. O que precisamos fazer agora é vinculá-lo ao nosso arquivo HTML porque, no momento , eles estão meio que sentados lado a lado, mas não sabem necessariamente que foram feitos para trabalhar juntos. Então, o que precisamos fazer é acessar nosso arquivo HTML de pontos de índice. Vamos seguir em frente e vincular nosso arquivo CSS ao nosso HTML. Então, vamos entrar na seção principal e vamos usar o que é chamado de elemento de ligação. Então, o elemento link faz exatamente isso. Ele vincula um arquivo a outro. Então, vamos usar tinta e, em seguida, o relacionamento. Há alguns atributos diferentes que vinculam o elemento link. Então, um é RL, que significa relacionamento. Então, quer saber por que essas duas planilhas precisam, tipo, trabalhar juntas. Então, vamos chamar isso de. A relação aqui é folha de estilo porque CSS, a folha CSS com a qual estamos trabalhando, é uma folha de estilo. É destinado a estilizar HTML. E então vamos usar outro atributo um chamado HRF. HRF é basicamente a URL ou a localização do arquivo Nesse caso, por um arquivo local, ele estará ali mesmo, mas você pode até usar google.com para seu HRF, se for isso que precisa ser Você não o usaria como sua planilha de vendas porque o Google não é um arquivo CSS, mas você entendeu. HRF pode ser usado em várias situações para diferentes tipos de links, e usaremos os Links um pouco mais tarde Então, por enquanto, o que vamos fazer é pegar nosso HRF e colocá-lo, vamos vinculá-lo ao nosso CSS de pontos de estilo Agora, lembre-se de que, quando falávamos sobre o terminal e a barra de pontos e tudo mais, bem, da mesma forma, podemos indicar que um arquivo está na mesma pasta em que estamos atualmente usando a barra de pontos Portanto, se eu usar uma barra de pontos e você ver que o VSCode já reconhece o que estou tentando fazer, ele listará todos os diretórios nos arquivos que estão na arquivos que estão na pasta atual em que Então, se eu usar barra de pontos e usar estilos de pontos CSS, essa é na verdade a folha de estilo que acabamos de criar Então pressione Enter, e ele já o sublinhou porque basicamente criou esse link no VSCode me dizendo: Sim, sim, vinculamos esse Então, tudo que eu tenho que fazer agora é fechar, novamente, uma etiqueta de fechamento automático. Você notará que a maioria das etiquetas na cabeça são na verdade, fechadas automaticamente porque não há nada entre elas. Eles servem apenas para armazenar informações, e vamos salvá-las. E agora devemos ter nossa folha de estilo em nosso HTML. Mas nada acontece ainda. Novamente, porque não colocamos nada em nosso CSS. Então, vamos começar a estilizar isso. Há algumas maneiras de direcionar elementos HTML com CSS Vamos seguir em frente e mover isso aqui para que possamos analisar os dois ao mesmo tempo. Então você pode direcioná-los usando o tipo de elemento que eles são, certo? Então você pode atingir o corpo. Você pode segmentar todos os divs, H, Ps, fortes, formas de entrada, etc Essa é uma forma de segmentar. E se você tem uma espécie de mudança abrangente que gostaria de fazer, essa é provavelmente a melhor maneira de fazer isso Então, por exemplo, uma coisa que eu gostaria mudar porque, como você pode observar aqui, é uma fonte SNSerf e a fonte que estamos usando tem Tem aquelas pequenas bordas, aqueles pequenos chapéus. Quero ter certeza de que a fonte usada em todo este documento é San, son serif Então, vamos selecionar a tag body. O corpo, então vamos separar o elemento do corpo e vamos fazer a família de fontes Família de fontes So. Portanto, existem todos esses tipos diferentes de propriedades que você pode acessar no CSS. A família de fontes é apenas uma das dezenas e centenas. Portanto, a família de fontes permite que você determine qual é o tipo de fonte. De um modo geral. Às vezes, você pode especificar a fonte real. Às vezes, isso envolve baixar a fonte ou vinculá-la e tudo Mas neste caso, eu só quero uma fonte San sera. Então, vou rolar até aqui até onde diz Ariel, Helvetica e SNSerf e clicar nisso Helvetica e SNSerf e Então, agora, espero que tudo no corpo seja SNSerf E uma coisa muito, muito importante a se lembrar de fazer depois de fazer uma alteração em seus arquivos é sempre estar seguro. Então, vamos dar uma olhada lá e ver isso. Todo o nosso texto agora é SNSerf. Tem Não há mais pequenos chapéus e rabos. É perfeitamente limpo e parece um pouco moderno. Perfeito. Tudo bem, então vamos ver o que mais podemos fazer com esta página. Agora, aqui está uma coisa. Eu quero atingir o H e, para ser justo, posso fazer isso simplesmente, vamos ver. Eu quero atingir, na verdade, vamos ver. Quero segmentar parte do texto na página, mas não todo o texto na página. Se você der uma olhada na nossa imagem aqui, verá que grande parte do texto é, na verdade, branca. Então isso é branco, isso é branco. Experimente gratuitamente por sete dias é branco. Mas esse texto na parte inferior parece ser cinza, e esse texto parece ser, tipo, rosa ou vermelho ou algo assim. Então, queremos ter uma combinação de diferentes tipos e cores de texto. Agora, como mencionei, com a codificação, há maneiras diferentes de abordar tudo Algumas formas são melhores do que outras, mas depende de você e de sua preferência pessoal. Então, a maneira como eu gostaria de abordar isso é tornar a cor geral branca e, em seguida, provavelmente direcionar os elementos não brancos. Acho que essa é a maneira mais limpa de fazer isso. Então, outra maneira de fazer isso é direcionar o corpo e usar a propriedade color, que se destina à cor da fonte, e vou chamá-la apenas de branca. Agora, talvez você já tenha percebido o que vai acontecer. Nossa página parece que há quase nada lá, certo? Certo. Então, o que vamos fazer agora é, na verdade, implementar nosso plano de fundo. Então, agora é meio que essencial que comecemos o plano de fundo. Sabemos por meio de nossos arquivos, portanto, se entrarmos nos arquivos incluídos nosso projeto, teremos uma imagem de fundo, essa área de trabalho em segundo plano. Mas na verdade não é a imagem rosa. São apenas os pequenos ícones que estão no topo. Portanto, precisamos trabalhar com esse plano de fundo. Tudo bem, então vamos continuar e criar nossa imagem de fundo E vamos usar, vamos vinculá-lo ao nosso BG de desktop ou PNG de desktop. Então, a melhor maneira de fazer isso é usar um URL, assim como você tem google.com, assim como você tem hf, você vai usar um URL para vincular esse seletor ao esse seletor ao arquivo de imagem de fundo que está em nosso projeto Então, vamos fazer URL. URL, colchetes. E então, entre aspas, vou especificar a localização desse arquivo de desktop do BG Intro, certo? Então, se eu observar onde estamos, atualmente estamos em estilos de pontos CSS, preciso descer um nível para imagens e depois para o Bg introdsktop dot preciso descer um nível para imagens e depois para o Bg introdsktop Então, para chegar lá, o que eu faço é digitar uma barra de pontos indicando essa pasta Em seguida, quero ir para a pasta Imagens, adicionar imagens a ela e clicar em Bem, vou digitar o ponto png da área de trabalho de introdução do Bg, e isso deve vinculá-lo diretamente a essa imagem Então, se eu clicar em Salvar e navegar de volta. Ótimo. Podemos começar a ver que nossa imagem está sendo aplicada. Mas tem mais uma coisa. Tem essa cor rosa que não faz parte da imagem de fundo. Como podemos colocar isso lá? Bem, há outra propriedade chamada cor de fundo. Então eu acho que isso vem com um guia de estilo, é por isso que eles nos deram todos esses arquivos. Então, se passarmos para o ponto D do guia de estilo e passarmos para, vamos ver. Há um layout. As cores. Os primatas são vermelhos, um verde e uma cor de destaque azul, uma fonte Tudo bem, eles realmente nos deram uma fonte específica, então podemos definitivamente usá-la se quisermos Não tenho certeza de qual cor é, mas você sabe o que? Nem precisamos adivinhar. Vamos aproveitar outra ferramenta que temos à nossa disposição. Então, há essa ferramenta chamada Eyedropper. É uma extensão que você pode adicionar à sua conta do Google Chrome, totalmente gratuita, e basta clicar nela. Depois de instalá-lo nas extensões do Google Chrome, você clica nele e clica onde diz Escolher cor da página da web, e você pode simplesmente passar o mouse sobre a parte da sua página da web para obter essa diz Escolher cor da página da web, e você pode simplesmente passar o mouse sobre a parte da sua página da web para obter Então, como não tínhamos certeza de que cor era essa, acabamos de pegar essa cor e podemos ver que há três maneiras diferentes de descrevê-la Portanto, está em um hash hash EC 7476. Então essa é uma forma de descrever isso. Também está em HSL, matiz, saturação e luma, como 359, 76% Ou está em um RGB, então é uma combinação de vermelho, verde e azul, e esses são os números Então 236 vermelhos, 116 verdes e 118 azuis. Podemos usar qualquer um desses. Não há resposta certa ou errada. Para o propósito disso. usar o hash porque é o mais curto Então, se eu voltar e voltar aos nossos estilos, criarei uma nova propriedade. E eu estou apenas colocando isso em ordem alfabética, mas você pode realmente fazer isso na ordem que quiser Só acho mais fácil encontrar quando está em ordem alfabética. Você pode usar a cor de fundo e eu adicionarei o hash. Eu vou economizar. Você verá que o código VS realmente o preenche para mim. Isso me diz qual é a cor. E lá vamos nós. Agora temos nosso fundo rosa. Podemos ver nosso texto em branco e estamos no caminho certo. Incrível. Ótimo. Estamos em um bom lugar. Na verdade, estamos em uma posição tão boa que talvez queiramos enviar isso para nosso repositório do GitHub porque digamos que façamos outra coisa e estragamos tudo, podemos acabar desejando poder voltar a esse Então, vamos seguir em frente e fazer exatamente isso. Então, estamos trabalhando com algumas peças diferentes agora. Então, vamos continuar e confirmar a área de trabalho de introdução em segundo plano, que é a imagem que estamos usando Vamos continuar e comprometer nossos estilos com CSS de pontos também. E vamos confirmar nosso HTML de ponto de índice, que vincula esses arquivos . Incrível. Então, vamos dar nossa mensagem como estilos iniciais. Inicialmente, vamos tentar soletrar corretamente. Lá vamos nós. E vamos cometer isso. E agora que fizemos esse commit, vamos enviá-lo para nosso repositório remoto para garantir que, mesmo que nosso computador simplesmente desapareça nos próximos 5 minutos, ele ainda esteja lá na Internet E quando compramos um novo computador, podemos trazê-lo de volta. Então, o que faremos é tocar nesses pequenos três botões aqui, nesses pequenos três pontos aqui em cima, e clicar na palavra push porque já conectamos os dois repositórios, ele saberá que quando eu disser push, quero dizer, empurre-o para o controle remoto ao qual o conectamos Vamos continuar e clicar em empurrar. E você verá que a pequena barra azul começa a desaparecer. Não havia muitos arquivos, então não vai levar muito tempo. Mas se acessarmos o GitHub e voltarmos ao código do nosso formulário de inscrição, veremos que acabamos de receber notificações recentes. Portanto, temos estilos no arquivo CSS, que é nosso estilo inicial aqui, e temos nosso arquivo de imagens, que tem nossa pasta Imagens, que tem um arquivo, que é o PNG da área Incrível. Ótimo lugar para se estar. Estamos sobrevoando isso. Então, a próxima coisa que queremos abordar é dar uma olhada no que temos aqui. A próxima coisa que provavelmente queremos abordar é separá-los ou colocá-los em elementos diferentes. Nós podemos ir de qualquer maneira. Vamos começar abordando esses pequenos elementos e depois separaremos os dois. E, novamente, como eu disse, com a codificação, existem oito maneiras diferentes de fazer qualquer coisa Depende totalmente de você e do que você prefere fazer primeiro. E, claro, você sempre pode mudar de ideia e fazer algo diferente. Se você decidiu que, sabe, escolheu a abordagem errada, tudo bem, especialmente quando está aprendendo. Sinta-se à vontade para cometer erros e , em seguida, basta controlar Z e fazer algo novo. Então, vamos começar fazendo isso. Experimente gratuitamente por sete dias e $20 por mês depois. Vamos tentar criar essa caixa. Deixe-me voltar ao nosso guia de estilo e ver se há alguma coisa lá. Acho que pode ser aquele azul escuro ou talvez o azul acinzentado. Não tenho certeza. Vamos tentar e ver o que podemos fazer. Então, para direcionar essa linha aqui, essa tag P, certo, existem algumas maneiras de fazer isso. Podemos adicionar preenchimento à tag P ou envolvê-la em uma divisória e adicionar o estilo à divisória Depende totalmente do que você quer fazer. Apenas, você sabe, faça sua escolha e continue com ela. Então, vamos falar sobre preenchimento. O preenchimento é aquele pequeno espaço, esse espaço entre o espaço entre o texto e o limite externo da caixa Isso é acolchoamento. Então, na verdade, acabei de responder minha própria pergunta. Temos que usar um div se quisermos usar o preenchimento. Margem, no entanto, é a coisa que do lado de fora de alguma coisa, certo? Portanto, a margem é a distância entre dois objetos. Então, por exemplo, como queremos usar uma cor de fundo, precisamos tê-la como plano de fundo para um elemento. Então, deixe-me mostrar o que eu. Se eu tivesse a cor de fundo desta etiqueta de ervilha, e eu a fizesse dessa, cor azulada acinzentada . Então, vamos tentar algo aqui. Vamos pegar todas as etiquetas de ervilha, fazer a cor de fundo e depois selecionar Vamos experimentar esse azul acinzentado. Não tenho certeza. E faremos isso e economizaremos. Todas as etiquetas P têm essa cor. Mas, como você vê, também não há muito espaço em torno das tags p, certo? Eles são meio que linhas retas muito longas. O que podemos fazer para evitar isso é criar uma caixa ao redor da tag P e usar um pouco de preenchimento dentro dessa caixa para especificar quanto espaço queremos para esse elemento Então, deixe-me mostrar o que quero dizer. Vamos nos livrar dessa cor de fundo da tag P. E vamos criar uma caixa ao redor da nossa tag P, certo? Então, vamos criar uma caixa maior ao redor da nossa pequena linha de texto aqui. Então, vamos criar outro div e envolvê-lo em nossa tag P. Incrível. Tudo bem. Então, agora queremos direcionar essa tag P específica também, porque, como você percebeu, quando eu coloquei essa cor na tag P, ela continha, tipo, todas as tags p, certo? Não é isso que queremos. aquela div específica em torno dessa tag P específica. Agora, há algumas maneiras de fazer isso. Na verdade, podemos tentar fazer, tipo, um tipo de coisa aninhada em que podemos escrever algo como se escrevêssemos algo Podemos escrever algo como, hum, corpo, e então a criança do corpo é uma div E então eu acho que está dentro de outra div e então temos um Ptag e esse é o petag que queremos atingir Mas primeiro, não estamos procurando atingir a etiqueta Pe. Estamos procurando atingir a div E segundo, isso ainda não é específico o suficiente. Claro, isso terá como alvo essa div específica e funcionará Então, se eu usar a cor de fundo, e vamos fazer isso, acho que não era o azul certo. Vamos fazer um azul diferente dessa vez. Vamos fazer o azul escuro. Pode ser azul normal, mas veremos. Nós faremos isso. Isso terá como alvo essa divisão específica. Mas a única razão pela qual ele visa isso é porque há apenas uma div Vamos dar uma outra olhada no que eu fiz aqui. Então eu alvejei o corpo, o corpo. E então eu alvejei os divs dentro do corpo, que são esse div e esse div Então eu alvejei os divs dentro dos divs, e há apenas, neste caso, um div dentro de um div Eu sei que fica um pouco complicado, mas neste caso, há apenas uma div dentro de uma div, e essa é essa Então essa não é a melhor maneira de fazer isso, porque até eu tentar explicar para você era confuso O que preferimos fazer é apenas direcionar esse divisor específico, esse elemento específico e não qualquer outro elemento Portanto, há duas maneiras de fazer isso. Se o design que pretendemos implementar for reutilizado em outro lugar. Podemos usar algo chamado classe. Portanto, uma classe é um tipo de propriedade que é colocada em qualquer HTML visível. Assim, você pode digitar a classe e, em seguida, nomear uma classe como quiser. Qualquer texto que você queira dar a ele, você pode chamá-lo assim. Então, se eu chamar essa classe, você sabe, chamar CTA como call to action, então esse será o nome da classe a ser alvo E se eu tiver outras chamadas à ação no site, talvez eu queira que todas tenham a mesma aparência. Então, quando eu vou aqui, eu posso realmente mudar essa estrutura e direcionar o CTA Agora, para segmentar uma classe, você realmente precisa colocar um ponto antes de qualquer texto. Portanto, o ponto especifica as classes. Quando eu digito CTA e coloco as cores de fundo isso e eu me identifico como tendo a classe CTA e essa é a única coisa com uma classe CTA, ela deve apenas mais uma vez ter como alvo essa Ótimo. Eu fiz isso de novo. Perfeito. Agora, e se quiséssemos atingir apenas uma instância singular de algo, certo? Tipo, não queríamos atingir nenhum outro tipo de CTA? Isso é literalmente apenas para este único CTA. Bem, o que podemos fazer então é usar esse outro identificador chamado ID, uma peça de, tipo, identificação, essencialmente. É outro atributo que você pode usar em elementos HTML visíveis ou não visíveis. E você pode chamá-lo, basta digitar literalmente o ID. E, assim como na aula, você pode dar o nome que quiser. Então você pode digitar para este, eu poderia digitar CTA exclusivo E guarde isso. E então, quando eu vou aqui para especificá-lo, na verdade vou usar um hash porque um hash é o seletor de IDs em CSS Então, vou digitar o nome dele, CTA exclusivo, e vou colocar meus pequenos colchetes, e então talvez eu mude a cor do fundo Desta vez, vou colocá-lo como azul. Mas, nós já dissemos isso, então isso não deve mudar, certo? Errado. Definitivamente mudou. Agora, por que isso aconteceu? Bem, o problema do CSS é que ele tem uma hierarquia. Portanto, há duas maneiras de determinar essa hierarquia e a especificidade que é invocada pelo CSS No nível mais baixo, no tipo de nível de menor importância, está o elemento. Então, essas são nossas etiquetas corporais. Quando digitamos H um, H dois, eles geralmente se referem apenas ao tipo de elemento em geral, certo? Esses são elementos não específicos. Depois disso, estão as aulas. Se eu especificar que todos os H devem ter a cor vermelha como texto. Mas então eu especifico que dou a um dos meus H uma classe, H uma classe. O que quer que eu coloque como cor nessa classe H um na verdade, substituirá o que eu coloquei nesse elemento H. Então, você sabe, aquele H um será azul em vez de vermelho. Isso faz sentido? Tudo bem. Agora, sendo ainda mais específicos, como você acabou de ver, são os IDs. Os IDs devem ser identificadores exclusivos para apenas um elemento Você não deve reutilizá-los para mais de um elemento. Na verdade, é destinado apenas a esse elemento individual. Então, se eu quisesse ser muito, muito específico e dissesse: Só aquele H, aquele div, eu usaria um ID e diria H one ID e depois mudaria a cor para amarelo Certo? Então, se eu fosse e pegasse meu H one e adicionasse todas essas classes. Então eu adicionei classe igual a H uma classe e ID é igual a H um ID Eu escrevo corretamente, muito importante. Qual deles você acha que sairia por cima? Espero que você tenha adivinhado. E se você soubesse, você adivinharia, certo, porque é amarelo. Então, é para ser, é para passar pela especificidade. Mas digamos que eu não tinha esse H one ID, certo? Diga, eu acabei de ter aula. Deveria ser azul, certo? E é. Mas há outra coisa que você deve conhecer. CSS também funciona em termos do que vê e em que ordem o vê. A última coisa que o CSS vê é o que será necessário. Então, se você escreveu H uma classe e a chamou de azul aqui, e a chamou de verde aqui, e então Oops E então você passou para o verde, você disse, na verdade, não, eu vou pintá-lo de roxo. Se você estiver com o linter ativado para isso, provavelmente ocorrerá um erro Mas, digamos que você não faça isso e salve isso, ele deve escolher a última versão da classe que você especificar. Então, se você adivinhar, deveria ser roxo. E quando você verifica, é roxo. Então, o que precisamos tirar dessa lição são duas coisas. Um em que o CSS usa classes. Assim, você pode especificar classes e aplicá-las a vários elementos. Então, eu posso realmente me inscrever. Mesmo que não sejam H, posso me inscrever neste PTAG e, você sabe, salvá-lo E então eu deveria ter, bem, é um pouco difícil de dizer, mas isso também é roxo. Assim, posso aplicá-lo a vários elementos diferentes. As classes devem ser compartilhadas dentro de uma certa quantidade de elementos. Você pode segmentar o elemento em si, o tipo do elemento, mas saiba que ele será transferido todos esses tipos desses elementos, na verdade, recomendado apenas para, por exemplo, o corpo ou se você souber que todos os PTAs devem ter um determinado tamanho ou algo parecido E então temos identificações, certo? Os IDs têm como objetivo, na verdade, atingir algo muito específico. Eles foram feitos apenas para serem singulares? Você só deve usar uma ID para um elemento e não deve repeti-la . É para isso que servem as aulas. Incrível. Então, vamos seguir em frente e estilizar o resto desta página. Então, vamos adicionar o preenchimento sobre o qual estávamos falando antes ao nosso elemento Então, parece que há uma boa quantidade de à esquerda e acolchoamento à direita, e um pouco de preenchimento na parte superior e um pouco de preenchimento Como mencionamos, o preenchimento é o material que está dentro de um elemento Basicamente, está tornando o elemento em si maior, certo? Pense nisso como um acolchoamento natural. Você está tipo, colocando camadas extras para se proteger contra o frio. Então, vamos adicionar alguns, vamos adicionar um pouco de preenchimento. Então, da maneira como você escreve preenchimento, há duas maneiras de escrever preenchimento Na verdade, você pode escrever o preenchimento Um e, em seguida, especificar a direção Então, acolchoando para a esquerda. E então você pode especificá-lo em pixels. Então, digamos que tenha cerca de 20 pixels. E isso adicionará um pouco de preenchimento à esquerda, apenas um pouco de preenchimento ali apenas um pouco de preenchimento ali Existe outra maneira e , em seguida, você faz isso para preencher a esquerda, a direita, a parte superior e a inferior Esses são os quatro lados de qualquer elemento em CSS, esquerdo, direito, superior e inferior. Essa é uma forma de direcionar coisas usando preenchimento. Você também pode digitar preenchendo apenas a palavra sozinha e usar dois seletores Assim, você pode selecionar a parte superior e inferior, bem como a esquerda e a direita. É meio que um atalho para poder escrever o preenchimento em apenas uma linha Então você pode escrever o preenchimento superior e inferior, porque também, se olharmos para o nosso design, parece que eles deveriam ser bem parecidos, certo? A esquerda e a direita parecem semelhantes, e a parte superior e inferior parecem semelhantes. Assim, poderíamos colocar nossa esquerda e direita em, digamos, 40 pixels ou, desculpe, a parte superior e inferior provavelmente devem ter cerca de 20 pixels. E à esquerda e à direita, talvez 40 ou 60 pixels. Hum, vamos dar uma olhada. E, tipo , é mais ou menos o que estamos procurando, talvez não exatamente o que estamos procurando, mas aproximadamente. O problema aqui, porém, é que nossos elementos estão se estendendo por toda a página, o que não é o que queremos fazer Queremos ter certeza de que eles são, tipo, legais e fofos e, tipo, embrulhados como os têm aqui na imagem, certo? Então, para fazer isso, teremos que empregar algum tipo de contêiner maior, algo para, tipo, fazer com que tudo isso basicamente se encaixe nessas, elas são, tipo, duas colunas Precisamos, tipo, fazer com que eles fiquem dentro duas colunas e depois, tipo, consertar esse preenchimento e, tipo, você sabe, fazer com que pareça um pouco mais bonito Então, vamos dar alguns passos para fazer isso. Em primeiro lugar, vamos separá-los em duas colunas, porque acho que isso tornará nosso estilo um pouco mais fácil Então, a maneira que eu vou escolher fazer isso, e novamente, 100 maneiras diferentes de fazer 100 coisas diferentes. Mas a maneira que vou escolher para fazer isso é com o Flexbox Flexbox é uma das melhores ferramentas em CSS, e eu realmente recomendo que você dedique algum tempo e aprenda, porque você o usará todos os dias, eu garanto Flexbox é um layout de caixa flexível que essencialmente cria um tipo de contêiner que contém vários elementos E dependendo das propriedades que você atribuir a esse flexbox, ele basicamente mudará de tamanho com base no tamanho da janela e da tela em que está É muito bom usá-lo para design responsivo e layouts responsivos, e é um pouco revolucionário Então, vamos usar o Flexbox e empregar algumas dessas ferramentas para que nossa página tenha a aparência que queremos E eu vou ter esse link para CSS Trix na descrição abaixo para que você possa dar uma olhada por si mesmo Olhando para o design, sabemos que essas duas partes do texto foram feitas para ficarem juntas, e toda essa seção é meio que destinada a ficar juntas, essas duas colunas que estamos vendo. E, maior do que isso, parece que há acolchoamento lateral ou qualquer outra coisa no corpo ou talvez uma margem, ainda não decidi Então, vamos dar alguns identificadores para esses dois divs e partir daí Então, o que podemos fazer aqui é, na verdade, você sabe o que vamos fazer? Vamos embrulhar tudo em uma grande divisão e colocar todos os estilos nela Então, isso é uma div, e você pode ver onde as coisas capturam as coisas Então, há o corpo, que é, tipo, o elemento da página. Não vou mexer com isso. Vamos usar um div que envolva todos os elementos dentro dele E vamos dar a isso o nome da classe do contêiner, caso eu queira usá-lo novamente em uma página diferente ou algo assim. E agora vamos dar esse contêiner, então vamos selecionar esse contêiner. Hum, selecione esse contêiner. E vamos dar a ele a exibição de flex. Então, quando você digita display flex, isso na verdade cria um contêiner flexbox Então, se tivermos feito isso corretamente, você verá aqui que nossas duas informações estão agora próximas uma da outra. Agora, eles já estão separados porque, se você se lembra mais cedo, criamos essas duas divs. Então, o Flexbox meio que já fez muito trabalho para nós, o que é incrível Então, vamos dar uma olhada no que mais precisamos fazer. Precisamos ter certeza de que temos algum tipo de espaço, algum acolchoamento aqui Parece bonito, mesmo em todos os sentidos. Então, vamos adicionar isso. Então, vamos fazer um pouco de preenchimento. E vamos fazer todos os quatro lados. Agora, outro truque para o preenchimento é que, quando você faz os quatro lados, é a mesma quantidade Você pode simplesmente colocá-lo em um número. Então, se você colocar cerca de 50 pixels, ele deve ter 50 pixels nos quatro lados. Portanto, pixels ou REM ou EM são basicamente duas maneiras diferentes de descrever o tamanho. Pessoalmente, prefiro usar REM ou EM só porque é um pouco mais personalizável Portanto, se o seu navegador específico estiver configurado para o tamanho da fonte de 16 pixels, todos os tamanhos todos os tamanhos de todas as fontes seguir serão baseados nesse tamanho raiz. Então eu prefiro usar REM só porque é um pouco mais adaptável, porque se alguém mudar o tamanho do pixel para, tipo, 24, para poder ver as coisas melhor, ele se ajustará e não manterá esse tamanho muito pequeno É difícil de ver. Então, na verdade, vou seguir em frente. Ah, e também na maioria dos navegadores, pixels padrão, o tamanho da fonte padrão é 16 pixels. Então, basicamente, tudo em REM que se segue é uma multiplicação disso Então, um REM é de 16 pixels. Dois REM são 32 pixels. Três REM são 30 Não. Três REM são 48 pixels, et cetera, et cetera, et cetera. Então, quando você se acostumar um pouco mais com isso, você vai pegar o jeito. Então, o que vou fazer aqui é realmente mudar isso para três REM, e vou mudar o preenchimento do meu CTA aqui para REM, também, só para tornar minha vida um pouco mais fácil E essas são barrigas aproximadas. Também estou meio que brincando com as fundas. Então, se eu voltar aqui, começando a ver, você sabe, começando a se formar em torno das bordas, vamos tornar o preenchimento um pouco maior E a melhor coisa sobre o RMT é que, tipo, aumentar alguns números e é como uma tonelada a mais de preenchimento e é como uma tonelada a mais de Assim, há uma tonelada a mais de acolchoamento na lateral. Acho que pode chegar a dez. Tudo bem, vamos deixar por isso mesmo. Por enquanto, isso parece uma boa quantidade. Incrível. Então, temos o preenchimento em torno de nossos elementos, e agora temos nossos dois elementos lado a lado Vamos dar uma olhada em nosso design novamente. Tudo bem, então outra coisa a notar aqui é que nosso texto aqui está centralizado, e eu acho que isso também está centralizado, porque é, tipo, centralizado em centralizado, certo É importante prestar atenção a isso quando você deseja implementar um design, onde as coisas estão centralizadas, se estiverem inclinadas para a esquerda, inclinadas para a direita, etc A coisa realmente incrível sobre Flexbox e sobre o uso do Google Chroma General é que você pode realmente brincar com esses estilos no próprio navegador Então você não precisa, tipo, codificar um monte de coisas e depois se perguntar se funciona. Você pode realmente brincar com isso aqui e ver se funciona. Tudo bem, então o que vou começar a fazer primeiro é realmente centralizar esses elementos dentro desse Então você verá nosso contêiner aqui. E se você realmente rolar para baixo da peça de estilos aqui, poderá realmente ver o preenchimento Portanto, temos dez ramas de preenchimento em todos os lados, ou seja, 160 pixels de preenchimento em Essa é aquela margem verde ali mesmo. Muito legal, hein? Hum, então no meio aqui, esse é o tamanho dos nossos próprios elementos reais. Então, alguns problemas aqui. O formulário não está realmente construído, então é por isso que parece tão reduzido Talvez o texto também seja um pouco pequeno. Então, vamos detalhar esses componentes e ver quanto mais preenchimento precisamos adicionar preenchimento e Margus aos nossos Então, vamos começar aqui à direita porque é a mais complexa. E vamos ver o que podemos fazer. Vamos finalizar o que estamos fazendo aqui com este CTA gratuito de teste Então, se dermos uma boa olhada, notaremos que, na verdade, as bordas são arredondadas e parecem ter algum tipo de sombra embaixo delas também, porque isso é, tipo, parte E se olharmos para isso agora, não há sombra. Não há arredondamento. Além disso, há uma lacuna significativa entre isso e o formulário em si. Então, o que queremos fazer aqui é fazer algumas coisas. Queremos arredondar essas bordas. E, na verdade, parece que essas bordas são igualmente redondas e têm uma borda semelhante. Então, podemos realmente criar uma classe para isso. Arredondaremos as bordas e, em seguida, adicionaremos a pequena borda sombreada. Tudo bem, então vamos criar uma classe chamada bordas arredondadas. Pontilhe as bordas arredondadas. E vamos ver qual divisão era essa? Foi o CTA. Outra coisa é que você pode adicionar várias classes a cada elemento. Então, vamos adicionar a segunda classe aqui de bordas arredondadas. E então adicionaremos a outra classe aqui à nossa forma de Oops redondos Classe. Bordas arredondadas. Mas na verdade, você sabe o que? Eu mudei de ideia. Percebi que deveríamos realmente agrupar esse formulário em um div porque esse PTag aqui é parte de uma coisa maior, mas na verdade não faz parte do formulário formalmente definido Então, vamos cancelar isso. E vamos criar outra div aqui. Opa, Div. E então vamos envolver isso em nossa tag P aqui. E então vamos adicionar essa classe aqui. Classe é igual a Whoops. Bordas arredondadas. Incrível. Legal. Então, agora que criamos essa classe, vamos fazê-la fazer alguma coisa. Portanto, há uma propriedade CSS chamada border radius. E sim, eu tenho muitos deles memorizados, mas só depois de trabalhar com eles repetidamente. Você pode literalmente pesquisar as propriedades CSS de uma borda ou propriedades CSS para fazer isso e obterá uma lista exaustiva de todas as propriedades que você poderia segmentar Hum, pode até haver maneiras melhores de fazer o que estou fazendo aqui apenas jogando CSS e HTML, mas é com isso que estou trabalhando no momento. Então, bordas arredondadas, vamos mirar na borda, mas na verdade é o raio da borda. Então, raio da fronteira E vamos fazer isso, digamos, vamos curvar talvez 20%. Vamos ver se isso funciona. Agora, isso parece muito estranho Em vez disso, vamos curvar usando REM. Vamos usar dois REM. Isso parece um pouco mais normal. Tudo bem, legal. Vamos compará-lo em. Talvez seja um pouco afiado demais, na verdade. Vamos fazer um aro. Isso parece um pouco mais próximo. Isso está um pouco mais perto. Tudo bem. E agora já podemos dizer que, na verdade, vou mover isso para cá, já que não estamos. Já podemos dizer que há muito preenchimento aqui, certo? Então, vamos dar uma olhada em onde podemos remover um pouco de preenchimento. Definitivamente, removemos um pouco do preenchimento superior e acolchoamento superior e inferior e um pouco do acolchoamento esquerdo e direito Então, vamos remover, vamos em frente e remover qual foi? Foi o CTA. Então, preenchimento superior e inferior, vamos mudá-lo para um Isso já está parecendo muito melhor. E, na verdade, o problema aqui é que isso está centrado. Então, queremos realmente fazer um alinhamento de texto ao centro do CTA e, em seguida, revisaremos nosso preenchimento Então, vamos adicionar a propriedade. Centro de alinhamento de texto, que na verdade alinhará nosso texto ao centro da página Lá vamos nós. Isso é perfeito. E vamos aceitar. Vamos compará-la novamente com a nossa imagem aqui. Não é tão ruim. Não é tão ruim. Acho que pode ser que o elemento em si seja um pouco largo demais. Então, vamos abordar isso na próxima parte. O que queremos fazer primeiro, porém, é adicionar um pouco mais, adicionando aquela sombra, aquela pequena sombra de raio de borda Vamos ver se podemos adicionar isso. E, na verdade, me desculpe, deixe-me modificar isso um pouco mais. Aro 1,5, acho que provavelmente é o melhor. Sim, isso parece um pouco mais natural. Talvez devesse haver dois aros. Não, isso não vai mudar até que mudemos. Tudo bem, então 1,5 Rm. 10. Conclusão: Conclusão. Falamos muito neste vídeo desde o básico do CSS até o estilo do seu próprio site No futuro, você poderá começar a estilizar seu próprio site do zero Lembre-se de pesquisar algo sempre que não tiver certeza Eu adoraria ver o resultado do seu site. Portanto, deixe um link para seu código, uma captura de tela ou o site hospedado na guia de projetos e recursos abaixo para que eu possa ver todo o trabalho árduo que você fez Eu leio todos os comentários, todas as avaliações e vejo cada envio de projeto. Portanto, se você tiver alguma dúvida, sinta-se à vontade para deixar um comentário na seção de avaliações abaixo ou entrar em contato comigo diretamente. Confira minha página de perfil para obter mais informações sobre isso. Se você quiser saber mais sobre programação, confira os outros vídeos que tenho na minha página de perfil Também tenho vídeos sobre o Next S e React disponíveis no meu canal e site do YouTube. Vou vinculá-los abaixo e no meu perfil se você também estiver interessado em aprendê-los , e nos vemos na próxima.