Acabamos de publicar un curso de 2 horas en el canal de YouTube en español de freeCodeCamp.org que te guiará paso a paso en la creación de 3 proyectos con HTML, CSS y JavaScript. Practicarás tus habilidades creando una barra de navegación responsiva con menús desplegables, un carrusel (slider), y una landing page con un modal personalizado.

Jordan Alexander Cruz García creó este curso. Jordan Alexander es desarrollador y le encanta compartir sus conocimientos y enseñar a otros sobre el asombroso mundo de CSS.

💡 Dato: El curso se enfoca en HTML y CSS pero también requiere conocimientos básicos de JavaScript para implementar la interactividad.

HTML, CSS y JavaScript

HTML significa HyperText Markup Language y CSS significa Cascading Style Sheet (hojas de estilo en cascada). Mientras que HTML proporciona la estructura y el contenido de un sitio web, CSS determina cómo se muestra el contenido. Controla los aspectos visuales del sitio web, como fuentes, colores, diseños, espacios y animaciones.

Con CSS, puedes crear fácilmente diferentes estilos y diseños para varios tamaños de pantalla y lograr que tu sitio web se vea genial en computadoras, tabletas y dispositivos móviles.

💡 Dato: Los sitios web que se adaptan a distintos tamaños de pantalla se conocen como "sitios web responsivos".

Normalmente escribimos CSS en un archivo externo al que nos referimos como "hoja de estilo". Luego, enlazamos esta hoja de estilo al archivo HTML, lo cual aplica todos los estilos a los elementos HTML correspondientes en base a los selectores y propiedades CSS.

Separar el contenido del sitio web de su presentación es muy útil. Permite que nuestro proyecto tenga una estructura más fácil de mantener y un proceso de renderizado más eficiente porque los navegadores pueden renderizar la estructura más rápidamente, mientras descargan los estilos CSS en segundo plano.

Básicamente, CSS es una herramienta esencial para crear los sitios web hermosos, visuales y fáciles de usar que vemos hoy en día.

JavaScript agrega interactividad. Convierte los elementos sencillos en elementos interactivos para crear experiencias de usuario geniales.

Proyectos de HTML, CSS y JavaScript en español

Genial. Ahora que ya sabes más sobre HTML, CSS y JavaScript, veamos los proyectos que crearás durante el curso.

Proyecto 1: Barra de Navegación

Comenzarás el curso creando una barra de navegación con menús desplegables. Esta barra de navegación será responsiva, por lo que se expandirá o encogerá para adaptarse al tamaño de la pantalla. Si la pantalla es muy pequeña, se transformará automáticamente en una barra lateral.

💡 Dato: Siempre se mostrarán las opciones principales. Cuando el usuario haga clic en "About" o "Projects", se mostrará un menú desplegable con opciones adicionales.

Version de escritorio

Aquí puedes ver la versión de escritorio.

Version móvil

Esta es la versión móvil que verás en dispositivos pequeños.

💡 Dato: Esta técnica de ocultar y alternar la barra de navegación se utiliza con mucha frecuencia para optimizar al máximo el espacio disponible para el contenido.

Proyecto 2: Carrusel

Luego, crearás un carrusel (slider) con tres posiciones que cambiarán cuando el usuario haga clic en las flechas. Cada posición tendrá un título, un párrafo breve y una imagen circular.

💡Dato: Los controles deslizantes son útiles para compartir comentarios, citas y reseñas de los usuarios.

Proyecto 3: Landing Page

Finalmente, crearás una landing page (página web principal) paso a paso con CSS Grid.

Cuando el usuario haga clic en "Join us", se mostrará una ventana modal personalizada. Implementarás este modal con HTML, CSS y JavaScript paso a paso.

Te invitamos a ver el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por Jordan Alexander Cruz Garcia.

• YouTube: @AlexCGDesign
• Twitter: @alexcgdesign
• Linkedin: Jordan Alexander Cruz Garcia
• Instagram: @alexcg_design
• GitHub: AlexCGDesign
• Web Development Blog: https://www.alexcgdesign.com/blog

¿Cómo se puede detectar el modo oscuro en CSS y JavaScript? ¿Cómo puedes anularlo manualmente con un botón de alternancia? ¿Y cómo se puede crear un ícono de sol y luna con SVG?

En este tutorial, aprenderá cómo detectar el modo oscuro en CSS y JavaScript, y creará un botón de alternancia con SVG para anular el comportamiento predeterminado. Utilizará HTML, CSS y JavaScript sin formato, por lo que no necesita ningún requisito preliminar antes de comenzar.

También puedes ver este artículo como vídeo en YouTube.

Tabla de contenido

• Cómo manejar el modo oscuro con CSS
• Cómo codificar un icono de sol con SVG
• Cómo detectar el modo oscuro en JavaScript
• Cómo codificar un icono de luna con SVG
• Cómo alternar el modo oscuro con JavaScript
• Próximos pasos

Cómo manejar el modo oscuro con CSS

Supongamos que tiene un sitio web sencillo con algo de texto. De forma predeterminada, configura el color del texto en negro y el color de fondo en blanco. Implementar el modo oscuro para este sitio con CSS es muy sencillo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Dark Mode</title>
    <link rel="stylesheet" href="index.css" />
    <script src="index.js" defer></script>
  </head>

  <body>
    <p>
      How to detect dark mode in CSS and in JavaScript? How can we override it
      manually with a toggle button? In this quick tutorial, we look into
      detecting dark mode in CSS and JavaScript, and then we create a toggle
      button with SVG to override the default behavior.
    </p>
  </body>
</html>

Todo lo que necesitas hacer es agregar una consulta de medios y establecer una condición. Con esta condición, configura las siguientes declaraciones CSS para que solo sean válidas si el esquema de color preferido es oscuro.

Dentro de esta consulta de medios, puede definir los colores para el modo oscuro. En este caso, inviertes los colores y estableces el color del texto en blanco y el color de fondo en negro:

