DESARROLLO WEB by Alexandra Hernández https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b Tema:CSS en-us 2025-04-04 15:59:11 UTC 2025-05-23 03:35:16 UTC hello@padlet.com https://padlet.net/icons/png/1f4bb.png ¿QUE ES CSS? alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3396286667 Antes de comenzar, debes tener claro un concepto clave: una página web es realmente un documento de texto. Por otro lado, existe el código CSS, que unido al código HTML permite darle forma, color, posición (y otras características visuales) a un documento web.

]]> 2025-04-04 16:16:05 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3396286667 Bienvenidos a mi Blog CSS alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462328110 2025-05-22 02:54:05 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462328110 Introducción a CSS: Da estilo a la web alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462338430 Cuando visitas una página web y ves colores, fuentes bonitas, botones animados o diseños responsivos, estás viendo el poder del CSS en acción. Pero, ¿qué es CSS y por qué es tan importante para el desarrollo web?

]]> 2025-05-22 02:58:27 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462338430 Ventajas de usar CSS alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462353874

  • Separación de contenido y diseño: facilita el mantenimiento y la actualización de sitios web.

  • Reutilización: puedes usar un solo archivo CSS en varias páginas.

  • Diseño responsivo: adapta tu sitio a diferentes tamaños de pantalla.

  • Carga más rápida: mejora el rendimiento de tu web.

  • Consistencia visual: garantiza un estilo uniforme en todo el sitio.

    • ]]>     2025-05-22 03:05:54 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462353874     Sintaxis básica de CSS alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462359060 selector {

    propiedad: valor;

    }


    Un Ejemplo de este


    body {

    background-color: #f4f4f4;

    color: #333;

    font-family: Arial, sans-serif;

    }

    ]]>     2025-05-22 03:08:00 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462359060     Formas de aplicar CSS alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462368601 En línea: dentro de una etiqueta HTML.

    <h1 style="color: blue;">Título azul</h1>


    Interno: dentro de la etiqueta <style> en el <head> del HTML.

    <style>

    h1 { color: red; }

    </style>


    Externo: enlazando un archivo .css.

    <link rel="stylesheet" href="estilos.css">


    ]]>     2025-05-22 03:12:01 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462368601     Algunos de los selectores alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462392891

  • *: Selecciona todos los elementos.

  • elemento: selecciona por nombre de etiqueta (div, p, h1, etc.).

  • .clase: selecciona todos los elementos con una clase determinada.

  • #id: selecciona un elemento por su ID.

  • elemento1 elemento2: selecciona elementos dentro de otro.

  • elemento:hover: aplica estilo al pasar el cursor.

  • [atributo=valor]: selecciona elementos con un atributo específico.

    • ]]>     2025-05-22 03:24:45 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462392891     Tipos de selectores en CSS alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462395725 2025-05-22 03:26:08 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462395725 Propiedades comunes en CSS alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462406089

  • color, background-color

  • font-family, font-size, font-weight

  • margin, padding, border

  • width, height, display

  • text-align, line-height, letter-spacing

    • ]]>     2025-05-22 03:31:53 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462406089     Modelo de caja (Box Model) alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462407134 El modelo de caja es fundamental para entender el diseño en CSS:

    Content: el contenido del elemento.

    Padding: espacio entre el contenido y el borde.

    Border: el borde del elemento.

    Margin: espacio fuera del borde, separa de otros elementos.

    ]]>     2025-05-22 03:32:36 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462407134     Otros aspectos para el diseño alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462414328

  • Diseño con Flexbox y Grid

    Flexbox permite distribuir el espacio dentro de un contenedor y Grid permite crear diseños más complejos.


  • Media Queries: diseño responsivo

    Permite adaptar estilos según el tamaño de la pantalla


  • Animaciones y transiciones

    CSS permite animaciones sin JavaScript


    • ]]>     2025-05-22 03:36:43 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462414328     Buenas prácticas con CSS alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462418706

  • Usa clases en lugar de IDs para estilos reutilizables.

  • Agrupa reglas similares para facilitar mantenimiento.

  • Evita usar !important salvo que sea estrictamente necesario.

  • Utiliza variables CSS (--nombre) para colores y fuentes.

  • Organiza tu CSS por componentes o secciones.

    • ]]>     2025-05-22 03:39:20 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462418706     Conclusión alexandrahernandez5421 https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462421667 CSS es una herramienta poderosa que permite transformar estructuras HTML simples en interfaces visualmente atractivas, intuitivas y profesionales. Dominar CSS es esencial para cualquier desarrollador web, y conocer sus fundamentos es el primer paso hacia diseños modernos, adaptables y efectivos.

    ¡Empieza hoy a experimentar con estilos y verás cómo tus páginas cobran vida!

    ]]>     2025-05-22 03:41:10 UTC https://padlet.com/alexandrahernandez5421/4ycr0cu6cgqhud6b/wish/3462421667