Domina el lenguaje que convierte HTML simple en experiencias visuales extraordinarias.
Se aplican directamente en el atributo style del elemento HTML. Tienen la máxima especificidad y anulan estilos de hojas internas o externas, a menos que estos usen !important.
<!-- Ejemplo de estilos en línea -->
<h1 style="color: #e74c3c; font-size: 2em; text-align: center;">
Mi Título con Estilo en Línea
</h1>
<div style="background: linear-gradient(45deg, #3498db, #2ecc71);
padding: 20px; border-radius: 10px; color: white;">
Contenido con múltiples estilos en línea.
</div>!important en hojas de estilo es otra opción, a menudo menos recomendada).
Se definen dentro de la etiqueta <style>, usualmente colocada en la sección <head> del documento HTML. Afectan solo a la página donde se declaran.
<head>
<!-- Otros elementos del head como meta tags, title, etc. -->
<style>
/* Estilos para toda la página actual */
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white; /* Asegurar contraste para el fondo oscuro */
margin: 0;
padding: 20px;
}
.tarjeta-interna { /* Clase específica para esta página */
background: white;
color: #333; /* Color de texto para la tarjeta */
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
margin-top: 20px;
}
.tarjeta-interna:hover {
transform: translateY(-5px);
transition: all 0.3s ease; /* Transición suave al pasar el ratón */
}
</style>
</head>
<!-- En el body, se usaría la clase .tarjeta-interna -->
<body>
<div class="tarjeta-interna">Contenido de la tarjeta con estilo interno.</div>
</body>
Los estilos se guardan en archivos .css separados (ej: styles.css) y se vinculan al documento HTML usando la etiqueta <link> en el <head>. Es la forma más recomendada y profesional para la mayoría de los proyectos web.
<!-- En el archivo HTML (ej: index.html) -->
<head>
<!-- Otros elementos del head -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- El atributo type="text/css" es opcional en HTML5 -->
</head>/* En el archivo CSS (ej: styles.css) */
/* :root se usa para definir variables CSS globales (custom properties) */
:root {
--color-primario: #3498db; /* Azul */
--color-secundario: #2ecc71; /* Verde */
--fuente-principal: 'Inter', sans-serif;
--espaciado-base: 1rem; /* 16px por defecto */
}
body {
font-family: var(--fuente-principal);
margin: 0;
background-color: #f0f2f5;
}
.contenedor-principal {
max-width: 1200px;
margin: 0 auto; /* Centra el contenedor */
padding: calc(var(--espaciado-base) * 2); /* Usa la variable para padding */
background-color: white;
}
.boton-primario {
background-color: var(--color-primario);
color: white;
padding: var(--espaciado-base) calc(var(--espaciado-base) * 1.5);
border: none;
border-radius: 5px;
cursor: pointer;
}
.boton-primario:hover {
background-color: darken(var(--color-primario), 10%); /* Nota: darken() no es CSS estándar, se usaría un preprocesador o un valor directo */
/* Alternativa directa: background-color: #2980b9; */
}Cada elemento HTML en una página web se representa como una "caja" rectangular. El Box Model de CSS describe cómo se dimensionan y se relacionan estas cajas. Consta de cuatro capas principales: contenido, padding, borde y margen. Entender esto es fundamental para el diseño y layout web.
margin: auto; en un bloque con ancho definido puede centrarlo horizontalmente.
border-width), estilo (border-style: solid, dashed, dotted, double, groove, ridge, inset, outset) y color (border-color).
La propiedad abreviada border combina estos tres.
box-sizing: content-box), el padding y el borde se añaden *fuera* de estas dimensiones, incrementando el tamaño total de la caja.
Con box-sizing: border-box;, el padding y el borde se incluyen *dentro* del width/height especificado.
box-sizing
.caja-completa {
/* Dimensiones del contenido por defecto (si box-sizing: content-box) */
width: 300px;
height: 150px;
/* Padding (espacio interno) */
padding: 20px; /* 20px en todos los lados */
/* Alternativas de padding: */
/* padding: 10px 20px; */ /* 10px arriba/abajo, 20px izquierda/derecha */
/* padding: 10px 15px 20px 25px; */ /* Arriba | Derecha | Abajo | Izquierda */
/* Border (borde) */
border: 5px solid #e74c3c; /* Borde rojo sólido de 5px */
border-radius: 12px; /* Esquinas redondeadas */
/* Margin (espacio exterior) */
margin: 25px auto; /* 25px arriba/abajo, centrado horizontalmente */
/* Box-sizing: Controla cómo se calcula el tamaño total del elemento.
'border-box' es altamente recomendado para un manejo más intuitivo de las dimensiones. */
box-sizing: border-box; /* Con border-box, el width (300px) y height (150px)
INCLUYEN el padding y el border.
El área de contenido real será:
width: 300px - (2*20px padding) - (2*5px border) = 250px
height: 150px - (2*20px padding) - (2*5px border) = 100px */
/* Extras visuales para la demo */
background: linear-gradient(135deg, #3498db, #2ecc71); /* Fondo degradado */
color: white; /* Color de texto */
text-align: center; /* Alineación del texto */
box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra */
}
/* Uso común al inicio de un CSS para aplicar border-box a todo: */
/*
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
*/Los selectores CSS son patrones que "seleccionan" los elementos HTML a los que se aplicarán los estilos. Dominarlos es clave para un CSS eficiente y preciso.
/* Selecciona todos los elementos <h1> */
h1 {
color: #e74c3c;
font-size: 2.5em;
}p, div, a, img). Es el selector más general.
/* Selecciona todos los elementos con class="mi-clase" */
.mi-clase {
background: #3498db;
padding: 15px;
color: white;
}class con el valor especificado (prefijado con un punto .). Un elemento puede tener múltiples clases. Es el más usado para reutilizar estilos en varios elementos.
/* Selecciona el elemento con id="mi-id-unico" */
#mi-id-unico {
position: fixed; /* Posición fija en la pantalla */
top: 0;
left: 0;
width: 100%;
background-color: #333;
}id con el valor especificado (prefijado con una almohadilla #). El ID debe ser único en toda la página. Tiene alta especificidad.
/* Selecciona TODOS los elementos de la página */
* {
box-sizing: border-box; /* Ejemplo de uso común */
margin: 0; /* Resetear márgenes (con precaución) */
}*. Usar con precaución ya que puede afectar el rendimiento si se abusa.
/* Selecciona todos los <input> de tipo "text" */
input[type="text"] {
border: 1px solid #ccc;
}
/* Selecciona enlaces que apuntan a "https.example.com" */
a[href="https.example.com"] {
color: green;
}[target], [type="submit"], [href^="https"] (comienza con), [class*="icono-"] (contiene).
div.especial p<p> que son descendientes (hijos, nietos, etc.) de un elemento <div> que tiene la clase "especial".
ul > li>)<li> que son hijos directos (primer nivel) de un elemento <ul>. No selecciona nietos.
h2 + p+)<p> que aparece inmediatamente después de un elemento <h2> y comparte el mismo padre.
h2 ~ p~)<p> que son hermanos de un elemento <h2> (aparecen después de él y comparten el mismo padre), no solo el adyacente.
article, section,)<article> Y todos los elementos <section>.
Las pseudo-clases (:hover, :focus, :nth-child()) seleccionan elementos basados en un estado especial o posición.
Los pseudo-elementos (::before, ::after, ::first-line) permiten estilizar partes específicas de un elemento o insertar contenido.
/* --- Pseudo-clases --- */
/* Estado interactivo: al pasar el ratón sobre un enlace */
a:hover {
color: #e74c3c;
text-decoration: underline;
}
/* Estado interactivo: cuando un botón está siendo presionado */
button:active {
transform: scale(0.95); /* Efecto de "hundimiento" */
}
/* Estado interactivo: cuando un input tiene el foco */
input:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
/* Pseudo-clase estructural: primer elemento de una lista */
ul li:first-child {
font-weight: bold;
color: green;
}
/* Pseudo-clase estructural: último elemento de una lista */
ul li:last-child {
font-style: italic;
color: blue;
}
/* Pseudo-clase estructural: filas pares de una tabla (ej: para zebrado) */
tr:nth-child(even) { /* o 2n */
background-color: #f8f9fa;
}
tr:nth-child(odd) { /* o 2n+1 */
background-color: #e9ecef;
}
/* Pseudo-clase de negación: todos los inputs excepto los de tipo "submit" */
input:not([type="submit"]) {
margin-bottom: 10px;
}
/* --- Pseudo-elementos --- */
/* Nota: La sintaxis moderna recomienda doble dos puntos (::) para pseudo-elementos,
aunque ::before y ::after también funcionan con uno solo por retrocompatibilidad. */
/* Estiliza la primera línea de cada párrafo */
p::first-line {
font-weight: bold;
color: #2c3e50;
}
/* Estiliza la primera letra de cada párrafo */
p::first-letter {
font-size: 2em;
float: left; /* Para efecto capitular */
margin-right: 5px;
}
/* Inserta contenido ANTES del contenido del elemento .cita */
.cita::before {
content: "“"; /* Comillas de apertura */
font-size: 1.5em;
color: #95a5a6;
margin-right: 0.2em;
}
/* Inserta contenido DESPUÉS del contenido del elemento .cita */
.cita::after {
content: "”"; /* Comillas de cierre */
font-size: 1.5em;
color: #95a5a6;
margin-left: 0.2em;
}
/* Estiliza el marcador de los elementos de lista */
ul li::marker {
color: var(--color-primario, #3498db); /* Usa variable CSS si está definida */
font-size: 1.2em;
}serif, sans-serif, monospace, cursive, fantasy).
px (píxeles, absoluto),
rem (relativo al tamaño de fuente del elemento raíz <html>),
em (relativo al tamaño de fuente del elemento padre o del propio elemento),
% (porcentaje del tamaño de fuente del padre).
También palabras clave como small, medium, large.
normal (equivale a 400), bold (equivale a 700). También se pueden usar valores numéricos de 100 a 900 (en incrementos de 100), si la fuente los soporta.
1.5) se multiplica por el font-size actual del elemento para obtener la altura de línea. Mejora la legibilidad. normal es el valor por defecto del navegador.
justify distribuye el texto para que ocupe todo el ancho. start y end dependen de la dirección del texto (LTR o RTL).
text-decoration: none; para quitar el subrayado de los enlaces (<a>). CSS3 permite más control con text-decoration-line, text-decoration-color, text-decoration-style.
red), códigos hexadecimales (#FF0000), RGB (rgb(255,0,0)), RGBA (con transparencia, rgba(255,0,0,0.5)), HSL, HSLA.
capitalize (primera letra de cada palabra en mayúscula), uppercase (todo en mayúsculas), lowercase (todo en minúsculas).
rgba permite definir un color con un canal alfa para transparencia (0 = totalmente transparente, 1 = totalmente opaco). transparent es un valor válido.
url()) o un gradiente generado por CSS (linear-gradient(), radial-gradient(), etc.).
repeat (por defecto, repite en ambas direcciones), no-repeat (no se repite), repeat-x (repite horizontalmente), repeat-y (repite verticalmente).
left, center, right, top, bottom), porcentajes o unidades de longitud.
cover (escala la imagen para cubrir todo el contenedor, puede recortar partes), contain (escala la imagen para que quepa completamente dentro del contenedor, puede dejar espacios vacíos).
/ antes). También para gradientes: linear-gradient(45deg, #ff6b6b, #4ecdc4).
1 es completamente opaco (por defecto), 0 es completamente transparente (invisible), y 0.5 es 50% translúcido.
block (ocupa todo el ancho disponible, nueva línea),
inline (ocupa solo el ancho necesario, en la misma línea),
inline-block (como inline, pero permite width/height),
flex y grid (para layouts modernos y complejos),
none (oculta el elemento y lo saca del flujo).
static (por defecto, flujo normal),
relative (desplazado relativo a su posición normal, crea contexto de apilamiento),
absolute (posicionado relativo a su ancestro posicionado más cercano o al body),
fixed (posicionado relativo a la ventana del navegador, no se mueve con el scroll),
sticky (híbrido entre relative y fixed, "pega" cuando se alcanza cierto punto de scroll).
relative, absolute, fixed, sticky) desde los bordes de su bloque contenedor de referencia. No funcionan con position: static.
z-index mayor se muestra encima de uno con un z-index menor. Solo afecta a elementos con position distinto de static. auto es el valor por defecto.
clear: both; es común para asegurar que un elemento comience debajo de cualquier elemento flotante anterior.
En Google Colab (o Jupyter Notebooks), puedes usar la "celda mágica" %%html para renderizar HTML y CSS directamente. Esto es útil para crear visualizaciones de datos enriquecidas, dashboards simples o interfaces interactivas dentro de tu notebook. Los estilos CSS se pueden incluir en línea, internamente con <style>, o incluso enlazar a archivos externos si están alojados públicamente.
El siguiente código se puede pegar en una celda de Colab que comience con %%html.
%%html
<!-- Inicio del código para Colab -->
<style>
/* Estilos generales para el contenedor del dashboard */
.dashboard-colab {
max-width: 1000px; /* Ancho máximo del dashboard */
margin: 20px auto; /* Centrado en la página del notebook */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente legible */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Fondo degradado atractivo */
border-radius: 15px; /* Bordes redondeados */
padding: 0; /* Sin padding extra en el contenedor principal */
overflow: hidden; /* Para que los bordes redondeados afecten al contenido */
box-shadow: 0 15px 35px rgba(0,0,0,0.15); /* Sombra suave */
}
/* Estilos para el encabezado del dashboard */
.dashboard-header-colab {
background: rgba(255,255,255,0.1); /* Fondo semitransparente para el header */
color: white; /* Texto blanco */
padding: 25px; /* Espaciado interno */
text-align: center; /* Texto centrado */
border-bottom: 1px solid rgba(255,255,255,0.2); /* Línea divisoria sutil */
}
/* Grid para las tarjetas de métricas */
.metrics-grid-colab {
display: grid; /* Usar CSS Grid */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Columnas responsivas */
gap: 20px; /* Espacio entre tarjetas */
padding: 25px; /* Espaciado alrededor del grid */
background: white; /* Fondo blanco para el área de métricas */
}
/* Estilos para cada tarjeta de métrica */
.metric-card-colab {
color: white;
padding: 25px;
border-radius: 12px;
text-align: center;
transform: translateY(0); /* Estado inicial para la transición */
transition: all 0.3s ease-in-out; /* Transición suave para hover */
cursor: pointer; /* Cursor de mano para indicar interactividad */
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.metric-card-colab:hover {
transform: translateY(-8px) scale(1.03); /* Elevar y escalar ligeramente al pasar el ratón */
box-shadow: 0 12px 25px rgba(0,0,0,0.2); /* Sombra más pronunciada */
}
/* Colores de fondo específicos para cada tarjeta (usando :nth-child) */
.metric-card-colab:nth-child(1) { background: linear-gradient(135deg, #667eea, #764ba2); } /* Púrpura */
.metric-card-colab:nth-child(2) { background: linear-gradient(135deg, #f093fb, #f5576c); } /* Rosa/Rojo */
.metric-card-colab:nth-child(3) { background: linear-gradient(135deg, #4facfe, #00f2fe); } /* Azul claro */
.metric-card-colab:nth-child(4) { background: linear-gradient(135deg, #43e97b, #38f9d7); } /* Verde menta */
/* Estilo para el valor numérico de la métrica */
.metric-value-colab {
font-size: 2.5em;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.2); /* Sombra de texto sutil */
}
/* Estilo para la etiqueta de la métrica */
.metric-label-colab {
font-size: 1em;
opacity: 0.9; /* Ligera transparencia */
text-transform: uppercase; /* Texto en mayúsculas */
letter-spacing: 1px; /* Espaciado entre letras */
}
/* Media query para hacer el dashboard responsivo en pantallas pequeñas */
@media (max-width: 600px) {
.metrics-grid-colab {
grid-template-columns: 1fr; /* Una columna en móviles */
padding: 15px; /* Menos padding */
}
.metric-value-colab {
font-size: 2em; /* Tamaño de fuente más pequeño para valores */
}
.dashboard-colab {
margin: 10px; /* Menor margen en móviles */
}
}
</style>
<!-- Estructura HTML del Dashboard -->
<div class="dashboard-colab">
<div class="dashboard-header-colab">
<h2 style="margin: 0; font-size: 1.8em;">📊 Analytics Dashboard (Colab)</h2>
<p style="margin: 10px 0 0; opacity: 0.9;">Métricas clave en tiempo real</p>
</div>
<div class="metrics-grid-colab">
<!-- Tarjeta de Métrica 1 -->
<div class="metric-card-colab">
<div class="metric-value-colab">1,247</div>
<div class="metric-label-colab">👥 Usuarios Activos</div>
</div>
<!-- Tarjeta de Métrica 2 -->
<div class="metric-card-colab">
<div class="metric-value-colab">$89,456</div>
<div class="metric-label-colab">💰 Ingresos Totales</div>
</div>
<!-- Tarjeta de Métrica 3 -->
<div class="metric-card-colab">
<div class="metric-value-colab">94.2%</div>
<div class="metric-label-colab">📈 Tasa de Conversión</div>
</div>
<!-- Tarjeta de Métrica 4 -->
<div class="metric-card-colab">
<div class="metric-value-colab">2.8s</div>
<div class="metric-label-colab">⚡ Tiempo de Carga</div>
</div>
</div>
</div>
<!-- Fin del código para Colab -->
Este ejemplo muestra un formulario con estilos que reaccionan al foco y a clases de validación (.valid, .invalid). La lógica de validación real requeriría JavaScript, pero aquí nos centramos en el CSS.
%%html
<!-- Inicio del código para Colab -->
<style>
/* Contenedor principal del formulario */
.form-container-colab {
max-width: 500px;
margin: 20px auto;
background: white;
border-radius: 16px;
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
overflow: hidden; /* Para que el borde redondeado afecte al header */
font-family: 'Arial', sans-serif;
}
/* Encabezado del formulario */
.form-header-colab {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 25px 30px;
text-align: center;
}
.form-header-colab h2 {
margin: 0;
font-size: 1.8em;
}
.form-header-colab p {
margin: 10px 0 0;
opacity: 0.9;
}
/* Cuerpo del formulario donde van los inputs */
.form-body-colab {
padding: 30px;
}
/* Grupo de cada label + input */
.form-group-colab {
margin-bottom: 25px;
position: relative; /* Para posibles iconos de validación */
}
/* Etiqueta del campo */
.form-label-colab {
display: block; /* Ocupa todo el ancho */
margin-bottom: 8px;
font-weight: bold;
color: #2c3e50; /* Color oscuro para la etiqueta */
}
/* Campo de entrada */
.form-input-colab {
width: 100%; /* Ocupa todo el ancho del .form-group */
padding: 12px 16px;
border: 2px solid #e0e0e0; /* Borde gris claro */
border-radius: 8px;
font-size: 16px;
transition: all 0.3s ease; /* Transición suave para foco y validación */
box-sizing: border-box; /* Importante para que el padding no aumente el ancho total */
}
.form-input-colab:focus {
outline: none; /* Quitar el outline por defecto del navegador */
border-color: #3498db; /* Borde azul al enfocar */
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); /* Sombra exterior suave */
}
/* Estilos para campos válidos (se añadiría clase .valid con JS) */
.form-input-colab.valid {
border-color: #27ae60; /* Borde verde */
background-color: rgba(39, 174, 96, 0.05); /* Fondo verde muy claro */
}
/* Estilos para campos inválidos (se añadiría clase .invalid con JS) */
.form-input-colab.invalid {
border-color: #e74c3c; /* Borde rojo */
background-color: rgba(231, 76, 60, 0.05); /* Fondo rojo muy claro */
animation: shakeInput 0.4s ease-in-out; /* Animación de "temblor" */
}
/* Animación para campos inválidos */
@keyframes shakeInput {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
75% { transform: translateX(6px); }
}
/* Botón de envío del formulario */
.form-button-colab {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea, #764ba2); /* Mismo gradiente que el header */
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.form-button-colab:hover {
transform: translateY(-3px); /* Elevar ligeramente */
box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3); /* Sombra más pronunciada */
}
.form-button-colab:active {
transform: translateY(0); /* Volver a la posición original al hacer clic */
box-shadow: 0 5px 10px rgba(102, 126, 234, 0.2);
}
</style>
<!-- Estructura HTML del Formulario -->
<div class="form-container-colab">
<div class="form-header-colab">
<h2>📝 Registro de Usuario (Colab)</h2>
<p>Completa tus datos para unirte.</p>
</div>
<div class="form-body-colab">
<!-- Campo Nombre -->
<div class="form-group-colab">
<label for="nombre" class="form-label-colab">Nombre Completo:</label>
<input type="text" id="nombre" class="form-input-colab" placeholder="Ej: Ada Lovelace" required>
</div>
<!-- Campo Email -->
<div class="form-group-colab">
<label for="email" class="form-label-colab">Correo Electrónico:</label>
<input type="email" id="email" class="form-input-colab invalid" placeholder="tu@email.com" required> <!-- Clase 'invalid' de ejemplo -->
</div>
<!-- Campo Contraseña -->
<div class="form-group-colab">
<label for="password" class="form-label-colab">Contraseña:</label>
<input type="password" id="password" class="form-input-colab valid" placeholder="Mínimo 8 caracteres" required> <!-- Clase 'valid' de ejemplo -->
</div>
<!-- Botón de Envío -->
<button type="submit" class="form-button-colab">Crear Cuenta</button>
</div> <!-- Cierre de .form-body-colab -->
</div> <!-- Cierre de .form-container-colab -->
<!-- Script opcional para demostración de validación (requiere habilitar JS en Colab si es necesario) -->
<script>
// Este es un ejemplo muy básico, la validación real sería más robusta.
const inputs = document.querySelectorAll('.form-input-colab');
inputs.forEach(input => {
input.addEventListener('blur', () => { // Al perder el foco
if (input.checkValidity()) {
input.classList.remove('invalid');
input.classList.add('valid');
} else {
input.classList.remove('valid');
input.classList.add('invalid');
}
});
});
</script>
<!-- Fin del código para Colab -->