El Pincel del Ninja: Selectores, propiedades y valores

“HTML es el esqueleto. CSS es la piel, músculos y armadura.” - Arte del Frontend

🎯 Objetivo Ninja

Escribirás CSS profesional con selectores precisos. Transformarás HTML plano en diseño épico.

🏯 Teoría

CSS = Cascading Style Sheets (Hojas de Estilo en Cascada)

Sintaxis:

selector {
  propiedad: valor;
  otra-propiedad: valor;
}

⚔️ Implementación

Tres Formas de Aplicar CSS

<!-- 1. Inline (NO recomendado) -->
<p style="color: red;">Texto rojo</p>

<!-- 2. Internal (en <head>) -->
<style>
  p { color: blue; }
</style>

<!-- 3. External (archivo .css) - RECOMENDADO -->
<link rel="stylesheet" href="styles.css">

Selectores Básicos

/* Elemento */
p { color: red; }

/* Clase (puede repetirse) */
.ninja { font-weight: bold; }

/* ID (único) */
#header { background: black; }

/* Universal */
* { margin: 0; }

/* Múltiples selectores */
h1, h2, h3 { font-family: Arial; }

Selectores Avanzados

/* Descendiente (todos los p dentro de div) */
div p { color: blue; }

/* Hijo directo */
div > p { color: green; }

/* Hermano adyacente */
h1 + p { margin-top: 0; }

/* Atributo */
input[type="text"] { border: 1px solid gray; }

/* Pseudo-clases */
a:hover { color: red; }
li:first-child { font-weight: bold; }
tr:nth-child(even) { background: #f0f0f0; }

/* Pseudo-elementos */
p::first-letter { font-size: 2em; }
p::before { content: "→ "; }

Propiedades Comunes

.ninja {
  /* Color */
  color: #333;
  background-color: #fff;
  
  /* Texto */
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  line-height: 1.5;
  
  /* Tamaño */
  width: 300px;
  height: 200px;
  max-width: 100%;
  
  /* Espaciado */
  margin: 10px;
  padding: 20px;
  
  /* Borde */
  border: 2px solid #000;
  border-radius: 8px;
  
  /* Display */
  display: block;
  visibility: hidden;
  opacity: 0.5;
}

Cascada y Especificidad

/* Menos específico */
p { color: blue; }          /* Especificidad: 1 */

/* Más específico */
.intro { color: red; }      /* Especificidad: 10 */
#main { color: green; }     /* Especificidad: 100 */

/* Override (evitar) */
p { color: yellow !important; }

Orden de prioridad:

  1. !important (evitar)
  2. Inline styles
  3. IDs
  4. Clases/atributos/pseudo-clases
  5. Elementos

🎯 Reto Ninja

MISIÓN DE ESTILOS

🎨 La Card del Shinobi

1

Crea un archivo estilos.css y vincúlalo a tu HTML usando la etiqueta <link> en el <head>.

2

Selecciona la clase .card y dale un ancho máximo de 300px, un borde sólido y un border-radius de 8px.

3

Usa el selector .card-title para cambiar el color del título a tu azul favorito y aumentar su tamaño.

4

Añade padding interno a la card para que el contenido no toque los bordes.

5

Estiliza el enlace .card-link para que cambie de color cuando pases el mouse por encima (:hover).

Consejo del Sensei: ¡Prefiere siempre las clases! Los IDs son muy específicos y pueden causarte problemas de cascada en el futuro.

🔓 Pergamino Oculto

Variables CSS (Custom Properties)

:root {
  --color-primario: #3498db;
  --espaciado: 20px;
}

.ninja {
  background: var(--color-primario);
  padding: var(--espaciado);
}

Combinadores Complejos

/* Todos los hermanos siguientes */
h1 ~ p { color: gray; }

/* Has (selector padre - moderno) */
div:has(> img) { border: 1px solid; }

/* Not */
li:not(.destacado) { opacity: 0.6; }

✅ Checklist de Dominio

MAESTRÍA ALCANZADA

Pergamino del Artista

Próximo: Box Model - El secreto mejor guardado.