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:<head>
<!-- Metadatos -->
<link rel="stylesheet" href="estilos.css">
</head>
- : 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:<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>
- : 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>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>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>
- 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>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>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>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
- Guarda el archivo estilos.css.
- Actualiza el navegador donde tienes abierto index.html para ver los cambios.
- 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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1671
14
1428
52
1329
25
1276
29
1256
24
A Comparison of Static Form Providers
Apr 16, 2025 am 11:20 AM
Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
Weekly Platform News: HTML Loading Attribute, the Main ARIA Specifications, and Moving from iFrame to Shadow DOM
Apr 17, 2025 am 10:55 AM
In this week's roundup of platform news, Chrome introduces a new attribute for loading, accessibility specifications for web developers, and the BBC moves
Some Hands-On with the HTML Dialog Element
Apr 16, 2025 am 11:33 AM
This is me looking at the HTML element for the first time. I've been aware of it for a while, but haven't taken it for a spin yet. It has some pretty cool and
Paperform
Apr 16, 2025 am 11:24 AM
Buy or build is a classic debate in technology. Building things yourself might feel less expensive because there is no line item on your credit card bill, but
Where should 'Subscribe to Podcast' link to?
Apr 16, 2025 pm 12:04 PM
For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:
Weekly Platform News: Text Spacing Bookmarklet, Top-Level Await, New AMP Loading Indicator
Apr 17, 2025 am 11:26 AM
In this week's roundup, a handy bookmarklet for inspecting typography, using await to tinker with how JavaScript modules import one another, plus Facebook's
Options for Hosting Your Own Non-JavaScript-Based Analytics
Apr 15, 2025 am 11:09 AM
There are loads of analytics platforms to help you track visitor and usage data on your sites. Perhaps most notably Google Analytics, which is widely used