body {
  font-family: Montserrat;
  margin: 50px;
  max-width: 500px;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Esto tomará la configuración de su sistema operativo o configuración del navegador. De forma predeterminada, proviene del sistema operativo, pero el navegador puede decidir anularlo. En Google Chrome, puede encontrar esta configuración en "Apariencia". De forma predeterminada, sigue la configuración del dispositivo.

Lo bueno de la solución CSS es que si cambia esta configuración mientras visita el sitio web, el estilo se actualizará automáticamente.

De esta manera, puede establecer un estilo personalizado para el elemento del cuerpo y también para cualquier otro elemento.

Sin embargo, en un caso no funciona. No puedes diseñar lo que hay dentro de un elemento HTML Canvas con CSS. Si creaste un juego completamente desde JavaScript usando Canvas API o Three.js, también debes configurar los colores para el modo oscuro en JavaScript.

En los próximos pasos, cubriremos esto y veremos cómo crear un botón de alternancia SVG para cambiar entre los modos claro y oscuro.

Cómo codificar un icono de sol con SVG

Antes de aprender a manejar el modo oscuro en JavaScript, hagamos un desvío rápido y veamos cómo codificar un botón de alternancia del modo oscuro con SVG. Detectar el modo oscuro es una cosa, pero debes permitir al usuario alternar manualmente entre los modos claro y oscuro.

Consulte mi tutorial anterior si necesita una introducción rápida a la codificación de iconos SVG . Contiene muchos ejemplos excelentes, desde niveles principiantes hasta avanzados. Y si eres nuevo en los SVG, no te preocupes. Estos son ejemplos muy simples.

Entonces, comencemos con el svgelemento. Esto servirá como contenedor para todos los elementos de la imagen. Establezca su tamaño en 30 por 30:

Luego, agrega un círculo. Para un circleelemento, debes establecer las coordenadas centrales del círculo y su radio. Las coordenadas centrales son 15 y el radio es 6. Luego, establece un color con la fillpropiedad:

<svg width="30" height="30">
  <circle cx="15" cy="15" r="6" fill="currentColor" />
</svg>

Para establecer el color, puede utilizar la currentColorpropiedad que asume la colorconfiguración actual de CSS. Esto será útil más adelante cuando alterne los modos oscuro y claro. El icono cambiará de color automáticamente.

Luego, agrega los rayos del sol. Debe usar el lineelemento para esto, donde debe establecer las coordenadas inicial y final. También puede establecer el color del trazo con la strokepropiedad stroke-widthpara agregar grosor y la stroke-linecappropiedad para redondear los extremos de las líneas:

<svg width="30" height="30">
  <circle cx="15" cy="15" r="6" fill="currentColor" />

  <line
    id="ray"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    x1="15"
    y1="1"
    x2="15"
    y2="4"
  ></line>
</svg>

Ahora, una vez que tengas un rayo, puedes reutilizar el mismo rayo para dibujar los demás.

Puedes darle a este rayo idy reutilizarlo con el useelemento. Para los elementos reutilizados, puede establecer una rotación. Establezca el ángulo de rotación y el centro de rotación. Quieres rotar los rayos alrededor del centro del sol, así que configúralo en 15,15. Luego, incrementa la rotación en 45 grados para cada rayo:

<svg width="30" height="30">
  <circle cx="15" cy="15" r="6" fill="currentColor" />

  <line
    id="ray"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    x1="15"
    y1="1"
    x2="15"
    y2="4"
  ></line>

  <use href="#ray" transform="rotate(45 15 15)" />
  <use href="#ray" transform="rotate(90 15 15)" />
  <use href="#ray" transform="rotate(135 15 15)" />
  <use href="#ray" transform="rotate(180 15 15)" />
  <use href="#ray" transform="rotate(225 15 15)" />
  <use href="#ray" transform="rotate(270 15 15)" />
  <use href="#ray" transform="rotate(315 15 15)" />
</svg>

Cómo detectar el modo oscuro en JavaScript

Antes de llegar al ícono de la luna, veamos cómo detectar el modo oscuro en JavaScript. Esto puede ser útil al crear un juego, como lo hicimos hace un par de semanas en el tutorial del juego Gorilas JavaScript .

En ese juego, estábamos dibujando en un elemento HTML Canvas con JavaScript. Configuramos todos los colores con JavaScript. Si queremos admitir el modo oscuro, podemos configurar los colores en función de una darkModevariable. Pero ¿cómo detectamos si estamos en modo oscuro? ¿Cómo establecemos el valor de esta variable?

El siguiente código es un fragmento de ejemplo del tutorial del juego anterior. Aquí configuramos el color de relleno antes de dibujar un rectángulo en el lienzo.

Detectar el modo oscuro en JavaScript también es muy sencillo. Curiosamente, esta solución también depende de los selectores de consultas CSS que usaste antes.

Puedes crear un matchMediaobjeto con la misma condición que usamos en CSS. Este método puede comprobar si el documento coincide con una consulta de medios. Pasar prefers-color-scheme: darkcomo argumento:

const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

let darkMode = darkModeMediaQuery.matches;

. . .

function drawBuildings() {
  state.buildings.forEach((building) => {
    ctx.fillStyle = darkMode ? "#254D7E" : "#947285";
    ctx.fillRect(building.x, 0, building.width, building.height);
  });
}

Luego, puede verificar la matchespropiedad de este objeto. Si es cierto, entonces estás en modo oscuro. Puede guardar esto en una variable y, luego, puede usar esta variable para decidir qué colores debe usar al pintar en el elemento del lienzo.

Esta variable, sin embargo, no se actualiza automáticamente cuando cambia entre el modo claro y el modo oscuro. Debe agregar un detector de eventos que detecte si la configuración cambia.

Aquí, definimos una función que verifica la matchespropiedad del objeto entrante para decidir si acaba de cambiar al modo brillante u oscuro:

const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

let darkMode = darkModeMediaQuery.matches;

darkModeMediaQuery.addEventListener("change", (e) => {
  if (e.matches) {
    darkMode = true;
  } else {
    darkMode = false;
  }
});

. . .

function drawBuildings() {
  state.buildings.forEach((building) => {
    ctx.fillStyle = darkMode ? "#254D7E" : "#947285";
    ctx.fillRect(building.x, 0, building.width, building.height);
  });
}

Ahora, si configuras los colores según esta darkModevariable, deberías ver que la apariencia del juego cambia una vez que cambias entre el modo claro y oscuro en la configuración del sistema operativo. Mira esta demostración para verlo en acción.

Cómo codificar un icono de luna con SVG

Antes de discutir la anulación de la configuración predeterminada del sistema operativo con un botón de alternancia, examinemos la otra mitad de nuestro ícono de alternancia: Dibujemos una luna.

Comience con un svgelemento del mismo tamaño y defina una ruta dentro de él. Puede definir un pathelemento estableciendo su datributo. En este atributo, construyes una ruta a partir de una serie de comandos:

Comienza con el comando mover a para ir a la posición inicial. Este comando consta de la letra My la coordenada inicial:

Luego, usa un comando de arco para dibujar el arco exterior de la luna. Este comando puede dar un poco de miedo porque tiene varias propiedades. Veamos que tenemos:

Un comando siempre continúa el comando anterior, por lo que este arco dibujará el arco a partir de las coordenadas del comando de desplazamiento. Los comandos también terminan con las coordenadas del punto final.

Aquí estableces dónde termina el arco. El resto de las propiedades tratan sobre cómo dibujar un arco desde el punto inicial hasta el punto final:

Las dos primeras propiedades son el radio horizontal y vertical de nuestro arco. En nuestro caso, queremos tener el arco de un círculo, por lo que establecemos el mismo valor para ambos. Con el tercer argumento, puedes establecer una rotación. Cuando ambos radios son iguales, esta propiedad no hace diferencia. Puedes dejarlo en cero:

Luego, tenemos la propiedad de bandera de arco grande. Con esto, podrás decidir si ir por el camino largo o corto hasta nuestra coordenada final. Puedes ver que puedes llegar al punto final de múltiples maneras, incluso con los mismos radios.

Hay dos arcos: en el caso del primero, irás por el camino largo y en el caso del segundo, irás por el camino corto. Esta es una bandera, por lo que el valor aquí puede ser 0 o 1:

Finalmente, está la bandera de barrido. Básicamente, esto establece si debes dibujar el arco en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj. Las dos opciones se reflejan entre sí. En el primer caso, lo configuras en cero; en el segundo, lo configuras en uno:

Ahora que tienes un arco, configuras el otro. Aquí, establece el punto final al principio. A las mismas coordenadas que utilizó para el comando de desplazamiento.

Luego puedes usar los mismos radios, pero tienes que cambiar la bandera de arco grande y la bandera de barrido para terminar con una luna:

<svg width="30" height="30">
  <path
    fill="currentColor"
    d="
      M 23, 5
      A 12 12 0 1 0 23, 25
      A 12 12 0 0 1 23, 5"
  />
</svg>

¿Cómo puedes usar estos dos íconos en un botón para alternar el modo claro y el modo oscuro en JavaScript?

Cómo alternar el modo oscuro con JavaScript

Si desea anular la configuración del sistema o del navegador para el modo oscuro con un cambio manual, ya no puede confiar en la consulta de medios CSS. Esto funciona para representar la interfaz de usuario según la configuración, pero no puede anularla desde JavaScript.

En su lugar, puede definir una dark-modeclase y alternarla desde JavaScript.

En CSS, defina una clase que cambiará la misma configuración que hizo antes la consulta de medios. Luego, en JavaScript, puedes usar la misma lógica que tenías antes para obtener la configuración predeterminada y luego agregar o eliminar esta clase.

Puede configurar esta clase en la carga de nuestra página inicial y alternarla si hace clic en un botón:

body {
  font-family: Montserrat;
  margin: 50px;
  max-width: 500px;
}

.dark-mode {
  background-color: black;
  color: white;
}

Ahora, ¿cómo se alterna esto con un botón? En su archivo HTML, agregue un elemento de botón con un controlador de eventos. Luego, mueva ambos SVG dentro de este elemento de botón y asígneles ID. Alternará la visibilidad de estos íconos desde JavaScript:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Dark Mode</title>
    <link rel="stylesheet" href="index.css" />
    <script src="index.js" defer></script>
  </head>

  <body>
    <p>
      How to detect dark mode in CSS and in JavaScript? How can we override it
      manually with a toggle button? In this quick tutorial, we look into
      detecting dark mode in CSS and JavaScript, and then we create a toggle
      button with SVG to override the default behavior.
    </p>

    <button onclick="toggleDarkMode()">
      <svg width="30" height="30" id="light-icon">
        <circle cx="15" cy="15" r="6" fill="currentColor" />

        <line
          id="ray"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          x1="15"
          y1="1"
          x2="15"
          y2="4"
        ></line>

        <use href="#ray" transform="rotate(45 15 15)" />
        <use href="#ray" transform="rotate(90 15 15)" />
        <use href="#ray" transform="rotate(135 15 15)" />
        <use href="#ray" transform="rotate(180 15 15)" />
        <use href="#ray" transform="rotate(225 15 15)" />
        <use href="#ray" transform="rotate(270 15 15)" />
        <use href="#ray" transform="rotate(315 15 15)" />
      </svg>
      <svg width="30" height="30" id="dark-icon">
        <path
          fill="currentColor"
          d="
          M 23, 5
          A 12 12 0 1 0 23, 25
          A 12 12 0 0 1 23, 5"
        />
      </svg>
    </button>
  </body>
</html>

También puede desarmar la apariencia predeterminada del elemento del botón en CSS, excepto la propiedad del cursor. Deberías tener eso como puntero:

. . .

button {
  all: unset;
  cursor: pointer;
}

. . .

Ahora, implementemos el controlador de eventos en JavaScript. Primero necesitas acceder a los íconos SVG por ID:

const lightIcon = document.getElementById("light-icon");
const darkIcon = document.getElementById("dark-icon");

. . .

Luego, agregue la dark-modeclase al bodyelemento en caso de que esté en modo oscuro y oculte uno de los íconos SVG según la darkModevariable. Detectas el modo oscuro como lo hiciste antes:

. . .

// Check if dark mode is preferred
const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
let darkMode = darkModeMediaQuery.matches;

// Set dark-mode class on body if darkMode is true and pick icon
if (darkMode) {
  document.body.classList.add("dark-mode");
  darkIcon.setAttribute("display", "none");
} else {
  lightIcon.setAttribute("display", "none");
}

. . .

Y finalmente, podemos implementar la función que invierte la darkModepropiedad. Esta función alterna la dark-modeclase en el elemento del cuerpo y alterna los íconos SVG:

. . .

// Toggle dark mode on button click
function toggleDarkMode() {
  // Toggle darkMode variable
  darkMode = !darkMode;

  // Toggle dark-mode class on body
  document.body.classList.toggle("dark-mode");

  // Toggle light and dark icons
  if (darkMode) {
    lightIcon.setAttribute("display", "block");
    darkIcon.setAttribute("display", "none");
  } else {
    lightIcon.setAttribute("display", "none");
    darkIcon.setAttribute("display", "block");
  }
}

Ahora, esto funciona: de forma predeterminada, todavía tienes la configuración del sistema operativo o del navegador. Pero una vez que haga clic en este botón, lo anulará manualmente.

Próximos pasos

Con todo esto en su lugar, tiene una funcionalidad que toma la configuración del modo oscuro del navegador o del sistema operativo de forma predeterminada, y puede anularla con un atractivo botón de alternancia. En la versión de YouTube de este tutorial , también puede aprender cómo localStorageguardar esta configuración para la próxima sesión.

Si desea obtener más información sobre los SVG, consulte SVG-tutorial.com , donde puede obtener más información sobre los SVG desde niveles principiantes hasta avanzados con muchos ejemplos excelentes.

Si desea utilizar este comportamiento en un juego, consulta el tutorial del juego Gorillas JavaScript , donde creamos el juego completo desde cero. Es un enorme tutorial de dos horas que cubre el dibujo en un elemento Canvas con JavaScript y toda la lógica del juego con JavaScript simple.

Acabamos de publicar un curso en el canal de YouTube en español freeCodeCamp.org que te enseñará Desarrollo Web Responsivo creando una página web paso a paso. Usarás los conceptos básicos que necesitas comprender para dominar el desarrollo web responsivo. Al final del curso, podrás diseñar e implementar sitios web responsivos con HTML y CSS.

El curso fue creado por David Choi. David es un desarrollador de software a quien le encanta programar y compartir sus conocimientos con todos los que quieran adentrarse en el mundo de la programación y la computación.

David te enseñará a crear e implementar diseños web modernos y responsivos paso a paso con HTML y CSS (sin frameworks ni bibliotecas (libraries)).

Si tu objetivo es diseñar y crear sitios web modernos, definitivamente necesitas aprender cómo hacerlos responsivos. Antes de comenzar a adentrarnos en el tema con el curso de David, veamos una introducción rápida.

¿Qué es el desarrollo web responsivo?

Un sitio web responsivo es un sitio web que adapta su diseño y contenido al tamaño de la pantalla. Debería verse y funcionar correctamente en computadoras, laptops, tabletas, teléfonos inteligentes y otros dispositivos.

El desarrollo web responsivo es el enfoque utilizado por los desarrolladores para crear sitios web que se adaptan a dispositivos de distintos tamaños. Esto da como resultado una mejor experiencia de usuario ya que tendrá acceso al contenido en un diseño adaptado específicamente para el dispositivo que está usando. Los motores de búsqueda también priorizan a los sitios web que ofrecen una buena experiencia de usuario en todos los dispositivos.

Puedes desarrollar sitios web responsivos con HTML y CSS (sin frameworks ni bibliotecas). Aquí es donde CSS Flexbox viene al rescate. Durante el curso, practicarás tus habilidades de CSS Flexbox. Veamos de qué se trata.

Flexbox

Flexbox es un modelo de diseño CSS para organizar elementos en una sola dimensión. Con Flexbox, puedes ubicar elementos horizontal o verticalmente, distribuir el espacio de manera uniforme para cambiar el diseño según el tamaño de la pantalla e incluso controlar el orden de los elementos.

💡 Dato: Si necesitas repasar tus habilidades de HTML, CSS y Flexbox, puedes tomar cursos sobre estos temas en nuestro canal de YouTube en español antes de comenzar el proyecto.

• Aprende HTML y CSS - Curso Desde Cero
• Aprende CSS Flexbox - Curso desde Cero

Proyecto de página web responsiva en español

Durante el curso:

• Analizarás el diseño que David creó para el sitio web.
• Prepararás tu entorno de desarrollo.
• Instalarás Visual Studio Code.
• Crearás la estructura del sitio web en HTML.
• Definirás y asignarás estilos CSS para la versión móvil.
• Definirás y asignarás estilos CSS para la versión de escritorio.

Combinarás CSS básico con Flexbox para asignar estilos que se adapten al tamaño de la pantalla.

Aquí tenemos algunas capturas de pantalla del curso para darte una idea del proyecto genial que crearás con David:

Te invitamos a tomar el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por David Choi.

• YouTube: @deivchoi
• GitHub: @choidavid4

Si estás trabajando en un proyecto de desarrollo web, establecer un color de fondo agradable puede darle al sitio web un aspecto más atractivo.

Para establecer un color de fondo para un div o elemento parecido en CSS, utiliza la propiedad background-color.

Al configurar la propiedad, background-colortu creatividad es el límite en cuanto hasta dónde quieres llegar.

Entonces, en este artículo, te mostraré cómo puedes configurar la propiedad background-color.

Cómo configurar background-color con nombres de color

Con los colores con nombre, puede establecer el color de fondo incorporando la propiedad background-color y asignándole un valor expresado en un nombre de color como red, green, blue, etc.

div {
   background: green;
}

Puede utilizar los siguientes estilos para que la página web se vea mejor. Simplemente, establezca un ancho y alto para el div, para que el background-color pueda tener efecto:

body {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: #d3d3d3;
 }

div {
   background: green;
 }

Los navegadores modernos reconocen alrededor de 147 colores, por lo que todavía su uso es un poco limitado.

Cómo configurar background-color con colores hexadecimales

Con valores hexadecimales, puedes establecer un color de fondo para un div o cualquier otro elemento con un total de 6 caracteres.

Los colores hexadecimales comienzan con el signo de numeral (#), cualquier número del 0 al 9 y, finalmente, cualquier letra de la A a la F.

Los primeros 2 valores representan el rojo, los 2 siguientes representan el verde y los 2 últimos representan el azul.

Con valores hexadecimales, puedes sumergirte profundamente en el círculo cromático e incluso usar colores que nadie ha usado nunca.

div {
   background: #2ecc71;
}

Cómo configurar background-color con colores RGB

RGB significa Red (Rojo), Green (Verde) y Blue (Azul).

Para configurar el color de fondo con RGB, especifica la cantidad de rojo, verde y azul que desea con números entre 0 y 255.

div {
   background: rgb(220, 20, 60);
}

RGB también tiene una variación llamada RGBA. La última A significa alfa y te permite determinar qué tan opaco quieres que sea el color.

El alfa toma un valor de 0,0 a 1,0. 0,0 significa 0% de opacidad, 0,5 significa 50% de opacidad y 1,0 significa 100% de opacidad.

div {
    background: rgb(220, 20, 60, 0.6);
}

Cómo configurar background-color con colores HSL

HSL significa Hue (Tono), Saturation (Saturación) y Lightness (Luminosidad). Es la forma más dinámica dentro de las formas en que puedes especificar un color de fondo para un div u otros elementos.

• Hue (Tono) representa la rueda de colores en 360°. 0° es rojo, 120° es verde y 240° es azul.
• Saturation (Saturación) es la cantidad de gris en el color expresada en porcentajes. 0% es el tono de gris y 100% es el mismo color.
• Como su nombre lo indica, la lightness (luminosidad) es la cantidad de oscuridad y luminosidad del color expresada como porcentaje. 0% es negro y 100% es blanco.

div {
   background: hsl(16, 100%, 50%);
 }

Conclusión

Dado que puedes aplicar colores de 4 maneras diferentes, debes preguntarte cuál deberías usar.

Cuando usas colores con nombre, estás un poco limitado en cuanto a hasta dónde puedes llegar al aplicar diferentes tonos de colores.

Cada color, como rojo, verde, azul, amarillo o cualquier otro color, tiene muchas variaciones a las que no tendrás acceso con colores con nombre.

Sólo puedes acceder a unos 147 colores predefinidos reconocidos por los navegadores. Los colores hexadecimales, por otro lado, son muy dinámicos. Se utilizan principalmente entre desarrolladores y la creatividad es el límite. Estos colores hexadecimales te permiten utilizar diferentes tonos del mismo color.

Los colores RGB son tan dinámicos como los colores hexadecimales. Puede especificar la cantidad de rojo, verde y azul de 0 a 255, y también puede usar el valor alfa agregado para especificar la transparencia del color.

HSL es el más dinámico de todos ellos. Puede especificar exactamente el color de 0 a 360 grados en el círculo cromático, establecer la saturación y la oscuridad como porcentaje y establecer la opacidad en cualquier valor entre 0,0 y 1,0.

Por lo tanto, decidir cuál usar entre colores con nombre, hexadecimales, RGB y HSL depende de usted y de qué tan creativo quiera ser y cuáles sean las necesidades de su proyecto.

Gracias por leer.

display:none y visibility:hidden son dos declaraciones de estilos que puedes usar para ocultar elementos en la pantalla con CSS. Pero, ¿cuáles son las diferencias entre ellos?

Al crear aplicaciones, hay ocasiones en las que deseas ocultar elementos visualmente (no eliminarlos del DOM, solo de la pantalla). Puedes hacer esto de diferentes maneras.

Dos enfoques comunes incluyen el uso de la propiedad display con el valor none o la propiedad  visibility con el valor hidden.

Aunque ambos enfoques ocultan el elemento visualmente, hacen que el elemento se comporte de diferentes maneras. Explicaré estas diferencias en este artículo.

Este es el ejemplo que usaré para explicar cómo funciona todo esto:

El HTML:

<div class="container">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
</div>

Y el CSS:

.container {
  padding: 20px;
  width: max-content;
  display: flex;
  border: 1px solid black;
}

.block1,
.block2,
.block3 {
  height: 40px;
  width: 120px;
}

.block1 {
  background-color: rgb(224, 110, 49);
  margin-right: 20px;
}

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
}

.block3 {
  background-color: rgb(12, 154, 142);
}

Tenemos un div con una clase de container. Este div tiene tres divs hijos con clases de block1, block2 y block3, respectivamente. Hemos especificado algunos estilos para los divs. El primer hijo div es orange, el segundo es blue, y el tercero es teal.

Aquí está el resultado:

Cómo utilizar display: none en CSS

La propiedad display establece cómo se muestra un elemento (como inline o block) y también determina el diseño de los elementos hijos de un elemento padre (como flex, grid, etc.).

Con un valor none para esta propiedad, la visualización del elemento se desactiva. Esto significa que el elemento – así como sus hijos – no se mostrarán. El documento se representa sin el elemento, como si no existiera.

Ahora veremos cómo funciona display: none. A continuación se muestra un ejemplo con este estilo aplicado al elemento .block2:

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  display: none;
}

