Skip to content

Instantly share code, notes, and snippets.

@jure-ve

jure-ve/README.md

Last active May 1, 2025 13:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jure-ve/d3418ed90d51ff99a44c1a60cb858ce3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jure-ve/d3418ed90d51ff99a44c1a60cb858ce3 to your computer and use it in GitHub Desktop.
Download ZIP
Estudiando Estilos: Introducción a CSS con Ejemplos
Raw
README.md

Ejemplos de CSS Esencial: Introducción a CSS con Ejemplos

¡Bienvenido/a a los ejemplos prácticos de la guía "Estudiando Estilos: Introducción a CSS con Ejemplos"! Este Gist contiene los archivos index.html y styles.css con todos los ejemplos de código presentados en el artículo de mi blog, diseñado para ayudarte a dar tus primeros pasos en CSS.

¿Qué encontrarás aquí?

Este repositorio incluye:

  • index.html: Un archivo HTML que contiene los elementos de los ejemplos del artículo, desde vincular CSS hasta crear layouts con Flexbox y Grid, pasando por transiciones, accesibilidad y más.
  • styles.css: El archivo CSS con los estilos correspondientes, organizados para que coincidan con las 13 secciones de la guía, desde selectores básicos hasta la metodología BEM.

Estos ejemplos están pensados para principiantes que quieren aprender los fundamentos de CSS de forma práctica. Puedes copiarlos, modificarlos y experimentar con ellos para entender cómo funcionan los estilos en la web.

Cómo usar los ejemplos

  1. Copia los archivos:

    • Haz clic en los archivos index.html y styles.css en este (Gist).
    • Copia el contenido de cada archivo.

  2. Crea tu proyecto local:

    • Crea una carpeta en tu computadora (por ejemplo, css-esencial).
    • Crea dos archivos: index.html y styles.css.
    • Pega el contenido copiado en los archivos correspondientes.

  3. Abre el proyecto:

    • Abre index.html en tu navegador (haz doble clic o usa un servidor local como Live Server en VS Code).
    • Verás los ejemplos en acción, desde un título estilizado hasta una cuadrícula con CSS Grid.

  4. ¡Experimenta!:

    • Abre los archivos en tu editor de código favorito (como VS Code, Sublime Text o Notepad++).
    • Cambia colores, tamaños, posiciones o cualquier propiedad CSS para ver cómo afectan los resultados.
    • No tengas miedo de romper algo: ¡es parte del aprendizaje!

Contexto del artículo

Estos ejemplos acompañan la guía Estudiando Estilos: Introducción a CSS con Ejemplos en mi blog, donde explico los fundamentos de CSS de forma clara y práctica. La guía cubre:

  • Vincular CSS a HTML.
  • Selectores básicos (ID y clase).
  • Unidades de medida y diseño responsivo.
  • El modelo de caja (Box Model).
  • Fondos, posicionamiento, Flexbox, Grid, pseudoclases, animaciones, accesibilidad, variables CSS y organización con BEM.

Si quieres entender el "por qué" detrás de cada ejemplo, lee el artículo completo en Estudiando Estilos: Introducción a CSS con Ejemplos.

Requisitos

  • Un navegador web moderno (Chrome, Firefox, Edge, Safari, etc.).
  • Un editor de código (opcional, pero recomendado para modificar los ejemplos).
  • ¡Ganas de aprender y experimentar!

¿Qué hacer después?

  • Prueba los ejemplos: Cambia valores en styles.css (por ejemplo, colores, márgenes o propiedades de Flexbox) y observa los resultados en el navegador.
  • Crea tus propios diseños: Usa lo aprendido para estilizar una tarjeta, una barra de navegación o una página completa.
  • Sigue aprendiendo: Revisa los recursos recomendados en el artículo, como MDN Web Docs o Flexbox Froggy.
  • Comparte tus ideas: Si pruebas estos ejemplos o creas algo nuevo, ¡deja un comentario en mi blog o contáctame para compartir tus resultados!

