Formatação CSS em TypeScript
Introdução a CSS em TypeScript. O que é CSS?
CSS (Cascading Style Sheets)
é uma linguagem usada para estilizar elementos HTML,
controlando cores,
tamanhos,
espaçamentos
e efeitos visuais.
Quando trabalhamos com TypeScript e React, temos diferentes formas de
aplicar estilos.
Por que usar TypeScript com CSS?
- Type safety (segurança de tipos)
- Melhor autocompletar no editor
- Previne erros em tempo de desenvolvimento
- Código mais organizado e profissional
Formas de Usar CSS em TypeScript/React
Existem três abordagens principais:
1. Inline Styles - Estilos definidos como objetos JavaScript
2. CSS Externo - Arquivos CSS separados (método tradicional)
3. CSS-in-JS - Bibliotecas como Emotion ou Styled Components
Inline Styles - Exemplo Prático
const h1Styles = {
backgroundColor: "rgba(255, 255, 255, 0.85)",
position: "absolute",
right: 0,
bottom: "2rem",
padding: "0.5rem",
fontFamily: "sans-serif",
fontSize: "1.5rem",
boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)",
};
export function Heading({ title }: { title: string }) {
return <h1 style={h1Styles}>{title}</h1>;
}
Explicação: - Criamos um objeto TypeScript com as propriedades CSS
- Nomes de propriedades usam camelCase (backgroundColor, não background-color)
- Valores são strings ou números
- O objeto é passado ao atributo style
CSS com Type Safety
import CSS from "csstype";
const h1Styles: [Link] = {
backgroundColor: "rgba(255, 255, 255, 0.85)",
position: "absolute",
right: 0,
bottom: "2rem",
padding: "0.5rem",
fontFamily: "sans-serif",
fontSize: "1.5rem",
boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)",
};
Benefício: O tipo [Link] valida que você está usando
propriedades CSS válidas.
O TypeScript avisará se digitar uma propriedade inexistente!
CSS com Type Safety - Comentado
// Importa o namespace CSS da biblioteca csstype // Usa fonte sans-serif (Arial, Helvetica, etc.)
// csstype fornece definições TypeScript para todas as propriedades fontFamily: "sans-serif",
CSS
import CSS from "csstype";
// Tamanho da fonte de 1.5rem (24px se 1rem = 16px)
// Define um objeto de estilos com tipagem forte do TypeScript fontSize: "1.5rem",
// [Link] garante que só propriedades CSS válidas sejam
aceitas // Sombra: sem offset, sem blur spread, 10px de blur, cor preta com 30%
const h1Styles: [Link] = { opacidade
// Cor de fundo branca com 85% de opacidade (15% transparente) boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)",
backgroundColor: "rgba(255, 255, 255, 0.85)", };
// Posicionamento absoluto (remove do fluxo normal do documento) Resumo: Este estilo cria um elemento (provavelmente um título),
position: "absolute", posicionado no canto inferior direito da tela,
com fundo semi-transparente branco,
// Posiciona o elemento no canto direito da tela/container pai
sombra suave e fonte grande,
right: 0,
típico de overlays ou watermarks em imagens/vídeos.
// Posiciona 2rem acima da borda inferior
bottom: "2rem", Vantagem do `csstype`:
Você tem autocomplete e
// Espaçamento interno de 0.5rem em todos os lados validação de todas as propriedades CSS no TypeScript!
padding: "0.5rem",
Exemplo Básico de CSS (Método Tradicional)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: lightgray;
}
h1, h2 {
color: blue;
background: white;
}
h1 u {
color: red;
}
</style>
</head>
<body>
<h1>H1 com <u>sublinhado vermelho</u></h1>
<h2>H2 com cor azul</h2>
</body>
</html>
• Como fica visualmente:
– Página: Fundo cinza claro
– H1: Texto azul com fundo branco, mas a palavra "sublinhado vermelho" fica vermelha (devido ao seletor h1 u)
– H2: Texto azul com fundo branco
• Conceitos Importantes:
– Cascata CSS: O seletor h1 u é mais específico que h1, então sobrescreve a cor
– Seletor múltiplo (h1, h2): Aplica os mesmos estilos a ambos os elementos
Exemplo com Tabelas
Slide 6: Exemplo com Tabelas
<style type="text/css">
table, td, th {
border: 3px solid black;
border-collapse: collapse;
}
th {
padding: 20px;
background-color: green;
color: yellow;
}
</style>
<table>
<tr>
<th>País</th>
<th>Capital</th>
</tr>
<tr>
<td>Brasil</td>
<td>Brasília</td>
</tr>
<tr>
<td>EUA</td>
<td>Washington DC</td>
</tr>
</table>
Propriedades importantes: - border - adiciona bordas
- border-collapse - remove espaços entre bordas
- padding - espaço interno
- background-color - cor de fundo[1]
Classes CSS
<style type="text/css">
p {
font-size: 200%;
}
[Link] {
color: blue;
}
[Link] {
color: red;
}
</style>
<p>Parágrafo normal em PRETO</p>
<p class="first">Parágrafo AZUL</p>
<p class="second">Parágrafo VERMELHO</p>
Como funciona: - p aplica a todos os parágrafos
- [Link] aplica apenas aos parágrafos com class="first" -
Configuração do Visual Studio Code
Passo 1: Extensões Recomendadas Passo 3: Arquivo TypeScript com Estilos
Crie src/[Link]:
• Prettier - formatação automática de // Definindo estilos como objeto
código TypeScript
export const containerStyles = {
• Live Server - visualizar mudanças em display: "flex",
justifyContent: "center",
tempo real alignItems: "center",
minHeight: "100vh",
• ES7+ React/Redux/React-Native backgroundColor: "#f0f0f0",
snippets - autocompletar };
export const cardStyles = {
backgroundColor: "white",
padding: "2rem",
Passo 2: Estrutura de Projeto borderRadius: "8px",
boxShadow: "0 2px 8px rgba(0, 0, 0,
seu-projeto/ 0.1)",
width: "300px",
├── [Link] };
├── src/ export const buttonStyles = {
│ ├── [Link] backgroundColor: "#007bff",
color: "white",
│ └── [Link] padding: "10px 20px",
border: "none",
├── css/ borderRadius: "4px",
cursor: "pointer",
│ └── [Link] };
fontSize: "16px",
└── [Link]
Exercício 1 Prático para o Laboratório
Exercício 1: Cartão de Perfil (Iniciante)
Objetivo: Criar um cartão de usuário com estilos CSS usando TypeScript
Estrutura HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Cartão de Perfil</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="card">
<img src="[Link] alt="Foto de
perfil">
<h2>João Silva</h2>
<p class="ocupacao">Desenvolvedor Web</p>
<p class="bio">Apaixonado por TypeScript e React</p>
<button class="btn-seguir">Seguir</button>
</div>
</body>
</html>
Exercício 1 Prático para o Laboratório
Arquivo CSS ([Link]): .card h2 {
* { color: #333;
margin: 0; margin-bottom: 0.5rem;
padding: 0; font-size: 1.8rem;
box-sizing: border-box; }
} .ocupacao {
body { color: #007bff;
background-color: #e8f4f8; font-weight: bold;
display: flex; margin-bottom: 0.5rem;
justify-content: center; }
align-items: center; .bio {
min-height: 100vh; color: #666;
font-family: "Arial", sans-serif; font-size: 0.95rem;
} margin-bottom: 1.5rem;
.card { }
background-color: white; .btn-seguir {
padding: 2rem; background-color: #007bff;
border-radius: 10px; color: white;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 10px 30px;
text-align: center; border: none;
width: 300px; border-radius: 5px;
} cursor: pointer;
.card img { font-size: 1rem;
width: 150px; transition: background-color 0.3s ease;
height: 150px; }
border-radius: 50%; .btn-seguir:hover {
margin-bottom: 1rem; background-color: #0056b3;
border: 4px solid #007bff; }
} Desafio adicional: Adicione uma segunda classe .card-premium com fundo dourado
e outra cor de botão.
Exercício 2 Prático para o Laboratório
Exercício 2: Tabela Formatada (Intermediário) table {
Objetivo: Estilizar uma tabela de produtos com cores alternadas width: 100%;
<!DOCTYPE html> border-collapse: collapse;
<html lang="pt-BR"> }
<head>
<meta charset="UTF-8"> thead {
<title>Tabela de Produtos</title> background-color: #2c3e50;
<style> color: white;
body { }
font-family: Arial, sans-serif;
padding: 2rem; th {
background-color: #f5f5f5; padding: 1rem;
} text-align: left;
font-weight: bold;
h1 { }
color: #333;
text-align: center; td {
margin-bottom: 2rem; padding: 0.8rem 1rem;
} border-bottom: 1px solid #ddd;
}
.table-container {
max-width: 800px; tbody tr:nth-child(odd) {
margin: 0 auto; background-color: #f9f9f9;
background-color: white; }
padding: 1.5rem;
border-radius: 8px; tbody tr:nth-child(even) {
box-shadow: 0 2px 4px rgba(0, 0, 0, background-color: #ecf0f1;
0.1); }
}
tbody tr:hover {
background-color: #d5dbdb;
transition: background-color 0.2s ease;
}
Exercício 2 Prático para o Laboratório
.preco { <body>
color: #27ae60; <h1>Tabela de Produtos</h1>
font-weight: bold; <div class="table-container">
<table>
}
<thead>
<tr>
.estoque-baixo { <th>Produto</th>
color: #e74c3c; <th>Categoria</th>
} <th>Preço</th>
<th>Estoque</th>
.estoque-normal { </tr>
color: #27ae60; </thead>
<tbody>
}
<tr>
</style> <td>Notebook</td>
</head> <td>Eletrônicos</td>
<td class="preco">R$ 2.500,00</td>
<td class="estoque-normal">15 unidades</td>
</tr>
<tr>
<td>Mouse</td>
<td>Periféricos</td>
<td class="preco">R$ 45,00</td>
<td class="estoque-baixo">2 unidades</td>
</tr>
<tr>
<td>Teclado</td>
<td>Periféricos</td>
<td class="preco">R$ 150,00</td>
<td class="estoque-normal">8 unidades</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Exercício 3 Prático para o Laboratório
Exercício 3: Layout com Flexbox (Avançado) .card {
Objetivo: Criar um layout responsivo usando CSS Flexbox background-color: white;
<!DOCTYPE html> padding: 1.5rem;
<html lang="pt-BR"> border-radius: 8px;
<head>
<meta charset="UTF-8"> margin-bottom: 1.5rem;
<title>Layout com Flexbox</title> box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
<style> }
* {
margin: 0;
padding: 0; .card h3 {
box-sizing: border-box; color: #2c3e50;
} margin-bottom: 0.5rem;
body { }
font-family: Arial, sans-serif;
background-color: #ecf0f1; .card p {
} color: #7f8c8d;
header { line-height: 1.6;
background-color: #34495e; }
color: white;
padding: 1.5rem; .menu-item {
text-align: center; padding: 1rem;
}
background-color: white;
.container { margin-bottom: 0.5rem;
display: flex; border-left: 4px solid #3498db;
max-width: 1200px; cursor: pointer;
margin: 2rem auto;
gap: 2rem; transition: background-color 0.2s ease;
padding: 0 1rem; }
}
.sidebar { .menu-item:hover {
flex: 0 0 250px; background-color: #ecf0f1;
} }
.main-content {
flex: 1;
}
Exercício 3 Prático para o Laboratório
footer { <main class="main-content">
background-color: #34495e; <div class="card">
<h3>Bem-vindo</h3>
color: white; <p>Este é um exemplo de layout com Flexbox.
text-align: center; Redimensione a janela para ver como se adapta!</p>
padding: 1.5rem; </div>
margin-top: 2rem; <div class="card">
} <h3>Flexbox Responsivo</h3>
<p>O layout muda automaticamente em telas menores
@media (max-width: 768px) { graças à media query @media (max-width: 768px)</p>
.container { </div>
flex-direction: column; <div class="card">
} <h3>Propriedades Flexbox</h3>
<p><strong>display: flex</strong> - Ativa flexbox no
.sidebar { container</p>
<p><strong>gap</strong> - Espaço entre itens</p>
flex: 0 0 100%; <p><strong>flex: 1</strong> - Ocupa espaço
} disponível</p>
} <p><strong>flex: 0 0 250px</strong> - Tamanho fixo de
</style> 250px</p>
</div>
</head> </main>
<body> </div>
<header>
<h1>Meu Site</h1> <footer>
<p>© 2026 Seu Nome. Todos os direitos reservados.</p>
</header> </footer>
</body>
<div class="container"> </html>
<aside class="sidebar"> Desafios:
<div class="menu-item">Home</div> 1. Adicione um grid de cards no conteúdo principal usando CSS Grid
<div class="menu-item">Sobre</div> 2. Estilize o menu ativo com aria-current="page"
<div class="menu-item">Serviços</div> 3. Implemente dark mode com variáveis CSS
<div class="menu-item">Contato</div>
</aside>
Dicas
Comece simples - Pratique cada exercício isoladamente antes de
combinar
1. Use Live Server - F5 no VS Code para ver mudanças em tempo
real
2. Inspect Element - Clique com botão direito > Inspecionar para
ver CSS aplicado
3. Pratique a sintaxe - A diferença entre font-size (CSS) e
fontSize (TypeScript) é crucial