Ecological Initiatives Map: CSS (Part 2)

Introduction

In this tutorial, you will learn how to improve the visual appearance of your HTML page by gradually applying CSS styles. Throughout the process, you will assign selectors to the elements of your HTML and style them step by step. This methodology will allow you to understand how styles are applied to different elements and how they influence the overall design of your website.

Step 1: Create the CSS File

• Create a new file in your text editor and save it as styles.css inside the eco_initiatives folder.

Step 2: Link the CSS File to the HTML

In the

from your index.html file, add the link to the CSS file:

    <!-- Metadatos -->
    <link rel="stylesheet" href="estilos.css">

• : Links the CSS style sheet to the HTML document.

Step 3: Add the Font from Google Fonts

Includes the font "Roboto" from Google Fonts:

• In your browser, go to Google Fonts and search for the font "Roboto".
• Select the styles you want to use (e.g. Regular 400, Bold 700).
• Copy the link provided.

In your

, add:

    <!-- 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">

• : Links the "Roboto" source to the document.

Step 4: General Styles

In styles.css, start by setting general styles for the body of the document:

/* 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 */
}

• font-family: Applies the "Roboto" font to the entire document.
• background-color: Set the background color of the page.
• margin and padding: Remove the default margins and padding.
• color: Defines the color of the main text.

Step 5: Style the Header

5.1 Add an ID to the Header in the HTML

In index.html, add an id attribute to the header:

<header id="encabezado">
    <h1 id="Mapa-de-Iniciativas-Ecológicas-Locales">Mapa de Iniciativas Ecológicas Locales</h1>
</header>

• id="header": Assigns a unique identifier to the element.

5.2 Apply Styles in CSS

In styles.css, add:

/* 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;
}

• #header: ID selector that applies styles to the element with id="header".
• background-color and color: Define the background and text colors.
• padding: Adds internal space around the content.
• text-align: Centers the text horizontally.
• #h1 header: Applies styles to the

  inside the header.

Step 6: Style the Navigation Menu

6.1 Add an ID to the Menu in the HTML

In index.html, add:

<nav id="navegacion">
    <ul>
        <!-- Enlaces -->
    </ul>
</nav>

6.2 Apply Styles in CSS

In styles.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 */
}

• display: flex: We use Flexbox to align the elements horizontally.
• justify-content: center: Center the elements within the container.
• list-style: none: Removes points from the list.
• text-decoration: none: Remove underlining from links.
• font-weight: bold: Makes the text bold.
• Pseudo-class :hover: Changes the style of links when the user hovers over them.

Step 7: Style the Image Carousel

7.1 Add an ID and Classes in the HTML

In index.html, update the carousel:

<section id="carrusel">
    <h2 id="Iniciativas-Destacadas">Iniciativas Destacadas</h2>
    <div class="carrusel-contenedor">
        <!-- Slides -->
        <div class="slide">
            <img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" 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>

• id="carousel": Identifies the carousel section.
• class="carousel-container": Class for the carousel container.
• class="slide": Class for each slide.
• class="prev", class="next": Classes for navigation buttons.

7.2 Apply Styles in CSS

In styles.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);
}

• .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 id="Sobre-Nosotros">Sobre Nosotros</h2>
    <!-- Contenido -->
</section>

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;
}

• 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 id="Registrar-Nueva-Iniciativa">Registrar Nueva Iniciativa</h2>
    <!-- Formulario -->
</section>

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;
}

• 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 id="Mapa-de-Iniciativas">Mapa de Iniciativas</h2>
    <div>
        <!-- Mapa -->
    </div>
</section>

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;
}

• 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>© 2024 Mapa de Iniciativas Ecológicas Locales</p>
</footer>

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;
}

• 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;
    }
}

• 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.

---

The above is the detailed content of Ecological Initiatives Map: CSS (Part 2). For more information, please follow other related articles on the PHP Chinese website!