Construa Tabelas Incríveis com HTML em 12 Horas
Sobre a Aula

Estilo CSS

Agora, adicione um arquivo styles.css para estilizar a aparência da página. Fique à vontade para colocar o estilo de sua preferência.

body {
    font-family: Arial, sans-serif;
    margin: 20px;

}

.input-section, .stock-section {
     margin-bottom: 20px;
}

.input-section {
     padding: 50px;
     background-color: #ddd;
}

h1, h2 {
     text-align: center;
}

label {
     display: block;
     margin-bottom: 5px;
}

input {
     width: 100%;
     padding: 8px;
     margin-bottom: 10px;
     background-color: #eee;
}

button {
     padding: 10px;
     background-color: #ee2b1c;
     color: white;
     border: none;
     cursor: pointer;
}

button:hover {
     background-color: #7e1810;
}

table {
     width: 100%;
     border-collapse: collapse;
}

th, td {
     border: 1px solid #ddd;
     padding: 8px;
     text-align: left;
}

th {
     background-color: #ddd;
     color: #000;
     text-align: center;
}
        
tr:nth-child(even) {
     background-color: #f2f2f2;
}

O último passo, vamos coloca interatividade nesse projeto.

Entrar na conversa
Rolar para cima