CSS Responsive

Código CSS que incluye varias reglas de estilo para una página web.

El siguiente código CSS cubre diversos aspectos del diseño web, desde el reinicio de estilos predeterminados hasta la creación de contenedores centrados y responsivos, y el estilizado de botones y enlaces.

1. Reiniciar algunos estilos predeterminados y proporcionar un lienzo limpio:

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

2. Aplicar una fuente simple y elegante a toda la página:

body {
    font-family: 'Arial', sans-serif;
}

3. Añadir un color de fondo sutil y centrar el contenido:

html, body {
    height: 100%;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}

4. Estilizar los enlaces con un color diferente y sin subrayado:

a {
    text-decoration: none;
    color: #007BFF;
}

5. Crear un contenedor centrado y responsivo:

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

6. Estilizar los botones con un aspecto moderno:

button {
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

7. Añadir diseño responsivo para dispositivos móviles:

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    button {
        padding: 8px 16px;
    }
}

8. Resaltar elementos importantes con una sombra suave:

.highlight {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}