Notas

  • Los ejemplos están diseñados para ser simples y fáciles de entender, siguiendo las mejores prácticas de CSS.
  • Algunos ejemplos usan imágenes de fondo desde un servicio externo (https://via.placeholder.com). Si no cargan, puedes reemplazarlas por tus propias imágenes.
  • Si encuentras algún problema o tienes sugerencias, contáctame a través de mi blog o en este Gist.

Licencia

Este código es de uso libre para fines educativos. Siéntete libre de copiarlo, modificarlo y compartirlo, siempre que menciones la fuente Estudiando Estilos: Introducción a CSS con Ejemplos.

¡Diviértete estudiando estilos con CSS! Espero que estos ejemplos te inspiren a crear diseños web increíbles. 🚀

Visita mi blog para más guías sobre desarrollo web.

Raw
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Guía Práctica de CSS para Principiantes - Ejemplos</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h1>Guía Práctica de CSS para Principiantes</h1>
<section id="vincular-css">
<h2>1. Cómo Vincular CSS a HTML</h2>
<p>
Para aplicar estilos CSS a tu página web de forma organizada y reutilizable, la práctica recomendada es enlazar un archivo CSS externo (con extensión `.css`) dentro de la sección `<head>` de tu documento HTML. Esto se hace usando la etiqueta `<link>`.
<br/>
<br/>
Hemos separado los estilos de esta guía en un archivo llamado <code>styles.css</code> y lo enlazamos en la sección <code>&lt;head&gt;</code> de esta página, como se muestra en el código de ejemplo para copiar de tu artículo.
</p>
<div class="example-box" style="text-align: center; color: red;">
Este texto simula un ejemplo simple con estilos aplicados desde styles.css.
</div>
</section>
<section id="selectores-basicos">
<h2>2. Selectores Básicos: ID y Clase</h2>
<p>
Los selectores te permiten elegir a qué elementos HTML aplicar estilos. Usa el selector <code>#</code> para seleccionar un elemento único mediante su atributo <code>id</code>, y el selector <code>.</code> para aplicar estilos a uno o varios elementos que comparten una misma <code>class</code>.
</p>
<div class="example-box">
<div id="principal">Este es un div con ID (#principal)</div>
<p class="resaltado">Párrafo resaltado 1 (.resaltado)</p>
<p class="resaltado">Párrafo resaltado 2 (.resaltado)</p>
</div>
</section>
<section id="unidades-medida">
<h2>3. Unidades de Medida y Diseño Responsivo</h2>
<p>
Existen diferentes unidades para definir tamaños y distancias. Para un diseño que se adapte a diferentes pantallas (diseño responsivo), es preferible usar unidades relativas como <code>em</code>, <code>rem</code>, <code>%</code>, <code>vw</code> (porcentaje del ancho de la ventana) y <code>vh</code> (porcentaje del alto de la ventana), en lugar de unidades absolutas como <code>px</code>.
</p>
<div class="example-box">
<p class="text-rem">Texto con tamaño relativo (2rem)</p>
<div class="box-vw-vh">
Caja con tamaño relativo a la ventana (50vw x 20vh)
</div>
</div>
</section>
<section id="box-model">
<h2>4. Margen y Relleno (Box Model)</h2>
<p>
Todo elemento HTML se considera una caja. El Box Model describe cómo se calcula el espacio de un elemento: <code>content</code>, <code>padding</code> (espacio *dentro* del borde), <code>border</code> (la línea del borde) y <code>margin</code> (espacio *fuera* del borde). <code>margin</code> crea espacio entre elementos, mientras que <code>padding</code> crea espacio entre el contenido y el borde.
</p>
<div class="example-box caja">Caja con margen (exterior) y padding (interior)</div>
</section>
<section id="fondos">
<h2>5. Fondos y Estilos Básicos</h2>
<p>
Puedes aplicar colores, imágenes o gradientes como fondo a los elementos. Propiedades como <code>background-image</code>, <code>background-size</code> (<code>cover</code>, <code>contain</code>, etc.) y <code>background-position</code> te dan control sobre cómo se muestra el fondo.
</p>
<div class="example-box fondo"></div>
</section>
<section id="posicionamiento">
<h2>6. Posicionamiento de Elementos</h2>
<p>
La propiedad <code>position</code> controla cómo se coloca un elemento en la página. Los tipos básicos son <code>static</code> (flujo normal, por defecto), <code>relative</code> (posicionado en relación a su posición original), <code>absolute</code> (posicionado en relación al contenedor posicionado más cercano) y <code>fixed</code> (posicionado en relación a la ventana del navegador, no se mueve al hacer scroll).
</p>
<p>Ejemplo con posición relativa y absoluta:</p>
<div class="example-box contenedor">
<div class="absoluto">Posición absoluta</div>
Este es el contenido del contenedor relativo.
</div>
</section>
<section id="flexbox">
<h2>7. Layouts Modernos con Flexbox</h2>
<p>
Flexbox (Flexible Box Layout) es un modelo de diseño unidimensional que facilita la alineación y distribución de elementos (ítems flex) dentro de un contenedor (contenedor flex), incluso si su tamaño es desconocido o dinámico. Es muy útil para crear barras de navegación, tarjetas, formularios, etc.
</p>
<div class="example-box flex-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</section>
<section id="css-grid">
<h2>8. Layouts Avanzados con CSS Grid</h2>
<p>
CSS Grid Layout es un modelo de diseño bidimensional que permite crear layouts complejos en filas y columnas de forma sencilla y potente. Es ideal para la estructura principal (esqueleto) de una página, pero también útil para componentes.
</p>
<div class="example-box grid-container">
<div>1</div><div>2</div><div>3</div>
<div>4</div><div>5</div><div>6</div>
</div>
</section>
<section id="pseudoclases-pseudoelementos">
<h2>9. Pseudoclases y Pseudoelementos</h2>
<p>
Permiten aplicar estilos a elementos basándose en un estado especial (Pseudoclases, ej: cuando se pasa el mouse por encima) o para añadir/dar estilo a partes de un elemento que no están definidas explícitamente en el HTML (Pseudoelementos, ej: añadir un icono antes de un párrafo).
</p>
<div class="example-box">
<a href="#" class="link-example">Enlace con pseudoclase (:hover) y pseudoelemento (::before)</a>
</div>
</section>
<section id="animaciones-transiciones">
<h2>10. Animaciones y Transiciones</h2>
<p>
* **Transiciones:** Permiten cambiar suavemente el valor de una o varias propiedades CSS durante un período de tiempo al haber un cambio de estado (ej: `:hover`, `:focus`). Se definen con la propiedad <code>transition</code>.
* **Animaciones:** Permiten crear secuencias de estilos más complejas usando <code>@keyframes</code> y la propiedad <code>animation</code>.
<br/>
Aquí vemos un ejemplo simple con una transición al pasar el mouse sobre un botón:
</p>
<div class="example-box">
<button class="btn-transition">Botón con transición al pasar el mouse</button>
</div>
</section>
<section id="variables-css">
<h2>11. Variables CSS (Propiedades Personalizadas)</h2>
<p>
Las Variables CSS, también llamadas Propiedades Personalizadas, te permiten definir valores reutilizables (como colores, tamaños de fuente, espaciados, etc.) en un solo lugar y usarlos en múltiples reglas CSS. Esto hace que tu código sea mucho más fácil de mantener, actualizar y entender. Se definen con <code>--nombre-variable</code> y se usan con la función <code>var(--nombre-variable)</code>.
<br/><br/>
Este tema es más conceptual en cuanto a la organización del código. El "ejemplo visual" aquí es ver cómo se declara y se usa la variable en el CSS para afectar un elemento simple:
</p>
<div class="example-box">
<div class="uses-variable">Este elemento usa una variable CSS para su color y borde.</div>
<p style="color: var(--color-principal, steelblue); font-weight: bold; margin-top: 15px;">Este texto también usa la misma variable.</p>
</div>
</section>
<section id="accesibilidad">
<h2>12. Buenas Prácticas de Accesibilidad en CSS</h2>
<p>
La accesibilidad (a11y) se trata de asegurar que tu sitio web pueda ser usado por la mayor cantidad de personas posible, incluyendo aquellas con discapacidades (visuales, auditivas, motoras, cognitivas, etc.). En CSS, esto implica:
<ul>
<li>**Contraste suficiente:** Usar colores de texto y fondo con una diferencia de contraste adecuada.</li>
<li>**No depender solo del color:** No usar únicamente el color para transmitir información importante.</li>
<li>**Texto escalable:** Usar unidades relativas (<code>rem</code>, <code>em</code>) para los tamaños de fuente.</li>
<li>**Indicadores de foco visibles:** Asegurar que los elementos interactivos tengan un estilo claro cuando se navega con el teclado (estado <code>:focus</code>).</li>
</ul>
<br/>
Este es un tema más basado en principios y la estructura general del código que en un ejemplo visual único y aislado.
</p>
<div class="example-box" style="background-color: #f0f0f0; color: #333;">
<p style="color: #e74c3c; font-weight: bold;">Esto es un mensaje de error (ejemplo de color).</p>
<p style="color: #2ecc71; font-weight: bold;">Esto es un mensaje de éxito (ejemplo de color).</p>
<p>Navega con el teclado (tecla Tab) para ver el indicador de foco en el enlace de descarga al final.</p>
</div>
</section>
<section id="organizacion">
<h2>13. Organización y Escalabilidad del Código CSS</h2>
<p>
A medida que tus proyectos CSS crecen, se vuelve indispensable organizarlos para que sean fáciles de entender, mantener y escalar. Metodologías como BEM (Block, Element, Modifier) son una forma popular de nombrar clases de manera consistente para indicar la relación entre los elementos y su propósito.
</p>
<div class="example-box">
<div class="card card--highlighted">
<h3 class="card__title">Título de la Tarjeta (Block__Element)</h3>
<p class="card__description">Esta es una descripción corta de la tarjeta (Block__Element).</p>
</div>
<div class="card">
<h3 class="card__title">Otra Tarjeta Normal</h3>
<p class="card__description">Ejemplo de una tarjeta sin el modificador.</p>
</div>
</div>
</section>
<section id="recursos-practica">
<h2>Recursos para la Práctica y Próximos Pasos</h2>
<p>¡Felicidades por llegar hasta aquí! Dominar CSS requiere práctica. Te animo a:</p>
<ul>
<li>Descargar los ejemplos de esta guía y modificarlos.</li>
<li>Probar a crear pequeños componentes o páginas simples usando lo aprendido.</li>
<li>Explorar los siguientes recursos para profundizar:</li>
<ul>
<li><a href="https://developer.mozilla.org/es/docs/Web/CSS" target="_blank" rel="noopener noreferrer">MDN Web Docs (Referencia completa de CSS)</a></li>
<li><a href="https://flexboxfroggy.com/es/" target="_blank" rel="noopener noreferrer">Flexbox Froggy (Juego para practicar Flexbox)</a></li>
<li><a href="https://cssgrid.io/" target="_blank" rel="noopener noreferrer">CSS Grid.io (Recursos y juego para practicar Grid)</a></li>
<li><a href="https://css-tricks.com/" target="_blank" rel="noopener noreferrer">CSS-Tricks (Artículos y guías avanzadas)</a></li>
</ul>
</ul>
</section>
</div> </body>
</html>
Raw
styles.css
/*
* Estilos para la Guía Práctica de CSS para Principiantes
* Archivo: styles.css
* Contiene todos los estilos para la presentación de la guía
* y los estilos de ejemplo para cada sección.
*/
/* Definición de Variables CSS (Propiedades Personalizadas) - Punto 11 */
:root {
--color-principal: #3498db; /* Azul */
--color-secundario: #2ecc71; /* Verde */
--color-resaltado: #f39c12; /* Naranja/Amarillo */
--color-fondo-guia: #f4f7f6;
--color-fondo-seccion: white;
--color-texto-oscuro: #333;
--color-texto-claro: #f8f8f2;
--color-codigo-fondo: #272822; /* Fondo oscuro para código */
--sombra-ligera: 0 2px 4px rgba(0,0,0,0.1);
--sombra-media: 0 4px 8px rgba(0,0,0,0.08);
--espaciado-base: 15px;
--espaciado-seccion: 30px;
}
/* Estilos generales para el cuerpo y la estructura de la guía */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0; /* Reset margin */
padding: var(--espaciado-base);
background-color: var(--color-fondo-guia);
color: var(--color-texto-oscuro);
display: flex;
flex-direction: column;
align-items: center; /* Centrar horizontalmente el contenido del body */
}
.container {
max-width: 800px; /* Ancho máximo para el contenido principal */
width: 100%;
/* Asegura que el margen/padding no afecte el ancho total en pantallas pequeñas */
box-sizing: border-box;
}
h1, h2 {
color: var(--color-texto-oscuro);
margin-top: 0; /* Eliminar margen superior por defecto */
}
h1 {
text-align: center;
margin-bottom: 40px;
color: var(--color-principal); /* Usando un color destacado de variable */
}
h2 {
margin-bottom: var(--espaciado-base);
padding-bottom: 5px;
border-bottom: 2px solid #eee;
color: var(--color-principal); /* Títulos de sección con color principal */
}
section {
background: var(--color-fondo-seccion);
padding: var(--espaciado-base);
margin-bottom: var(--espaciado-seccion);
border-radius: 8px;
box-shadow: var(--sombra-media); /* Sombra definida por variable */
border-left: 5px solid var(--color-principal); /* Línea de color de variable */
}
pre {
background: var(--color-codigo-fondo);
color: var(--color-texto-claro);
padding: var(--espaciado-base);
border-radius: 5px;
overflow-x: auto; /* Desplazamiento horizontal si el código es muy largo */
font-size: 0.9em;
line-height: 1.4;
margin-top: var(--espaciado-base); /* Espacio arriba del bloque de código */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera 7 */
white-space: -o-pre-wrap; /* Opera 4-6 */
word-wrap: break-word; /* IE */
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* Fuentes monoespaciadas */
}
.code-block-title {
font-weight: bold;
margin-top: 20px;
margin-bottom: 5px;
color: #555; /* Un color para los títulos de bloque de código */
font-size: 0.95em;
}
.example-box {
background: #ecf0f1; /* Fondo claro para ejemplos */
padding: var(--espaciado-base);
margin: var(--espaciado-base) 0; /* Espacio arriba y abajo */
border-radius: 5px;
border: 1px solid #bdc3c7;
}
.btn-download {
display: block;
width: 250px;
margin: 40px auto;
padding: var(--espaciado-base) 25px;
background-color: var(--color-secundario); /* Color verde de variable */
color: white;
text-align: center;
font-weight: bold;
border-radius: 6px;
text-decoration: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
transition: background-color 0.3s ease;
}
.btn-download:hover {
background-color: #27ae60; /* Verde más oscuro al pasar el mouse */
}
/* --- Estilos Específicos para los Ejemplos (corresponden a cada sección) --- */
/* Punto 2: Selectores */
#principal {
font-weight: bold;
color: blue;
}
.resaltado {
background-color: yellow;
}
/* Punto 3: Unidades de Medida */
.text-rem {
font-size: 2rem; /* 2 veces el tamaño de fuente raíz */
}
.box-vw-vh {
width: 50vw; /* 50% del ancho de la ventana */
height: 20vh; /* 20% del alto de la ventana */
background-color: lightblue;
border-radius: 6px;
text-align: center;
/* line-height para centrar texto verticalmente en este caso (igual al height) */
line-height: 20vh;
box-sizing: border-box; /* Incluir padding y border en width/height */
padding: 5px; /* Pequeño padding para que el texto no toque los bordes */
}
/* Punto 4: Margen y padding */
.caja {
background-color: lightgreen;
margin: 20px;
padding: 15px;
border: 2px solid green;
}
/* Punto 5: Fondos */
.fondo {
width: 300px;
height: 200px;
background-image: url('https://via.placeholder.com/300x200/aaddff/000000?text=Fondo+Ejemplo'); /* Usando un placeholder con texto */
background-size: cover;
background-position: center;
border-radius: 6px;
margin: 10px auto; /* Centrar el div si su contenedor es más ancho */
border: 1px solid #ccc;
}
/* Punto 6: Posicionamiento */
.contenedor {
position: relative;
width: 300px;
height: 150px;
background: #eee;
margin: 15px auto; /* Centrar */
border-radius: 6px;
border: 1px solid #ccc;
overflow: hidden; /* Ocultar cualquier cosa que se salga (útil en relative) */
}
.absoluto {
position: absolute;
top: 10px;
right: 10px;
background: coral;
padding: 5px;
border-radius: 4px;
color: white;
font-weight: bold;
font-size: 0.9em;
}
/* Punto 7: Flexbox */
.flex-container {
display: flex;
justify-content: space-around; /* Espacio alrededor de los ítems */
align-items: center; /* Centrar ítems verticalmente en el cross-axis */
background-color: #ddd;
padding: 10px;
border-radius: 6px;
margin: 15px 0;
flex-wrap: wrap; /* Permitir que los ítems salten de línea en pantallas pequeñas */
}
.flex-container > div {
background-color: #aaa;
padding: 15px; /* Reducir padding un poco */
border-radius: 4px;
color: white;
font-weight: bold;
margin: 5px; /* Añadir un pequeño margen a los ítems */
min-width: 80px; /* Ancho mínimo para evitar que se aplasten demasiado */
text-align: center;
}
/* Punto 8: Grid */
.grid-container {
display: grid;
/* 3 columnas de igual tamaño flexible */
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Responsive grid */
gap: 10px; /* Espacio entre celdas */
margin: 15px 0;
}
.grid-container > div {
background-color: #8bc34a;
padding: 20px;
text-align: center;
border-radius: 6px;
color: white;
font-weight: bold;
}
/* Punto 9: Pseudoclases y pseudoelementos */
.link-example { /* Usar una clase diferente para evitar conflictos */
text-decoration: none;
color: var(--color-principal); /* Usando variable */
font-weight: bold;
transition: color 0.3s ease; /* Transición para el hover */
}
.link-example:hover {
color: red; /* Cambia a rojo al pasar el mouse */
text-decoration: underline; /* Opcional: subrayar al pasar el mouse */
}
.link-example::before {
content: "👉 "; /* Inserta un icono/texto antes del contenido */
font-size: 0.9em; /* Hacer el icono un poco más pequeño */
}
/* Punto 10: Animaciones y transiciones */
.btn-transition { /* Usar una clase diferente */
background-color: var(--color-principal); /* Usando variable */
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease; /* Transición en background, transform y shadow */
font-size: 1rem;
margin-top: 10px;
display: inline-block;
font-weight: bold;
box-shadow: var(--sombra-ligera); /* Sombra suave por defecto */
}
.btn-transition:hover {
background-color: #2980b9; /* Azul más oscuro al pasar el mouse */
transform: translateY(-2px); /* Pequeño desplazamiento hacia arriba */
box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra al pasar el mouse */
}
.btn-transition:active {
background-color: #1f618d; /* Azul aún más oscuro al hacer click */
transform: translateY(0); /* Vuelve a la posición original */
box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Sombra menor al hacer click */
}
/* Punto 11: Variables CSS (Estilos que USAN las variables) */
.uses-variable {
color: var(--color-principal, steelblue); /* Usa la variable, con fallback */
border: 1px solid var(--color-principal, steelblue);
padding: 10px;
margin: 10px 0;
border-radius: 4px;
display: inline-block; /* Para que se vea la caja */
box-shadow: var(--sombra-ligera); /* Usando otra variable para la sombra */
}
/* Punto 12: Accesibilidad (Ejemplos de estilos accesibles) */
/* Asegurar buen contraste y texto escalable en el cuerpo (ya en estilos generales, pero se puede enfatizar) */
/* body {
background-color: white;
color: #222;
font-size: 1rem;
line-height: 1.5;
} */
/* Indicador de foco visible para accesibilidad con teclado */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
outline: 2px solid blue; /* Un contorno azul claro es común y visible */
outline-offset: 2px; /* Separa el contorno del borde del elemento */
}
/* Ejemplo de no depender solo del color */
.error-message {
color: #e74c3c; /* Color para indicar error (usando variable o valor directo) */
font-weight: bold; /* Usar negrita además del color */
/* Puedes añadir un icono con ::before o texto adicional */
}
.success-message {
color: var(--color-secundario); /* Color para éxito */
font-weight: bold;
}
/* Punto 13: Organización BEM */
.card {
padding: var(--espaciado-base);
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: var(--espaciado-base);
background-color: #fff; /* Fondo blanco por defecto */
box-shadow: var(--sombra-ligera); /* Sombra ligera */
}
.card--highlighted { /* Modificador */
border-color: var(--color-resaltado); /* Borde naranja de variable */
background-color: #fcf8e3; /* Fondo amarillo claro */
box-shadow: var(--sombra-media); /* Sombra media */
}
.card__title { /* Elemento */
font-weight: bold;
margin-top: 0;
margin-bottom: 8px;
color: var(--color-texto-oscuro);
}
.card__description { /* Elemento */
font-size: 0.95em;
color: #555;
margin-bottom: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment