TheLazy.Dev
Portfolio GitHub

Blog

webdev |css |iniciativasecologicas

Mapa de Iniciativas Ecológicas: CSS (Parte 2)

villacisg93

Gabriel Villacis

Posted on September 18, 2024

Mapa de Iniciativas Ecológicas: CSS (Parte 2)

Introducción

En este tutorial, aprenderás cómo mejorar la apariencia visual de tu página HTML aplicando estilos CSS de manera gradual. A lo largo del proceso, irás asignando selectores a los elementos de tu HTML y los estilizarás paso a paso. Esta metodología te permitirá comprender cómo los estilos se aplican a diferentes elementos y cómo influyen en el diseño general de tu página web.

Paso 1: Crear el Archivo CSS

  • Crea un nuevo archivo en tu editor de texto y guárdalo como estilos.css dentro de la carpeta iniciativas_eco.

Paso 2: Enlazar el Archivo CSS al HTML

En el <head> de tu archivo index.html, añade el enlace al archivo CSS:

<head>
    <!-- Metadatos -->
    <link rel="stylesheet" href="estilos.css">
</head>
Enter fullscreen mode Exit fullscreen mode
  • <link rel="stylesheet" href="estilos.css">: Enlaza la hoja de estilos CSS al documento HTML.

Paso 3: Añadir la Fuente de Google Fonts

Incluye la fuente "Roboto" de Google Fonts:

  • En tu navegador, ve a Google Fonts y busca la fuente "Roboto".
  • Selecciona los estilos que deseas usar (por ejemplo, Regular 400, Bold 700).
  • Copia el enlace proporcionado.

En tu <head>, añade:

<head>
    <!-- Metadatos -->
    <link rel="stylesheet" href="estilos.css">
    <!-- Enlaces a Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
Enter fullscreen mode Exit fullscreen mode
  • <link href="..." rel="stylesheet">: Enlaza la fuente "Roboto" al documento.

Paso 4: Estilos Generales

En estilos.css, comienza estableciendo estilos generales para el cuerpo del documento:

/* Estilos Generales */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #E9EFEC; /* Color de fondo claro */
    margin: 0;
    padding: 0;
    color: #16423C; /* Color de texto principal */
}
Enter fullscreen mode Exit fullscreen mode
  • font-family: Aplica la fuente "Roboto" a todo el documento.
  • background-color: Establece el color de fondo de la página.
  • margin y padding: Eliminan los márgenes y padding predeterminados.
  • color: Define el color del texto principal.

Paso 5: Estilizar el Encabezado

5.1 Añadir un ID al Encabezado en el HTML

En index.html, agrega un atributo id al encabezado:

<header id="encabezado">
    <h1>Mapa de Iniciativas Ecológicas Locales</h1>
</header>
Enter fullscreen mode Exit fullscreen mode
  • id="encabezado": Asigna un identificador único al elemento.

5.2 Aplicar Estilos en CSS

En estilos.css, añade:

/* Encabezado */
#encabezado {
    background-color: #16423C; /* Color primario oscuro */
    color: #E9EFEC; /* Texto claro */
    padding: 20px;
    text-align: center;
}

#encabezado h1 {
    margin: 0;
    font-size: 2.5em;
}
Enter fullscreen mode Exit fullscreen mode
  • #encabezado: Selector de ID que aplica estilos al elemento con id="encabezado".
  • background-color y color: Definen los colores de fondo y texto.
  • padding: Añade espacio interno alrededor del contenido.
  • text-align: Centra el texto horizontalmente.
  • #encabezado h1: Aplica estilos al <h1> dentro del encabezado.

Paso 6: Estilizar el Menú de Navegación

6.1 Añadir un ID al Menú en el HTML

En index.html, agrega:

<nav id="navegacion">
    <ul>
        <!-- Enlaces -->
    </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

6.2 Aplicar Estilos en CSS

En estilos.css:

/* Menú de Navegación */
#navegacion {
    background-color: #6A9C89; /* Color secundario */
}

#navegacion ul {
    list-style: none; /* Quita los puntos de la lista */
    margin: 0;
    padding: 0;
    display: flex; /* Alinea los elementos horizontalmente */
    justify-content: center; /* Centra los elementos */
}

#navegacion li {
    margin: 0;
}

