El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En esta sección, nos enfocaremos en aplicar estilos a los diferentes componentes de nuestro sitio web. Utilizaremos los conocimientos adquiridos en los módulos anteriores para darle vida a nuestro proyecto. A continuación, desglosaremos los pasos necesarios para estilizar los componentes clave de nuestro sitio web.

Preparación del Entorno

Antes de comenzar a estilizar, asegúrate de tener tu entorno de desarrollo configurado correctamente. Debes tener un archivo HTML y un archivo CSS vinculados.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Sitio Web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Contenido del sitio web -->
</body>
</html>

Estilizando el Encabezado

El encabezado es una de las primeras cosas que los usuarios verán. Vamos a darle un estilo atractivo.

HTML del Encabezado

<header>
    <h1>Bienvenidos a Mi Sitio Web</h1>
    <nav>
        <ul>
            <li><a href="#home">Inicio</a></li>
            <li><a href="#about">Sobre Nosotros</a></li>
            <li><a href="#services">Servicios</a></li>
            <li><a href="#contact">Contacto</a></li>
        </ul>
    </nav>
</header>

CSS del Encabezado

header {
    background-color: #4CAF50;
    color: white;
    padding: 20px;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

header nav ul {
    list-style-type: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 15px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

header nav ul li a:hover {
    text-decoration: underline;
}

Estilizando la Sección Principal

La sección principal contendrá la mayor parte del contenido. Vamos a darle un estilo limpio y legible.

HTML de la Sección Principal

<main>
    <section id="home">
        <h2>Inicio</h2>
        <p>Bienvenido a nuestro sitio web. Aquí encontrarás información sobre nuestros servicios y mucho más.</p>
    </section>
    <section id="about">
        <h2>Sobre Nosotros</h2>
        <p>Somos una empresa dedicada a ofrecer los mejores servicios a nuestros clientes.</p>
    </section>
    <section id="services">
        <h2>Servicios</h2>
        <p>Ofrecemos una amplia gama de servicios para satisfacer tus necesidades.</p>
    </section>
    <section id="contact">
        <h2>Contacto</h2>
        <p>Puedes contactarnos a través de nuestro formulario de contacto.</p>
    </section>
</main>

CSS de la Sección Principal

main {
    padding: 20px;
}

main section {
    margin-bottom: 40px;
}

main section h2 {
    color: #4CAF50;
    font-size: 2em;
    margin-bottom: 10px;
}

main section p {
    font-size: 1.2em;
    line-height: 1.6;
}

Estilizando el Pie de Página

El pie de página es importante para proporcionar información adicional y enlaces útiles.

HTML del Pie de Página

<footer>
    <p>&copy; 2023 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>

CSS del Pie de Página

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

footer p {
    margin: 0;
}

Estilizando Botones

Los botones son elementos interactivos clave en cualquier sitio web. Vamos a estilizar un botón de ejemplo.

HTML del Botón

<button class="btn-primary">Haz clic aquí</button>

CSS del Botón

.btn-primary {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
}

.btn-primary:hover {
    background-color: #45a049;
}

Ejercicio Práctico

Ejercicio

Añade una nueva sección llamada "Testimonios" en el archivo HTML.
Estiliza esta sección para que tenga un fondo gris claro y un margen superior de 40px.
Añade un párrafo dentro de la sección con un texto de ejemplo y estilízalo para que tenga un tamaño de fuente de 1.2em y un color de texto #333.

Solución

HTML

<section id="testimonials">
    <h2>Testimonios</h2>
    <p>"Este es el mejor servicio que he utilizado. Altamente recomendado!" - Cliente Satisfecho</p>
</section>

CSS

#testimonials {
    background-color: #f9f9f9;
    margin-top: 40px;
    padding: 20px;
}

#testimonials h2 {
    color: #4CAF50;
    font-size: 2em;
    margin-bottom: 10px;
}

#testimonials p {
    font-size: 1.2em;
    color: #333;
    line-height: 1.6;
}

Conclusión

En esta sección, hemos aprendido a estilizar varios componentes clave de nuestro sitio web, incluyendo el encabezado, la sección principal, el pie de página y los botones. También hemos practicado añadiendo y estilizando una nueva sección de testimonios. Con estos conocimientos, estás listo para continuar con el siguiente paso: hacer que tu sitio web sea completamente responsivo.

Estilizando los Componentes

Preparación del Entorno

Estilizando el Encabezado

HTML del Encabezado

CSS del Encabezado

Estilizando la Sección Principal

HTML de la Sección Principal

CSS de la Sección Principal

Estilizando el Pie de Página

HTML del Pie de Página

CSS del Pie de Página

Estilizando Botones

HTML del Botón

CSS del Botón

Ejercicio Práctico

Ejercicio

Solución

HTML

CSS

Conclusión

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo