Conteúdo edição 2025

dia-01/01-introducao-css/01-conteudo.md

@@ -1,17 +1,19 @@
-### Introdução ao CSS
+# Introdução ao CSS
 
-#### O que é CSS?
+Agora que você já aprendeu a estruturar uma página utilizando HTML, chegou o momento de aprender como **estilizar** seus conteúdos e deixá-los visualmente atraentes. Enquanto o HTML cuida da **estrutura** e do **conteúdo**, o CSS cuida do **design** e da **experiência visual** do usuário. Eles trabalham juntos para criar páginas completas e bem apresentadas. 
+
+## O que é CSS?
 CSS, ou Cascading Style Sheets (Folhas de Estilo em Cascata), é uma linguagem de estilização utilizada para descrever a apresentação de documentos escritos em HTML ou XML. Ele foi criado para possibilitar a separação entre o conteúdo (HTML) e a apresentação (CSS), promovendo uma maior flexibilidade e eficiência no desenvolvimento de páginas web.
 
 Através do CSS, é possível controlar vários aspectos visuais dos elementos HTML, como cores, espaçamentos, fontes, tamanhos e layout geral da página. Com CSS, desenvolvedores conseguem criar páginas visualmente atraentes e responsivas, o que melhora a experiência do usuário e facilita o processo de manutenção do site.
 
-#### Vantagens do CSS
+## Vantagens do CSS
 - **Separação de Conteúdo e Estilo**: Com CSS, o conteúdo HTML fica mais organizado e sem estilos embutidos, permitindo que a apresentação da página seja gerida em arquivos externos.
 - **Reutilização de Código**: As regras CSS podem ser aplicadas a múltiplos elementos e páginas, economizando tempo e esforço.
 - **Manutenção Facilitada**: Alterar o estilo em um único arquivo CSS reflete automaticamente em todas as páginas que o utilizam.
 - **Compatibilidade com Diferentes Dispositivos**: Com CSS, é possível criar páginas responsivas, adaptáveis a diferentes resoluções e tamanhos de tela.
 
-#### Sintaxe Básica do CSS
+## Sintaxe Básica do CSS
 A estrutura de uma regra CSS é composta por um **seletor**, uma **propriedade** e um **valor**.
 
 ```css
@@ -33,7 +35,7 @@ p {
 ```
 No exemplo acima, todas as tags `<p>` no HTML terão texto na cor azul e tamanho de fonte 16 pixels.
 
-#### Formas de Incluir CSS
+## Formas de Incluir CSS
 O CSS pode ser inserido de três maneiras em um documento HTML: **inline**, **interno** e **externo**.
 
 1. **CSS Inline**:
@@ -71,82 +73,4 @@ O CSS pode ser inserido de três maneiras em um documento HTML: **inline**, **in
        color: blue;
        font-size: 16px;
    }
