Objetivo: Criar uma página HTML simples do zero, aplicando CSS de três formas diferentes: inline, interno e externo, e usando classes.
Arquivos a criar:
index.html → página principal
estilo.css → CSS externo
Crie o arquivo index.html.
Adicione a estrutura básica do HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Meu Perfil</title>
<!-- Link para o CSS externo -->
<link rel="stylesheet" href="estilo.css">
<style>
/* Aqui você colocará o CSS interno */
</style>
</head>
<body>
</body>
</html>
Dentro do <body>, faça o seguinte:
Um título principal (h1) com seu nome ou título da página.
Um parágrafo de apresentação (p) falando sobre você ou personagem fictício.
Uma lista de habilidades usando <ul> e <li> (pelo menos 3 itens).
Um botão com o texto “Clique Aqui!”.
Exemplo de estrutura:
<h1>Meu Perfil</h1>
<p>Olá! Estou aprendendo HTML e CSS.</p>
<h2>Minhas Habilidades</h2>
<ul>
<li class="habilidade">HTML</li>
<li class="habilidade">CSS</li>
<li class="habilidade">JavaScript</li>
</ul>
<button>Clique Aqui!</button>
3.1 CSS Inline
No botão, use o atributo style para mudar a cor do texto, o fundo ou o tamanho da fonte.
Exemplo:
<button style="background-color: orange; color: white; font-size: 16px;">Clique Aqui!</button>
3.2 CSS Interno
Dentro da tag <style> no <head>, estilize o título principal (h1).
Experimente mudar cor, tamanho e alinhamento:
<style>
h1 {
color: darkblue;
font-size: 32px;
text-align: center;
}
</style>
3.3 CSS Externo
Crie o arquivo estilo.css e estilize os itens da lista usando classes:
.habilidade {
color: green;
font-weight: bold;
font-size: 18px;
}
Abra o index.html no navegador.
Verifique se:
O botão está com o estilo inline aplicado.
O título principal está estilizado pelo CSS interno.
A lista de habilidades está estilizada pelo CSS externo.
Experimente alterar cores, fontes e tamanhos para deixar a página mais bonita.