#navegacion a {
    display: block;
    color: #E9EFEC; /* Texto claro */
    padding: 15px 20px;
    text-decoration: none;
    font-weight: bold;
}

#navegacion a:hover {
    background-color: #16423C; /* Cambia el fondo al pasar el cursor */
}
Enter fullscreen mode Exit fullscreen mode
  • display: flex: Utilizamos Flexbox para alinear los elementos horizontalmente.
  • justify-content: center: Centra los elementos dentro del contenedor.
  • list-style: none: Elimina los puntos de la lista.
  • text-decoration: none: Quita el subrayado de los enlaces.
  • font-weight: bold: Hace que el texto sea negrita.
  • Pseudo-clase :hover: Cambia el estilo de los enlaces cuando el usuario pasa el cursor sobre ellos.

Paso 7: Estilizar el Carrusel de Imágenes

7.1 Añadir un ID y Clases en el HTML

En index.html, actualiza el carrusel:

<section id="carrusel">
    <h2>Iniciativas Destacadas</h2>
    <div class="carrusel-contenedor">
        <!-- Slides -->
        <div class="slide">
            <img src="img/1.jpg" alt="Imagen 1">
            <p>Descripción de la imagen 1</p>
        </div>
        <!-- Más slides... -->
        <!-- Controles del carrusel -->
        <button class="prev">«</button>
        <button class="next">»</button>
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode
  • id="carrusel": Identifica la sección del carrusel.
  • class="carrusel-contenedor": Clase para el contenedor del carrusel.
  • class="slide": Clase para cada slide.
  • class="prev", class="next": Clases para los botones de navegación.

7.2 Aplicar Estilos en CSS

En estilos.css:

/* Carrusel */
#carrusel {
    text-align: center;
    padding: 20px 10px;
    background-color: #C4DAD2; /* Color de acento */
}

.carrusel-contenedor {
    position: relative;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
    border-radius: 5px;
}

.slide {
    display: none; /* Oculta los slides por defecto */
}

.slide img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.slide:first-child {
    display: block; /* Muestra el primer slide */
}

/* Botones de navegación */
.prev, .next {
    background-color: rgba(22, 66, 60, 0.7); /* Color semitransparente */
    border: none;
    color: #E9EFEC;
    padding: 5px 12px;
    position: absolute;
    top: 50%;
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.5em;
    transform: translateY(-50%); /* Centra verticalmente */
}

.prev {
    left: 15px;
}

.next {
    right: 15px;
}

.prev:hover, .next:hover {
    background-color: rgba(22, 66, 60, 0.9);
}
Enter fullscreen mode Exit fullscreen mode
  • .slide: Oculta todos los slides inicialmente.
  • .slide:first-child: Muestra el primer slide.
  • position: absolute: Ubica los botones sobre las imágenes.
  • transform: translateY(-50%): Centra verticalmente los botones.
  • border-radius: Redondea las esquinas de las imágenes y botones.
  • Uso de rgba: Crea colores con transparencia.

Paso 8: Estilizar el Contenido Principal

Sección Informativa

8.1 Añadir un ID en el HTML

En index.html:

<section id="informacion">
    <h2>Sobre Nosotros</h2>
    <!-- Contenido -->
</section>
Enter fullscreen mode Exit fullscreen mode

8.2 Aplicar Estilos en CSS

En estilos.css:

/* Contenido Principal */
main {
    padding: 40px 20px;
}

section {
    margin-bottom: 60px;
}

/* Sección Informativa */
#informacion h2 {
    color: #16423C;
    text-align: center;
}

#informacion p {
    line-height: 1.8; /* Espacio entre líneas */
    max-width: 800px; /* Ancho máximo para mejorar la legibilidad */
    margin: 20px auto; /* Centra el texto */
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode
  • line-height: Aumenta el espacio entre líneas para facilitar la lectura.
  • max-width y margin: auto: Controlan el ancho y centran el contenido.

Formulario de Registro

8.3 Añadir un ID en el HTML

En index.html:

<section id="registro">
    <h2>Registrar Nueva Iniciativa</h2>
    <!-- Formulario -->
</section>
Enter fullscreen mode Exit fullscreen mode

8.4 Aplicar Estilos en CSS

En estilos.css:

