Olá a todos, bem-vindos de volta.
Uma das coisas que eu realmente quero enfatizar neste curso de Introdução ao CSS é que
há essa necessidade de parar, praticar e rever o que aprendemos até agora.
Então vou me certificar de incluir pequenas coisas que vou chamar “
Code Together”.
Então, se você está assistindo isso agora, e você não tem seu laptop perto de você ou
o que quer que você está usando para codificar, eu realmente espero que você pare, vá pegar isso, e
codifique junto comigo porque apenas ouvir comigo não dá
a você a verdadeira experiência que você precisa para digitar e cometem erros à medida que avançamos juntos.
Ok, então vamos em frente e começar.
O que eu vou fazer neste vídeo é eu vou voltar para um velho mas
um presente que nós fizemos em HTML 5.
E quero que entremos juntos e o estilizemos.
Tudo bem, vamos começar fazendo nosso arquivo CSS.
Vou em frente e criar um novo agora,
ir até aqui para arquivo, novo arquivo, ou você pode fazer
o comando N. E a primeira coisa que você quer fazer é salvar isso como um arquivo.CSS,
então assim seu editor sabe colorir as coisas da maneira que você quiser.
Agora, sempre que estou projetando páginas,
mantenho todos os meus arquivos HTML em uma pasta e meus arquivos CSS em outra pasta.
E eu encorajo-te a fazer a mesma coisa.
Então, eu vou em frente e ir para a minha pasta CSS.
E eu vou chamar isso, vamos chamá-lo de together-1.css.
É muito importante que você se lembre de colocar essa extensão de arquivo, ou
as coisas não vão funcionar.
Certo, então aqui está minha velha página chata.
O que as pessoas costumam fazer é estilizar a partir do topo da página e
trabalhar seu caminho para baixo.
Então, eu quero que você escolha seus próprios valores, mas vamos juntos seguir em frente e
estilizar meu cabeçalho.
Oops, coisa errada aqui.
E podemos dar-lhe um fundo.
Vou tentar B3B3B3.
Podemos dar-lhe uma fonte maior, se você quiser.
Vou dizer tamanho da fonte.
Vamos fazer 150%.
Só um pouco diferente.
Eu vou salvar isso, e eu sempre encorajo os alunos a fazer pequenas alterações em
seu código e depois verificar e ver o que aconteceu.
Então vamos ver se mudamos alguma coisa por aqui.
E agora vou recarregá-lo e ver o que aconteceu, e
se você notar, nada aconteceu.
Bem, o problema é que eu não associei a folha de estilo corretamente ao arquivo HTML.
Lembra que eu disse que sempre coloco coisas em uma pasta chamada CSS?
Preciso incluir isso.
Tudo bem, volte.
Recarregar.
Oh, ei! Eu tenho um pouco de algo
acontecendo lá.
Tudo bem?
Então, agora vamos em frente e adicionar mais algumas coisas.
Sei que não se parece exatamente com o meu exemplo.
Mas uma das coisas que eu quero fazer a seguir é, eu quero ir em frente e estilo, vamos ver,
minha cabeça.
Vamos dar ao cabeçalho inteiro uma cor de fundo.
Tudo bem.
Você pode escolher o que quiser.
E eu vou escolher fundo: Eu acho que eu tenho 66666, tudo bem.
E vamos em frente e eu realmente quero alinhar esse texto.
Então eu vou chamá-lo de linha de texto: centro.
Salvar, atualizar.
Oh, nós estamos chegando lá!
A página está começando a parecer ligeiramente diferente o tempo todo.
A única coisa que está me confundindo é que não parece gostar do meu passado.
Então, se eu voltar, eu vou perceber, oh, eu esqueci aquele sinal # bem na frente.
E faça um, dois, três, quatro, cinco, seis.
Guarde isso aqui.
Refresque.
Lá vamos nós.
Agora essas cores são muito feias e muito difíceis de ver.
E eu percebo isso.
Então vamos em frente e brincar com as coisas para tornar isso um pouco mais fácil de ver.
Vamos em frente e colocar.
Vamos mudar o h1 para que seja uma cor diferente e
vamos em frente e mudar a navegação.
Assim que temos, eu vou mudar a fonte, vamos tentar a variante da fonte.
Gosto da variante da fonte.
Ele permite que você coloque as coisas em maiúsculas, minúsculas, coisas diferentes como essa.
Nós também temos o tamanho da fonte.
Eu ainda não estou feliz com o tamanho, então eu vou fazer 150%,
e o último que eu vou fazer é a família de fontes.
Agora, se você se lembra, com a família de fontes é muito habitual dar mais de
um valor, porque nem todos os navegadores suportam cada família de fontes.
Então, no meu caso, vou tentar colocar Arial,
Times New Roman.
Se você tem uma fonte que é composta de várias palavras,
você precisa colocá-las dentro das aspas.
E, finalmente, só Serif.
Agora é assim que eu código.
Eu código cometer erros.
Eu codifico com erros de digitação.
Para ser honesto, eu raramente código em uma camisa de botão parecendo tão desconfortável.
A maneira de codificar é confortavelmente com uma coca e um bar Hershey para
que quando você terminar você tenha essas pequenas mordidas de chocolate comemorativas.
Mas, por enquanto, vou fazer o melhor que puder para te guiar.
Mudei muitas coisas.
Vamos ver o que aconteceu.
Você pode ver que eu vou fazer um pouco maior, estamos começando a chegar lá.
Temos as cores de fundo, temos as coisas assim.
Então vamos em frente e apenas estilizar mais algumas coisas juntos,
e então vamos continuar e aprender um pouco mais.
Eu gostaria de ver você escolher suas próprias coisas para H2.
Então h2 eu vou escolher uma cor diferente,
vamos tentar a mesma cor 666666 e um fundo diferente.
Vou usar 00B7EA.
Então, isso importa?
Importa se o escrevo como maiúsculas e minúsculas EA?
Não importa nada.
O importante é que você costuma ser consistente para que
você não se estrague enquanto está indo e voltando.
Tudo bem?
Vamos refrescar-nos outra vez.
Tudo bem.
Está começando a parecer muito diferente.
Isto não é muito estilo.
É só um, dois, três, quatro, cinco.
Cinco regras e já temos um olhar muito diferente.
Vou fazer a tela menor porque quando coloco o
tamanho da fonte 150%, faz uma grande diferença.
Tudo bem.
Um tipo de última coisa legal que eu gostaria que você tentasse fazer é ir em frente e
tentar estilizar o resumo nos detalhes.
Porque se eu quiser fazer apenas o, Eu cresci em Ashtabula Ohio parte,
como você pode fazer que itálico, mas não o resto?
Tudo bem, então se você se lembrar de como o código HTML se parece,
deixe-me mostrar-lhe um exemplo rápido, é que aqui em baixo eu tenho minha tag de detalhes e
se você não viu antes, eu coloquei a palavra aberta, o
que significa por padrão mostrar que ela está aberta, então ninguém tem que clicar nela.
Tenho os meus detalhes.
Eu tenho o meu resumo onde a parte da Minha Infância surgiu, e
então eu tenho toda essa parte.
Então, se você quer fazer isso em itálico, e só isso, como você faz?
Tudo bem.
O que vamos começar, é que vamos estilizar a etiqueta dos detalhes.
E eu vou rolar até aqui um pouco para que vocês possam ver um pouco melhor,
espero.
E o que eu vou dizer é que eu quero tornar tudo em itálico, e
a maneira como você faz isso é você ir e colocar em estilo de fonte: itálico.
Conseguiu?
Isso não vai ser exatamente o que queríamos porque o que eu fiz foi colocar
tudo em itálico.
Então agora você quer voltar e dizer, mas quer saber?
Não quero o resumo.
Não quero o resumo em itálico.
Oops, volte aqui.
Resumo e eu posso dizer fonte.
Opa, tipo fonte.
Bem, como você faz isso para que não é itálico,
por padrão a maioria das coisas não são, você pode realmente colocar na palavra normal.
Tudo bem.
Então é isso.
Agora temos esta parte em itálico e esta parte em negrito.
Para a maior parte estamos acabados, mas eu vou adicionar uma pequena coisa,
porque é realmente comum para as pessoas para estilizar seu cabeçalho e
seu rodapé de uma maneira muito semelhante.
Então vamos adicionar estilo ao meu rodapé.
E o que eu quero fazer é dar a mesma cor de fundo
que meu cabeçalho tinha.
Então fundo, um, dois, três, quatro, cinco, seis, boom.
E lá vai você.
Então, o que fizemos agora é que passamos de um arquivo HTML muito simples e básico e
começamos a adicionar apenas um pouco de cor, um pouco de tamanho da fonte,
um pouco diferentes coisas como essa.
Deixe-me mostrar-lhe como era o arquivo original novamente e
vamos olhar para eles ao lado do outro.
Vou comentar minha folha de estilo.
Vou abrir e você pode ver que são duas páginas muito diferentes.
Mas eles são exatamente o mesmo HTML.
Ótimo, esse é o tipo de coisas que você vai precisar fazer para
o dever de casa nesta seção.
Então pratique aqui, volte e me observe,
se isso te ajudar um pouco a superar as corcundas.
Mas o importante é, código, código, código, boa sorte.