Curso Básico de Criação de Sites

Do Zero ao Site no Ar

MÓDULO 3

Conteúdo: CSS do zero ao bonito.

– Como aplicar CSS (inline, interno, externo)(*1) – Dá trabalho? Sim, um pouco. Tem que ser paciente? Sim, certamente. Fica bonito? Com certeza!.

O que você verá neste módulo e vai aprender fácil pra nunca mais esquecer…

– Seletores básicos e de classe/id

– Box model (margin, border, padding)

– Cores, fontes (Google Fonts), tamanhos

– Flexbox e Grid (explicação prática e simples)

– Responsividade com Media Queries

– Projeto prático: estilizar o site que fez no módulo anterior

 Observação Importante: Não dê atenção e não fique preocupado – já pensando em desistir – por causa dos nomes complicados. São somente aparências, depois que você tiver maior contato e começar a usar, não vão mais assustar!.

────────────────────────

(*1) – Existem 3 modos de usar os códigos CSS em um SCRIPT HTML: Inline —> na mesma linha do código HTML; Interno —> dentro do SCRIPT HTML, na seção HEADER; Externo —> em um arquivo externo ao SCRIPT HTML, mas que se liga através de uma linha de comando no Script, na seção header.

Veja o Vídeo

ABERTURA DO MÓDULO 3

“BOA NOITE, MEUS DESIGNERS DO FUTURO!!!.

 Hoje é o dia que o seu site feioso do módulo 2 vira capa de revista.
 Vamos pegar aquele currículo, cardápio ou portfólio que você fez…
 e deixar ele tão lindo que sua sogra vai querer imprimir e colar na parede.

E tudo isso usando apenas CSS – o tempero da internet!.

1 – O que é CSS mesmo?

Lembra da metáfora da comida?
 HTML = arroz, feijão, bife – Tudo Junto e Misturado – (a comida crua)
 CSS = o cheiro verde, o molho, a arrumação bonita no prato.
 Sem CSS o site funciona… mas parece que foi feito em 1998.

PARTE 1 – Como ligar o CSS no HTML (de forma que um entenda o outro)

Temos 3 jeitos de colocar CSS. Vamos usar o melhor (arquivo separado).

1. Na pasta do seu site, cria um arquivo novo chamado style.css  
2. No seu index.html, logo acima do </head>, coloca esta linha mágica:

<link rel=”stylesheet” href=”style.css”>

“Pronto. Agora tudo que você escrever no style.css vai afetar o HTML inteiro.

”PARTE 2 – As 3 formas de escrever CSS

“Exemplo prático com a tag <h1>:”

– Observação: as linhas entre /* e */ são apenas comentários.

/* 1) Pela tag direta (afeta TODOS os h1 do site) */

h1 {

    color: blue;

    font-size: 50px;

    text-align: center;

}

/* 2) Pela classe (o mais usado do mundo) */

.titulo-vermelho {

    color: red;

    font-family: Arial;

}

/* 3) Pelo ID (só um elemento na página) */

#titulo-principal {

    background-color: yellow;

}

E no HTML você chama assim:

<h1 class=”titulo-vermelho”>Título com classe</h1>

<h1 id=”titulo-principal”>Título com ID</h1>

Veja o vídeo

PARTE 3 – As propriedades que você vai usar 90% da vida

“Essas aqui são as suas melhores amigas:” – copie este código css abaixo, no VS Code,  cole no arquivo style.css e aplique o RUN. Tente entender o porquê das transformações analisando cada linha do código CSS.

body {

color: white;                    /* cor da letra */

background-color: #007bff;       /* cor de fundo */

/* Fontes (vamos usar Google Fonts) mas você não precisa, pode usar uma fonte nativa do sistema */

@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap’);

 font-family: ‘Montserrat’, sans-serif;

/* Tamanhos e espaçamentos */

font-size: 20px;

margin: 20px;        /* espaço de fora */