Aquí está el resultado:

Como puedes ver aquí, el elemento .container ha reducido su ancho. Es como si el elemento .block2 no existiera. Debido a que usamos display:none en este elemento, no se representa en el documento. Entonces su espacio en la pantalla queda vacío para que lo ocupen otros elementos.

También podemos probar esto moviendo y agregando display: none al elemento .block1:

.block1 {
  background-color: rgb(224, 110, 49);
  margin-right: 20px;
  display: none;
}

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  display: none;
}

El resultado:

Aquí ves que .block1 y .block2 no se representan, por lo que sus espacios están ocupados.

Cómo utilizar visibility: hidden en CSS

La propiedad visibility, especifica si un elemento es visible o no. Pero esta propiedad no afecta el diseño del elemento. Esta es la principal diferencia en comparación con la propiedad layout.

Con un valor hidden para esta propiedad, el elemento al que se aplica se vuelve "invisible". El espacio requerido por el modelo de cajas del elemento permanece, pero el elemento en sí está oculto.

Veamos cómo se aplica esta propiedad a nuestro ejemplo anterior. Aquí está el resultado de este estilo aplicado al elemento .block2:

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  visibility: hidden;
}

El resultado:

Como notarás aquí, a diferencia de display: none, el elemento .block2 es invisible, pero su diseño permanece intacto. De hecho, el margin-right sobre este elemento todavía está ahí. Sólo el elemento en sí está oculto.

