Conhecendo o css

Prévia do material em texto

1 
Módulo 03 
Conhecendo o CSS 
 
00:00:00 Então vamos começar a estilizar agora o nosso site? 
Agora a gente já tem nosso esqueleto pronto, e vamos ter esse aqui é o nosso objetivo final, com 
os estilos do nosso site, bonitão, com as cores certinhas, com estilos. 
Vamos começar a deixar ele assim agora. 
O que a gente tem é isso aqui por enquanto, está tudo bem. 
Essa é nossa realidade, a nossa expectativa é o roxinho lá, mas eu sei a nossa realidade é essa 
daqui. 
E lá no nosso Repl.it, a gente tem o nosso código lá completinho. 
E para começar agora essa segunda linguagem que a gente vai aprender, que é a CSS, a gente 
precisa indicar para o navegador que, o que a gente vai começar a escrever a partir de agora. é na 
linguagem CSS. 
Então eu vou colocar num arquivo diferente, numa folhinha diferente. 
Aqui na nossa estrutura de pastas a gente tem o nosso “index.html”, onde tem o nosso código 
HTML, a nossa pasta com as imagens que a gente tirou no site, e a gente vai criar agora uma nova 
pasta chamada CSS. 
Vamos vir aqui, olha, em “Add folder”, neste iconezinho, “Add folder”, vai abrir uma pastinha, o 
cursor está lá piscando, e eu vou colocar “css”. 
Lembrando que é tudo minúsculo, que é uma boa prática de nomenclatura de pastas, e vou apertar 
enter. 
Beleza, agora eu tenho aqui minha pastinha chamada “css”. 
Dentro desta pasta, eu vou adicionar um arquivo. 
Vou vir aqui nas três bolinhas”, “Add file”, ou “adicionar arquivo”, e este arquivo vai se chamar 
“estilo.css”, só que como o padrão é a gente nomear tudo em inglês, a gente vai colocar “style.css”, 
 que significa que nessa folha eu vou ter todos os estilos que vou querer aplicar ao meu HTML, ao 
meu site. 
E a extensão deste arquivo é ponto CSS “.css”, indicando que a linguagem que vai ser escrita ali é 
CSS. 
Vamos apertar enter, e pronto. Agora a gente já tem o nosso arquivo CSS em branco, com a 
primeira linha piscando para gente começar a fazer os nossos primeiros textos, primeiros códigos 
em CSS. 
Mas antes disso, vamos entender um pouco como que o CSS funciona. 
 
2 
Aqui eu tenho um documento de texto, abri aqui um Google Docs, e eu vou digitar aqui a palavra 
“Programaria”. PROGRAMARIA, tá, legal, eu tenho um texto aqui, dei um zoom para ficar melhor 
aqui para gente visualizar. 
Então eu digitei aqui a palavra “Programaria”. O que acontece se eu quiser aumentar o tamanho 
dessa fonte aqui, olha? 
Eu vejo que essa fonte está no tamanho 11, mas eu quero aumentar, estou achando-a pequena, 
quero aumentar. 
Como que a gente faz isso aqui, tanto no Google Docs quanto no Word, como que é o 
procedimento? 
Eu vou aqui na palavra que eu quero aumentar de tamanho, eu vou selecionar ela, clico, seguro e 
arrasto, selecionei, eu vou escolher a propriedade aqui em cima que eu quero mudar, no caso eu 
quero mudar o tamanho da fonte, então vou vir aqui na propriedade “tamanho da fonte”, eu tenho 
opções de valor que eu posso escolher aqui. 
Como eu estou achando pequeno 11, eu quero maior, quero uma fonte bem grandona, eu quero 
escolher aqui 24, então eu vou escolher o valor 24, e clico nele. 
Olha só o que aconteceu, aumentou agora o tamanho da minha fonte aqui em “Programaria” . 
Então como que a gente estilizou o texto lá no Word? 
A gente primeiro selecionou a parte que a gente queria estilizar, depois a gente escolheu qual que 
era propriedade que a gente queria mudar, pode ser tamanho, cor, estilo. Naquele exemplo dado 
eu quis mudar a propriedade “tamanho da fonte”. 
E por fim, a gente escolheu o valor que a gente quer aplicar, eu apliquei o tamanho 24 na fonte, 
estava inicialmente 11, e eu quis aplicar o valor 24. 
Então repare no que aconteceu, deixa eu pegar minha caneta aqui, eu seleciono a parte, escolho a 
propriedade e aplico um valor aqui. 
No CSS, vai ser a mesma coisa, o mesmo procedimento que a gente fez ali no Word. 
A gente vai selecionar uma parte, uma propriedade, e um valor. 
00:05:02 Então primeiro a gente seleciona a parte digitando o nome dela, seguido de chaves, ou 
bigodinhos, que são aquelas chavinhas com as ondinhas “{}“. 
Essa é a sintaxe do CSS, é o jeitão de escrever. 
O HTML a gente aprendeu que eram as tags, com sinal de menor “<”, maior “>”, a tag dentro que 
tinha barra “/” somente na tag de fechamento, aquela era a sintaxe do HTML. 
O CSS é outra linguagem, então ele tem um outro jeitão de escrever. 
Então é isso aqui, olha, para selecionar a parte, a sintaxe do CSS é isso, digita a parte, o nome 
dela seguido de chaves é exatamente como vocês podem observar aqui abre e fecha chaves “{}”. 
 
3 
Depois, dentro dessas chaves “{}”, a gente vai indicar a propriedade que vai ser alterada, seguida 
de dois pontos “:”, então selecionei a parte, abri chaves “{”, escolhi a propriedade, dois pontos “:”, e 
por fim, depois dos dois pontos, a gente vai colocar o valor para essa propriedade, seguido de 
ponto-e-vírgula “;”. 
Então olha só, como que vai ficar aqui: parte{propriedade: valor;}, isso tudo dentro das chaves “{}”, 
dentro do bigodinho. 
E agora vamos estilizar o nosso site. Aqui é o site que a gente tem, o original. E aqui é onde a 
gente quer chegar. 
Está bem diferente, batendo o olho, comparando um e outro, o que a gente nota são várias 
diferenças. 
Mas a gente nota à princípio que, aqui, no site final, todo o conteúdo está no meio da página, está 
centralizado, e no nosso ele está todo colado aqui no cantinho da tela. 
Então o que a gente tem que arrumar é o alinhamento disso tudo, colocar tudo no meio. 
Vamos fazer isso, como que a gente faz isso? 
Lá no Repl.it, primeiro de tudo, a gente vai ficar comparando muito uma página com outra, e vocês 
vão notar que aqui em cima o título está “Ada Lovelace”, e aqui também está “Ada Lovelace”. 
Então para diferenciar, vamos mudar por enquanto nosso título daqui para “Ada Lovelace”, e 
vamos colocar entre parênteses “(construindo)”, só para a gente identificar que as abas aqui vão 
ficar diferente, a gente vai ficar comparando. 
Agora está “Ada Lovelace (construindo)”, e “Ada Lovelace” que é o final. 
Então beleza, agora vamos voltar para o nosso artigo style.css, e eu quero centralizar todo o 
conteúdo do meu site no meio, como está aqui no final, e não assim. 
Então todo o meu conteúdo, eu vou precisar centralizar. 
Eu aprendi, nós vimos lá que a gente vai selecionar o elemento, escolher a propriedade e o valor. 
Então como que a gente vai fazer isso escrevendo aqui no CSS? 
Vamos começar aqui o nosso CSS. Eu quero alinhar todo o texto do meu site no centro, assim 
como está lá no final. 
E todo o texto do meu site fica onde? Dentro de qual elemento HTML? Na parte onde as pessoas 
conseguem ver, exatamente, no <body>, exatamente aqui. 
E eu vou abrir o bigodinho “{“, e fechar o bigodinho “}”, vai ficar assim: vou dar um zoom aqui para 
vocês verem melhor, então comecei aqui, eu escrevi “body”, abri e fechei os meus bigodinhos “{}”. 
Eu vou dar um enter aqui dentro do meu bigodinho, porque agora eu preciso dizer qual propriedade 
que eu preciso mudar. 
Se eu quero mudar o alinhamento do texto, alinhamento do texto em inglês é “text align”. 
 
4 
TEXT traço “-“ ALIGN, que se escreve ALIGN, seguido de dois pontos “:”, não podemos esquecer 
que a sintaxe é muito importante, eu preciso fazer “text-align:”. 
E depois destes dois pontos, eu passo o valor. Aqui vocês vão ver que o Repl.it já dá algumas 
opções, lembrando que ele quer ajudar a gente, ele quer prever o que a gente pode fazer, mas 
como a gente está aprendendo, a gente vai fazer na mão. 
Como eu quero centralizar tudo, todo o conteúdo no centro, eu vou escolher aqui “center”, que é de 
inglês “centro”, e termino com ponto-e-vírgula “;”. 
Reparem que mudou a cor aqui agora, do “text-align”, criou-se uma linha aqui do body, porque isso 
significa que dentro, lembra que a gente tinha hierarquia lá no HTML? 
00:10:08 Aqui no CSS a gente também tem hierarquia, então a propriedadedo “text-align” com o 
valor “center” está dentro do meu corpo, ela está acontecendo dentro do meu corpo, beleza? 
Vou tirar o zoom agora, vamos salvar, vamos lá na nossa “Ada Lovelace (construindo)”, recarregar 
a página e ver se vai centralizar nosso conteúdo. 
Olhem só, não centralizou nada, por que será? 
Calma, não se desespere. Lembrem que lá a gente já fez o esqueleto do nosso site HTML, está 
prontinho, todo construído. 
O que a gente está fazendo agora é o nosso estilo, que é o CSS. 
Então já tínhamos um arquivo pronto, e estamos começando nosso segundo arquivo. 
Mas a gente precisa de alguma forma linkar eles dois, eu preciso dizer para o navegador “olha, 
pegue os estilos que estão na folhinha de CSS, e aplique na folhinha onde está o HTML”. 
Como que eu faço esse link dessas duas estruturas, do esqueleto com estilo, para ficar bonitão? 
Eu vou fazer isso usando uma tag <link>, exatamente. 
Vamos voltar lá no nosso Repl.it. Nada aconteceu porque eu preciso linkar as coisas, eu preciso 
unir. 
E onde eu coloco esse link? Eu vou ter que voltar lá no meu “index.html”, e colocar uma tag <link>, 
que vai linkar as duas coisas. 
A tag <link> é uma informação para o sistema, ela não vai ficar visível para as pessoas do meu 
site, então ela vai aqui dentro do <head>. 
Olha só, deixa eu aumentar aqui para gente visualizar melhor. 
Então aqui na minha na minha <head>, na minha cabeça do site, eu tenho por enquanto só o título, 
mas eu vou pular uma linha aqui e eu vou colocar minha tag <link>. 
Ótimo, abri com o sinal de maior “<”, escreve LINK, fechei. 
Tem a tag de fechamento? Tem etiqueta de fechamento com a barra “/” na tag <link>? 
Não, porque um link é um link, ele não precisa de um começo e um fim. Aqui nesse caso ele é um 
link por si só. 
 
5 
Então olha só, mas o que eu vou linkar? Só colocar a tag <link> não é suficiente, porque a gente 
vai precisar passar mais algumas informações aí para essa tag. 
Lembra que informações à mais para tag, para etiqueta, são atributos de tags. 
Então é aqui dentro da etiqueta de abertura que a gente vai escrever alguns atributos. 
Eu preciso, lembra da mesma forma como a gente fez lá na “âncora”, né, das listas das divas, aqui 
no link também vou precisar passar uma referência para onde, qual que é o arquivo que ele precisa 
linkar. 
Então eu vou usar aquele atributo que a gente já aprendeu, que é o “href”, que é a referência de 
hipertexto. Seguido por igual “=”, abre e fecha aspas, =””. 
E o que eu passo aqui dentro, nesse atributo de tag da referência? É o caminho de onde está a 
minha folha de estilo, que é o link que eu preciso fazer. 
O caminho, deixa só eu diminuir aqui para a gente ver melhor a estrutura de pastas aqui do nosso 
documento, eu preciso passar “olha, pega esse arquivo aqui, que está dentro da pasta CSS”. 
Então o arquivo é o “style.css”, que está dentro da pasta “css”. 
Então o caminho que eu vou passar é “css” da pasta, barra “/”, significa “pega o que está dentro”, o 
arquivo que se chama “style.css”. 
Pronto, agora eu coloquei a minha referência aqui do link. 
Agora vamos salvar, e ver se vai centralizar aqui o nosso conteúdo. Recarreguei minha página mas 
ainda não centralizou, por quê? 
Porque eu vou precisar de mais uma informação extra aqui dentro dessa etiqueta. 
Eu preciso indicar para o meu navegador qual que é a relação que esse arquivo, que eu coloquei 
aqui como referência, tem com o meu arquivo HTML. 
Então você falou “olha, pega a referência lá daquele “style.css”, mas o que é ele? O que eu preciso 
interpretar aqui que esse arquivo significa para mim nessa tag <link>? 
Então eu vou colocar a relação que esse arquivo tem com o meu HTML. 
O atributo aqui é “rel”, REL que é a abreviação de “relation”, ou “relação” em português. 
Igual "=”, abre e fecha aspas =””, e aqui eu vou indicar qual que é a relação. 
“Olha, a relação desse esse arquivo que eu coloquei para você como referência, ele é a folha de 
estilo que você tem que aplicar.” 
“Folha de estilo” em inglês é “style sheet”, e se escreve assim STYLESHEET. 
Então agora eu já indiquei para o meu navegador qual que é a relação que esse arquivo CSS tem 
com meu HTML. 
Vamos salvar e ver se agora foi o suficiente. Vamos lá na nossa aba do navegador, recarregar a 
página, e olha só, agora o nosso conteúdo está todo centralizado, a gente já começou a estilizar o 
nosso site. 
 
6 
Agora os arquivos HTML e CSS estão linkados e a gente vai fazer todos os outros passos que 
faltam para a gente chegar nesse resultado aqui final.