En esta lección se explica cómo definir el estilo de las listas con CSS. Complementa una lección anterior sobre las etiquetas HTML para listas, mostrando cómo modificar su presentación visual.

Para listas no ordenadas, la propiedad list-style-type permite cambiar el marcador predeterminado (disc) por circle o square. En listas ordenadas, se puede modificar el formato de numeración usando el atributo type de HTML o list-style-type, con opciones como números, letras o números romanos.

La propiedad list-style-position controla la ubicación del marcador (inside o outside) y su efecto se ilustra con ejemplos de clases CSS. Además, list-style-image permite usar una imagen como marcador, ofreciendo más personalización visual.

La lección incluye ejemplos prácticos con código HTML y CSS, mostrando los resultados directamente en un navegador.

En esta lección se explica cómo definir con CSS el estilo de una lista. Se muestran ejemplos prácticos de cómo convertir listas de enlaces en barras de navegación, tanto verticales como horizontales.

Se detalla cómo eliminar el subrayado de los enlaces con text-decoration: none y cómo suprimir los puntos de la lista usando list-style-type: none. Para la barra vertical, se aplican reglas CSS que permiten cambiar el color de fondo de los enlaces al situar el cursor sobre ellos o cuando reciben el foco, definiendo también su tamaño, color de texto y centrado mediante padding.

Para la barra horizontal, se usan reglas similares, haciendo que los elementos de la lista se dispongan uno al lado del otro mediante flotantes, conservando el efecto visual de resaltar enlaces al pasar el cursor.

En esta lección se explica cómo definir el estilo del texto con CSS. Nos centraremos en las propiedades que comienzan con font-, incluidas en CSS1: font-family, font-style, font-variant, font-weight y font-size, así como la propiedad abreviada font.

CSS3 introduce nuevas propiedades tipográficas que permiten un ajuste fino, aunque la mayoría de los navegadores actuales no las soportan ampliamente. La resolución de los dispositivos ha aumentado, lo que hace útiles algunas de estas propiedades avanzadas.

Font-family define la familia tipográfica y puede incluir varios tipos de letra y un tipo genérico (serif, sans-serif, cursive, fantasy, monospace). Font-size especifica el tamaño del texto, font-weight el grosor, font-style el estilo (normal, italic u oblique) y font-variant permite variaciones como small-caps.

Se recomienda probar y combinar estas propiedades para lograr un diseño coherente y legible. Los estudiantes pueden usar herramientas como Mozilla Developer Network para experimentar con tipografías, tamaños y estilos.

En esta lección se explican algunas propiedades de CSS para dar estilo al texto. Tras revisar en la primera parte las propiedades con el prefijo font (font-family, font-size, font-weight, font-style y font-variant), esta lección se centra en las propiedades con el prefijo text-.

Se presentan cuatro propiedades principales: text-align, para definir la alineación del texto (left, right, center, justify); text-indent, que establece la sangría de la primera línea de un bloque de texto; text-decoration, para añadir adornos como subrayado, línea superior, tachado o parpadeo; y text-transform, que convierte el texto a mayúsculas, minúsculas o capitaliza la primera letra de cada palabra.

Se incluyen ejemplos de uso de cada propiedad para ilustrar su efecto visual.

En esta lección se explican algunas propiedades de CSS para definir el estilo del texto. Tras repasar las propiedades con prefijos font y text, se centra en cuatro propiedades: letter-spacing, word-spacing, line-height y white-space.

Letter-spacing y word-spacing controlan la separación entre caracteres y palabras, respectivamente, y pueden tomar valores negativos, por lo que su uso requiere precaución. Line-height define la altura mínima entre líneas de texto, ajustable con unidades relativas al tamaño del texto. White-space determina cómo se muestran los espacios en blanco y los saltos de línea, permitiendo valores como normal, pre, nowrap, pre-wrap y pre-line. Su aplicación puede alterar la visualización de párrafos y texto preformateado.

En esta lección se explican las novedades sobre colores en CSS3. Aunque las formas de especificar colores de CSS1 y CSS2 siguen siendo válidas, CSS3 formaliza la lista extendida de nombres de colores y añade dos novedades principales: la opacidad y el modelo de color HSL.

La opacidad se incorpora al esquema RGB mediante un cuarto canal, alpha, con valores entre 0 (totalmente transparente) y 1 (totalmente opaco). Esto permite crear colores semitransparentes sin notación hexadecimal. Por su parte, HSL define los colores mediante Matiz, Saturación y Luminosidad, ofreciendo un enfoque más intuitivo que RGB, aunque dependiente del dispositivo. El canal alpha también puede aplicarse en HSL.

Se recomienda el uso de herramientas específicas para HSL que facilitan la construcción de paletas de colores armoniosas. Además, se sugiere consultar otros vídeos relacionados para ejemplos prácticos de colores transparentes en CSS3.

En esta lección se explica cómo usar el canal alpha en CSS para modificar la transparencia de los colores y cambiar todos los colores de un diseño modificando una sola línea de código. En CSS3, el canal alpha permite valores de 0 (completamente transparente) a 1 (completamente opaco).