padding: 30px;       /* espaço de dentro */

width: 300px; /* largura */

height: 200px; /* altura */

/* Bordas bonitas */

border: 2px solid black;

border-radius: 10px;   /* cantos arredondados */

/* Centralizar coisas */

text-align: center;

margin: 0 auto;        /* centraliza bloco */

 }

Observação Importante : – Os valores (20px, 30px e outros) são simples exemplos – use o que achar conveniente. A indicação “px” representa a unidade em Pixels (px) usada normalmente para medida de Fontes e outros elementos gráficos. (Exemplo: a fonte que estou usando aqui é: Segoe Fluent Icons; e o tamanho das letras é: 14px.)

EXERCÍCIO AO VIVO 1 – Deixar o currículo lindo em 15 minutos

Copie esse CSS inteiro no seu VS Code -> style.css:

————————-

@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap’);

body {

    font-family: ‘Montserrat’, sans-serif;

    background: linear-gradient(to right, #667eea, #764ba2);

    color: white;

    margin: 0;

    padding: 20px;

}

header {

    background: rgba(0,0,0,0.5);

    padding: 30px;

    text-align: center;

    border-radius: 15px;

}

h1 {

    font-size: 50px;

    margin: 0;

}

h2 {

    color: #ffd700;

}

img {

    border-radius: 50%;

    border: 5px solid white;

    width: 200px;

    margin: 20px 0;

}

section {

    background: rgba(255,255,255,0.2);

    margin: 20px 0;

    padding: 20px;

    border-radius: 10px;

}

button {

    background: #ffd700;

    color: black;

    padding: 15px 30px;

    font-size: 20px;

    border: none;

    border-radius: 50px;

    cursor: pointer;

}

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

Copia → cola pro VS Code → Run

”PARTE 4 – Flexbox e Grid (a mágica de alinhar tudo)

O que é MENU? – é uma parte da página onde você tem a possibilidade de escolher uma entre diversas opções.
 Exemplo:

 O que são CARDS? – Em Design/Web (UI/UX): Um contêiner (bloco) visualmente flexível para agrupar informações (texto, imagens, botões) sobre um tema, facilitando a leitura e interação em sites e apps (ex: cartões de notícias, perfis de usuário).

Exemplo:

Flexbox = alinhar coisas numa linha ou coluna (perfeito pra menu e cards).

.container {

    display: flex;

    justify-content: center;    /* horizontal */

    align-items: center;        /* vertical */

    gap: 20px;

    flex-wrap: wrap;            /* quebra linha no celular */

}

Grid = alinhar em grade (perfeito pra galeria de fotos)

.galeria {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}

@media (max-width: 768px) {

    .galeria { grid-template-columns: 1fr; }

}

EXERCÍCIO AO VIVO 2 – Galeria de produtos com Grid

——————————-

<div class=”galeria”>

    <img src=”https://via.placeholder.com/300″ alt=”Produto 1″>

    <img src=”https://via.placeholder.com/300″ alt=”Produto 2″>

    <img src=”https://via.placeholder.com/300″ alt=”Produto 3″>

</div>

——————————————

PARTE 5 – Responsividade (para o site ficar bonito no celular)

• Só adicionar isso no final do CSS:

/* Celular */

@media (max-width: 768px) {

    h1 { font-size: 30px; }

    .container { flex-direction: column; }

    nav a { display: block; margin: 10px 0; }

}

Vídeo 1 – sobre flexbox

Vídeo 2 – sobre Flexbox e Grid

Video 3 – Joguinho sobre Flexbox

Sobre o entendimento do Flexbox e Grid

Não fique preocupado se não entender claramente sobre este assunto. Você não vai programar neste nível, por enquanto. Ademais, atualmente, dispõe-se de aplicativos que facilitam muito tudo isto. O foco, agora, é o entendimento conceitual.

FECHAMENTO DO MÓDULO

Nota Importante: – Você não precisa decorar as TAGS ou outros comandos. Basta saber que existe e quando precisar de algum especificamente, busque nas anotações ou pesquise na internet. Tá tudo lá!.

Olha o que você fez hoje:

• Ligou o CSS no HTML 
• Aprendeu as propriedades mais usadas do planeta 
• Fez um site lindo com gradiente, fontes Google, bordas arredondadas 
• Aprendeu Flexbox e Grid (coisa que programador antigo leva 5 anos pra aprender) 
• Deixou tudo responsivo pro celular

Tarefa de casa (obrigatória e divertida): – Pegue o projeto anterior, que você mandou no grupo (currículo, cardápio ou portfólio), e deixe ele LINDO com CSS.
 Manda foto antes e depois no grupo com a hashtag #Transformação

Próxima aula (Módulo 4): vamos colocar esse site lindo no ar de graça (GitHub Pages, Vercel), e depois na hospedagem profissional com a Napoleon Host + domínio .com.br próprio.Prepare o coração, porque na próxima aula seu site vai pro mundo inteiro ver!. Beijo no coração de cada um e até lá, meus  artistas.

────────────────────────

Questionário do Módulo 3

CSS do zero ao bonito 

Tente responder as questões. Anote o seu gabarito. Ao final, se desejar, envie pelo nosso Grupo de Whatsapp ou pelo Formulário de Contato. Envie também as dúvidas que surgiram e procurarei esclarecer.

1. Qual é a linha mágica que a gente coloca dentro do `<head>` para ligar o arquivo style.css no HTML? 
2. a) `<css href=”style.css”>` 
3. b) `<link rel=”stylesheet” href=”style.css”>`  
4. c) `<style src=”style.css”>` 
5. d) `<connect css>`

