CSS, que significa Cascading Style Sheets, é um componente crucial do desenvolvimento web moderno. É uma linguagem de folhas de estilo usada para aplicar estilos ao HTML. Em termos mais simples, se HTML é a estrutura de uma página web, CSS é o que a faz ficar bonita. Aqui está um exemplo de estilização de uma navbar. NOTA: Não se preocupe em tentar entender o código CSS agora. Você vai aprender como tudo isso funciona em aulas e workshops futuros. Isso é apenas para lhe dar uma ideia do que você pode fazer com um pouco de CSS.

<link rel="stylesheet" href="styles.css" />

<nav class="navbar">
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f4f4f4;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem 2rem;
  color: white;
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #ff9800;
}

O papel principal do CSS é separar o conteúdo de uma página web da sua apresentação visual. Essa separação permite que os desenvolvedores web criem sites mais flexíveis e fáceis de manter. Com CSS, você pode controlar o layout, as cores, as fontes e a aparência visual geral das páginas web sem alterar a estrutura do HTML. Vamos considerar uma analogia simples. Se você pensar em um site como uma casa, o HTML seria a fundação e a estrutura, enquanto o CSS seria a tinta, o papel de parede e as decorações que tornam a casa visualmente atraente e única. CSS funciona selecionando elementos HTML e aplicando estilos a eles. Aqui está um exemplo mostrando um elemento button sem estilo e um com estilo. Para interagir com este exemplo, você precisará ativar o editor interativo.

<link rel="stylesheet" href="styles.css" />

<button class="regular-btn">Unstyled Button</button>
<button class="round-btn">Round Button</button>

.round-btn {
  font-size: 1rem;
  font-family: 'Segoe UI', sans-serif;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  background-color: #2ecc71;
  color: white;
  border-radius: 50px;
  padding: 0.6rem 1.6rem;
}

.round-btn:hover {
  background-color: #27ae60;
  transform: translateY(-2px);
}

Esses estilos podem incluir propriedades como cor, tamanho da fonte e muitas outras. Ao alterar essas propriedades, você pode modificar drasticamente a aparência de uma página web sem alterar seu conteúdo. Um dos aspectos mais poderosos do CSS é sua capacidade de criar designs responsivos. Isso significa que com CSS, você pode fazer seu site parecer ótimo em qualquer dispositivo, seja um computador desktop, um tablet ou um smartphone. O CSS permite que você ajuste layouts, tamanhos de fonte e outros elementos visuais com base no tamanho da tela do dispositivo que está visualizando o site. Tente ativar o editor interativo e ajustar o tamanho da janela de visualização para ver como o layout se adapta ao tamanho da tela.

<link rel="stylesheet" href="styles.css" />

<header class="header">
    <h1>Welcome to My Responsive Site</h1>
    <p>This layout adapts to your screen size!</p>
</header>

<main class="content">
    <section class="box">Box 1</section>
    <section class="box">Box 2</section>
    <section class="box">Box 3</section>
</main>

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

.header {
  background-color: #4CAF50;
  color: white;
  padding: 2rem;
  text-align: center;
}

.content {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  justify-content: center;
}

.box {
  flex: 1;
  min-width: 200px;
  background-color: #ddd;
  padding: 2rem;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.box:hover {
  background-color: #ccc;
}

/* Responsive: for tablets and below (≤ 768px) */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 90%;
    font-size: 1.1rem;
  }
}

/* Responsive: for phones (≤ 480px) */
@media (max-width: 480px) {
  .header {
    padding: 1.5rem 1rem;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .header p {
    font-size: 1rem;
  }

  .box {
    font-size: 1rem;
    padding: 1.5rem;
  }
}

Outra característica importante do CSS é sua natureza em cascata, que é de onde vem o "cascading" em seu nome. Isso significa que os estilos podem ser herdados e sobrescritos, permitindo uma estrutura hierárquica de estilização. Você aprenderá mais sobre como isso funciona em lições futuras. O CSS também suporta o uso de folhas de estilo externas. Isso significa que você pode manter todas as suas regras de estilo em um arquivo separado, que pode então ser vinculado a várias páginas HTML. Este recurso melhora muito a manutenibilidade dos sites, especialmente os maiores. Em vez de ter que alterar estilos em cada página individual, você pode fazer alterações em um único arquivo CSS que afetará todas as páginas vinculadas. No mundo do desenvolvimento web, o CSS desempenha um papel vital na criação de sites visualmente atraentes, responsivos e fáceis de usar. Ele permite que os desenvolvedores transformem documentos HTML simples em experiências web envolventes que capturam a atenção dos usuários e aprimoram a interação deles com o conteúdo web.