Código
/* Estilo general */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f3f3f3;
color: #333;
}
/* Encabezados */
h1 {
color: #4CAF50;
text-align: center;
margin-top: 20px;
}
h2 {
color: #333;
border-bottom: 2px solid #4CAF50;
padding-bottom: 5px;
margin: 20px 0 10px;
}
h3 {
color: #777;
font-style: italic;
}
/* Navegación */
nav {
text-align: center;
margin: 10px 0;
background-color: #4CAF50;
padding: 10px 0;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
/* Párrafos */
p {
margin: 10px 0;
font-size: 1.2em;
}
/* Listas */
ul {
list-style-type: square;
padding-left: 20px;
}
li {
margin: 5px 0;
color: #555;
}
/* Tablas */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
table th, table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
table th {
background-color: #4CAF50;
color: white;
}
table tr:nth-child(even) {
background-color: #f9f9f9;
}
/* Formulario */
form {
margin-top: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
/* Pie de página */
footer {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
Crea un archivo .css y en el head del html pega: <link rel="stylesheet" href="./estilos/styles.css">