El ejemplo mostrado consiste en una barra de herramientas con un enlace, un cuadro de texto y un botón. Gracias al canal alpha, se puede ajustar el color de fondo y la opacidad de todos los elementos de manera uniforme. Por ejemplo, el enlace tiene un fondo blanco con transparencia 0.6, mientras que el cuadro de texto y el botón tienen transparencia 0.3. Además, se aplican efectos de transición con las pseudoclases hover y focus para todos los elementos, logrando cambios suaves en el color de fondo al interactuar con ellos.

En esta lección se explican los conceptos de cascada e herencia en CSS, fundamentales para entender cómo se aplican los estilos en una página web. CSS, que significa Cascading Style Sheet, utiliza un mecanismo de cascada que determina el estilo final de un elemento considerando diferentes reglas y valores: especificado, calculado, usado y real.

El cálculo de estilos en cascada se basa en tres fuentes de información: los estilos por defecto del navegador (agente de usuario), los estilos definidos por el usuario y los estilos del autor de la página. Cada fuente tiene un orden de prioridad que puede modificarse con el modificador !important.

Los estilos por defecto varían entre navegadores, aunque CSS 2.1 define una hoja de estilo estándar para HTML4. Los estilos del usuario permiten personalizar la visualización y mejorar la accesibilidad mediante herramientas del navegador o extensiones como Stylish. Los estilos del autor se pueden aplicar en ficheros externos, dentro de la página o directamente en un elemento con el atributo style.

Comprender estas reglas permite controlar cómo se aplican los estilos de manera coherente y consistente, evitando inconsistencias entre navegadores y optimizando la accesibilidad y la presentación de una página web.

En esta lección se explican los conceptos de cascada y herencia en CSS. La cascada determina el orden de aplicación de los estilos: primero los del agente de usuario, luego los del autor y finalmente los del usuario. Se muestra un ejemplo con un encabezado y un párrafo para analizar cómo interactúan estas hojas de estilo.

Se observa que la hoja del autor tiene prioridad sobre la del navegador, modificando el estilo predeterminado del encabezado. Luego se añade una hoja de estilo del usuario que aplica negrita y cursiva, aunque la hoja del autor sigue teniendo prioridad en algunos casos. Si se usa el modificador important en la hoja del usuario, esta adquiere prioridad sobre la del autor, mostrando la negrita aunque esta contradiga el estilo definido por el autor.

En esta lección se explican los conceptos de cascada y herencia en CSS. La cascada define el orden de aplicación de los estilos del agente de usuario, del usuario y del autor de la página web. La herencia permite que ciertas propiedades se transmitan de un elemento padre a sus hijos, aunque no todas las propiedades se heredan, lo que puede causar confusión.

Por ejemplo, el color del texto sí se hereda, mientras que el borde no. En los enlaces, que tienen un color definido por el agente de usuario, se puede usar la palabra reservada inherit para que hereden el color del elemento padre. Asimismo, con inherit se pueden heredar propiedades normalmente no heredables, y con initial se puede restablecer una propiedad a su valor por defecto.

En esta lección se explica la especificidad de las reglas en CSS. A partir de un ejemplo con una lista de cinco elementos y diversas reglas CSS aplicadas mediante identificadores, clases y estilos en línea, se analiza cómo se determina qué regla prevalece cuando varias entran en conflicto.

Se introduce el concepto de specificity o especificidad, que se calcula mediante cuatro componentes: A (estilo en línea), B (identificadores), C (clases y pseudoclases) y D (elementos y pseudoelementos). La especificidad permite predecir qué regla se aplicará en cada caso, incluso en hojas de estilo complejas con miles de líneas o múltiples CSS combinados.

Se muestra cómo aplicar este concepto en una tabla de reglas ordenadas de menor a mayor especificidad, ilustrando que los estilos en línea siempre prevalecen sobre identificadores y clases, y que los identificadores ganan frente a las clases.

Finalmente, se mencionan recursos visuales curiosos sobre la especificidad de CSS.

En esta lección se explica cómo escribir hojas de estilo CSS fáciles de leer. Destaca tres aspectos principales: el uso de espacios en blanco, los comentarios y la agrupación de selectores.

El uso adecuado de espacios, tabuladores y saltos de línea mejora la legibilidad del CSS. Existen distintas preferencias: reglas compactas en una línea, propiedades por línea, sangrías de diferente tamaño y ubicación de llaves, aunque algunos estilos son difíciles de mantener.

Los comentarios permiten organizar, documentar y probar partes del CSS, facilitando su comprensión. La agrupación de selectores permite aplicar el mismo estilo a varios elementos en una sola regla sin impedir reglas individuales en otros puntos del código.

Además, se recomienda la herramienta CSS Beautifier, que formatea el código para mejorar su lectura, permitiendo ajustar la sangría, las líneas en blanco y la ubicación de las llaves.

En esta lección se muestra cómo abordar los primeros pasos con CSS. Explica que un fichero CSS puede llegar a ser muy extenso, lo que genera problemas como reglas duplicadas, no utilizadas, propiedades heredadas desapercibidas y dificultad para localizar reglas.