2. Das 3 formas de escrever CSS, qual é a que a gente mais usa no curso (e na vida)? 
3. a) Direto na tag (inline) 
4. b) Dentro do `<style>` no HTML 
5. c) Arquivo separado style.css 
6. d) Pelo JavaScript

3. Quando queremos mudar TODOS os títulos `<h1>` do site de uma vez, usamos o seletor: 
4. a) `.h1` 
5. b) `#h1` 
6. c) `h1`
7. d) `titulo`

4. Se eu quiser mudar só UM elemento específico da página, uso: 
5. a) classe (.) 
6. b) tag direta 
7. c) ID (#) 
8. d) Flexbox

5. No Box Model, o que significa “padding”? 
6. a) Espaço de fora da caixa 
7. b) Espaço de dentro da caixa (entre o conteúdo e a borda) 
8. c) A borda em si 
9. d) A cor de fundo

6. Como a gente traz uma fonte bonita do Google Fonts pro site? 
7. a) Baixa o arquivo e coloca na pasta 
8. b) Usa a linha `@import url(‘https://fonts…’)` no topo do CSS
9. c) Escreve direto no HTML 
10. d) Instala um programa

7. Qual dessas propriedades deixa os cantos arredondados? 
8. a) `border-radius`
9. b) `border-circle` 
10. c) `corner-round` 
11. d) `radius`

8. Flexbox e Grid servem principalmente para:
9. a) Mudar as cores 
10. b) Alinhar e organizar os elementos na página
11. c) Fazer o site carregar mais rápido 
12. d) Esconder coisas no celular

9. Para deixar o site bonito no celular a gente usa:
10. a) `@media (max-width: 768px)`
11. b) `@celular` 
12. c) `@responsive` 
13. d) `@mobile`

10. (Pergunta aberta – essa é a minha favorita!) 

    “Me manda o print do ANTES e DEPOIS do seu projeto (currículo, cardápio ou portfólio) depois de aplicar o CSS que aprendeu hoje. 

    Quero ver essa transformação linda com meus próprios olhos!”

_______________________________

FIM DO MÓDULO 3