Aula: Organização de Scripts CSS

🚀 Publicando com Vercel

Na aula passada, utilizamos o GitHub Pages, hoje vamos conhecer o vercel:

O Vercel é uma plataforma gratuita para hospedar projetos front-end. Ideal para publicar seus sites HTML, CSS e JS diretamente do GitHub.

Acesse: vercel.com
Clique em Continue with GitHub
Autorize a integração
Escolha o repositório que deseja publicar
Confirme e aguarde a publicação automática

📎 Ao final, a Vercel irá gerar um link público com final .vercel.app para o seu site.

📁 Organização Física

Separar o CSS em arquivos conforme sua função facilita a leitura, manutenção e escalabilidade.

/css
 ├── reset.css       /* Zera os estilos padrões */
 ├── base.css        /* Tipografia e estilos globais */
 ├── layout.css      /* Grid, containers e estrutura */
 ├── components.css  /* Botões, cards, menus etc */
 └── responsive.css  /* Media queries */
    

💬 Comentários em CSS

Utilize comentários para indicar a finalidade dos blocos de código:

/* ===== RESET DE ESTILO ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== VARIÁVEIS ===== */
:root {
  --primary-color: #0057ff;
  --font-size: 16px;
}

/* ===== COMPONENTES ===== */
.button {
  background: var(--primary-color);
  padding: 10px 20px;
  border-radius: 8px;
}
    

📄 Arquivo: index.html comentado

<!DOCTYPE html> <!-- Define o tipo de documento como HTML5 -->
<html lang="pt-br"> <!-- Início do HTML com idioma definido como português do Brasil -->
<head>
  <meta charset="UTF-8"> <!-- Codificação de caracteres -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsividade -->
  <title>Exemplo HTML com CSS Externo</title> <!-- Título da aba -->
  <link rel="stylesheet" href="style.css"> <!-- Link para o CSS externo -->
</head>
<body>
  <header class="header"> <!-- Cabeçalho -->
    <h1 class="title">Meu Site</h1>
  </header>
  <main class="container"> <!-- Conteúdo principal -->
    <section class="card"> <!-- Cartão com conteúdo -->
      <h2>Bem-vindo</h2>
      <p>Exemplo de CSS organizado.</p>
      <button class="button">Clique</button>
    </section>
  </main>
</body>
</html>

🎨 Arquivo: style.css comentado

/* Reset básico para padronizar os estilos entre navegadores */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variáveis CSS para reutilização de cores e tamanhos */
:root {
  --primary: #0057ff;
  --radius: 6px;
}

/* Estilos globais para todo o corpo da página */
body {
  font-family: Arial, sans-serif;
  background: #f9f9f9;
  color: #333;
  line-height: 1.6;
}

/* Container principal com largura máxima e centralizado */
.container {
  max-width: 800px;
  margin: 40px auto;
  padding: 24px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Cabeçalho com fundo azul e texto branco */
.header {
  background-color: var(--primary);
  color: #fff;
  padding: 20px;
  text-align: center;
}

/* Estilo do título principal */
.title {
  margin: 0;
}

/* Cartão que envolve conteúdo */
.card {
  margin-top: 20px;
}

/* Estilização do botão com cor e borda arredondada */
.button {
  background: var(--primary);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

/* Responsividade para telas pequenas */
@media (max-width: 600px) {
  .container {
    padding: 12px;
  }
}

📝 Exercício 1

Reescreva este código com boa organização:

.container {margin: auto; max-width: 1200px;}
.button {border-radius: 6px; background: blue; color: white;}
body {font-family: Arial;}
    

🧠 Exercício 2

Crie uma página com dois cards lado a lado. Os cards devem ficar empilhados no celular. Use CSS responsivo e estrutura lógica. Organize bem o código e comente cada parte do CSS.

📤 Publicação: Suba o projeto no GitHub e utilize as tags:

ads-unipar-25
07052025
csscomentado

Pegue seu tema em: Sorteador

🧑‍🤝‍🧑 Pode ser feito em dupla, mas cada aluno deve publicar o seu próprio repositório.

📌 Essas tags ajudam o professor a localizar e organizar os trabalhos entregues.

💡 Desafio Extra: (Valendo 0,5)

Adicione um título, imagem e uma breve descrição para cada card, utilizando apenas HTML e CSS.

🔧 Requisitos:

O título deve estar destacado (usar h2 ou h3).
A descrição deve ter um parágrafo curto (p) explicando o conteúdo do card.
Use CSS para ajustar espaçamento, alinhamento e tamanho da fonte.

Comente no CSS onde cada estilo está sendo aplicado.

🎯 Objetivos da Aula

Acesse o GitHub