Projeto Calculadora - Parte 3: Estilizando a Interface com CSS

Série “Projeto Calculadora” — 4 partes, do planejamento ao código funcionando: 1. Requisitos e funcionalidades · 2. Estrutura HTML · 3. Estilização com CSS (você está aqui) · 4. Lógica com JavaScript

Introdução

Com o HTML da parte 2 pronto, vamos estilizar a calculadora com CSS: alinhá-la no centro da página, estilizar o display e os botões, e garantir uma boa experiência de usuário com transições e efeitos de hover.

Passo 1: Estilizando o Body

Vamos começar estilizando o body da nossa página:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: 'Arial', sans-serif;
    margin: 0;
}

Aqui, usamos flex para centralizar a calculadora vertical e horizontalmente na tela. Também definimos uma altura de 100vh (viewport height) e um fundo cinza claro, além de remover as margens padrão.

Passo 2: Estilizando o Contêiner da Calculadora

Agora, vamos estilizar o contêiner da calculadora:

.calculator {
    background-color: #aa4444;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    width: 300px;
    padding: 20px;
    border: 1px solid red;
}

A calculadora tem um fundo vermelho, bordas arredondadas, uma sombra suave e uma largura de 300px.

Atenção a um erro comum: é fácil escrever margin: 1px red solid; esperando o mesmo efeito de uma borda — mas a propriedade margin só aceita valores de tamanho (px, em, %, auto); ela não tem sintaxe para cor ou estilo de linha. Um navegador simplesmente ignora a declaração inteira quando encontra um valor inválido como esse, e o contêiner fica sem nenhuma borda visível. Quem quer uma linha colorida ao redor de um elemento deve usar a propriedade border (como fizemos acima), reservando margin apenas para espaçamento externo.

Passo 3: Estilizando o Display

Em seguida, estilizamos o display da calculadora:

.display {
    background-color: #131212;
    max-width: 91%;
    color: #fff;
    font-size: 2em;
    padding: 10px;
    border-radius: 5px;
    text-align: right;
    margin-bottom: 20px;
}

O display tem um fundo preto, texto branco, fonte grande, padding e bordas arredondadas. O texto está alinhado à direita e há uma margem inferior para separar dos botões.

Como na parte 2 o display é uma <div role="status"> (e não um <input>), vale adicionar também overflow-x: auto e white-space: nowrap ao .display, para que expressões longas rolem horizontalmente em vez de quebrar em várias linhas dentro de uma div de bloco:

.display {
    /* ...propriedades acima... */
    overflow-x: auto;
    white-space: nowrap;
}

Passo 4: Estilizando os Botões

Vamos estilizar os botões da calculadora:

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button {
    background-color: #e0e0e0;
    border: none;
    border-radius: 5px;
    padding: 20px;
    font-size: 1.2em;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #d0d0d0;
}

button:active {
    background-color: #c0c0c0;
}

Os botões são organizados em um grid com 4 colunas. Cada botão tem um fundo cinza claro, bordas arredondadas, padding, e um cursor de ponteiro ao passar o mouse. Também adicionamos transições para efeitos de hover e active.

Acessibilidade do foco por teclado: os estados :hover e :active cobrem mouse e toque, mas quem navega só com Tab depende do estado :focus-visible. Sem ele, o botão selecionado fica visualmente indistinguível dos demais. Adicione:

button:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

Passo 5: Estilizando Botões Específicos

Finalmente, vamos aplicar estilos específicos para os operadores e o botão de igual:

button.operator {
    background-color: #ff9500;
    color: #fff;
}
button.operator:hover {
    background-color: #e08900;
}
button.operator:active {
    background-color: #cc7a00;
}
button.equal {
    background-color: #34c759;
    color: #fff;
    grid-column: span 2;
}
button.equal:hover {
    background-color: #2dbb4f;
}
button.equal:active {
    background-color: #27a645;
}

Os botões de operadores têm um fundo laranja e o botão de igual é verde. Eles também têm estilos para os estados de hover e active. O botão de igual ocupa duas colunas no grid — isso funciona porque já demos as classes operator aos botões + - * / e equal ao botão = no HTML da parte 2.

Passo 6: Responsividade

A calculadora tem uma largura fixa de 300px, o que funciona bem em desktop mas pode estourar a tela em celulares muito pequenos (largura menor que 320px). Uma media query resolve isso:

@media (max-width: 360px) {
    .calculator {
        width: 90vw;
        padding: 4vw;
    }

    .display {
        font-size: 1.5em;
    }
}

Conclusão

Com este tutorial, estilizamos uma calculadora funcional em CSS, aprimorando não apenas a aparência, mas também a usabilidade da aplicação. A centralização com flexbox assegura que a calculadora esteja sempre visível e acessível, enquanto o uso de grids facilita a disposição dos botões de forma ordenada e consistente. Os efeitos de transição, o foco visível por teclado e a media query de responsividade cobrem cenários que vão além do visual — cenários que fazem a diferença entre um projeto de portfólio e um projeto realmente usável.

Falta só uma peça: fazer os botões funcionarem de verdade. Vamos implementar a lógica em JavaScript na parte 4.