Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

09 Haga lo que hicimos

<!-- Aquí colocamos los estilos CSS directamente -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333;
        background-color: #f4f4f4;
        margin: 20px;
    }

    h1 {
        color: #2c3e50;
        font-weight: 900;
    }

    /* Clase para el texto destacado */
    .texto-destacado {
        color: #007bff; 
        font-weight: bold;
        font-size: 1.1em; 
        background-color: #e9f5ff;
        padding: 5px 10px;
        border-radius: 5px;
    }
    
    .urgente {
        margin-top: 20px; /* Aquí modifique luego de usar DevTools */
        color: red;
        font-weight: bold;
        padding: 10px;
        border: red 2px solid;
    }

</style>

Título del blog

Este es un párrafo de texto normal y este el destacado que no tiene estilos especiales.

<p class="urgente">Extra! Extra! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem commodi inventore consequatur quidem totam vero sit eius praesentium quos dolores, blanditiis veniam? Blanditiis cupiditate reiciendis praesentium nihil consequatur delectus corrupti.</p>
2 respuestas

Me sirvio mucho buscar como poner loren ipsum con Visual Code: simplemente escribir lorem y tab

Hola Andrés, espero que estés bien

¡Gracias por compartir tu código! Parece que estás trabajando en un ejercicio de HTML y CSS. Tu código está bien estructurado y veo que has aplicado estilos CSS directamente en el archivo HTML usando la etiqueta <style>. Esto es útil para proyectos pequeños o para pruebas rápidas.

Aquí tienes algunos comentarios y sugerencias:

  1. Reseteo de CSS: Has usado un reseteo básico al establecer margin y padding a 0 para todos los elementos con *. Esto es una buena práctica para asegurar que los estilos sean consistentes en diferentes navegadores.

  2. Estilos de texto: Has definido estilos para el cuerpo del texto y para los encabezados. Me gusta cómo has utilizado diferentes colores y pesos de fuente para distinguir el texto normal del destacado y del urgente.

  3. Clase .urgente: Veo que has añadido un margen superior a la clase .urgente usando DevTools. Esto es una excelente manera de ajustar el diseño visualmente antes de actualizar tu código.

  4. Mejoras posibles:

    • Considera mover tus estilos CSS a un archivo externo si tu proyecto crece. Esto te ayudará a mantener el HTML limpio y facilitará el mantenimiento del código.
    • Puedes experimentar con más propiedades CSS para mejorar la presentación, como sombras (box-shadow) o transiciones (transition) para efectos más dinámicos.

Si tienes alguna pregunta específica sobre cómo mejorar o modificar algo en particular, no dudes en preguntar.

Espero haber ayudado y buenos estudios!