CSS / Chris Chávez by Chris Chavez https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k en-us 2025-05-23 13:18:31 UTC 2025-05-23 14:16:54 UTC hello@padlet.com Introducción al CSS marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464928396 CSS (Cascading Style Sheets) es el lenguaje que se usa para darle estilo a las páginas web.

]]> 2025-05-23 13:26:09 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464928396 ¿Cómo Seleccionamos elementos? marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464929505

  • p → todos los párrafos

  • .clase → elementos con clase

  • #id → elemento con ID

    • ]]>     2025-05-23 13:27:14 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464929505     Propiedades básicas marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464931244 color, background-color

    • font-size, font-family

    • text-align, margin, padding

    ]]>     2025-05-23 13:28:45 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464931244     FlexBox marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464936721 Flexbox es un módulo de diseño de CSS3 que permite crear diseños flexibles y responsivos en páginas web. Con Flexbox, se puede controlar la distribución y el posicionamiento de elementos de manera eficiente.

    ]]>     2025-05-23 13:33:50 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464936721     Box Model marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464948178 ¿Qué es el modelo de caja en CSS (Box Model)?


    El modelo de caja es una forma de entender cómo se construyen los elementos en una página. Cada elemento en CSS se comporta como una "caja" con 4 partes: contenido, padding (espacio interno), border (borde), y margin (espacio externo).

    ]]>     2025-05-23 13:44:44 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464948178     CSS Externo marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464949987 ¿Qué es una hoja de estilo externa y por qué se usa?


    Una hoja de estilo externa es un archivo .css separado del HTML que contiene todas las reglas de estilo. Se vincula al documento HTML con la etiqueta <link>, lo que permite mantener el diseño separado del contenido.


    Esto facilita la organización del proyecto, ya que se pueden aplicar los mismos estilos a múltiples páginas solo con un archivo CSS. También ayuda a cargar más rápido las páginas y hace que el mantenimiento sea más sencillo.


    ]]>     2025-05-23 13:45:57 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464949987     ¿Qué es un selector en CSS? marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464978064 Un selector es la parte del código CSS que indica a qué elementos HTML se le van a aplicar las reglas de estilo. Es como decirle al navegador: "Aplícale estos estilos a estos elementos".

    Por ejemplo, si usamos p { color: red; }, el selector p indica que todos los párrafos (<p>) tendrán texto rojo. Los selectores son clave para aplicar estilos de manera precisa y organizada.

    ]]>     2025-05-23 14:11:55 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464978064     Selector de Clase (.) marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464979385 ¿Cómo funciona el selector de clase (.)?


    El selector de clase se usa para aplicar estilos a uno o varios elementos que tienen el mismo nombre de clase. Se escribe con un punto seguido del nombre, como .caja.

    Esto permite reutilizar estilos sin repetir código. Por ejemplo, si tienes muchas cajas con el mismo diseño, solo necesitas poner la clase "caja" en el HTML y usar un solo bloque de CSS para todas ellas.

    ]]>     2025-05-23 14:13:08 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464979385     Selector de ID marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464980155 ¿Qué hace el selector de ID (#)?


    El selector de ID se usa para apuntar a un único elemento con un identificador único. Se escribe con # seguido del nombre del ID, como #header.

    Este tipo de selector tiene más prioridad que uno de clase, por lo que se usa cuando necesitas un estilo único. Sin embargo, no es recomendable usar muchos id si puedes resolverlo con clases, ya que limita la reutilización del código.

    ]]>     2025-05-23 14:13:50 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464980155     ¿Qué son los selectores combinados en CSS? marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464980823 Los selectores combinados permiten seleccionar elementos con más precisión. Por ejemplo, div p selecciona todos los párrafos que están dentro de un div. Otro ejemplo es ul > li, que selecciona solo los li hijos directos de una ul.

    Estos combinadores ayudan a aplicar estilos según la estructura del HTML, lo que da más control al diseño sin necesidad de añadir más clases o IDs innecesarios.

    ]]>     2025-05-23 14:14:34 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464980823     ¿Cómo funcionan los pseudo-selectores como :hover? marqueschris332 https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464982096 Los pseudo-selectores permiten aplicar estilos en estados especiales de los elementos. Uno muy común es :hover, que aplica un estilo cuando el mouse pasa por encima de un elemento.


    Por ejemplo,


    button:hover { background-color: blue; }


    cambia el color del botón solo cuando el usuario lo señala. Esto mejora la interactividad y hace que la experiencia web sea más dinámica y moderna.

    ]]>     2025-05-23 14:15:47 UTC https://padlet.com/marqueschris332/cbwlm5rinbyzlk2k/wish/3464982096