Você será capaz de:

● Criar regras de estilo para tags HTML utilizando o CSS;

● Utilizar os seletores de tag , id e class para aplicar regras de CSS;
● Alterar características da fonte e das cores de páginas web;
● Utilizar CSS inline e externo .

Por que isso é importante?

Praticamente todas as páginas da internet utilizam algum estilo criado
com CSS, seja ele personalizado ou através de algum framework . Por
isso, é muito importante entender como o CSS funciona. 😉

Conteúdos
Para que você aprenda na prática, teremos conteúdos interativos, por
meio dos quais você irá seguir a teoria e fazer exercícios ao mesmo
tempo. Vamos lá!
Você irá desenvolver alguns desafios entre os vídeos. Para subi-los para o
seu repositório de exercícios, siga as instruções abaixo.
PS: Peça ajuda no Slack em caso de dúvidas!
fundamentos

Antes de começar: versionando seu código

Para versionar seu código, utilize o seu repositório de exercícios. 😉

Abaixo você vai ver exemplos de como organizar os exercícios do dia em
uma branch, com arquivos e commits específicos para cada exercício. Você
deve seguir este padrão para realizar os exercícios a seguir.

1. Abra a pasta de exercícios:

cd ~/trybe-exercicios
2. Certifique-se de que está na branch main e ela está sincronizada com a
remota. Caso você tenha arquivos modificados e não comitados, deverá
fazer um commit ou checkout dos arquivos antes deste passo.
git checkout main
git pull
3. A partir da main, crie uma branch com o nome exercicios/3.2 (bloco 3,
dia 2)
git checkout -b exercicios/3.2
4.Caso seja o primeiro dia deste módulo, crie um diretório para ele e o
acesse na sequência:

mkdir fundamentos
cd fundamentos

5.Caso seja o primeiro dia do bloco, crie um diretório para ele e o acesse
na sequência:
mkdir bloco-3-introducao-a-html-e-css
cd bloco-3-introducao-a-html-e-css

6.Crie um diretório para o dia e o acesse na sequência:

mkdir dia-2-html-css-primeiros-passos-em-css
cd dia-2-html-css-primeiros-passos-em-css

7.Os arquivos referentes aos exercícios deste dia deverão ficar dentro do
diretório ~/trybe-exercicios/fundamentos/block-3-introducao-a-html-e-
css/dia-2-html-css-primeiros-passos-em-css. Lembre-se de fazer commits

pequenos e com mensagens bem descritivas, preferencialmente a cada

exercício resolvido.

Verifique os arquivos alterados/adicionados:

git status
On branch exercicios/3.2
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in
working directory)

modified: exercicio-1
Adicione os arquivos que farão parte daquele commit:
Se quiser adicionar os arquivos individualmente
$ git add caminhoParaArquivo
Se quiser adicionar todos os arquivos de uma vez, porém,
atente-se
para não adicionar arquivos indesejados acidentalmente
$ git add --all
Faça o commit com uma mensagem descritiva das alterações:
git commit -m "Mensagem descrevendo alterações"

Adicione os arquivos que farão parte daquele commit:

# Se quiser adicionar os arquivos individualmente
$ git add caminhoParaArquivo

# Se quiser adicionar todos os arquivos de uma vez, porém,

atente-se
para não adicionar arquivos indesejados acidentalmente
$ git add --all

Faça o commit com uma mensagem descritiva das alterações:

$ git commit -m "Mensagem descrevendo alterações"

Você pode visualizar o log de todos os commits já feitos naquela branch

com git log.

git log

commit 100c5ca0d64e2b8649f48edf3be13588a77b8fa4 (HEAD ->

exercicios/3.2)

Author: Tryber Bot <tryberbot@betrybe.com>

Date: Fry Sep 27 17:48:01 2019 -0300

Exercicio 2 - mudando o evento de click para mouseover,

tirei o alert e coloquei pra quando clicar aparecer uma imagem
do lado direito da tela

commit c0701d91274c2ac8a29b9a7fbe4302accacf3c78

Author: Tryber Bot <tryberbot@betrybe.com>

Date: Fry Sep 27 16:47:21 2019 -0300

Exercicio 2 - adicionando um alert, usando função e o

evento click

commit 6835287c44e9ac9cdd459003a7a6b1b1a7700157

Author: Tryber Bot <tryberbot@betrybe.com>

Date: Fry Sep 27 15:46:32 2019 -0300

Resolvendo o exercício 1 usando eventListener

Agora que temos as alterações salvas no repositório local precisamos

enviá-las para o repositório remoto. No primeiro envio, a branch
exercicios/3.2 não vai existir no repositório remoto, então precisamos

configurar o remote utilizando a opção --set-upstream (ou -u, que é a

forma abreviada).

git push -u origin exercicios/3.2

