Oi, Harlen! Tudo bem? Pelo código que você compartilhou, o motivo de o estilo não estar aparecendo na sua página é bem simples de resolver.
Analisando o seu arquivo desafio.html, notei que falta a tag que faz a conexão entre o HTML e o CSS. Sem essa linha, o navegador lê a estrutura dos botões, mas não sabe que deve buscar as cores e tamanhos que você definiu no arquivo desafio-estilo.css.
Como resolver
Dentro do seu arquivo HTML, você precisa adicionar a tag <link> dentro da seção <head>. Como no seu exemplo a estrutura do <head> não aparece, você pode montá-la assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Alura Fone</title>
<!-- Esta linha abaixo é a que carrega o seu CSS -->
<link rel="stylesheet" href="desafio-estilo.css">
</head>
<body>
<h1> Alura Fone </h1>
<section class="teclado">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<!-- ... restante dos botões ... -->
</section>
<input type="tel" placeholder="Digite seu telefone">
</body>
</html>
Alguns pontos para conferir:
- Nome do arquivo: Verifique se o nome do arquivo CSS é exatamente
desafio-estilo.css e se ele está na mesma pasta que o seu arquivo HTML. - Ordem dos elementos: No seu código HTML, o
<input type="tel"> está depois da seção do teclado. No seu CSS, você colocou uma margem inferior (margin-bottom: 24px) nele, mas como ele é o último elemento, talvez você queira inverter a posição ou usar margin-top para ele se afastar do teclado.
Espero ter ajudado.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
