Resumo da Transcrição sobre CSS

Olha pessoal, estamos de volta. Então, deixa eu fechar essa tela, a tabla Able, abro o reload. Então, vamos falar dessa aula do estilo de CSS para a gente aplicar as nossas, nosso tabuleiro e o nosso, nossos devos para o espaço. Então, basicamente a gente vai precisar aplicar umas bordas, largura, altura para cada espaço e definir que cada linha vai ter três espaços, tá? Então, a gente pode começar do container aqui, que é o adivocumid tabuleiro. Uma coisa legal com o inspector do seu navegador, eu estou usando Firefox, mas também tem para o Chrome, tem para o Safari, Brave e outros navegadores. Só abri a sua, você vai em ferramentas, desenvolvedor de web, abre o seu inspector, pode clicar com o botão direito, no meu caso aparece inspect element, tá? Para dar uma olhada e aparece essa tela aqui do inspector com a estrutura de o Chrome que você pode passar o mouse para saber onde os elementos estão. Então, o que é legal sobre isso é que você não precisa escrever o CSS lá do editor de texto sem estar vendo o que está acontecendo aqui, pode fazer os estilos escrever aqui na mesma hora e depois copia e cola no seu arquivo de CSS, tá? Então, vamos aqui botar o texto de editor antes da gente começar para criar um arquivo de CSS. Então, a gente já tem um arquivo index.html, normalmente para você adicionar estilos, uma folha de estilo, você cria um arquivo para essa folha de estilo, vou criar arquivo style.css, tá bom? style.css, para poder incluir essa folha de estilo na sua página index.html, a gente as folhas de estilos são postas antes do final da fechamento da tag head. Então, aqui antes do final do head, eu adiciono uma tag de link, essa tag de link, tá? Tem uma atributo rel que pode dizer que eu estava cheio, apesar de hoje eu acho que não preciso mais dizer isso, eu achei mesmo, e o href para dizer onde é que está essa folha de estilo, se essa folha de estilo está no prêmio de diretório, então o arquivo é nome style.css, o nome do arquivo que está no mesmo diretório, tá? Então, a tag de link, atributo rel e rel style sheet, atributo href com valor, com o nome do arquivo que tem a folha de estilo, então vai incluir a folha de estilo style.css que a gente vai preencher com o estilo, já já, antes disso a gente vai copiar e colar os estilos lá do próprio navegador, tá? Essa maneira aqui, ó, então para o tabuleiro a gente precisa, vamos definir primeiro uma largura, a maneira tabuleira está pegando toda a tela, eu quero definir um tabuleiro exato, então eu clico aqui no tabuleiro, aqui embaixo tem essa aba aqui de postiles, eu clico aqui, aí começa a escrever o estilo, o efe é para a largura e o valor, tá? Por exemplo, 512 pixels, ele vai botar 512 lá, é porque não dá para ver porque não tem bora, deixa eu botar uma bora, você vai ver que está lá, aparecendo, tá? Se eu aumentar aqui, tá? Então 512 é esse aqui, esse tamanho aqui, talvez seja muito grande, vou mudar para 246, o pode 412, 246, está 212, vai ser de 8384, tá bom aí, está 384 pixels por exemplo, tá? Esse tamanho aqui, você olha a linha, está o começo e o fim, essa é o tamanho de largura disso, é o de 184, tá? Agora a gente já tem isso, mas como é que a gente faz para definir a largura e altura de cada espaço? Primeiro vamos definir aqui a altura do espaço, você vai clicar no app div, primeiro é o div aqui do espaço, deixa eu clicar CLS, topo class, então a cada esse cara aqui, pera aí, antes de a gente ir, vamos copiar essa width do tabuleiro, está certo? Desculpa, vamos aqui, então vou copiar width, 384, vou colar lá um arquivo e vou fazer os destilos para tabuleiro, para poder ser racional tabuleiro é o ID, usa sinal da velha e o nome do ID que é tabuleiro, e abre as chaves e cola, tá? E a propriedade width vai ter largura de 384 pixels, não se esqueça do ponto vivo, não se eu salvar isso ele vai automaticamente reiniciar, está certo? Eu espero, cadê? Acho que porque não, a gente não mudou o index por isso que não reiniciou, esse cara reload não está olhando no estilo, mas se eu salvar o index ele reinicia, então tem esse detalhe, pronto, então está aqui body tabuleiro, tem agora width 384, tá? Agora no espaço, cada espaço tem a classe espaço, ponto, espaço está aqui é um classe, uso ponto, vamos definir uma altura height, vamos ver aqui 48 pixels, vamos ver no que dá, eu vou botar uma borda só para você ver, a gente tem que consertar isso depois, vou salvar o index para reiniciar, tá? Então 1, 2, 3, 4, 5, 6, 7, 8, 9, tá? Então 9 espaços em cada linha, depois a gente vai consertar para aparecer 3 por linha, então olha aqui no lado direito, na estrutura, você note que já apareceu espaço aqui, vou tirar a borda, então tem a altura 48 eu quero mais, talvez vamos ver 96, 96 está bom, então 96, vou mudar lá no meu arquivo, 96, depois eu salvo, agora vamos adiantar esse negócio do, parece 3 por linha, em vez de o estilo do espaço, vamos mudar o estilo do tabuleiro, tabuleiro vou dizer que é display mudar para flex, tá? E vou dizer flex wrap, tá? True, opa, wrap, não true, wrap, wrap, tá? Então vamos mudar o display desse cara para usar flexbox, eu quero que dê o flex wrap para poder ele quebrar a linha, se o item dentro do container, se não der mais para, se for além da linha, tá? Então você faz isso aí para cada espaço, você modificar a classe espaço,