Agreguemos también este estilo a .block1 para ver el resultado:

Ahora ambos elementos son invisibles, pero aún se representan en el documento, por lo que su espacio no está vacío.

Lo siguiente que quizás estés pensando es "¿Cuál es la diferencia entre visibility: hidden y opacity: 0?"

visibility: hidden vs opacity: 0

Ambos estilos se ven muy similares. Puedo mostrarte esto reemplazando visibility:hidden con opacity:0 en nuestros ejemplos anteriores:

.block1 {
  background-color: rgb(224, 110, 49);
  margin-right: 20px;
  opacity: 0;
}

.block2 {
  background-color: rgb(77, 77, 234);
  margin-right: 20px;
  opacity: 0;
}

El resultado:

Puedes ver que visualmene no hay diferencia entre este resultado y el anterior. Pero hay una diferencia en el comportamiento de los elementos.

Los elementos con visibility: hidden no son interactuables. No sé si esta es la mejor palabra para esto 😂 pero lo que quiero decir es que los usuarios no pueden interactuar (por ejemplo, haciendo click) con dichos elementos. Esto se debe a que dichos elementos son realmente invisbles.

Los elementos con opacity: 0, por otro lado, son interactivos, ya que en realidad son visibles, solo que están transparentes. La propiedad opacity no especifica la visibilidad de un elemento – solo especifica la transparencia.

Podemos comprobar esta diferencia con un ejemplo. Digamos que el elemento .block2 tenía un atributo onclick como este:

<div class="block2" onclick="alert('hello')"></div>

Si usa visibility:hidden en este elemento, al hacer click en el espacio donde está el elemento, no se activará nada. Pero si usa opacity:0 en este elemento, al hacer click en ese mismo espacio, se activará el modal de alerta que muestra el texto "hello". Puede probar esto en su navegador para verlo en vivo.

Casos de uso para display:none y visibility:hidden

Estas declaraciones de estilo pueden tener diferentes propósitovs dependiendo de lo que desee lograr.

En mi experiencia, uso display:none cuando quiero ocultar algo. Piense en ocultar una ventana emergente, un elemento de la lista de tareas pendientes en la interfaz de usuario o la barra lateral de una página.

El uso de visibility:hidden para estas cosas hace que se conserve su espacio y podría hacer que una página parezca extraña cuando hay un espacio en blanco.

Las únias veces que utilizo visibility:hidden es cuando quiero mostrar alguna animación mientras "oculto" o "muestro" un elemento. La propiedad display no permite animar entre valores, pero la propiedad visibility sí. Uso visibility en combinación con opacity para tales animaciones de aparición y desaparición gradual.

Concluyendo

En resumen, display: none, visibility: hidden, y opacity: 0 se pueden usar para ocultar elementos visualmente, pero:

• display: none desactiva el diseño de los elementos, por lo que no se representan.
• visibility: hidden oculta los elementos sin cambiar su diseño.
• opacity: 0 hace que los elementos sean transparentes, pero los usuarios pueden interactuar con ellos.

Si te ha gustado este artículo, compártelo con otros para aprender 😇

Acabamos de publicar un curso en el canal de YouTube en español freeCodeCamp.org que te enseñará Tailwind CSS desde los conceptos básicos hasta conceptos más avanzados y proyectos. Al final del curso, podrás diseñar e implementar sitios web responsivos con Tailwind CSS.

Este curso fue creado por David Ruiz. David es Desarrollador Web Front-End con más de 5 años de experiencia. Comparte proyectos y cursos sobre Tailwind CSS, HTML, CSS, JavaScript y React en su canal de YouTube.

En este curso, te enseñará cómo crear e implementar diseños web modernos y responsivos paso a paso con las clases predefinidas de Tailwind CSS.

Antes de comenzar a sumergirnos en Tailwind con el curso de David, veamos una introducción rápida a Tailwind CSS  y po qué es importante para ti si tu objetivo es diseñar y crear sitios web modernos y responsivos de forma eficiente.

¿Qué es Tailwind CSS?

Tailwind CSS es un framework CSS con clases predefinidas que puedes utilizar para asignar estilo a los elementos HTML.

Con Tailwind CSS, puedes agregar clases CSS a tus elementos HTML directamente dentro del archivo HTML y ver cómo los estilos predefinidos se aplican inmediatamente.

💡 Dato: ¡Sí! Con Tailwind, escribimos nuestro CSS dentro del archivo HTML.

¿Por qué escoger Tailwind CSS?

Aprender Tailwind CSS puede ser muy útil para mejorar tu flujo de trabajo como desarrollo web. Sus ventajas incluyen:

• Desarrollo más rápido porque puedes utilizar clases CSS predefinidas en lugar de definir los estilos CSS tú mismo.
• Diseño responsivo porque las clases CSS predefinidas admiten variantes para distintos tamaños de pantalla. Puedes desarrollar un sitio web responsivo directamente desde tu archivo HTML, sin media queries adicionales.
• Archivos CSS más simples porque no definirás todos los estilos tú mismo en archivos CSS personalizados.
• Consistencia porque tú y tus colegas usarán las mismas clases de CSS con las mismas convenciones de nomenclatura en todo el proyecto.
• Funciones de personalización porque puedes personalizar y configurar muchas de estas clases CSS predefinidas para adaptarlas a tus necesidades.

Suena genial, ¿cierto?  🙂

Al aprender Tailwind CSS, estarás adquiriendo habilidades muy valiosas para tu carrera de desarrollo web.

Si estás listo para comenzar a incorporar Tailwind CSS en tu flujo de trabajo, veamos el contenido del curso.

Curso de Tailwind CSS en español

Durante el curso, aprenderás los siguientes aspectos de Tailwind CSS:

• Cómo instalar y configurar Tailwind CSS
• Colores
• Tamaño
• Estados
• Pseudo-clases
• Diseño web adaptable
• CSS Flexbox con Tailwind CSS
• CSS Grid con Tailwind CSS
• ¡Y más!

Además, aprenderás a activar y desactivar el modo oscuro (dark mode) con los estilos predefinidos de Tailwind CSS y crearás tres proyectos reales completos:

• Un panel de notificaciones
• Un dashboard (tablero)
• Una landing page (página de inicio)

Te invitamos a tomar el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por David Ruiz.

• YouTube: @CodingTube
• Twitter: @CodingTube
• Página web: https://www.codingtube.dev/
• GitHub: @Davichobits
• LinkedIn: David Israel Ruiz Cabrera

Publicamos un curso en el canal de YouTube de freeCodeCamp.org en español que te enseñará Flexbox desde los fundamentos. Al final del curso, podrás diseñar e implementar diseños responsivos.

Este curso fue creado por Leosbel Poll Sotomayor. Leosbel es un ingeniero de software con más de 10 años de experiencia, que comenzó a crear hace 20 años en Cuba y ahora vive en Canadá gracias a sus habilidades de programación. Creó este curso para la comunidad freeCodeCamp.

¿Listos? Veamos una descripción general de Flexbox y lo que aprenderás durante el curso.

¿Qué es CSS Flexbox?

CSS Flexbox significa CSS Flexible Box Layout. Es un modelo de diseño que te permite reorganizar elementos responsivos dentro de un contenedor en base a propiedades CSS que definen cómo los descendientes deben "moverse" para ajustarse al tamaño de su contenedor.

Con Flexbox puedes alinear, distribuir y espaciar elementos usando propiedades sencillas para evitar cálculos complejos en tu CSS.

Durante el curso, aprenderás a utilizar las siguientes propiedades:

• flex-direction
• justify-content
• flex-wrap
• align-items
• align-content
• flex-grow
• flex-basis
• flex-shrink

¡Y más! También aprenderás a combinarlos con Media Queries en CSS para crear diseños responsivos aún más poderosos.

Oportunidades profesionales

Si tu objetivo es tener una carrera en el campo del desarrollo web, Flexbox te será de gran ayuda. Estas habilidades son altamente demandadas y buscadas por empleadores a nivel mundial.

Curso de Flexbox en español

Genial. Ahora que ya sabes por qué Flexbox es tan importante, veamos los temas que aprenderás durante el curso:

• Introducción
• ¿Qué es Flexbox?
• Importancia de Flexbox
• Fundamentos de Flexbox
• Herramientas que usarás durante el curso
• Cómo configurar tu entorno de desarrollo
• Propiedades relacionadas con contenedores
• Pérdida de datos en CSS
• Propiedades relacionadas con descendientes (hijos)
• Ejemplo: Barra de navegación
• Ejemplo: Diseño clásico
• Flexbox vs. Grid

Te invitamos a tomar el curso en el canal de YouTube de freeCodeCamp.org en español:

✍️ Curso creado por Leosbel Poll Sotomayor.

• YouTube: LeoDev
• Twitter: @_LeoDev
• LinkedIn: Leosbel Poll Sotomayor

Una de las formas más conocidas con la que podemos colocar texto en negrita es usando la propiedad font-weight. El texto en negrita añade énfasis a información clave, crea contraste visual y mejora la legibilidad del contenido.

En este artículo, aprenderás como usar CSS para darle énfasis a texto en HTML usando la propiedad font-weight. Ya sea que seas un principiante o un desarrollador experimentado, este artículo te proporcionará una guía completa para crear texto en negrita en su HTML utilizando CSS.

Sobre la propiedad font-weight

La propiedad font-weight es una propiedad de CSS usada para definir el "peso" o grosor de una fuente. Determina el grado de negrita o luminosidad del texto, y los valores más altos indican un peso de fuente más negrita.

Esta propiedad acepta varios valores, incluyendo algunos de tipo numérico y también algunas palabras clave.

En el caso de los valores numéricos tenemos un rango de 100 a 900 con incrementos de 100 (e.g. 100, 200, 300, ..., 900) entré más alto el valor, más gruesa será la fuente. Un valor de 400 es considerado «normal», mientras que un valor de 700 se considera «en negrita». Algunas de las palabras clave que podemos usar también son bold, bolder, lighter, y normal.

Cómo crear texto en negrita usando CSS

