¿Qué es CSS?

 

CSS (Cascading Style Sheets) es el lenguaje que le da apariencia visual a una página web. Mientras que HTML es el esqueleto (la estructura), CSS es la ropa y el maquillaje: colores, tipografías, tamaños, posiciones.

La palabra cascading (en cascada) describe su principio central: los estilos se aplican en orden de prioridad, y los más específicos o los últimos declarados ganan sobre los anteriores.

 ¿Cómo funciona CSS?

Su lógica se basa en tres elementos:

  1. Selector — ¿A qué elemento HTML le aplico el estilo?
  2. Propiedad — ¿Qué aspecto quiero cambiar?
  3. Valor — ¿A qué lo cambio?
css
selector {
  propiedad: valor;
}

Por ejemplo: p { color: blue; } pinta de azul todos los párrafos.

Para explicar CSS, se puede utilizar una analogía visual: La Caja de Regalo.

  • Contenido: El regalo.

  • Padding: El papel burbuja (espacio interno).

  • Border: La caja de cartón.

  • Margin: El espacio entre mi regalo y el de otra persona.

 Anatomía de un CSS

 1. SELECTOR: ¿A quién le hablo?

Es el "sujeto" de nuestra oración. Define qué elemento de la página recibirá el estilo.

    Etiquetas HTML: Directo al elemento (ej. h1, p, img, button).

    Clases (.): Para grupos específicos (ej. .boton-inicio, .texto-destacado).

    IDs (#): Para un elemento único e irrepetible (ej. #logo-principal).

2. PROPIEDAD: ¿Qué aspecto voy a cambiar?

Es el "atributo" o característica física que queremos modificar. Siempre va dentro de llaves { }.

    Texto: color, font-size, font-family, text-align.

    Caja (Box Model): background-color, border, padding, margin.

    Dimensiones: width, height.

3. VALOR: ¿Cómo quiero que se vea?

Es la "especificación" concreta. Define la intensidad o el tipo de cambio. Siempre termina con punto y coma ;.

    Colores: Nombres (red), Hexadecimal (#FF5733) o RGB.

    Medidas: Píxeles (20px), Porcentajes (100%), Em/Rem.

    Estilos: Sólido (solid), Itálica (italic), Negrita (bold).


 
Propiedad ¿Qué hace? Ejemplo de Valor
color Cambia el color del texto. white, #4285F4
background-color Cambia el color de fondo. linear-gradient(to right, red, yellow)
font-family Define la tipografía. 'Roboto', sans-serif
font-size Ajusta el tamaño de la letra. 16px, 1.5rem
text-align Alinea el texto. center, justify, right
border Crea un borde alrededor. 2px solid #000
border-radius Redondea las esquinas. 8px, 50% (para círculos)
padding Espacio entre el texto y el borde. 20px
margin Espacio por fuera del elemento. 10px auto (centra bloques)
box-shadow Añade una sombra (efecto 3D). 5px 5px 15px rgba(0,0,0,0.3)
HERRAMIENTA EDUCATIVA

Explorador Interactivo de CSS

Aprende CSS modificando código real y viendo los resultados al instante.
Incluye conceptos clave y ejercicios.

¡Aplicado ✓
CSS editable
HTML editable
Vista previa
1
La cascada — la "C" de CSS
Cuando dos reglas contradictorias afectan al mismo elemento, gana la más específica. Si tienen igual especificidad, gana la que aparece más abajo en el archivo. Eso es la cascada.
2
El modelo de caja (Box Model)
Todo elemento HTML es una caja con 4 capas:
contenido → padding → border → margin
Controlar estas capas es la clave para manejar espacio y tamaño.
3
Selectores: quién recibe el estilo
p → selecciona etiquetas  |  .clase → selecciona por clase  |  #id → elemento único  |  a:hover → selecciona estados interactivos.
4
Herencia
Algunas propiedades como color y font-family se heredan automáticamente de padres a hijos. Otras como border o padding no se heredan.
5
Flujo y layout
Por defecto los bloques (div, p) ocupan toda la línea; los elementos en línea (span, a) fluyen junto al texto. display: flex y display: grid dan control total sobre la distribución.
En Google Sites: ve a Insertar → Incrustar y pega el código generado.
Presiona "Cargar en editor" para ver y editar cada ejercicio antes de usarlo.
01
Tarjeta de presentación
Crea un div con nombre, descripción y color de fondo. Practica padding, border-radius y font-family.
02
Botón animado
Un botón que cambia de color con :hover y escala con transition suave. Aprende estados interactivos.
03
Galería con Flexbox
Tres tarjetas alineadas con display: flex, que se reorganizan en pantallas pequeñas con flex-wrap.
04
Tipografía expresiva
Importa fuentes de Google Fonts y practica jerarquía visual con font-size, font-weight y letter-spacing.
05
Línea de tiempo
Lista vertical con border-left y puntos decorativos con ::before. Proyecto integrador de múltiples conceptos.
Explorador CSS · Herramienta educativa de código abierto