Estilização de elementos com CSS
A estilização de elementos em uma página web é uma parte crucial do desenvolvimento, pois contribui significativamente para a aparência e a experiência do usuário.
Existem diversas maneiras de aplicar estilos a elementos HTML utilizando CSS, proporcionando flexibilidade e modularidade no design.
Tag <style> no HTML
Inclusão de estilos diretamente no cabeçalho HTML usando a tag <style>.
Nota
Essa abordagem é útil para pequenos projetos ou quando a estilização é específica para uma única página.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
font-family: "Arial", sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>
<title>Minha Página</title>
</head>
<body>
<h1>Bem-vindo!</h1>
<p>Este é um exemplo de estilização usando a tag <style>.</p>
</body>
</html>Atributo style no HTML
Aplicação de estilos diretamente em um elemento HTML usando o atributo style.
Nota
Útil para estilização pontual, mas pode dificultar a manutenção em projetos maiores.
<p style="color: blue; font-size: 16px;">Este parágrafo possui estilos inline.</p>Arquivo CSS externo
Criação de um arquivo CSS separado, vinculado ao HTML. Essa é uma prática comum para projetos mais extensos e facilita a manutenção.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estilos.css">
<title>Minha Página</title>
</head>
<body>
<h1>Bem-vindo!</h1>
<p>Este é um exemplo de estilização usando um arquivo CSS externo.</p>
</body>
</html>/* estilos.css */
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}
h1 {
color: #333;
}