1 - Estilizando elementos con clases CSS Estás trabajando en el desarrollo de una página web y necesitas aplicar estilos específicos a diferentes elementos usando clases CSS. Tu desafío es crear una clase llamada "texto-destacado" en el archivo HTML para un elemento
, y luego estilizar esa clase en el archivo CSS para cambiar el color del texto. Usa tu creatividad para elegir colores que resalten el texto pero aún sean legibles y armoniosos con el diseño general de la página.
En el html :
<p class="texto-destacado” > Hola</p>
En css:
. texto-destacado {
color: #74DBA9;
}
2 - Destacando títulos con CSS "Imagina que estás desarrollando un blog y necesitas resaltar los títulos de las publicaciones. Crea una clase CSS llamada "titulo-blog" y aplícala a elementos < h1 > en tu archivo HTML. Luego, personaliza esta clase en el archivo CSS para cambiar el color del texto y darle más énfasis. "
En el html:
<h1><strong class=" titulo-blog” > Bienvenidos a mi Blog</strong></h1>
En css :
.titulo-blog {
color: #48C0DB;
}
```
3 - Estilos situacionales con clases CSS Estás trabajando en un sitio de noticias y necesitas aplicar un estilo diferente para las noticias urgentes. Crea una clase CSS llamada "urgente" y aplícala a elementos
que contengan noticias urgentes. En CSS, haz que el texto de estos párrafos sea rojo para llamar la atención del lector.
En html:
<p class=”urgente”>Noticias Urgentes</p>
En css:
.urgente{
color: #FF2B2;
}
4 - Entendiendo y aplicando el reset CSS Estás trabajando en un proyecto de sitio web y has notado que el diseño está un poco desorganizado debido a los estilos predeterminados aplicados por el navegador. Tu tarea es aplicar un "reset CSS" para eliminar estos estilos predeterminados. Comienza creando un archivo CSS y utiliza el selector universal * para establecer el margen y el relleno de todos los elementos en 0. Prueba el efecto de este cambio en el diseño de tu sitio.
En css:
*{
Padding = 0;
Margin=0;
}
5 - Inspeccionando elementos y entendiendo el modelo de caja Como profesional del front-end, necesitas entender cómo se aplican los estilos a los elementos de tu página. Utiliza las herramientas de desarrollo (DevTools) del navegador para inspeccionar el modelo de caja de un elemento de tu sitio. Presta atención a las propiedades margin, border, padding y content. Describe cómo estas propiedades afectan al elemento seleccionado.
Margin: Es el espacio exterior alrededor del borde del elemento. El margin separa el elemento de otros elementos en la página, creando espacio entre ellos.
Border: Es el borde que rodea el padding y el contenido. Puedes ajustar su grosor, estilo y color. El borde añade un contorno visible al elemento, aumentando su tamaño total.
Paddig: Es el espacio entre el contenido del elemento y su borde. El padding añade espacio interno alrededor del contenido, aumentando el tamaño total del elemento sin afectar su borde.
Content: Es el área donde se muestra el contenido del elemento, como texto o imágenes. Es el núcleo del elemento.
6 - Aplicando el modelo de caja en la práctica Ahora que has entendido el modelo de caja CSS, aplica este conocimiento en tu proyecto. Selecciona un elemento específico (por ejemplo, un párrafo) y ajusta las propiedades de margen, borde, relleno y contenido. Observa cómo cada cambio afecta la posición y apariencia del elemento en la página.
En css:
.elemento{
padding: 20px;
border: 2px solid #000;
margin: 10px;
}