Crear texto en negrita en HTML con CSS es un proceso sencillo que se puede lograr de varias maneras. Se puede optar por utilizar cualquier forma de estilo, como en línea (con la etiqueta style), interno (definiendo los estilos dentro de las etiquetas <style></style> o externo (importando una hoja de estilos con la etiqueta <link /> desde un archivo .css). Veamos cada una de las opciones:

Con estilos en línea

Podemos usar los estilos en línea para aplicar directamente la propiedad font-weight directamente al elemento HTML, por ejemplo:

<p style="font-weight: bold;">Este es un texto en negrita</p>

Sin embargo, los estilos en línea pueden hacer que tu código HTML luzca desordenado y difícil de mantener, especialmente cuando tenemos varios elementos que requieren los mismos estilos.

Con estilos internos

Los estilos internos te permite aplicar estilos de CSS dentro de la sección head, por ejemplo:

<head>
  <style>
    p {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>Este es un texto en negrita</p>
</body>

Este método es útil cuando estamos aplicando los mismos estilos a múltiples elementos en una misma página.

Con estilos externos

Usar estilos externos requiere crear un archivo CSS aparte y referenciar desde nuestro html usando la etiqueta link, por ejemplo:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

El archivo CSS tendrá entonces todos los estilos que queramos para nuestro HTML y podremos cambiarlos sin necesidad de cambiar el código HTML.

p {
  font-weight: bold;
}

Mejores prácticas a la hora de usar texto en negrita en HTML

Ya que el texto en negrita puede ayudarnos a poner énfasis en cierta información, es esencial seguir las mejores prácticas para asegurarnos que el texto se mantiene legible y accesible.

Estas son algunas de las mejores prácticas para usar texto en negrita en tu código HTML:

Escogiendo el grosor correcto: Cuando usamos texto en negrita, es esencial escoger el grosor adecuado para asegurarnos que nuestro texto sigue siendo fácil de leer.

Mientras que una fuente con más grosor puede ser propicia para encabezados, una fuente más ligera sería apropiada para cuerpos de texto grandes. Es importante asegurarnos que el texto en negrita no se repita constantemente ya que puede ser abrumador y restar valor a otros elementos de la página.

Balanceando el texto en negrita con otros formatos: Mientras que el texto en negrita puede ser una forma provechosa de llamar la atención hacia información importante, es importante también saber balancear junto con otros estilos de formato para crear un sistema de jerarquía visual.

Usando otros estilos como cursivas, subrayado o incluso un color diferente puede darle a tu texto distintos niveles de importancia.

Evita el abuso del texto en negrita: Abusar del texto en negrita puede hacer que el contenido sea difícil de leer y reste diseño al resto de tu página.

Es importante usar el texto en negrita en proporciones escasas, sólo cuando este es realmente necesario y para enfatizar información importante. Evita usar el texto en negrita para párrafos enteros o bloques de texto, ya que esto puede dificultar la lectura a los usuarios y hace indistinguible la información importante del contenido regular.

Realiza pruebas de accesibilidad: Al momento de usar texto en negrita, es esencial asegurarnos de que este es accesible a todo los usuarios, incluyendo aquellos que poseen dificultades visuales.

Los lectores de pantalla pueden tener dificultades para leer texto con mucho estilo, por lo que es importante probar la página utilizando herramientas de accesibilidad para garantizar que el texto en negrita tenga el formato adecuado y sea accesible.

Conclusión

Para concluir, usar texto en negrita en tu contenido HTML puede ayudarte con efectividad a darle énfasis a la información importante y crear una jerarquía visual en el texto.

Escoger el grosor correcto para tu contenido y saber balancear con otros estilos de formato, evitar el sobre uso y hacer pruebas de accesibilidad son los pasos necesarios para asegurarnos que nuestro contenido a la hora de usar texto en negrita se mantenga legible y accesible para todo los usuarios.

Gracias por leer, diviértete en tu proyecto!

¡Embárcate en un viaje de aprendizaje! Explora más de 200 artículos de expertos sobre desarrollo web. Echa un vistazo a mi blog para ver más de mi fascinante contenido.

Cuando se diseña un sitio web o se trabaja en un proyecto, es posible que desees utilizar texto en mayúsculas por varias razones. Tal vez quieras usar una abreviatura o un acrónimo, enfatizar cierto texto o usarlo como encabezado.

Hay varias maneras de poner texto en mayúsculas con HTML. La primera es escribir el texto en mayúsculas directo en el HTML:

<p>TEXTO EN MAYUSCULAS</p>

La segunda forma es utilizar el método de cadenas de JavaScript toUpperCase() y representarlo en el DOM:

const mayusculas = cedena.toUpperCase()

// aqui se muestra en pantalla

La tercera forma, que veremos en este artículo, es usar la propiedad de transformación de texto de CSS:

selector {
  text-transform: uppercase;
}

Esto aplica el estilo de mayúsculas en el elemento seleccionado.

Esta declaración no cambia el contenido del DOM. Por ejemplo, echa un vistazo a este código HTML:

<p class='parrafo'>
  Some text
</p>

Y a este estilo:

.parrafo {
  text-transform: uppercase;
}

En la UI, el texto tendrá un estilo como el siguiente:

Pero en el DOM, el texto sigue siendo el mismo:

Cuando copias el texto en el navegador, el texto original "Some text" se copia en algunos navegadores, pero en otros se copia la versión con estilo.

¿Deberías usar text-transform en CSS u otros métodos?

Si usas mayúsculas por razones de estilo te recomiendo que uses CSS. La razón es que puede haber inconsistencias en la forma en la que los diferentes navegadores y las herramientas del navegador manejan el texto en mayúsculas.

Una de las diferencias es la inconsistencia entre copiar y pegar el texto en diferentes navegadores.

Otra inconsistencia es que algunos lectores de pantalla interpretan el texto en mayúsculas como abreviaturas. Por lo tanto, un texto como "SOME TEXT" se leerá como "S.O.M.E. T.E.X.T.", lo que puede afectar la manera en la que el lector comprende el mensaje.

Sin embargo, vale la pena señalar que algunos lectores de pantalla también interpretan el texto en mayúsculas con CSS como abreviaturas.

Se recomienda mantener los estilos como estilos. Si deseas tener texto en mayúsculas solo por motivos de estilo, usa CSS y deja el texto original en HTML. Pero si usas mayúsculas para abreviaturas o tienes un motivo específico para tener texto en mayúsculas, puedes escribirlo en HTML.

Puedes consultar este tweet sobre mayúsculas sin CSS para ver las discusiones al respecto.

Los elementos posicionados absolutamente se eliminan del flujo de un documento. Y, a veces, saber cómo colocar correctamente dichos elementos en el centro de la página puede resultar confuso.

Quiero decir, CSS ya es confuso. 😅

En este artículo , quiero mostrarles como centrar un elemento absoluto vertical u horizontalmente – o ambos – en un contenedor.

Código de Ejemplo

Para centrar un elemento horizontalmente:

elemento {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

Para centrar un elemento verticalmente:

elemento {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
}

Para centrar un elemento tanto vertical como horizontalmente:

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;

Pero si desea comprender cómo llegué a estas soluciones, siga leyendo para obtener mas explicaciones.

¿Cómo funcionan la posición absoluta?

Por defecto, los elementos tienen una posición static al menos que se especifique lo contrario como absolute, fixed, relative o sticky. Puede leer aquí el artículo en inglés de estilos de posición de CSS para entender la diferencia.

Usaré la siguiente interfaz de usuario para explicar como trabajan los elementos absolute :

Este es el código de la interfaz de usuario :

<div class="contenedor">
  <div class="bloque-azul"></div>
  <div class="bloque-verde"></div>
  <div class="bloque-negro"></div>
</div>

.contenedor {
  margin: 20px;
  display: flex;
  border: 1px solid black;
  padding: 20px;
  width: 400px;
}

.bloque-azul,
.bloque-verde,
.bloque-negro{
  width: 100px;
  height: 100px;
}

.bloque-azul {
  background-color: blue;
}

.bloque-verde {
  background-color: green;
}

.bloque-negro {
  background-color: black;
}

Este contenedor tiene tres bloques: azul, verde, y negro, respectivamente. Los bloques están actualmente static, por lo que están ordenados en el DOM, de la misma manera que está en el código.

¿Qué sucede cuando al bloque verde le damos una posición absolute ?

.bloque-verde {
  background-color: green;
  position: absolute;
  margin-left: 20px;
  margin-top: 20px;
}

Ahora puedes observar que el bloque verde ha abandonado el flujo del documento. El contenedor solo aplica el display:flex a los elementos azul y negro, y el elemento verde deambula sin afectar o las otros.

Entonces, ¿qué pasaría si quisiéramos colocar este bloque verde en el centro del contenedor?

Cómo centrar elementos posicionados absolutamente

Centrar elementos posicionados estéticamente usualmente involucra márgenes automáticos, por lo que margin: auto sería suficiente, ¿verdad?

.bloque-verde {
  background-color: green;
  position: absolute;
  margin: auto;
}

Definitivamente no es así. Un elemento absolute , pierde su flujo en el contenedor. Tal vez left: auto y right: auto funcione:

.bloque-verde {
  background-color: green;
  position: absolute;
  left: auto;
  right: auto;
}

Aún nada. En este punto, es posible que esté tentado en utilizar valores codificados:

.bloque-azul, .bloque-negro {
  display: none;
}

.bloque-verde {
  background-color: green;
  position: absolute;
  left: 190px;
  top: 90px;
}

Este resultado parece perfecto (o eso parece) pero no es la mejor solución porque cuando quiera cambiar el tamaño del contenedor, tiene que cambiar los valores codificados.

Ahora, veamos cómo puedes centrar elementos en posición absoluta.

La primera parte es aplicar el position : relative al contenedor:

.contenedor {
  // ...
  position: relative;
}

Aplicar una posición relativa al contenedor le da un límite al elemento absoluto. Los elementos absolutos están delimitados por el padre posicionado relativamente más cercano. Pero si nada de esto existe, estará delimitado por la ventana gráfica.

A continuación, centraremos el bloque horizontalmente. Aplicando la propiedad left y right con el valor 0. Esta propiedad respectivamente especifica la distancia del borde izquierdo (del bloque) al contenedor y el borde derecho al contenedor.

.bloque-verde {
  // ...
  left: 0;
  right: 0;
}

El left tiene más prioridad porque el contenedor muestra los elementos de izquierda a derecha.

La belleza llega con el siguiente estilo:

.bloque-verde {
  // ...
  margin: 0 auto;
}

Y ahora tienes un elemento absoluto centrado horizontalmente. Piense en las propiedades left y right especifican un contenedor interno para el bloque. Dentro del contenedor, los márgenes izquierdo y derecho pueden ser auto para que sean iguales y lleven el elemento al centro.

Para centrar este bloque verticalmente, puedes intuir que va de esta manera:

.bloque-verde {
  // ...
  top: 0;
  bottom: 0;
  margin: auto 0;
}

El top y bottom especifican la distancia entre los bordes superior e inferior del bloque, que parece un contenedor interior. El uso de auto crea márgenes iguales tanto para margin-top como en margin-bottom.

Al unir los dos conceptos, puedes centrar el bloque horizontal y verticalmente de esta manera:

.bloque-verde {
  background-color: green;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

Con este enfoque, el elemento permanece en el centro si cambia el tamaño del contenedor.

Para terminar

Los elementos absolutos se comportan diferentes de los elementos estáticos – abandonan el flujo del documento y, por defecto, no respetan el contenedor de donde fueron declarados.

Con un elemento padre de posición relative , y un elemento con posición  absolute tendrá un límite. Y con las propiedades left, right, top y bottom con el valor en 0 (especificando la distancia de el borde), y con el margen en auto, el elemento absoluto se centrara en el elemento padre.

Tenga en cuenta que esta no es la única forma de centrar un elemento posicionado absolutamente. También he visto a alguien en línea usar transform: translate... para lograr esto también. Puedes investigar sobre esto si quieres.

Hay algunos problemas comunes de codificación con los que te puedes encontrar cuando empieces a practicar lo que has aprendido construyendo proyectos.

Un problema común al que te enfrentarás como desarrollador web es cómo colocar un elemento en el centro de una página o dentro de un elemento que actúa como su contenedor. Es el omnipresente problema de "¿Cómo centro un div?".

En este artículo, veremos cómo podemos centrar elementos utilizando varias propiedades CSS. Veremos ejemplos de código en cada sección y una representación visual de los elementos en todos los ejemplos.

Cómo centrar un Div utilizando la propiedad CSS Flexbox

En esta sección, veremos cómo podemos utilizar la propiedad Flexbox de CSS para centrar un elemento horizontalmente, verticalmente y en el centro de una página/contenedor.

Puedes usar una imagen si lo prefieres, pero nosotros usaremos un simple círculo dibujado con CSS. Aquí está el código:

<div class="contenedor">

      <div class="circulo">

      </div>

</div>

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

El posicionamiento con Flexbox requiere que escribamos el código en la clase del elemento padre o contenedor.

Cómo centrar un Div horizontalmente usando Flexbox

Ahora escribiremos el código para centrar el elemento div horizontalmente. Seguimos haciendo uso del círculo que creamos anteriormente.

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Hemos añadido dos líneas de código para centrar el círculo horizontalmente. Estas son las líneas que hemos añadido:

display: flex;
justify-content: center;

display: flex; nos permite utilizar Flexbox y sus propiedades.

justify-content: center; alinea el círculo al centro horizontalmente.

Aquí está la posición de nuestro círculo:

Cómo centrar un Div verticalmente usando Flexbox

Lo que haremos en esta sección es similar a la anterior, excepto por una línea de código.

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  align-items: center;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

En este ejemplo, hemos utilizado align-items: center; para centrar el círculo verticalmente. Recuerda que debemos escribir primero display: flex; antes de especificar la dirección.

Aquí está la posición de nuestro círculo:

Cómo posicionar un Div en el centro usando Flexbox

En esta sección, colocaremos el círculo en el centro de la página utilizando las propiedades de alineación horizontal y vertical de CSS Flexbox. He aquí cómo:

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Estas son las tres líneas de código que hemos añadido a la clase contenedor anterior:

display: flex;
justify-content: center;
align-items: center;

Como es de esperar, comenzamos con display: flex; que nos permite utilizar Flexbox en CSS. A continuación, utilizamos las propiedades justify-content (alineación horizontal) y align-items (alineación vertical) para colocar el círculo en el centro de la página.

Esta es la posición de nuestro círculo:

Cómo centrar un Div horizontalmente usando la propiedad margin de CSS

En esta sección, utilizaremos la propiedad margin para centrar nuestro círculo horizontalmente.

Volvamos a crear nuestro círculo.

<div class="contenedor">

      <div class="circulo">

      </div>

</div>

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Esta vez escribiremos el código en la clase círculo. He aquí cómo:

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
  margin: 0 auto;
}

Todo lo que hemos añadido es el margen: 0 auto; línea de código a la clase circulo.

Echemos un vistazo a la posición del círculo:

Cómo centrar texto horizontalmente con la propiedad CSS text-align

En esta sección, veremos cómo centrar texto horizontalmente.

Este método sólo funciona cuando trabajamos con texto escrito dentro de un elemento.

He aquí un ejemplo:

<div class="contenedor">

    <h1>Hello World!</h1>
      
</div>

En el ejemplo anterior, hemos creado un div con una clase de contenedor y un elemento h1 con algo de texto. Esto es lo que aparece en este momento:

Escribamos el código CSS.

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

h1 {
  text-align: center;
}

Para alinear el texto del elemento h1 en el centro de la página, tuvimos que utilizar la propiedad text-align, dándole un valor de center. Esto es lo que aparece ahora en el navegador:

Conclusión

En este artículo, vimos cómo podemos centrar elementos horizontalmente, verticalmente y en el centro de la página usando Flexbox y las propiedades margin y text-align en CSS.

En cada sección, vimos tanto un ejemplo de código como una representación visual de lo que hace el código.

¡Feliz codificación!

Es considerado una buena práctica tener tus hojas de estilos de CSS en un archivo externo. Entonces, ¿cómo puedes enlazar ese CSS a tu archivo HTML?

Enlazar a un archivo externo de CSS es una parte importante de cualquier plantilla de HTML. Y en este artículo, aprenderemos a cómo hacerlo.

Cómo enlazar un archivo CSS a un archivo HTML

Puedes enlazar tu archivo CSS a tu archivo HTML añadiendo un elemento link dentro del elemento head de tu archivo HTML, de este modo:

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
    
    </body>
</html>

El elemento link tiene muchos usos, y es importante especificar los atributos correctos de modo que puedas usarlo para importar una hoja de estilos de CSS. Veremos algunos atributos importantes ahora.

El atributo rel

El primero de los atributos indispensables es el atributo rel. Usarás este atributo para decirle al navegador cuál es la relación con el archivo importado.

Escribirás rel="stylesheet" para decirle al navegador que estás importando una hoja de estilos.

El atributo href

El segundo atributo indispensable es el atributo href, el cual especifica el archivo a importar.

Una situación común es que el archivo de CSS y el archivo de HTML estén en la misma carpeta. En ese caso puedes escribir href="style.css".

Si el archivo de CSS y el archivo de HTML están en diferentes carpetas, necesitarás escribir la dirección correcta a la que necesita ir desde el archivo de HTML al archivo de CSS.

Por ejemplo, una situación habitual es que el archivo de CSS está en una carpeta que es hermana del archivo de HTML, de este modo:

project --- index.html
            css ---------- style.css

En este caso necesitarías escribir la dirección de esta forma "css/styles.css".

El atributo type

<link rel="stylesheet" href="style.css" type="text/css">

Se utiliza el atributo type para definir el tipo de contenido que estás enlazando. Para una hoja de estilos, esto sería text/css. Pero ya que css es el único lenguaje de hojas de estilos usado en la web, no es solo opcional, si no es incluso a una buena práctica no incluirlo.

El atributo media

<link rel="stylesheet" href="style.css" media="screen and (max-width: 600px)">

El atributo media no es visible en el ejemplo. Es un atributo opcional que puedes usar para especificar cuando importar una hoja de estilos determinada. Su valor debe ser una media type / media query.

Esto puede ser útil en caso de que quieras separar los estilos para diferentes dispositivos y resoluciones de pantalla en diferentes archivos. Necesitarías importar cada archivo de CSS con su propio elemento link.

Conclusión

En este artículo, aprendiste a como añadir una hoja de estilos externa a tu página web usando el elemento link y los atributos href y rel.

También aprendiste que puedes importar múltiples hojas de estilos y usar el atributo media para determinar cuando cada una debería ser aplicada.

¡Qué te diviertas creando páginas web!

Establecer el color del texto en un sitio web que estás creando puede resultar confuso al principio. Pero en este artículo, aprenderás cómo hacerlo.

Cómo establecer el color del texto en HTML

En CSS, la propiedad background-color es bastante sencilla para establecer el color de fondo de cualquier cosa.

Entonces, ¿Qué sucede si deseas establecer el color de primer plano de algo en la página? Especialmente el texto, para el que en condiciones normales no querrías establecer un color de fondo.

No hay una propiedad de foreground-color en CSS, por lo que hace que esto sea posible es la propiedad color.

En este artículo, te guiaré a través de cómo configurar el color del texto usando la propiedad color. También veremos las diversas formas en que toma valores.

La propiedad color toma valores de 4 maneras diferentes: Color con nombre, color hexadecimal, color RGB y color HSL. Veamos cada uno ahora.

Colores con nombre

Como su nombre indica, ingresa la propiedad color y aplica el valor nombrando el color deseado. Puede ser rojo, verde, azul, naranja, carmesí, cian o cualquier otro color con nombre. Hay alrededor de 147 colores con nombre reconocidos por los navegadores.

La sintaxis básica se ve así:

element {
    color: nombreColor
}

<p>freeCodeCamp</p>

 p {
     color: crimson;
}

Colores hexadecimales (O sólo colores Hex)

Los valores hexadecimales se utilizan para representar colores con un total de 6 caracteres. Comienzan con el signo almohadilla/número (#), luego cualquier número del 0 al 9 y finalmente cualquier letra de la A a la F.

Los 2 primeros valores representan el rojo, los dos siguientes representan el verde y los 2 últimos representan el azul. Con valores hexadecimales, no hay límite para los tonos de colores que puedes usar.

<p>freeCodeCamp</p>

 p {
    color: #dc143c;
 }

Colores RGB

RGB significa rojo, verde y azul. Con RGB, especificas el color en términos de la cantidad de rojo, verde y azul deseados. Los tres se expresan con números entre 0 y 255.

Hay un tipo de RGB llamado rgba. La 'a' adicional significa alfa, lo que permite especificar la opacidad del color. Toma un valor de 0,0 a 1,0: 0,0 significa 0 % de opacidad, 0,5 significa 50 % de opacidad y 1,0 significa 100 % de opacidad.

La sintaxis básica es rgba(cantidadDeRojo, cantidadDeVerde, cantidadDeAzul, alfa).

Puedes limitarlo a rgba(cantidadDeRojo, cantidadDeVerde, cantidadDeAzul) si no deseas un valor alfa.

Aquí está la sintaxis de los valores RGB regulares:

<p>freeCodeCamp</p>

 p {
   color: rgb(220, 20, 60);
 }

Y aquí está demostrando el valor alfa en acción con un 50 % (0,5) de opacidad:

p {
    color: rgb(219, 20, 60, 0.5);
}

Colores HSL

HSL significa tono, saturación y luminosidad. Es otra forma de especificar el color del texto (y cualquier otra cosa que tome color) en CSS.

• Hue representa la rueda de color en 360°. Entonces, 0° es rojo, 120° es verde y 240° es azul.
• La saturación es la cantidad de gris en el color, expresada como un porcentaje. 0% es el tono de gris y 100% es el color en sí.
• La luminosidad es la cantidad de oscuridad y luminosidad en el color expresada como porcentaje. 0% es negro y 100% es blanco.

Al igual que con los colores RGB, también puedes establecer la opacidad del color. Entonces, también está hsla.

La sintaxis básica completa es hsl(GradoColor, PorcentajeSaturación, PorcentajeLuminosidad, alfa). Puedes limitarlo a hsl(GradoColor, PorcentajeSaturación, PorcentajeLuminosidad) en caso de que no desees un valor alfa.

<p>freeCodeCamp</p>

 p {
   color: hsl(348, 83%, 47%);
 }

Puedes aplicar una opacidad particular al color hsl como este:

 p {
   color: hsla(348, 83%, 47%, 0.5);
  }

¿Debes utilizar colores con nombre, colores hexadecimales, colores RGB o colores HSL para asignar colores?

Una de las cosas maravillosas de CSS es que hay múltiples formas de hacer lo mismo. Has visto esto al aplicar colores al texto.

Dado que puedes aplicar colores de 4 maneras diferentes, debes preguntarte cuál es la mejor para usar.

Cuando usas colores con nombre, estás un poco limitado en cuanto a cuán lejos puedes llegar al aplicar diferentes tonos de colores. El rojo, el verde, el azul, el amarillo o cualquier otro color con nombre tiene muchas variaciones a las que no tendrás acceso con los colores con nombre. Solo tendrás acceso a alrededor de 147 colores predefinidos reconocidos por los navegadores.

Los colores hexadecimales son muy dinámicos. Son los más utilizados entre los desarrolladores porque el límite es tu creatividad. Con los colores hexadecimales, puedes usar varios tonos e incluso usar un color que nadie haya usado nunca.

Los colores RGB son tan dinámicos como los colores hexadecimales. Además de poder especificar cuánto rojo, verde y azul deseas de 0 a 255, también puedes establecer qué tan transparente deseas que sea el color con el valor alfa adicional.

HSL es el más dinámico de todos. Puedes especificar el color exacto que deseas en grados de 0 a 360 dentro de la rueda de colores, establecer qué tan saturado y oscuro deseas que sea en porcentajes, y también establecer una opacidad de 0.0 a 1.0.

Realmente, depende de ti, del uso que le quieras dar y de cuán creativo o específico quieras ser.

Conclusión

La aplicación de colores al texto ayuda a que tu sitio web sea más atractivo para los visitantes. La combinación de colores correcta también puede ayudarte a que el contenido sea más legible.

En este artículo, has aprendido cómo aplicar colores al texto con los 4 tipos diferentes de valores que puedes usar con la propiedad de color.

Gracias por leer, y sigue programando.

Cuando estás diseñando un sitio web, es realmente importante que tu contenido se vea bien en cualquier tamaño de pantalla.

En éste artículo, hablaré de cómo usar el diseño adaptable y media queries para lograrlo. También daré ejemplos de código para media queries usando valores máximos y mínimos de tamaños de pantalla.

¿Qué es el Diseño Adaptable?

El Diseño Adaptable es la práctica de asegurarse que tu contenido se vea bien en todos los tamaños de pantalla. Todo en el sitio web incluido el diseño, la fuente y las imágenes deberían adaptarse automáticamente al dispositivo del usuario.

A principios de los 2000, los programadores se enfocaban en hacer que sus sitios web se vieran bien en pantallas más grandes como laptops y computadoras de escritorio. Hoy en día, debes considerar dispositivos como teléfonos móviles, tabletas e inclusive relojes.

Un importante componente del diseño adaptable son los media queries.

¿Qué es un Media Query?

En CSS, un media query (en español "consultas de medios") se utiliza para aplicar una series de estilos basados en ciertas características del navegador incluido ancho, alto o resolución de una pantalla.

Puedes ver un ejemplo de media query en la página de currículo de freeCodeCamp

Para pantallas más grandes, como las de un ordenador de escritorio, podemos ver un menú de búsqueda en la esquina superior izquierda.

Pero en dispositivos móviles, no se encuentra el buscador y sólo tenemos el menú de opciones y el botón de registro.

Sintaxis básica de un media query

Aquí está la sintaxis básica de un media query en CSS:

@media tipo-de-medio (característica-del-medio){
/*Los estilos van aquí*/
}

Veamos por partes lo que está sintaxis significa.

La @media  es un tipo de At-rule ("regla de arroba") en CSS. Estas reglas dictarán cómo el CSS se verá basado en ciertas condiciones.

El tipo de medio se refiere a la categoría de medio para el dispositivo. Los diferentes medios incluyen all (todos), print (impresoras), screen (pantallas) y speech (discurso).

• all (todos) - funcionan para todos los dispositivos
• print (impresoras) - funciona para dispositivos donde el medio es el modo de vista preliminar de impresión
• screen (pantallas) - funciona para dispositivos con pantallas
• speech (discurso) - funciona para dispositivos como lectores de pantalla donde el contenido le es leído al usuario por el dispositivo.

Según la documentación,

Excepto cuando se utilizan los operadores lógicos not o only, el tipo de medio es opcional y el tipo all está implícito.

Puedes omitir el tipo de medio y usar la siguiente sintaxis en su lugar.

@media (característica-del-medio){
/*Los estilos van aquí*/
}

La característica del medio se refiere a las características del navegador que incluye altura y anchura del viewport, orientación o relación de aspecto. Para una lista completa de las características de medios, por favor visita la documentación de MDN.

Para éste artículo, nos centraremos en la característica del medio "width" (en español "ancho").

Si quieres crear media queries más complejos, puedes usar operadores lógicos.

• and - Éste operador se usa para unir múltiples características de medio. Si todas las características de medio son verdaderas entonces los estilos dentro de las llaves serán aplicados a la página.
• not - Este operador invierte una consulta verdadera a falsa y una consulta falsa a verdadera.
• , (coma) - Éste operador separa múltiples características de medios por comas y aplica los estilos dentro de las llaves si una de las condiciones es verdadera.

Ejemplos de media query

Veamos algunos ejemplos que muestran cómo usar los media queries en CSS.

En el primer ejemplo, queremos que el color de fondo cambie a azul cuando el ancho del dispositivo sea 600px o menos.

En el CSS, queremos añadir (max-width: 600px) a la característica del medio que le dice a la computadora que identifique los dispositivos con un ancho de pantalla de 600px o menos.

Dentro del media query, cambiamos los estilos del fondo para el elemento body background-color: #87ceeb;.

Aquí está el media query completo:

@media (max-width: 600px) {
  body {
    background-color: #87ceeb;
  }
}

Aquí está el ejemplo en CodePen. Si das clic en el icono "Edit on CodePen" en la esquina superior derecha, puedes hacer pruebas en Codepen.

En el segundo ejemplo, queremos cambiar el color de fondo de azul a rojo si el dispositivo tiene un ancho de pantalla entre 600 y 760px. Podemos usar el operador lógico and para lograr esto.

@media (min-width: 600px) and (max-width: 768px) {
  body {
    background-color: #de3163;
  }
}

Aquí está el ejemplo completo en CodePen para que pruebes:

Cuando pruebes con ello, deberías ver que el color de fondo es azul si el ancho de pantalla es por debajo de 600px o por encima de 769px

¿Deberías escribir un media query para cada dispositivo en el mercado?

La respuesta corta a esa pregunta es no.

Hay demasiados dispositivos en el mercado para intentar escribir un media query para cada dispositivo. La tecnología está siempre cambiando lo que significa que nuevos dispositivos estarán siempre emergiendo.

Es más importante que identifiques un rango de dispositivos usando media queries. En el artículo de freeCodeCamp de Cem Eygi, enumera algunos puntos de ruptura comunes utilizados para las consultas de medios.

• 320px — 480px: Dispositivos móviles
• 481px — 768px: iPads, Tabletas
• 769px — 1024px: pantallas pequeñas, laptops
• 1025px — 1200px: Computadoras de escritorio, pantallas grandes
• 1201px y más —  Pantallas extra-grandes, TV

Conclusión

El Diseño Adaptable es la práctica de asegurarse que tu contenido se verá bien en todos los tamaños de pantalla. Todo en el sitio web incluido el diseño, la fuente y las imágenes deberían adaptarse automáticamente al dispositivo del usuario.

En CSS, un media query es usado para aplicar una serie de estilos basados en las características del navegador incluyendo el ancho, alto o resolución de una pantalla.

Aquí está la sintaxis básica para un media query en CSS.

@media (característica-del-medio){
/*Los estilos van aquí*/
}

El tipo de medio es opcional a menos que uses los operadores lógicos not u only. Si el tipo de medio es omitido entonces el media query apuntará a todos los dispositivos.

Espero que hayas encontrado éste artículo de ayuda y la mejor de la suerte en tu recorrido por CSS.

El CSS es complejo, pero también puede ser flexible, y es esto mismo lo que nos permite arrojar estilos sin mucho cuidado en nuestros archivos CSS.

Nuestra página aún carga. No hay "crashes".

Cuando hablamos del ancho y el alto de una página, ¿sabes qué es lo que se debe configurar en el elemento HTML? ¿Qué hay del elemento body?

¿Simplemente colocas algunos estilos en ambos elementos y esperas que resulte de la mejor manera?

Si lo haces, no eres la única persona en esta situación.

Las respuestas a esas preguntas no son intuitivas.

Soy 100% culpable de emplear estilos en ambos elementos en el pasado, sin considerar de forma apropiada cuál es la propiedad que debería ser aplicada a cada elemento. ?‍♂️

No es raro ver propiedades de CSS aplicadas tanto al elemento HTML como al body, de esta forma:

html, body {
     min-height: 100%;
}

¿Esto importa?

Sí, importa.

La definición vista más arriba crea un problema:

Configurar el min-height en 100% en ambos elementos no permite que el elemento body ocupe toda la página como se podría esperar. Si se chequean los valores de estilo luego de la ejecución con las herramientas de desarrollo, el elemento body tiene un alto de cero.

Mientras, el elemento HTML tiene una altura igual a la parte visible de la página en el navegador.

Mira la siguiente captura de pantalla desde los Chrome Dev Tools:

¿Por qué sucede esto?

Utilizar un porcentaje como valor para un tamaño requiere que el elemento referencie a un padre sobre el cual basar la proporción.

El elemento HTML referencia al viewport que tiene una altura igual a su parte visible. Sin embargo, solo configuramos el min-height al elemento HTML... NO un valor de altura.

Entonces, el elemento body no tiene un valor de altura de un padre para referenciar al calcular a qué debería ser igual el 100%.

Y el problema puede estar escondido

Si has comenzado con suficiente contenido para completar el body de la página, quizás no hayas notado este problema.

Y para hacerlo aún más difícil de notar, si se configura un background-color en ambos elementos o inclusive solo en uno de ellos, el viewport tomará ese color. Esto da la impresión de que el elemento body es tan alto como el viewport.

No lo es. Su altura aún es cero.

La imagen de más arriba fue tomada de una página con el siguiente código CSS:

html, body {
    min-height: 100%;
}
body { background-color: dodgerblue; }

¿Herencia a la inversa?

En un giro extraño, el elemento HTML asume el background-color del elemento body si no se configura un background-color por separado para el mismo.

¿Entonces cuál es el alto ideal para una página responsiva?

Durante años, la respuesta fue la siguiente:

html {
    height: 100%;
}
body {
    min-height: 100%;
}

Esto permite que el elemento HTML referencie al viewport padre y tenga un valor de altura igual al 100% del valor del viewport.

Con el elemento HTML recibiendo un valor de altura, el min-height asignado al elemento body le da una altura inicial que coincide con el del elemento padre.

Esto permite que el body pueda crecer en altura si el contenido es mayor a la zona visible de la página.

La única desventaja de esto es que el elemento HTML no puede crecer más allá del alto del espacio visible del viewport. Sin embargo, permitir que el elemento body pueda ir más allá del elemento HTML se ha considerado una práctica aceptable.

La solución moderna se ha simplificado

body { min-height: 100vh; }

Este ejemplo utiliza unidades  vh (alto del viewport) para permitir que el body configure un alto mínimo en base al alto total del viewport.

Como se ha mencionado previamente respecto al background-color, si no se configura un valor de altura para el elemento HTML, este asumirá que el valor es aquel que se le otorga al elemento body.

Por lo tanto, esta solución evita que el elemento body se extienda por demás como en la solución anterior y ¡ambos elementos crecerán con el contenido!

El uso de unidades vh ha causado algunos inconvenientes en navegadores en dispositivos móviles, pero parece que Chrome y Safari ahora manejan estas unidades de forma consistente.

El alto de página puede causar que aparezca una barra de desplazamiento horizontal

Esperen, ¿qué?

¿No debería esto decir "ancho de página"?

No.

En otra serie extraña de eventos, el alto de página puede activar la aparición de la barra de desplazamiento horizontal en el navegador.

Cuando el contenido de la página es más extenso que la altura del viewport, se activa la barra de desplazamiento vertical a la derecha. Esto puede causar que la página automáticamente también obtenga una barra de desplazamiento horizontal.

Entonces, ¿cuál es la solución?

Quizás puedas dormir mejor sabiendo que comienza con la configuración del ancho de página.

Este problema aparece cuando cualquier elemento - no solo el de HTML o el body - se configura en 100vw (ancho de viewport).

Las unidades de viewport no tienen en cuenta los 10 pixeles (aproximadamente) que toma la barra de desplazamiento vertical.

En consecuencia, cuando se activa la barra de desplazamiento vertical, también aparece la horizontal.

¿Cómo configurar la página para tomar el ancho completo?

Quizás no se deba hacer.

El no establecer un ancho en los elementos HTML y body provoca que los mismos tomen por defecto el tamaño total de la pantalla. Si estableces un ancho distinto a auto, considera utilizar una regla CSS para configurar los valores iniciales primero.

Recuerda, por defecto, el elemento body tiene un margen de 8px en todos sus lados.

Una regla de CSS para establecer los valores iniciales puede remover esto. De otra forma, el configurar el ancho en 100% antes de quitar los márgenes puede ocasionar que el elemento body se desborde. Aquí está la regla CSS que utilizo:

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Cómo establecer el ancho a tu preferencia

Aunque no siempre sea necesario establecer un ancho, en general lo hago.

Quizás solo sea un hábito.

Si estableces un ancho de 100% en el elemento, body obtendrás una página que tome el ancho total. Esto es prácticamente lo mismo que no configurar un ancho y dejar que simplemente se tome el valor por defecto.

Si quieres utilizar el elemento body como un contenedor más pequeño y dejar que el elemento HTML rellene la página, podrías configurar un valor de max-width en el body.

Aquí hay un ejemplo:

html { background-color: #000; } 
body {
    min-height: 100vh;
    max-width: 400px;
    background-color: papayawhip; 
    margin: 0 auto;
}

Conclusión

Cuando no se provee un valor de altura para el elemento HTML, configurar un alto y/o min-height en el elemento body a 100% da como resultado una altura cero (antes de que agregues contenido).

Sin embargo, cuando no se provee un valor de ancho al elemento HTML, configurar el mismo del elemento body a 100% resulta en una página que toma el ancho completo.

Esto puede ser poco intuitivo y confuso.

Para crear una página que ocupe el alto completo y que sea responsiva, configura el min-height del elemento body en 100vh.

Si estableces un ancho de página, elige 100% por sobre 100vw para evitar la aparición sorpresa de barras de desplazamiento horizontales.

Te dejaré con un tutorial de mi canal de YouTube que muestra las configuraciones de alto y ancho en CSS para una página HTML que ocupa todo el tamaño de pantalla y se adapta a su contenido:

¿Tienes alguna otra forma de establecer el alto y el ancho por medio de CSS que sea de tu preferencia?

¡Comparte tu método!