Para evitar estos problemas, es fundamental organizar el CSS. Algunas estrategias incluyen ordenar reglas alfabéticamente o por aparición, separar reglas según su función, organizar propiedades de una regla alfabéticamente o de exterior a interior, y utilizar comentarios para separar secciones o desactivar propiedades temporalmente.

Se recomiendan artículos como “Consejos para organizar tus archivos CSS” y “CSS: Cómo organizar estilos” para desarrollar un estilo propio y eficiente. Además, existen herramientas que facilitan la organización y optimización del CSS: Styleneat aplica sangría automática, CleanCSS permite optimizar, reducir y ordenar selectores (con precaución) y CSS Compressor elimina contenido innecesario y muestra el porcentaje de reducción.

En esta lección se explica el modelo de caja de CSS, concepto fundamental en el diseño web. Este modelo establece que todos los elementos de bloque se representan como cajas formadas por contenido, relleno (padding), borde y margen. La anchura y altura definidas en CSS afectan solo al contenido, lo que puede generar confusión, especialmente en navegadores antiguos como Internet Explorer 6, que interpretaba las dimensiones de forma diferente según el modo de visualización. Esta inconsistencia obligó a los desarrolladores a adaptar sus hojas de estilo para distintos navegadores.

La lección también aborda el fenómeno de los márgenes colapsables, según el cual los márgenes adyacentes de dos elementos no se suman, sino que se superponen, prevaleciendo el mayor.

En esta lección se explica el modelo de caja de CSS y la propiedad box-sizing, incorporada en CSS3. Esta propiedad determina cómo se calculan las dimensiones de un elemento: content-box (solo el contenido), padding-box (contenido y relleno) y border-box (contenido, relleno y borde).

Se menciona que Internet Explorer solo admite content-box y border-box, mientras que Mozilla Firefox también acepta padding-box. A través de ejemplos prácticos, se demuestra cómo el valor de box-sizing afecta al tamaño visual de los elementos y a su disposición en la página. Con border-box, el cálculo de anchura incluye el borde y el relleno, lo que facilita el diseño de estructuras más precisas y coherentes.

La lección concluye destacando que box-sizing es una propiedad experimental cuya compatibilidad varía entre navegadores, y subraya su utilidad en el diseño adaptable.

En esta lección se explica que el color es una herramienta esencial en el diseño web, tanto por su valor estético como funcional. Permite comunicar mensajes, atraer la atención, transmitir emociones, mejorar la accesibilidad y reforzar la identidad visual de un proyecto. Su elección no debe ser arbitraria, sino coherente con los objetivos y la intención del diseño.

La teoría del color, basada en los estudios de Newton, explica cómo la luz origina los colores primarios y secundarios, representados en el círculo cromático. Estos se clasifican según su temperatura (cálidos o fríos), intensidad y propiedades como matiz, luminosidad y saturación. Existen diversas armonías cromáticas —complementarias, triadas, dobles o múltiples— que ayudan a crear combinaciones equilibradas.

El contraste es otro aspecto clave, ya sea de luminosidad, valor, saturación, temperatura o complementarios, y permite resaltar elementos y mejorar la legibilidad. Para el texto, se recomienda usar fondos claros y evitar combinaciones que dificulten la lectura o cansen la vista.

En definitiva, trabajar con color implica comprender sus relaciones y efectos visuales, experimentar con distintas opciones y mantener coherencia con el mensaje y la estética del diseño.

En esta lección se explica el significado y las connotaciones emocionales de los colores en el diseño. La psicología del color demuestra que los colores influyen en las emociones y pueden provocar reacciones en el cerebro. El blanco simboliza pureza y perfección; el naranja transmite energía, alegría y creatividad; el amarillo sugiere vitalidad, optimismo e inteligencia; y el rojo expresa pasión, fuerza y acción. El verde representa naturaleza, armonía y seguridad, mientras que el azul inspira calma, confianza y estabilidad. El púrpura se asocia con el lujo, la sabiduría y la creatividad. El gris denota equilibrio, madurez y sofisticación; el marrón, naturalidad y estabilidad; y el negro, elegancia, poder y formalidad. En conjunto, el uso adecuado del color en el diseño permite comunicar sensaciones, atraer públicos específicos y reforzar la identidad visual de un proyecto.

En esta lección se analiza el uso del color en el diseño web y las herramientas disponibles para su correcta aplicación. Explica la importancia del color como elemento comunicativo capaz de generar impacto emocional, guiar la atención del usuario y mejorar la accesibilidad. Se recomienda trabajar con una paleta limitada de entre tres y cinco colores, cuidando el equilibrio y la coherencia visual.

Asimismo, se destacan factores que influyen en la elección del color, como la temática del sitio, la imagen corporativa y las tendencias actuales. En esta lección se propone utilizar herramientas en línea que ayudan a crear, combinar y probar paletas cromáticas, así como a analizar imágenes o sitios web para identificar sus colores predominantes. También se aconseja consultar glosarios y referencias de colores HTML para facilitar la programación. En conjunto, el contenido busca fomentar un uso reflexivo, estratégico y documentado del color en el diseño web.