Após realizar o passo 9, podemos abrir a Pull Request a partir do link que
aparecerá na mensagem do push no terminal, ou na página do seu
repositório de exercícios no GitHub através de um botão que aparecerá
na interface. Escolha a forma que preferir e abra a Pull Request. De agora
em diante, você repetirá o fluxo a partir do passo 7 para cada exercício
adicionado, porém como já definimos a branch remota com -u
anteriormente, agora podemos simplificar os comandos para:

Quando quiser enviar para o repositório remoto

$ git push
 Caso você queria sincronizar com o remoto, poderá utilizar
apenas

$ git pull

Quando terminar os exercícios, seus códigos devem estar todos

commitados na branch exercicios/3.2, e disponíveis no repositório
remoto do GitHub. Pra finalizar, compartilhe o link da Pull Request no
canal de Code Review para a monitoria e/ou colegas revisarem. Faça
review você também, lembre-se que é muito importante para o seu
desenvolvimento ler o código de outras pessoas. 🤜🏼🤛🏼

—------------------------------------------------------------------------------------------------------------------

Introdução ao CSS
Vamos começar com este vídeo para você criar suas primeiras regras com CSS:

vamos começar com o CSS, fazendo a tag <style> dentro do nosso <head>
a <style> abre o css e tem o fechamento </style>
podemos nos referir a pedaços do nosso texto colocando a o nome de uma tag
exemplo: h2 {} abrimos e fechamos os colchetes para escolher os estilos qeu iremos botar
em todos os h2 do nosso texto.

exemplo: acima temos a tag dentro de style h2 significa que o que for h2 na nossa pagina
tiver dentro dos colchetes{ } terá seu estilo alterado, então colocamos a tag color: green
entre os colchetes, isso faz com que o textos h2 fiquem da cor verde.
exemplo 2: body {} usamos esse para botar um stilo em todo body, queremos botar um
fundo usamos a tag background-color: muda cor do fundo do nosso site, ao digitarmos rgb
vamos poder escolher digitando os valores de Red , Green , Blue. dentro dos locais

caso você queira escolher a cor clique no quadrado que abrirá uma paleta de cores.
podemos também pegar referencia de outros sites como o https://coolors.co/

copiar as cores de referencia ex: esse #5ES768

OBS:podemos botar varias partes do texto em uma mesma variação de style, separando as
partes que queremos modificar separadas por virgula ,
ex: h1, h3, p {
color: green
}
vai mudar todos h1 h3 e p para verde

podemos também usar id=”nome” para identificar e referenciá los com #nome { } dentro do
<style>

podemos também criar uma class= “nome“ ela serve como uma id sendo que pode ser
colocado dentro de varias ids. para refenciar uma classe use o .nome{}(ponto)
OBS: observe que para referenciar uma id usa o # e para referenciar uma class usamos o .
(ponto)

Para fixar

index.html

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8">

<title>HTML</title>

<style></style>

</head>

<body>

<h1>Exercícios 3.2</h1>

<p>Qual é a sua cor favorita?</p>

 <ul>

<li>Amarelo</li>

<li>Vermelho</li>

<li>Marrom</li>

</ul>

</body>

</html>

1 - Modifique o tamanho do h1 para 65 pixels

2 - Modifique a cor do texto do h1 para laranja
3 - Modifique a cor de fundo da lista não ordenada
4 - Crie uma classe para modificar a cor de fundo da tag p e da ul ao
mesmo tempo
styles
font-family:- muda o tipo da fonte.

a fonte serif é a fonte padrão do aparelho da pessoa um

computador, normalmente é times new roman

sans-serif é sem serif, sendo uma fonte sem qualquer traço,

normalmente arial ou helvética, sendo uma font edo computador de quem está vendo.

bota mos aqui agora para a fonte helvetica, caso o computador

não tenha a fonte será ignorada esse estilo.

podemos botar uma fonte reserva caso não tenha aceitado a

primeira fonte, colocando ,(virgula) podemos colocar outras fontes casa não tenha a anterior
usar a proxima. exemplo acima: se não tiver a helvetica via usar a sans-serif.
a fonte cursive fica parecendo uma manuscrita em itálico.

a monospace faz usar uma fonte que cada letra ocupa o mesmo espaço, e parece uma
maquina de escrever

font-size: coloca o tamanho da fonte.

a fonte poderá ser px ou em

a medida em em significa que ele vai pegar o tamanho no body e multiplica-la por pela
quantidade de em. no exemplo acima: a fonte do body é 20px a fonte do h2 vai ser 4x20px

<strong> : coloca as palavras entre as tags em negrito. com o fechamento </strong>

font-weight: bold; : coloca as palavras em negrito

font-style: italic; deixa o texto em italico.

line-height: coloca o espaçamento espaçamento entre as linhas em px

text-align: serve para alinhar o texto , temos varias opções de alinhamento ex: centralizado,
justificado. vamos escolher center para centralizar o texto.

text-decoration: underline; deixa o texto sublinhado.

OBS: site que dá exemplos do css
http://csszengarden.com/