-   ```
-
-#### Cascata e Especificidade
-CSS significa **Cascading Style Sheets** (Folhas de Estilo em Cascata), e o termo "cascata" refere-se a como o navegador decide qual regra aplicar em situações onde múltiplas regras podem se sobrepor. As regras seguem uma hierarquia baseada na **especificidade** dos seletores:
-
-1. **Estilo Inline**: Tem a maior prioridade.
-2. **ID**: Seletores de ID (`#id`) têm mais prioridade do que classes e tags.
-3. **Classes e Pseudo-Classes**: Seletores de classe (`.classe`) e pseudo-classes (`:hover`, por exemplo) possuem prioridade inferior ao ID.
-4. **Elementos**: Seletores de elemento (`p`, `h1`, etc.) têm a prioridade mais baixa.
-
-**Exemplo de Cascata e Especificidade**:
-```html
-<style>
-    p {
-        color: black;
-    }
-    .highlight {
-        color: red;
-    }
-    #special {
-        color: green;
-    }
-</style>
-
-<p id="special" class="highlight">Texto de exemplo</p>
-```
-
-Nesse exemplo:
-- A regra do ID (`#special`) tem prioridade sobre a classe `.highlight` e o seletor de elemento `p`.
-- O texto será exibido em verde, pois o ID tem maior especificidade.
-
-#### Unidades CSS
-CSS oferece várias unidades para definir tamanhos, incluindo:
-- **px**: Pixels (medida fixa).
-- **em** e **rem**: Medidas relativas ao tamanho da fonte do elemento pai (`em`) ou da raiz (`rem`).
-- **%**: Percentual, útil para layouts responsivos.
-
-Exemplo:
-```css
-h1 {
-    font-size: 2em; /* duas vezes o tamanho da fonte do elemento pai */
-}
-```
-
-#### Seletores Comuns
-1. **Seletor de Elemento**: Aplica estilos a todas as instâncias de um elemento HTML específico.
-   ```css
-   h1 {
-       color: blue;
-   }
-   ```
-
-2. **Seletor de Classe**: Aplica estilos a elementos com uma classe específica.
-   ```css
-   .titulo {
-       font-size: 24px;
-       color: red;
-   }
-   ```
-
-3. **Seletor de ID**: Aplica estilos a um elemento com um ID específico.
-   ```css
-   #principal {
-       background-color: yellow;
-   }
-   ```
-
-#### CSS Responsivo
-O CSS também oferece recursos para a criação de layouts responsivos, que se ajustam automaticamente a diferentes tamanhos de tela. Um dos principais métodos para isso são as **Media Queries**.
-
-Exemplo de Media Query:
-```css
-@media (max-width: 600px) {
-    body {
-        font-size: 14px;
-    }
-}
-```
-Neste exemplo, quando a largura da tela for menor que 600px, o tamanho da fonte será ajustado para 14px.
+   ```

dia-01/02-seletores-basicos/01-conteudo.md

@@ -0,0 +1,106 @@
+# Seletores Básicos no CSS
+
+No CSS, utilizamos **seletores** para escolher quais elementos serão estilizados. Eles permitem aplicar estilos de forma precisa a partes específicas do conteúdo, e cada tipo de seletor permite um nível diferente de customização.
+
+---
+
+## 1. **Seletores de Elemento**
+   Os seletores de elemento aplicam estilos a todas as instâncias de um elemento HTML específico.
+
+   - **Sintaxe**:
+     ```css
+     elemento {
+         propriedade: valor;
+     }
+     ```
+
+   - **Exemplo**:
+     ```css
+     p {
+         color: black;
+         font-size: 16px;
+     }
+     ```
+     Esse código aplica um estilo a todos os parágrafos `<p>` da página, definindo a cor do texto como preto e o tamanho da fonte como 16px.
+
+
+## 2. **Seletores de Classe**
+   Os seletores de classe são utilizados para aplicar estilos a um ou mais elementos que possuam a mesma classe. Para selecionar uma classe no CSS, usa-se o ponto (`.`) seguido do nome da classe.
+
+   - **Sintaxe**:
+     ```css
+     .nome-da-classe {
+         propriedade: valor;
+     }
+     ```
+
+   - **Exemplo**:
+     ```css
+     .destaque {
+         color: blue;
+         font-weight: bold;
+     }
+     ```
+
+     ```html
+     <p class="destaque">Este texto será azul e em negrito.</p>
+     <span class="destaque">Este texto também será azul e em negrito.</span>
+     ```
+     No exemplo acima, qualquer elemento com a classe `destaque` terá o texto azul e em negrito.
+
+
+## 3. **Seletores de ID**
+   O seletor de ID é usado para aplicar estilos a um elemento específico. IDs são únicos, ou seja, cada ID deve ser usado apenas uma vez por página. Para declarar um ID, usa-se o símbolo `#` seguido do nome do ID no CSS.
+
+   - **Sintaxe**:
+     ```css
+     #nome-do-id {
+         propriedade: valor;
+     }
+     ```
+
+   - **Exemplo**:
+     ```css
+     #principal {
+         background-color: lightgrey;
+         padding: 20px;
+     }
+     ```
+
+     ```html
+     <div id="principal">Este é o conteúdo principal da página.</div>
+     ```
+     Esse estilo será aplicado apenas ao elemento com o ID `principal`.
+
+---
+
+
+### Quando Usar IDs vs. Classes
+
+| Critério                        | ID                                         | Classe                                  |
+|---------------------------------|--------------------------------------------|-----------------------------------------|
+| **Aplicação**                   | Elemento único                             | Múltiplos elementos                     |
+| **Especificidade**              | Alta                                       | Moderada                                |
+| **Reutilização**                | Não deve ser reutilizado                   | Pode ser reutilizado                    |
+| **Exemplo de Uso**              | Estilos exclusivos de um elemento específico, como um cabeçalho único | Estilos aplicáveis a vários itens, como botões de formulário |
+
+---
+
+## 4. **Seletores de Atributo**
+Os **seletores de atributo** são um tipo poderoso de seletor no CSS que permitem aplicar estilos a elementos HTML com base em atributos específicos, como `type`, `href`, `title`, entre outros. Esses seletores são especialmente úteis quando se deseja estilizar campos de formulários, links, ou qualquer elemento que possua atributos específicos, sem precisar adicionar classes ou IDs adicionais.
+
+   - **Sintaxe**:
+     ```css
+     elemento[atributo="valor"] {
+         propriedade: valor;
+     }
+     ```
+
+   - **Exemplo**:
+     ```css
+     input[type="text"] {
+         border: 1px solid black;
+         padding: 5px;
+     }
+     ```
+     Esse estilo será aplicado a todos os campos de entrada (`<input>`) do tipo `text`.

