Agora seu site vai começar a ficar bonito de verdade.
HTML monta as peças. CSS escolhe a aparência. É como vestir o personagem com uma skin nova.
CSS é a parte que muda o visual do site. Com ele você pode:
Coloque isso dentro da parte <head> do seu arquivo:
<style>
body {
background: #0d132b;
color: white;
font-family: Arial, sans-serif;
}
</style>Agora o fundo muda, o texto muda e a fonte também.
<div style="background:#1f2a5c; padding:20px; border-radius:12px;"> Meu bloco gamer </div>
Isso cria uma caixa bonita para guardar textos, links ou imagens.
<h1 style="font-size:48px;"> Meu Site Incrível </h1>
Agora o título fica gigante. Quase um chefão final.
<a href="jogos.html" style=" background:#7cf29a; color:#08101f; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:bold; "> Ir para meus jogos </a>
<img src="mario.png" style=" width:250px; border-radius:20px; ">
Isso deixa a imagem mais bonita, com cantos arredondados.
Dessa vez vamos usar CSS dentro da tag <style>:
<style>
.botao {
background: lime;
color: black;
padding: 12px 18px;
border-radius: 12px;
text-decoration: none;
display: inline-block;
}
.botao:hover {
background: yellow;
}
</style>Depois, no body, use:
<a href="jogos.html" class="botao">Abrir página</a>
Quando o mouse passar por cima, a cor muda. Isso é um efeito hover. Nome estranho, poder legal.
<div style="display:flex; gap:20px;"> <div style="background:#1f2a5c; padding:20px; border-radius:12px;">Caixa 1</div> <div style="background:#1f2a5c; padding:20px; border-radius:12px;">Caixa 2</div> </div>
Esse truque ajuda a montar um layout mais profissional.
Tente criar uma página com:
Se fizer tudo isso, seu site já começa a parecer um site de verdade e não só um teste.
Monte uma página chamada personagem.html com:
Pronto. Agora você não está só aprendendo código. Está criando seu próprio universo.