dicas:
comando propriedades css de fonte
color:...........cor da fonte;
font-family:.....família (tipo) de fontes;
font-size:.......tamanho da fonte;
font-style:......estilo da fonte;
font-variant:....fontes maiúsculas de menor altura;
font-weight:.....peso da fonte;
font-stretch:....espansão/contração das letras;(achata ou estica)
font:............maneira abreviada para declarar todas as
propriedades anteriores (exceto cor).

comandos de espaçamento de linhas

line-height …….. é sobre o espaçamento das linhas.

exemplo: acima é as duas primeiras linhas e espaçamento normal, depois line-height: 0.7 e
depois 1.8.

HTML CSS
documentação sobre o CSS
https://www.w3schools.com/html/html_css.asp

CSS inline
é possivel colocar o css na propria linha do html no body com a tag style=”tag que usaria
no style” dentro do pedaço no exemplo abaixo é a tag h2.
então esse pedaço do usamos o style=” background-color: steal; font-family: Verdana,
Geneva, Tahoma, sans-serif”.
OBS: css inline não é considerado uma boa pratica e deve ser evitado.

CSS Internal
Para colocar essa forma de CSS no nosso HTML usamos para isso uma
tag <style> dentro da tag <head>

CSS Externo
O CSS externo é modo mais aconselhado para colocar o CSS em uma pagina
HTML, pois ele separa o HTML do CSS. Fica mais fácil de ler o HTML e esse estilo
pode ser compartilhado para todas as páginas.

usamos o <link> para juntar o arquivo de css com nosso html.

Explicação dos atributos do <link>:

rel – Esse atributo define o relacionamento entre o arquivo em que o comando está
escrito e o arquivo que é definido no caminho do href. Geralmente será apenas um
stylesheet se conectamos um arquivo CSS (stylesheet).
type – Esse atributo define o conteúdo do arquivo para qual está linkado. O valor do
atributo deve ser um MIME como text/html, text/css e similares. Este tutorial ensina o
uso de um stylesheet, então deve ser text/css.
href – O atributo Href especifica a localização do arquivo que você precisa criar um link.
Como você está tentando linkar um arquivo CSS, o caminho deve ser um subdiretório
do CSS (caso não seja o mesmo diretório do arquivo HTML) e o nome do arquivo CSS.
 Se o arquivo estiver no mesmo diretório, então você precisa inserir somente o nome do
arquivo.

Voltando ao exemplo que estavamos fazendo, com css externo é pegar o estilo que
botamos na nossa pagina com back ground, fonts etc… e colocarmos em cada pagina do
nosso site, sem ter que dar ctrl+c ctrl+v da tag <style> em cada pagina todos, podendo
colocar em um arquivo para todas as outras paginas acessarem pegando esse estilo.

para isso vamos criar um arquivo .css no exemplo vamos chamar de style.css.

vamos copiar todo o conteúdo entre as da tag <style> </style> da nossa pagina e jogar
nessa.
vamos no nosso arquivo da pagina que criamos e vamos deixar todo o style como
comentário deixando ela toda entre /* todo o codigo */ agora todo o style que botamos
será considerado comentário e será ignorado pelo codigo.
agora vamos criar o link, escreva link e aperte enter.

então para implementar o nosso link com o style externo vamos na nossa tag <link> e
adicionar a parte type=”text/css”, vai ficar como abaixo.
 <link rel=”stylesheet” type=”text/css” href=”style.css”> observe que o link fica em cima do
vazio <style></style>

<link
rel=”stylesheet” significa que é para usar uma folha de estilo <style>
type=”text/css” significa que é um texto de um arquivo css.
href=”style.css” href é o endereço externo que iremos linkar no caso o arquivo style.css
como ele está na mesma pagina não precisa colocar mais coisas, só o nome do arquivo.

pode até remover a tag<style> do index.html

Para fixar

index.html
Copiar
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style></style>
</head>
<body>
<h1>Exercícios 3.2</h1>
<p>Qual é a sua cor favorita?</p>
<ul>
<li>Amarelo</li>
<li>Vermelho</li>
 <li>Marrom</li>
</ul>
</body>
</html>

1 - Coloque todo o CSS criado até agora nos exercícios anteriores em um

arquivo externo.
Não se esqueça de dar um PUSH no seu repositório para sincronizá-lo com
o GitHub

Recursos adicionais (opcional)

E aí, gostou do que aprendeu até aqui? Nesta parte, vamos colocar outras
referências para você se aprofundar no tema:

● Tutorial - Como utilizar as ferramentas de desenvolvedor do

browser
● Artigo - GitHub Pages
● Playlist - Curso de HTML 5 - Gustavo Guanabara
● Curso Online Gratuito - Introdução ao HTML - Scrimba
● Curso Online Gratuito - HTML, CSS, e JavaScript para
desenvolvedores web
● Tutorial - Série de artigos ensinando HTML & CSS
● Tutorial - Aprenda a estilizar o HTML com CSS - Mozilla
● Site - CSS Tricks
● CSS Básico - Português
● Propriedades de texto no CSS - Português
● Usando CSS inline - Inglês