dia-01/02-seletores-basicos/02-exercicios.md

@@ -0,0 +1,29 @@
+# Exercícios: Seletores Básicos
+
+## Exercício 1: Seletores de Elemento
+1. Utilize como base o arquivo HTML disponilizado em [./_assets/01-exercicio1-boilerplate.html](./_assets/01-exercicio1-boilerplate.html).
+2. No arquivo CSS, use seletores de elemento para definir:
+   - A cor do texto (`color`) de todos os `<h1>` como azul.
+   - O tamanho da fonte (`font-size`) de todos os `<p>` como 18px.
+   - O fundo (`background-color`) de todos os `<h2>` como amarelo.
+
+## Exercício 2: Seletores de Classe
+1. Utilize como base o arquivo HTMl disponilizado em [./_assets/02-exercicio2-boilerplate.html](./_assets/02-exercicio2-boilerplate.html).
+2. No CSS, defina um estilo para a classe `highlight` que:
+   - Aplique um fundo (`background-color`) laranja.
+   - Defina a cor do texto (`color`) como branco.
+
+## Exercício 3: Seletores de ID
+1. Utilize como base o arquivo HTMl disponilizado em [./_assets/03-exercicio3-boilerplate.html](./_assets/03-exercicio3-boilerplate.html).
+2. No CSS, aplique estilos ao ID `main-content` que:
+   - Definam uma borda (`border`) sólida de 2px preta.
+   - Apliquem um padding (`padding`) de 20px.
+   - Mudam a cor do texto (`color`) para cinza.
+
+
+## Exercício 4: Seletores de Atributo
+1. Utilize como base o arquivo HTML disponilizado em [./_assets/04-exercicio4-boilerplate.html](./_assets/04-exercicio4-boilerplate.html).
+2. No CSS, use seletores de atributo para definir:
+   - A borda (`border`) de todos os campos de texto como 1px sólido azul.
+   - A cor de fundo (`background-color`) de todos os campos de email como verde claro.
+

dia-01/02-seletores-basicos/03-exercicio1-corrigido.css

@@ -0,0 +1,11 @@
+h1 {
+	color: blue;
+}
+
+p {
+	font-size: 18px;
+}
+
+h2 {
+	background-color: yellow;
+}

dia-01/02-seletores-basicos/04-exercicio2-corrigido.css

@@ -0,0 +1,4 @@
+.highlight {
+    background-color: orange;
+    color: white;
+}

dia-01/02-seletores-basicos/05-exercicio3-corrigido.css

@@ -0,0 +1,5 @@
+#main-content {
+	border: solid 2px black;
+	padding: 20px;
+	color: gray;
+}

dia-01/02-seletores-basicos/06-exercicio4-corrigido.css

@@ -0,0 +1,7 @@
+input[type="text"] {
+	border: 1px solid blue;
+}
+
+input[type="email"] {
+	background-color: lightgreen;
+}

dia-01/02-seletores-basicos/_assets/01-exercicio1-boilerplate.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercício 1 - Seletores de Elemento</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Este é um título H1</h1>
+    <h2>Este é um título H2</h2>
+    <p>Este é um parágrafo 1.</p>
+    <p>Este é um parágrafo 2.</p>
+    <h1>Outro H1 para testar</h1>
+    <h2>Outro H2 para testar</h2>
+</body>
+</html>

dia-01/02-seletores-basicos/_assets/02-exercicio2-boilerplate.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercício de Classes</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <div class="highlight">Div com classe highlight</div>
+    <div>Div sem classe</div>
+
+    <p class="highlight">Parágrafo com classe highlight</p>
+    <p>Parágrafo sem classe</p>
+
+    <span class="highlight">Span com classe highlight</span>
+    <span>Span sem classe</span>
+
+</body>
+</html>

dia-01/02-seletores-basicos/_assets/03-exercicio3-boilerplate.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercício de IDs</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <div id="main-content">
+        Este é o conteúdo principal.
+    </div>
+
+</body>
+</html>

dia-01/02-seletores-basicos/_assets/04-exercicio4-boilerplate.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Exercício de Seletores de Atributo</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <form>
+        <label for="nome">Nome:</label>
+        <input type="text" id="nome" name="nome">
+
+        <label for="sobrenome">Sobrenome:</label>
+        <input type="text" id="sobrenome" name="sobrenome">
+
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email">
+
+        <label for="confirmar">Confirme seu e-mail:</label>
+        <input type="email" id="confirmar" name="confirmar">
+
+        <label for="senha">Senha:</label>
+        <input type="password" id="senha" name="senha">
+    </form>
+
+</body>
+</html>