/* Formulario de Registro */
#registro h2 {
    text-align: center;
    color: #16423C;
}

#registro form {
    max-width: 600px;
    margin: auto;
    background-color: #FFFFFF;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#registro label {
    display: block;
    margin-top: 15px;
    color: #16423C;
    font-weight: bold;
}

#registro input[type="text"],
#registro textarea,
#registro select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #C4DAD2;
    border-radius: 5px;
    background-color: #E9EFEC;
}

#registro input[type="text"]:focus,
#registro textarea:focus,
#registro select:focus {
    border-color: #6A9C89;
    outline: none;
}

#registro input[type="submit"] {
    margin-top: 20px;
    background-color: #6A9C89;
    color: #E9EFEC;
    border: none;
    padding: 15px;
    cursor: pointer;
    width: 100%;
    font-size: 1.1em;
    border-radius: 5px;
}

#registro input[type="submit"]:hover {
    background-color: #16423C;
}
Enter fullscreen mode Exit fullscreen mode
  • Estilos del formulario: Creamos un fondo blanco con sombra y bordes redondeados.
  • Campos de entrada: Estilizamos los campos para que sean atractivos y fáciles de usar.
  • Pseudo-clase :focus: Cambia el estilo de los campos cuando el usuario hace clic en ellos.
  • Botón de envío: Destaca y cambia de color al pasar el cursor.

Paso 9: Estilizar la Sección del Mapa

9.1 Añadir un ID en el HTML

En index.html:

<section id="mapa">
    <h2>Mapa de Iniciativas</h2>
    <div>
        <!-- Mapa -->
    </div>
</section>
Enter fullscreen mode Exit fullscreen mode

9.2 Aplicar Estilos en CSS

En estilos.css:

/* Sección del Mapa */
#mapa {
    padding: 40px 20px;
    background-color: #C4DAD2;
    border-radius: 10px;
}

#mapa h2 {
    text-align: center;
    color: #16423C;
}

#mapa div {
    height: 500px;
}
Enter fullscreen mode Exit fullscreen mode
  • Estilos coherentes con el resto de la página.
  • height: Define la altura del contenedor del mapa.

Paso 10: Estilizar el Pie de Página

10.1 Añadir un ID en el HTML

En index.html:

<footer id="pie-de-pagina">
    <p>&copy; 2024 Mapa de Iniciativas Ecológicas Locales</p>
</footer>
Enter fullscreen mode Exit fullscreen mode

10.2 Aplicar Estilos en CSS

En estilos.css:

/* Pie de Página */
#pie-de-pagina {
    background-color: #16423C;
    color: #E9EFEC;
    text-align: center;
    padding: 15px;
}

#pie-de-pagina p {
    margin: 0;
    font-size: 0.9em;
}
Enter fullscreen mode Exit fullscreen mode
  • Crea un pie de página atractivo y consistente con el diseño general.

Paso 11: Añadir Responsividad

En estilos.css, añade:

/* Diseño Responsivo */
@media screen and (max-width: 768px) {
    #navegacion ul {
        flex-direction: column; /* Cambia el menú a vertical */
    }

    .prev, .next {
        padding: 3px 8px;
    }

    #registro form {
        width: 100%;
        padding: 20px;
    }

    #encabezado h1 {
        font-size: 2em;
    }
}
Enter fullscreen mode Exit fullscreen mode
  • Media Query: Aplica estilos cuando el ancho de pantalla es menor o igual a 768px.
  • Ajustes para dispositivos móviles: Mejora la usabilidad en pantallas pequeñas.

Paso 12: Guardar y Probar los Estilos

  1. Guarda el archivo estilos.css.
  2. Actualiza el navegador donde tienes abierto index.html para ver los cambios.
  3. Verifica que los estilos se apliquen correctamente y que el diseño se vea moderno y atractivo.

¡Felicidades! Has completado la estilización de tu página web, aprendiendo a utilizar selectores y comprendiendo cómo afectan al diseño. Ahora tienes una página web funcional y estéticamente agradable.

💖 💪 🙅 🚩
villacisg93
Gabriel Villacis

Posted on September 18, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Mapa de Iniciativas Ecológicas: CSS (Parte 2)
webdev Mapa de Iniciativas Ecológicas: CSS (Parte 2)

September 18, 2024