Fundamentos de CSS

Author: Raul Lopez
Category: Fundamentos
Elapsed time: 3 months ago
Published: 6/5/2025
Description: Todo lo esencial para aprender CSS

CSS, o Hojas de Estilo en Cascada, es una herramienta fundamental en el desarrollo web que nos permite dar estilo a nuestros documentos HTML.

CSS es mucho mas importante de lo que puedes creer y mucho subestiman el poder de esta gran herramienta, ya que con ella nosotros podemos darle el estilo que querramos a nuestras paginas web, haciendo que luzcan elegantes y presentables.

Un error que comenten muchos desarrolladores de software es no aprender las bases de esta herramienta y por ende, terminan odiando esta herramienta porque en el dia a dia, no logran dominarla y esto les causa frustacion y un gran desapego a esta tecnologia.

En css tambien tenemos paqueterias estas herramientas de utilidades o frameworks de diseños de componentes, los cuales cuentan con pre diseños ya echos como boostrap, talwind, con base de desarrollo en css. Muchos desarrolladores optan por iniciar a utilizar estas librerias en sus proyectos, pero antes de intentar correr debemos aprender a caminar.

En este post de mi blog, hablare sobre todos los conceptos principales de css, responsive desing y accesibilidad.

Si te interesa aprender CSS es recomendaro que primero aprendas HTML, puedes acceder a un post en mi web donde hablo sobre todo lo ecencial de html, accediendo aqui

Implementacion Basica de CSS en HTML

Estructura básica del proyecto

Antes que nada, debemos asegurarnos de tener una buena organización de las carpetas y archivos de nuestro proyecto. Aquí te comparto un enfoque recomendado:

  1. Crea una carpeta: Organiza tu proyecto creando una carpeta llamada, por ejemplo, clases-css.
  2. Genera el archivo HTML: Dentro de la carpeta, crea un archivo llamado index.html.
  3. Organiza CSS y HTML: Mantén tus documentos HTML y CSS en archivos separados para mejorar la organización y mantenimiento.

¿Cómo enlazar CSS al proyecto HTML?

Para que el HTML pueda “ver” y utilizar nuestros estilos en CSS, necesitamos crear una referencia adecuada. Aquí te muestro las diferentes formas de hacerlo:

Enlace de archivo externo: Esta es la forma más recomendada y profesional.

Crea un archivo CSS, por ejemplo, style.css. En el index.html, dentro de la etiqueta <head>, usa la etiqueta <link> para enlazar el CSS:

<link rel="stylesheet" href="style.css">

Asi quedaria en nuestro HTML con la etiqueta link con referencia a nuestro archivo css:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
    <title>CSS</title>
</head>
<body>
    
</body>
</html>

Nota: una buena practica es tener una carpeta para nuesto html y otra para nuestro css.

Ahora todo el codigo que nosotros modifiquemos en el archivo de style.css se tendria que ver reflejado en nuestro html, asi es como deberiamos llamar nuestros estilos en cada hoja de html para tener separado nuesto codigo de etiqueas html del codigo css.

El nombre del archivo tu lo decides pero nomal mente se utilizan:

  • style.css
  • main.css
  • estilos.css

Existen otras dos formas de implementar css.

opcion 2 : uso de la etiqueta style

Otra manera de referenciar los estilos es crear una etiqueta <style></style> dentro del head de nuestro codigo css, pero esto es considerado una mala practica porque puede crecer demasiado el codigo y ademas el tiempo de carga seria muy lento. Aqui esta un ejemplo de como se miraria:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
	<style>
		// Aqui adentro
		p {
        color: red;
    	}
	</style>
</head>
<body>
    
</body>
</html>

Pero recuerda, esto es una mala practica y cuando se llegue a usar lo recomendable es utilizar el menor codigo posible.

opcion 3 : Estilo embebido, como atributo en una etiqueta html directamente.

Esta es la forma menos recomendada, ya que podrías perder control sobre la apariencia y coherencia visual general. Se utiliza directamente en los elementos HTML:

<p style="color: red;">Soy un texto</p>

Tampoco es recomedable utilizar este tipo de aplicacion en nuestro css directamente porque al momento de querer hacer modificaciones cuesta mucho tiempo el estar buscando donde esta el codigo referenciado para realizar una modificacion.

Entonces la mejor idea es tener un archivo de css por componente o por hoja.

¿Cómo usar selectores CSS en HTML?

Una vez que hemos establecido la conexión entre CSS y HTML, la personalización de estilos se realiza mediante selectores. Aquí te muestro los más comunes:

Selectores de elementos: Modifican etiquetas HTML directamente, como un párrafo.

p {
    color: blue;
}

Selectores de clase: Se utilizan para aplicar estilos a múltiples elementos con el mismo atributo class.

<p class="miClase">Texto con clase</p>

.miClase {
    color: green;
}

Selectores de ID: Aplican estilos a un único elemento con el atributo id, indicado con #.

<p id="miId">Texto con ID</p>

#miId {
    color: yellow;
}

Nota: Es importante tener cuidado en como declaramos los selectores de clases y de identificadores porque son dos cosas muy distintas.

Entonces con este preview entendemos como podemos empezar a implementar CSS en nuestro proyecto

Aqui podrias hacer una lista de compras en HTML y aplicar estilos.

Como elegir el nombre correcto para llamar a nuestros selectores de clase?

Existe una metodologia que nos puede ayudar mucho en el nombramiento de nuestras clases, esta es BEM

BEM, que significa Block, Element, Modifier, es una metodología para nombrar clases CSS. Fue desarrollada por Yandex con el objetivo de facilitar la escritura y mantenimiento de código CSS, especialmente en proyectos grandes y complejos.

Principios Básicos de BEM

  1. Block (Bloque):

    • Es el contenedor más grande o una unidad independiente, como un componente.
    • Puede existir por sí solo y no depende de otros elementos.
    • Ejemplo: menu, button, card.

  2. Element (Elemento):

    • Es una parte de un bloque que no tiene sentido fuera de él.
    • Se utiliza para describir la estructura dentro de un bloque.
    • Ejemplo: menu__item, button__icon.

  3. Modifier (Modificador):

    • Es una variante o un estado de un bloque o elemento.
    • Se utiliza para cambiar la apariencia o el comportamiento.
    • Ejemplo: button--primary, menu__item--active.

Convención de Nombres

  • Bloques: Se nombran con una palabra que represente el componente o la parte visual, ej. header, footer.

  • Elementos: Se separan del bloque con dos guiones bajos, ej. header__title, footer__link.

  • Modificadores: Se separan del bloque o elemento con dos guiones, ej. button--large, header__title--highlighted.

Ventajas de BEM

  1. Escalabilidad: Facilita la gestión de estilos a medida que el proyecto crece.
  2. Reusabilidad: Permite reutilizar componentes y sus estilos de manera sencilla.
  3. Legibilidad: Los nombres de clases son claros y semánticos, lo que facilita la comprensión del código.
  4. Mantenimiento: Las modificaciones y actualizaciones son más fáciles de implementar.

BEM es ampliamente utilizado porque proporciona una estructura clara que ayuda a los equipos a trabajar de manera consistente en el desarrollo de interfaces de usuario.

Aqui te dejo un ejemplo en codigo:

<!-- BLOQUE -->
<main class="Padre">
	<!-- BLOQUE__ELEMENTO --> 
	<section class="Padre__Hijo">
		<!-- BLOQUE__ELEMENTO--MODIFICADOR -->
		<article class="Padre__Hijo--Mayor"></article>
	</section>
	<section class="Padre__Hijo"></section>
	<section class="Padre__Hijo"></section>
	<section class="Padre__Hijo"></section>
 </main>

Tiempo Medio Ejercicio:

Crear un navbar con HTML y CSS, utilizando las etiquetas, Header, nav, ul y li, Remover los puntos de la lista.

pseudo clases y los pseudo elementos en CSS

Ahora aprenderemos algo nuevo, en css tambien tenemos pseudo clases y pseudos elementos.

¿Qué son las pseudo clases y los pseudo elementos en CSS?

En el desarrollo web, el manejo adecuado de estilos en CSS es crucial para crear interfaces de usuario atractivas y funcionales. Dos de las características avanzadas que más se utilizan para estilizar componentes son las pseudo clases y los pseudo elementos. Estos nos permiten agregar estilos basados en ciertos estados o insertar contenido adicional sin cambiar el HTML. A continuación, te explico cómo se implementan y para qué sirven.

¿Cómo se configuran las pseudo clases en CSS?

Las pseudo clases permiten aplicar estilos a un elemento HTML según su estado, sin necesidad de añadir clases adicionales en el HTML. Estas son llamadas mediante el uso de dos puntos seguidos del nombre de la pseudo clase. Aquí te presento algunos ejemplos importantes:

  1. hover: Aplica un estilo cuando el usuario posa el cursor sobre un elemento.
a:hover {
    color: red;
}

Sobre pasa el mouse aqui para ver el efecto del hover

  1. active: Afecta a un elemento cuando está siendo activado (ej., presionado).
a:active {
    color: blue;
}

Algunos ejemplos:

Pseudo-clases

  • :hover: Se activa cuando se pasa el ratón sobre un elemento.
  • :active: Se activa cuando un elemento está siendo presionado.
  • :focus: Se activa cuando un elemento está enfocado, como un input.
  • :visited: Aplica estilos a enlaces ya visitados.
  • :first-child: Aplica estilos al primer hijo de un elemento.
  • :last-child: Aplica estilos al último hijo de un elemento.
  • :nth-child(n): Aplica estilos al enésimo hijo de un elemento.

¿Qué son los pseudo elementos y cómo se utilizan?

Los pseudo elementos se utilizan para designar y estilizar partes específicas de un elemento. Se introducen utilizando dobles dos puntos (::), y puedes ver un ejemplo básico de su utilidad a continuación:

::before y :: after: Permiten insertar contenido antes o después del contenido del elemento respectivo. Es especialmente útil para generar efectos decorativos:

a::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: cyan;
}

En el ejemplo anterior, ::after se utiliza para agregar una línea decorativa debajo de un enlace sin modificar el documento HTML.

Nota: Es importante la propiedad de content porque con ella y after se inserta el contenido.

Pseudo-elementos

  • ::before: Inserta contenido antes de un elemento.
  • ::after: Inserta contenido después de un elemento.
  • ::first-letter: Aplica estilos a la primera letra de un elemento.
  • ::first-line: Aplica estilos a la primera línea de un elemento.
  • ::placeholder: Aplica estilos al texto de marcador en inputs.

Este enfoque te da control sobre cómo los elementos responden a la interacción del usuario, mejorando así la experiencia de uso.

Conclusion:

  1. Pseudo classes: Define el estilo de un estado de un elemento.
  2. Pseudo elementos: Define el estilo de una parte especifica de un elemento.

Anatomia de una regla CSS: Selectores y Declaraciones

Para este punto del post ya sabemos como declarar las primeras lineas de CSS, como tener pseudo selectores pseudo clases.

Ahora veremos las reglas que dictan dentro del funcionamiento de CSS para que podemos lograr una mayor comprension de su funcionamiento y poder aplicar los estilos de manera efectiva.

¿Cómo se compone una regla de CSS?

Practiamento esto, son los estilos que estaras aplicando en css, al siguiente conjunto del ejemplo se le llama regla css:

/* Ejemplo de una regla de CSS */
/* Selector h1 */
h1 {
		color: blue; /* Propiedad: color, Valor: blue */
		font-size: 24px; /* Propiedad: font-size, Valor: 24px */
}

Es importante mencionar que todo nuestro archivo de style.css tendra un conjunto de reglas de estilos para CSS pero estas se componen de ciertas cosas en particulares:

  1. **Selector: **El primer componente de una regla CSS es el selector, que indica cuál es el elemento en el que queremos aplicar estilos.
    • Ejemplos comunes de selectores son etiquetas HTML (p, div, h1), clases (precedidas por un punto, como .clase) o IDs (precedidos por una almohadilla, como #id).
  2. Apertura y cierre:
    • Punto y coma (;): Cada declaración dentro de una regla debe terminar con un punto y coma. Omidir este detalle esencial puede romper la cadena de estilos y afectar la visualización.
    • Llaves ({ }): Estas deben estar correctamente cerradas. Una llave que no se cierra adecuadamente puede impedir que los estilos se apliquen.
    • Selector correcto: Usar un selector que no existe o con errores tipográficos hará que los estilos sean ignorados.
  3. Declaración: Después del selector, se utilizan llaves {} para contener las declaraciones de estilo.
    • Una declaración de estilo se compone de una propiedad y un valor.
    • Las propiedades son las características que deseas cambiar, como el color o la fuente.
    • Los valores determinan cómo quieres que se vea dicha propiedad.

¿Qué pasa si no sigues las normas CSS?

La importancia de seguir correctamente la sintaxis de CSS no puede subestimarse. Un pequeño error puede llevar a:

Estilos no aplicados correctamente.

  • Discrepancias visuales.
  • Dificultades en el mantenimiento del código.
  • Por tanto, familiarizarse y respetar la estructura y reglas del CSS asegura una mejor presentación de contenido y facilita la comunicación con otros desarrolladores en proyectos futuros.

Adquirir y aplicar correctamente esta estructura básica de CSS es no solo crucial para el desarrollo web, sino también para colaborar con otros front-end en tu carrera profesional. Esto servirá como la base para entender temas más avanzados como el modelo de caja en CSS.

Modelo de caja

Modelo De caja

¿Qué es el modelo de caja en CSS?

Cuando trabajamos con CSS, es esencial comprender el concepto de “modelo de caja”, ya que es la base para aplicar estilos visuales a los elementos HTML. Imagina que cada elemento renderizado se comporta como una caja, la cual está compuesta por cuatro áreas principales: el contenido, el padding, el borde y el margin.

Cuando nosotros agregamos elementos de HTML estos son renderizados por el navegador como cajas, todo se convierte en cajas que usan contenedores y que pueden llevar contenido y a estas cajas se le pueden agregar ciertos estilos. A estos estilos se le llaman modelo de caja y los estilos son los siguientes:

  1. Margin: Es el espacio externo de la caja hacia afuera. Funciona como una separación entre la caja y otros elementos. Aunque el margin es transparente y no visible, asegura que la caja tenga un respiro alrededor de otros elementos en la página.

  2. **Borde: ** *Es la línea que rodea el contenido de la caja. *El borde puede tener color y grosor, permitiendo destacarse si es necesario. Por defecto, es transparente, pero lo puedes personalizar.

  3. Padding: Este es el espacio interno de la caja hacia adentro. Ayuda a posicionar el contenido dentro de la caja, brindando un margen interno entre el contenido y los bordes del elemento.

  4. ** Contenido** Aqui se renderea el contenidog ingresado dentro del elemento, puede ser texto, imagenes, video, otros selectores.

¿Cómo se establece el tamaño y el posicionamiento?

Con esto tambien tenemos distintas clases como width, height, clases de posicionamiento como top, left, right, bottom para la caja:

**Width y Height: ** Dictan el ancho y el alto de la caja, respectivamente. Puedes manipular estos valores para ajustar tanto el tamaño del contenedor como el del contenido dentro de él.

Posicionamiento: Utilizando propiedades como top, bottom, right y left, puedes mover la caja en cualquier dirección, según se requiera.

A continuacion tambien podemos ver una imagen ilustrativa sobre como se se reflejan los colores de estas propiedades en la herramienta de desarrollo (Dev Tools) Modelo Caja2

Ejemplo práctico del modelo de caja en CSS Para entender mejor el modelo de caja, veamos un ejemplo de código en HTML y CSS.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>Modelo de Caja</title>
</head>
<body>
    <main>
        <section>
            <h1>Soy un título</h1>
            <div>
                <p>Soy un párrafo</p>
            </div>
        </section>
    </main>
</body>
</html>

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

main {
    width: 100%;
    height: 500px;
    border: 10px solid gray;
    padding: 20px 35px;
}

¿Cómo prevenir problemas con el scroll?

A menudo, cuando aplicas padding y border, estos pueden causar que la caja se desborde, generando barras de scroll no deseadas. Una solución eficaz es utilizar box-sizing: border-box, lo cual asegura que el tamaño total del elemento respete las dimensiones del padding y el borde. Así, al establecer un ancho del 100%, el navegador automáticamente reajusta el contenido para evitar el scroll horizontal.

¿Qué debes recordar siempre?

Al comenzar con CSS, es crucial reiniciar los estilos predeterminados del navegador (Si cada navegador agrega estilos universales), lo que incluye margin y padding, aplicando el selector universal *. Esto garantiza que no tengas comportamientos inesperados en las dimensiones de los elementos:

  1. Resetear Padding y Margin: Usar * { margin: 0; padding: 0; }.
  2. Box-sizing Universal: Agregar box-sizing: border-box; en el selector universal para un manejo más uniforme de las dimensiones.

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Este tema es muy importante dominar en css porque este tema de la herencia, en el mundo de la programacion tambien es conocido como “Cascada”.

¿Qué es la herencia en CSS?

Esta herencia es el codigo CSS que se le pasa a un padre a un hijo. Entonces este concepto es clave que debe entenderse para dominar como los estilos se aplican en un documento HTML, Fundamentalmente. Se refiere a la capacidad de ciertos estolos de “Fluir” desde un elemento padre hasta sus hijos. Comprender este mecanismo ofrece un control mas preciso sobre la representaciuon visual de nuestra pagina web, evitando y permitiendo diseñar con intencianalidad.

¿Cómo afecta la herencia al diseño en CSS?

La herencia en CSS se refiere al fenómeno por el cual algunos estilos establecidos en un elemento HTML se transmiten automáticamente a sus elementos hijos. Por ejemplo, al definir un tamaño de fuente en la etiqueta <html>, ese tamaño puede propagar a etiquetas como <p> o <span> que no tengan un tamaño de fuente definido explícitamente.

  • Propiedades herederas comunes: tamaño de fuente (font-size), color de texto (color).
  • Propiedades no herederas: márgenes (margin), posición (position), anchura (width).
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Herencia</title>
</head>
<body>
    <main>
        <h1>Soy un título</h1>
        <p>Soy un párrafo</p>
    </main>
</body>
</html>

html {
    font-size: 75%; /* Aplica un 75% del tamaño de fuente por defecto */
    font-family: Verdana, sans-serif; /* Cambia la fuente a Verdana */
}

En el ejemplo anterior, se establece un tamaño de fuente del 75% para la etiqueta <html>. Esto significa que todos los elementos de texto dentro del documento heredarán este tamaño de fuente, a menos que se defina un tamaño específico en ellos.

¿Cómo controlar o romper la herencia?

En CSS, puedes decidir explícitamente cuándo deseas que un elemento herede propiedades. Mediante el uso de la propiedad inherit, puedes forzar a un elemento a que tome el estilo de su elemento padre, aunque no lo haga por defecto.

h1 {
    font-size: inherit; /* Hereda el tamaño de fuente del padre más cercano con tamaño definido */
}

En este código, el h1 tendrá el mismo tamaño de fuente que su padre, siempre y cuando el elemento padre tenga un tamaño de fuente explícito.

¿Por qué es importante comprender la herencia?

Entender la herencia permite evitar errores comunes y optimiza el código CSS. Algunas razones para dominar la herencia incluyen:

  • Consistencia en el diseño: Asegura que los estilos se apliquen uniformemente en toda la página.
  • Menor repetición de código: Reducir la necesidad de redefinir estilos para cada elemento.
  • Flexibilidad y control: Facilita el ajuste preciso del estilo donde sea necesario, rompiendo la herencia cuando ciertos elementos requieren un tratamiento diferente.

Este conocimiento no solo mejora la eficiencia en el desarrollo de las hojas de estilo, sino que también habilita la creación de diseños complejos con menos esfuerzo. Invito a seguir profundizando en estos conceptos y experimentar con diferentes técnicas para perfeccionar tus habilidades en CSS. ¡Continúa explorando el mundo fascinante del diseño web!

Funny Example:

Modelo Herencia

Especificidad y Orden de Declaración en CSS

¿Cómo se controla el orden de la declaración de CSS?

Entender el orden de declaración y especificidad en CSS es vital para cualquier desarrollador web. Puede ser frustrante ver estilos que no se aplican como se espera, pero con una comprensión clara de la herencia y especificidad de CSS, estas frustraciones pueden minimizarse eficazmente. Aquí descubrirás cómo controlar las declaraciones de CSS y cómo afectan el resultado visual final de tu proyecto.

¿Cómo afectan la especificidad y el orden de las reglas CSS?

CSS y el navegador tiene un orden jerarquico respecto como se controla el odrden al declarar CSS, entonves cuando se genera un conflicto de estilos, CSS sigue las siguientes reglas estrictas para resolverlo:

  1. Hoja de estilos de agente de usuario (Estilos del navegador)
  2. Declaraciones normales en hojas de estilo de autor (Nuestro .css)
  3. Declaraciones importantes en hojas de estilos de autos (Al utilizar el !important)

¿Cómo funciona la cascada de CSS?

Importancia: El navegador carga estilos de distintas fuentes. Primero aplica los estilos predeterminados del usuario (navegador), luego los estilos escritos por los desarrolladores, y por último aplica aquellos con la etiqueta !important al final de una declaración. La recomendación es evitar el uso de !important pues puede complicar la gestión de estilos.

Especificidad: La especificidad es crucial y se mide de derecha a izquierda:

Importancia Jerarquica: (Mas Importante)

  1. [1,0,0,0,0] - !important (evitarlo por malas prácticas).
  2. [0,1,0,0,0] - Estilos inline.
  3. [0,0,1,0,0] - Estilos aplicados a #IDs.
  4. [0,0,0,1,0] - Estilos aplicados a .class clases y pseudoclases.
  5. [0,0,0,0,1] - Estilos aplicados a selectores de elementos HTML.

(Menos Importante)

En Visual Studio Code, podemos ver la herencia de los elementos al sobre poner el cursor por encima de los elementos:

Modelo Herencia Aplicado

¿Cómo se utiliza el orden de las fuentes?

El orden en el que se cargan los archivos CSS también importa. CSS sigue una lógica de cascada, donde el último estilo declarado tiene más peso. Aquí algunas recomendaciones:

  • Asegúrate de que los estilos más generales estén declarados primero y las especificaciones posteriores se apliquen a lo largo del archivo.
  • Mantén en mente que estilos externos importados después de tus declaraciones podrían sobrepasar tus estilos sin importar su especificidad.

Consejos prácticos

  • Evita !important a menos que sea absolutamente necesario para sobrescribir un estilo y comprende los inconvenientes potentes que puede generar. -Gestiona la especificidad eficazmente mediante el uso de selectores CSS con la especificidad adecuada al elemento o clase afectado.
  • Contrólalo visualmente utilizando herramientas o calculadoras de especificidad que te ayuden a predecir qué estilos serán aplicados y sus prioridades.
  • Ordena el código conscientemente dentro de tu documento CSS, asegurándote de que tus estilos no sean inadvertidamente sobrepasados.

Calculadora de Herencia: https://codecaptain.io/tools/css-specificity-calculator

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

¿Cómo crear una estructura básica de HTML con estilos CSS? Crear una estructura básica de HTML y asociarla con estilos CSS es una habilidad fundamental para cualquier desarrollador frontend. La práctica incluye el uso de etiquetas esenciales, como <header>, <nav>, <h1>, <ul>, y <li>, así como la implementación de clases e IDs para manejar la especificidad en los estilos.

  1. HTML básico:
  • Genera un archivo index.html.
  • Crea una estructura básica con etiquetas de encabezado y navegación.
  • Aquí hay un ejemplo de cómo puede verse el HTML inicial:
<header class="page-header">
  <h1 id="page-title" class="title">Empresa</h1>
  <nav>
    <ul id="main-nav" class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Cursos</a></li>
      <li><a href="#">Instructores</a></li>
      <li><a href="#" class="blog">Blog</a></li>
    </ul>
  </nav>
</header>
  1. CSS básico:
  • Crea un archivo de estilos CSS.
  • Vincula el archivo CSS con el HTML utilizando <link rel="stylesheet" href="styles.css">.
  • Aplica estilos iniciales globales como margin, padding y box-sizing.
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

¿Por qué son importantes las clases e IDs en CSS?

Las clases e IDs son fundamentales en CSS, ya que permiten especificar de manera precisa qué estilos aplicar a ciertos elementos. Es esencial entender cómo usar cada uno para no caer en problemas de especificidad.

  • IDs: Son únicos y se usan para un solo elemento en una página. Se declaran en CSS con el símbolo # y poseen una mayor especificidad que las clases.
#page-title {
  font-family: Arial, sans-serif;
}
  • Clases: Son reutilizables y pueden aplicarse a múltiples elementos. Se declaran en CSS con el símbolo ..
.nav {
  list-style: none;
}

La correcta utilización de clases e IDs asegura que los estilos CSS se apliquen como esperado y facilitan el mantenimiento del código.

¿Cómo manejar conflictos de especificidad en CSS?

Un tema recurrente en CSS es el manejo de la cascada y la especificidad. Cuando varios estilos compiten entre sí, comprender cómo los navegadores determinan cuál aplicar es crucial para el diseño consistente de una página web.

  1. Especificidad y orden de importancia: La prioridad de aplicación se regula en el siguiente orden:
  • !important (debe evitarse por uso excesivo).
  • Estilos en línea (embebidos).
  • IDs.
  • Clases, pseudo-clases y atributos.
  • Elementos y pseudo-elementos.
  1. Ejemplo de conflicto de especificidad:
  • Supongamos que se desea sobreescribir un estilo embebido (style=“background-color: orange;”) con una clase definida en CSS:
.blog {
  background-color: red;
}
  • Si el color no cambia en el navegador, es porque el estilo embebido tiene mayor especificidad. La solución recomendada es remover el estilo embebido y confiar en una definición clara y adecuada en CSS.
  1. Recomendación: Evita usar estilos embebidos, ya que estos dificultan el mantenimiento del código y presentan conflictos de especificidad difíciles de resolver.

Conclusion Herencia:

  1. Los !important estarán por encima de los demás estilos. Sin embargo, son mala práctica y no se deberían usar.
  2. Los estilos embebidos en el HTML, es decir inline styles están por encima de las clases y IDs. Sin embargo, también se deberían evitar.
  3. Los IDs están por encima de las clases. Los IDs son específicos, si se usa uno en un archivo HTML ya no se podrá repetir más en ese mismo archivo. Mientras que las clases si se pueden repetir en cualquier elemento.
  4. Un estilo de etiqueta es el último valor que el navegador tiene en cuenta antes de tomar los estilos por defecto de esa etiqueta. Los estilos de etiqueta son los que menos peso tienen.

Combinadores CSS: Hermanos Adyacentes y Especificidad

¿Qué son los combinadores en CSS?

Los combinadores en CSS son esenciales para definir estilos con especificidad sin depender de los IDs. Nos permiten seleccionar y aplicar estilos a elementos basándonos en sus relaciones con otros elementos. Los cuatro combinadores más utilizados son:

  1. Hermano adyacente (+): Selecciona el primer hermano inmediato que sigue a un elemento específico.
  2. Hermano general (~): Selecciona todos los hermanos posteriores a un elemento específico.
  3. Hijo directo (>): Selecciona el hijo directo de un elemento determinado.
  4. Descendiente (espacio): Selecciona a todos los descendientes de un elemento, independientemente de cuán profundamente anidados estén. A continuación, profundizaremos en uno de ellos: el combinador de hermano adyacente.

¿Cómo funciona el combinador de hermano adyacente?

El combinador de hermano adyacente (adjacent sibling) nos permite seleccionar un elemento que sigue inmediatamente después de otro en el mismo nivel jerárquico. Veamos un ejemplo que lo ilustrará mejor.

Estructura del documento HTML

Para explicar el uso del combinador, consideremos la siguiente estructura:

<div>
  <h2>Soy un H2</h2>
  <p>Soy un etiqueta de párrafo</p>
  <h2>Soy un H2</h2>
  <h3>Soy un H3</h3>
  <p>Soy un etiqueta de párrafo</p>
  <h2>Soy un H2</h2>
  <p>Soy un etiqueta de párrafo</p>
</div>

Aplicación de estilos con CSS

El objetivo es aplicar un estilo específico a los párrafos (<p>) que siguen directamente a un <h2>.

h2 + p {
  color: red;
}

Este código CSS cambiará el color del texto a rojo únicamente para los <p> que son hermanos adyacentes de un <h2>. Así es como funciona:

El primer <p> es adyacente a un <h2>, por lo tanto su texto será rojo. El segundo <p> no es adyacente a un <h2>, ya que le precede un <h3>. El tercer <p> sí es adyacente a un <h2>, por lo tanto también tendrá texto rojo.

Ejecución en el navegador

Al cargar el documento HTML en el navegador, podrás ver que solo los párrafos correctos reciben el estilo especial. Así es como funciona la especificidad y la herencia de estilos cuando usamos combinadores en CSS.

Este tipo de combinadores es extremadamente útil cuando trabajamos con estructuras HTML complejas, donde la organización de los elementos puede no ser predecible y deseamos evitar el uso excesivo de clases y IDs para manejar el estilo.

¿Por qué usar combinadores en proyectos grandes?

En proyectos de gran envergadura, donde pueden haber múltiples niveles de anidamiento y repetidas estructuras de elementos similares, los combinadores permiten:

  • Especificidad sin IDs: Un enfoque limpio y fácil de mantener para aplicar estilos específicos.
  • Flexibilidad: Permite hacer ajustes rápidamente sin necesidad de alterar el HTML subyacente.
  • Reducción del uso de clases: Disminuye la sobrecarga de crear y manejar clases para cada caso particular.

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

¿Cómo usar el combinador hermano general en CSS?

¿Sabías que puedes aplicar estilos a ciertas etiquetas HTML que comparten el mismo nivel jerárquico? El combinador de hermano general en CSS es una herramienta increíblemente útil que te permite precisamente eso. Este sencillo selector te permite aplicar estilos a elementos siempre y cuando compartan un ancestro común. Sigamos explorando cómo funciona y cómo puedes implementarlo en tus proyectos web.

¿Qué es el combinador hermano general?

El combinador de hermano general, simbolizado por la tilde (~), es un selector CSS que aplica estilos a todos los elementos que comparten al menos un elemento previo en común en su jerarquía de documento. No te preocupes si no sabes cómo escribir este carácter en tu computadora; existen atajos de teclado específicos para distintas plataformas como Windows, Mac o Ubuntu.

¿Cómo implementarlo en HTML y CSS?

Aquí te mostraré un ejemplo práctico de cómo implementar el combinador hermano general en tu código HTML y CSS.

Paso 1: Crear el HTML

Primero, crea un documento HTML con algunas etiquetas que quieras estilizar. Vamos a utilizar etiquetas h2, h3, y p.

<div>
  <h2>Soy un h2</h2>
  <p>Soy una etiqueta p</p>
  <h2>Soy un h2</h2>
  <h3>Soy un h3</h3>
  <p>Soy una etiqueta p</p>
  <p>Soy un párrafo</p>
</div>

Paso 2: Estilizar usando CSS

Ahora, en tu archivo CSS, aplica el combinador de hermano general para cambiar el color de todas las etiquetas de párrafo (p) que tengan un h2 como hermano general.

h2 ~ p {
  color: red;
}

Este código CSS cambiará el color de todas las etiquetas de p que tengan un h2 como hermano general. A medida que agregas más párrafos a tu HTML, el estilo se aplicará automáticamente, siempre que compartan este ancestro.

¿Por qué es útil el combinador hermano general?

Este selector es extremadamente útil en situaciones donde necesitas mantener el estilo de elementos relacionados en tu interfaz de usuario. Por ejemplo, si deseas que todos los párrafos dentro de una sección se vean de una manera específica siempre que estén precedidos por un h2, el combinador de hermano general lo hace posible.

Conclusiones del uso del combinador

Al usar el combinador de hermano general, puedes:

  • Estilizar múltiples elementos de forma eficiente sin tener que nombrar todos los elementos individualmente.
  • Mantener un CSS limpio y legible.
  • Estructurar mejor tu código HTML para aplicar estilos dinámicos adaptables a tu contenido.

Juego didactico para jugar con los selectores: https://flukeout.github.io/

Combinadores CSS: Hijos y Descendientes

¿Qué son los combinadores hijos y descendientes en CSS?

Los combinadores en CSS son herramientas cruciales para un diseño eficiente y dirigido. En este tema, exploraremos en profundidad dos combinadores esenciales: child combinator (hijo directo) y descendant combinator (descendiente). Aprender a usarlos con destreza te permitirá aplicar estilos de manera más específica y elegante en tus páginas web.

¿Cómo funciona el combinador hijo (child)?

El combinador hijo en CSS se utiliza para estilizar elementos que son hijos directos de un contenedor. Utiliza el símbolo > para definir que el estilo se aplicará solo a los elementos que sean hijos directos de otro. Vamos a ver cómo implementarlo:

<div>
  <p>Soy un texto</p> <!-- Estilizado -->
  <article>
    <p>Soy un texto</p> <!-- Sin estilo -->
  </article>
</div>
<section>
  <div>
    <p>Soy un texto</p> <!-- Estilizado -->
  </div>
  <p>Soy un texto</p> <!-- Sin estilo -->
</section>

La regla CSS correspondiente sería:

div > p {
    color: red;
}

Este código indica que los párrafos (<p>) que son hijos directos de un <div> tendrán un estilo de color rojo. Observa que los párrafos anidados dentro de un <article> dentro de un <div> no serán afectados.

¿Y el combinador descendiente (descendant)?

El combinador descendiente es más generalizado y se usa frecuentemente en CSS. Selecciona todos los elementos que estén dentro de un elemento específico, sin importar su nivel de anidación. Aquí no se requiere un símbolo adicional entre selectores.

div p {
    color: red;
}

Este estilo aplicará el color rojo a todos los párrafos <p> que se encuentren en cualquier nivel de anidación dentro de un <div>. Con este método, no somos específicos: todos los descendientes son afectados, lo cual puede o no ser el efecto deseado.

¿Cuándo usar cada combinador?

  • Child combinator (>): Úsalo cuando necesites estilizar solo los elementos que son hijos inmediatos y directos de un elemento contenedor. Esto es útil para mantener el control sobre estilos específicos donde la jerarquía de HTML es importante.

  • Descendant combinator (espacio): Al ser más general, este combinador es ideal para aplicar estilos globales a todos los elementos de un tipo específico dentro de un contenedor. Es sencillo, rápido, pero menos preciso.

Consejos prácticos para utilizar combinadores

  • Conocimiento del DOM: Es fundamental entender la estructura del DOM (Document Object Model) para usar estos combinadores eficazmente. Conocer cómo están anidados tus elementos HTML te ayudará a elegir el combinador correcto.

  • Evitar redundancias: Evita sobrecargar tus estilos usando combinadores innecesarios. Si un estilo global es suficiente, no es necesario que uses un combinador hijo directo.

  • Práctica interactiva: Pon en práctica lo aprendido con recursos interactivos como juegos o ejercicios que desafíen tus habilidades con selectores y combinadores. Esto no solo te ayudará a afianzar el conocimiento, sino que hará el aprendizaje más ameno.

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

¿Qué son las medidas en CSS y por qué son importantes?

Las medidas en CSS juegan un papel crucial en la creación de interfaces de usuario receptivas y efectivas. La comprensión de las diferencias entre medidas absolutas y relativas es fundamental para diseñar páginas web que se vean bien en cualquier dispositivo. Las medidas absolutas no cambian dependiendo del medio de visualización; por ejemplo, 18 píxeles seguirán siendo 18 píxeles. Por otro lado, las medidas relativas, como porcentajes o unidades em y rem, se ajustan al entorno en el que se visualizan, ofreciendo flexibilidad y adaptabilidad.

  • medida absoluta: el valor de este no cambia y siempre sera el mismo asi la pagina cambie su tamaño, las medidas absolutas son: . mm = milimetros cm = centimetros in = pulgada pc = picas px = pixel .

    • px

  • las medidas relativas: estas medidas heredan el tamaño o se basan en algun tamaño que se alla seleccionado y el valor ira cambiando segun si la pagina cambia de tamaño, las medidas relativas son : . % em rem

    • %
    • em
    • rem (root em)
    • max-width / max-height
    • min-width / min-height
    • vw (viewport width)
    • vh (viewport height)

¿Cuáles son las medidas absolutas en CSS?

Las medidas absolutas son aquellos parámetros fijos que no cambian sin importar el medio en que se visualice la página web. Aquí se incluyen las medidas en píxeles.

  • Píxeles (px): Definidos de forma constante, no cambian sin importar el dispositivo. Otorgan predictibilidad, pero pueden carecer de flexibilidad cuando se trata de dispositivos de diferentes tamaños.

¿Cómo se usa el tamaño en píxeles?

En el siguiente ejemplo, se muestra cómo asignar un tamaño de fuente en píxeles:

p {
    font-size: 18px;
}

Este código asigna un tamaño de 18 píxeles al texto dentro de un párrafo, asegurando que se mantenga constante en cualquier pantalla.

¿Qué son las medidas relativas en CSS?

A diferencia de las absolutas, las medidas relativas ajustan su tamaño basado en el contexto del objeto padre o del tamaño de la pantalla, lo que las hace altamente flexibles y recomendadas para diseños adaptativos.

  • Porcentajes (%): Ajustan su tamaño en relación al contenedor padre.
  • Em: Basado en el tamaño de fuente del elemento padre.
  • Rem: Basado en el tamaño de fuente del elemento raíz del documento HTML.
  • Viewport width (vw) y viewport height (vh): Miden el ancho y alto del viewport (la - ventana visible de la página).

Ejemplo de uso de porcentaje

Veamos un ejemplo sobre cómo se aplican tamaños relativos usando porcentajes:

p {
    font-size: 50%;
}

En este caso, el texto toma la mitad del tamaño definido para el elemento raíz, ajustando así su tamaño según el dispositivo.

¿Cómo cambiar entre medidas absolutas y relativas para un diseño responsive?

Cambiar entre medidas absolutas y relativas depende del diseño que quieras lograr y del comportamiento que esperas en diferentes dispositivos.

Estableciendo medidas flexibles

Para hacer que un contenedor ocupe todo el ancho del viewport sin importar el tamaño de la pantalla, usarías CSS así:

main {
    width: 100%;
    height: 500px;
}

Uso de medidas max y min

Además de las medidas estándar, existen las variantes max-width, min-width, max-height y min-height, que permiten establecer límites máximos o mínimos a las dimensiones de un elemento.

¿Por qué es importante elegir medidas adecuadas?

Elegir correctamente entre medidas absolutas o relativas es vital para crear interfaces de usuario que sean agradables y usables en cualquier dispositivo. Las medidas relativas permiten que un diseño sea flexible y adaptativo, evitando problemas como los desplazamientos de scroll innecesarios en pantallas pequeñas o el desperdicio de espacio en pantallas grandes.

Al aplicar CSS, es importante considerar la experiencia del usuario en diferentes dispositivos y ajustar las medidas en consecuencia para ofrecer la mejor experiencia de usuario posible. Recuerda que las mejores prácticas siempre favorecen los diseños responsivos y adaptables. ¡Continúa aprendiendo y experimentando con estas herramientas para mejorar tus habilidades en CSS!

Comprensión del uso de em en CSS: medidas relativas de fuente

¿Qué es la medida relativa “em” en CSS?

La medida “em” es una unidad de longitud en CSS que se utiliza con frecuencia para especificar tamaños de fuente, márgenes y rellenos. Su característica distintiva es que depende del tamaño de fuente del elemento padre inmediato, lo que la convierte en una medida relativa que puede generar algunas situaciones confusas para los desarrolladores si no se utiliza adecuadamente.

¿Cómo se utiliza la medida “em” en CSS?

Para comprender cómo funciona “em”, necesitamos explorar un ejemplo básico en el que estilizamos un texto en HTML con CSS. Supongamos que tenemos la siguiente estructura HTML:

<main class="text-container">
  <p>Soy un texto ejemplo</p>
  <div>
    <p>Soy otro texto</p>
  </div>
</main>

Y queremos estilizarlo con CSS, específicamente con la medida “em”:

.text-container {
  font-size: 1.5em;
}

Este código indica que queremos que el tamaño de fuente de .text-container sea 1.5 veces el tamaño del elemento padre “directo”. En este caso, el elemento padre directo es el <html>, que generalmente tiene un tamaño de fuente predeterminado de 16 píxeles.

Ejemplo práctico de “em” Supongamos que estamos trabajando en un proyecto CSS con las siguientes reglas:

body {
  font-size: 20px;
}


.text-container {
  font-size: 1em; /* ya no 1.5em */
}

.text-container div {
  font-size: 1.5em;
}

Dado el código anterior:

  • El <p> dentro de .text-container tendría un tamaño de fuente de 20 píxeles, ya que “em” está calculado en función del tamaño de fuente de su padre directo, body.
  • El <p> dentro del <div> tendría 1.5 veces el tamaño de fuente de .text-container, que sería 30 píxeles.

¿Cuáles son las confusiones comunes al usar “em”?

El uso de “em” puede ser problemático, especialmente en estructuras complejas con múltiples niveles de anidamiento de elementos, lo que puede llevar a comportamientos inesperados o no deseados en el tamaño de fuente. Un error común es asumir que todos los elementos dentro de una misma estructura heredarán el mismo tamaño de fuente cuando se usa “em”, lo cual no es correcto.

El escenario donde un <div> tiene un font-size de 1.5em tomará el tamaño de fuente del padre inmediato (no ancestro), y así sucesivamente, multiplicando acumulativamente si hay anidaciones de tales situaciones.

Cómo evitar problemas con “em”

  • Uso cuidadoso: Asegúrate siempre de saber cuál es el elemento padre inmediato cuando usas “em”, para poder prever el tamaño calculado.
  • Validación visual: Utiliza herramientas como el inspector de elementos del navegador para verificar rápidamente si los tamaños de fuente se comportan como esperas.
  • Estado inicial definido: Establece intencionadamente tamaños de base (font-size) en elementos raíz para mantener consistencia y previsibilidad.
  • Al final, “em” es una poderosa herramienta cuando se necesita escalabilidad y adaptabilidad en el diseño, pero es crucial comprender su dependencia del contexto para utilizarla correctamente y evitar resultados inesperados.

Uso de REM en CSS para Fuentes y Dimensiones

REM : funciona igual que el em, con la diferencia que es relativo al valor de la fuente del elemento html, y no tiene en cuenta el valor heredado o del elemento que lo contiene.

Por defecto el html viene con un tamaño de fuente de 16px asi que siempre . 1 REM = 16PX . Si queremos aplicar rem de una forma mas sencilla para no tener que hacer tantos calculos asemos lo siguiente . vamos a reescribir en css nuestro html

html {
      font-size: 62.5%; 
     }

esto lo que hara es darle a el html un valor de 10px ya que 16px - 62.5% = 10px

ahora si por ejemplo a una etiqueta le asignamos 2rem este hara referencia a 20px, o si por ejemplo le damos un valor de 1.5rem su valor sera de 15px

¿Qué es y por qué usar rem en lugar de em?

El rem es una unidad relativa en CSS que siempre se refiere al tamaño de fuente del elemento raíz (html), que por defecto suele ser 16 píxeles en la mayoría de los navegadores. A diferencia de em, que depende del tamaño de fuente del elemento padre inmediato, el rem es consistente y predecible. Esto te permite tener un control absoluto sobre cómo aparecen los textos y demás elementos en tu página.

Ventajas del rem frente al em:

  • Consistencia: Rem siempre está basado en el tamaño de fuente de html.
  • Previsibilidad: Evita variaciones indeseadas causadas por tamaños de fuente anidados.
  • Simplicidad: Facilita la gestión de dimensiones sin cálculos complejos.

¿Cómo configurar rem como si fueran píxeles?

Para aprovechar rem al máximo y evitar la necesidad de constantes conversiones entre píxeles y rem, se puede ajustar el font-size de la etiqueta html a un porcentaje específico:

html {
  font-size: 62.5%;
}

¿Por qué 62.5%? Al establecer el font-size del html a 62.5%, un rem equivale a 10 píxeles en tus cálculos. Esto simplifica enormemente los cálculos:

  • 1.6 rem se traduce en 16 píxeles.
  • 2 rem se traduce en 20 píxeles.
  • 3 rem se traduce en 30 píxeles.

¿Cómo utilizar rem en estructuras anidadas?

Con rem, ya no necesitas preocuparte por el tamaño de fuente del elemento padre al definir estilos para elementos secundarios.

div {
  font-size: 1.6rem; /* 16 píxeles */
}

p {
  font-size: 1.6rem; /* 16 píxeles */
}

Incluso si tienes estructuras complejas, todos los elementos utilizarán un tamaño de fuente basado en el rem definido, garantizando la uniformidad en tu diseño.

¿Cuál es la estructura CSS básica recomendada?

Como buen desarrollador, debes establecer una estructura CSS inicial que optimice el rendimiento y facilita la gestión:

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

html {
  font-size: 62.5%; /* Hace que 1 rem = 10 píxeles */
}

Esta estructura garantiza que los márgenes y rellenos no influyan en las dimensiones de los contenedores, ofreciéndote un control total y evitando sorpresas desagradables.

¿Cómo empezar a usar rem en todos tus proyectos?

  • Reemplaza píxeles por rem en tus proyectos actuales y futuros.
  • Establece el font-size inicial en el html como hemos indicado para simplificar la conversión.
  • Adopta este método en conjunto con otras buenas prácticas para un diseño web más eficiente, flexible y adaptable.

”Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height”

¿Cómo definir medidas en CSS usando min, max, viewport width y viewport height?

Definir las medidas y tamaños de los elementos que construimos en una página web es fundamental para asegurar una experiencia de usuario adecuada. Este enfoque permite que las interfaces sean más fluidas y adaptables a distintos dispositivos. En este tema, exploraremos cómo el uso conjunto de las unidades de medida min, max, viewport width (vw) y viewport height (vh) nos ayuda a lograr un diseño flexible y responsivo.

¿Qué es el viewport width (vw) y viewport height (vh)?

viewport width (vw) y viewport height (vh) son unidades de medida relativas al tamaño de la ventana gráfica del navegador:

  • vw: Un vw es igual al 1% del ancho de la ventana gráfica.
  • vh: Un vh es igual al 1% de la altura de la ventana gráfica.

Estas unidades son increíblemente útiles para hacer que los elementos ocupen un porcentaje específico del espacio visible del navegador, independientemente del tamaño de la ventana.

Aplicación práctica en estilos CSS básicos

Para comenzar a entender estas medidas, implementamos un diseño básico en HTML y CSS:

<main>
  <section>
    <!-- Contenido adicional -->
  </section>
</main>

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

main {
  width: 100vw;
  height: 100vh;
  background-color: purple;
}

section {
  width: 80%;
  height: 500px;
  background-color: red;
  margin: 0 auto;
}

Al utilizar 100vw y 100vh en el contenedor principal (main), nos aseguramos de que ocupe todo el viewport independientemente del tamaño del dispositivo.

Explorando min-width, max-width, min-height y max-height

Las propiedades min-width, max-width, min-height y max-height permiten restringir el tamaño mínimo y máximo que puede alcanzar un elemento. Esto ayuda a controlar el crecimiento y contracción del contenido de manera ordenada dentro de las restricciones de diseño.

Ejemplo de implementación para un <section>:

section {
  width: 80%;
  min-width: 320px;
  max-width: 500px;
  height: 500px;
  margin: 0 auto;
}

Al usar min-width: 320px; y max-width: 500px;, indicamos que el ancho del <section> debe comenzar desde 320 píxeles y no puede crecer más allá de 500 píxeles. Este rango asegura flexibilidad sin exceder límites prácticos.

Solución al problema de overflow en contenido

El overflow, o desbordamiento, ocurre cuando el tamaño del contenido excede el espacio disponible en el contenedor. Esto es común cuando se define una altura fija y el contenido es dinámico.

Uso de min-height en lugar de una altura fija

Para resolver el desbordamiento podemos utilizar min-height:

section {
  min-height: 500px;
  /* Otros estilos */
}

Al utilizar min-height para el contenedor, permitimos que crezca más allá de sus 500 píxeles originales si el contenido lo requiere, proporcionando espacio adicional.

Resumen

Implementar unidades de medida relativas como vw y vh, junto con los límites de min y max, permite crear diseños web más adaptables y responsivos. Entender múltiples situaciones de uso y cómo manejarlas garantiza una experiencia de usuario óptima en dispositivos de cualquier tamaño.

¿Qué es position en CSS y por qué es importante?

position es una propiedad fundamental en CSS que nos permite controlar la ubicación de los elementos dentro de una página web. Comprender cómo funciona esta propiedad es crucial para manipular el diseño de nuestros proyectos de manera efectiva.

Por defecto, todos los elementos HTML tienen:

position: static;

Esto significa que se mantienen en el lugar asignado originalmente en el flujo del documento y no se moverán aunque hagamos scroll en la página.

Existen otras propiedades de position—absolute, relative, fixed y sticky—que ofrecen comportamientos distintos y nos permiten crear diseños más dinámicos e interactivos.

¿Cómo configurar y visualizar posiciones en CSS?

Partimos de un HTML básico:

<div class="parent">
  <div class="box" id="1">1</div>
  <div class="box" id="2">2</div>
  <div class="box" id="3">3</div>
  <div class="box" id="4">4</div>
</div>

Y aplicamos estos estilos:

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

.parent {
  border: 2px dotted black;
  display: inline-block;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
}

#2 {
  background-color: green;
}

Con esto, los cuatro div.box aparecen en línea y el segundo se destaca en verde. A partir de aquí, puedes experimentar cambiando su position y observando el comportamiento.

Diferencias entre static, absolute y relative

1. static

  • Posición por defecto.
  • El elemento permanece en el flujo normal del documento.
  • No admite desplazamientos con top, bottom, left o right.

2. absolute

  • El elemento se posiciona respecto al contenedor posicionado más cercano (cuyo position sea distinto de static).
  • Sale del flujo normal y puede solaparse sobre otros elementos.

Ejemplo:

#2 {
  position: absolute;
  top: 0;
  left: 0;
}

El div con id="2" se sitúa en la esquina superior del contenedor posicionado.

3. relative

  • El elemento permanece en el flujo normal, reservando su espacio original.
  • Se puede desplazar respecto a su posición inicial usando top, bottom, left y right.

Ejemplo:

#2 {
  position: relative;
  bottom: 15px;
}

El div con id="2" se mueve 15px hacia arriba, pero su espacio en el flujo document remain intacto.

CSS: Display Block, Inline e Inline-Block

¿Qué es el display en CSS?

El concepto de display en CSS es fundamental para entender cómo se renderizan los elementos HTML en un navegador. El display determina cómo se muestra un elemento y cómo interactúa con otros en la página. Las propiedades más comunes de display son block, inline e inline-block.

¿Cómo funciona display block?

El display: block es uno de los valores de display más utilizados. Cuando un elemento tiene display: block, este ocupa todo el ancho disponible, sin importar el contenido que tenga dentro.

Características de display: block:

  • Ocupa el 100% del espacio horizontal disponible.
  • Siempre comienza en una nueva línea.
  • Se pueden aplicar propiedades de margin, padding, width y height.

Ejemplo:

<div class="block-element">Esta es una etiqueta div</div>
<p class="block-element">Esta es una etiqueta de párrafo</p>

<style>
.block-element {
  background: green;
  margin: 10px;
  padding: 20px;
}
</style>

En el ejemplo anterior, tanto el div como el p se comportan como elementos block, ocupando todo el ancho del contenedor padre.

¿Qué es display inline?

El display: inline es el valor predeterminado para muchos elementos de texto, como span o a. A diferencia de los elementos que usan display: block, los elementos inline solo ocupan el espacio que requiere su contenido.

Características de display: inline:

  • No comienzan en una nueva línea.
  • Ocupan solo el espacio necesario para el contenido.
  • No se pueden aplicar width ni height.
  • Solo se pueden aplicar margin y padding en los lados izquierdo y derecho, no arriba ni abajo.

Ejemplo:

<span>Esta es una etiqueta span</span>
<span>Otro span seguido</span>

Estos elementos se mostrarán uno al lado del otro, ya que solo ocupan el espacio correspondiente a su contenido.

¿Cómo se utiliza display inline-block?

El display: inline-block es una combinación poderosa de los modelos block e inline. Permite que los elementos se alineen en línea al mismo tiempo que se aplican las características de los elementos block.

Características de display: inline-block:

  • Se comporta como un elemento inline.
  • Permite aplicar margin, padding, width y height.
  • Permite que otros elementos se posicionen en línea horizontalmente si hay espacio suficiente.

Ejemplo:

<ul class="nav">
  <li>Home</li>
  <li>Cursos</li>
  <li>Instructores</li>
  <li>Blog</li>
</ul>

<style>
.nav li {
  display: inline-block;
  margin: 10px;
  padding-left: 20px;
  padding-right: 20px;
}
</style>

En este ejemplo, los elementos li de la lista se muestran en línea horizontal, similar a las pestañas de navegación, y se utilizan las propiedades de margin y padding para el espacio.

Consejos y recomendaciones prácticas

  • Formato adecuado del layout: Elige el modelo de display adecuado según el resultado visual que busques. Considera block para estructuras completas e inline para elementos de texto en línea.
  • Mezcla propiedades con inline-block: Aprovecha las ventajas de inline-block para ganar flexibilidad con las propiedades de tamaño y alineación.
  • Modelo de caja en acción: Familiarízate con el modelo de caja de CSS para manejar margin y padding con eficiencia. Te ayudará enormemente a diseñar elementos que se comporten y se alineen correctamente.
  • Experimenta en tu navegador: Utiliza herramientas de desarrollo para ver en tiempo real cómo los cambios en las configuraciones de display afectan a los elementos de tu página.

El manejo de display es clave para entender cómo se estructura el contenido en CSS.

Posicionamiento de Layout Básico en CSS

¿Cómo crear un diseño básico con CSS?

Aprender a crear un layout básico es esencial en el mundo del desarrollo web. Al principio, puede parecer un reto, pero una vez que entiendes los conceptos de display y position en CSS, el proceso se vuelve mucho más claro. En el entorno laboral, te enfrentarás a peticiones de crear páginas que incluyan un header, un footer, una sección principal y quizá una sidebar para anuncios o contenido adicional. Vamos a explorar cómo puedes lograr esto de manera efectiva.

¿Qué elementos debe incluir el layout?

  • Header: Generalmente incluye el logo y la barra de navegación.
  • Sección principal: Área de contenido principal con texto e imágenes de ejemplo.
  • Sidebar: Espacio para elementos complementarios como noticias, blog posts o multimedia.
  • Footer: Contiene información básica de la empresa y enlaces a redes sociales.

¿Cómo posicionar los contenedores correctamente?

El posicionamiento de los elementos es un paso crucial. La intención es lograr que cada sección del layout esté en su lugar deseado. Aquí es donde los conceptos de display y position entran en juego. Algunas recomendaciones para un diseño eficiente incluyen:

  • Utilizar display: block para asegurarte de que cada sección ocupe su propio espacio y no se mezcle con otras.
  • Incorporar position: relative o position: absolute cuando sea necesario para ajustes más precisos.
  • Comenzar con un layout estático: ve ajustando los elementos en sus posiciones básicas antes de añadir estilos más complejos.

¿Cómo personalizar el diseño?

Una vez que tienes el esqueleto del layout listo, puedes comenzar a personalizarlo. Aunque el estilo no es el enfoque principal en un primer prototipo, añadir toques personales puede darte una mejor comprensión de cómo CSS da vida a una página web.

  • Colores y fuentes: Aplica diferentes paletas de color y tipografías para mejorar la estética visual.
  • Imágenes y multimedia: Asegúrate de que las imágenes se vean bien y funcionen con el diseño general.
  • Estilos avanzados de CSS: Una vez dominado el layout básico, considera experimentar con funcionalidades

Posicionamiento y Estilos con Display Flex en CSS

¿Qué es Display Flex y por qué es importante?

El uso de Display Flex, o Flexbox, en CSS es una herramienta esencial para el diseño web moderno. Ofrece una manera avanzada y más sencilla de posicionar elementos dentro de un contenedor. Esta técnica permite que los contenedores se comporten de forma flexible adaptándose automáticamente según el espacio disponible, lo que ayuda a crear diseños más responsivos y menos complicados.

Flexbox es especialmente útil si te has enfrentado a desafíos complicados tratando de alinear elementos con las propiedades de display y position. Flex viene al rescate y evita frustraciones, simplificando así la vida de los diseñadores.

¿Cómo empezar con Display Flex?

Vamos a crear una estructura básica para implementar Display Flex. Supongamos que tenemos un contenedor principal con varios elementos hijo dentro de él. Comenzaremos definiendo nuestra estructura HTML:

<div class="container">
  <div class="box box1"><p>1</p></div>
  <div class="box box2"><p>2</p></div>
  <div class="box box3"><p>3</p></div>
  <div class="box box4"><p>4</p></div>
  <div class="box box5"><p>5</p></div>
  <div class="box box6"><p>6</p></div>
</div>

El contenedor principal tiene la clase container y cada elemento hijo la clase box (y una clase adicional para personalizar si se desea).

¿Cómo aplicar estilos básicos para Display Flex?

Empezaremos con la configuración básica de estilos en CSS y un reset ligero:

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

html {
  font-size: 62.5%; /* 1rem = 10px */
}

body {
  font-size: 1.6rem; /* 16px */
}

.container {
  border: 0.3rem solid black; /* 3px */
  display: flex;
}

.box {
  width: 10rem;  /* 100px */
  height: 10rem; /* 100px */
}

Al aplicar display: flex en .container, sus hijos se alinean automáticamente en una fila.

¿Cómo manipular la exhibición de elementos usando Flexbox?

La magia de Flexbox está en sus propiedades de alineación y distribución:

Flex Direction
Define la dirección en la que se colocan los ítems:

.container {
  flex-direction: row-reverse; /* también row, column, column-reverse */
}

Flex Wrap
Controla si los ítems deben ajustarse a una nueva línea:

.container {
  flex-wrap: wrap; /* wrap-reverse coloca la nueva línea encima */
}

Justify Content
Alinea los ítems a lo largo del eje principal (horizontal por defecto):

.container {
  justify-content: space-evenly; /* center, flex-start, flex-end, space-between, space-around */
}

¿Cómo mejora la experiencia con Display Flex?

Dominar Flexbox abre un mundo de posibilidades para crear layouts sofisticados y realmente responsivos. Facilita:

  • Adaptación automática a diferentes tamaños de pantalla.
  • Alineación precisa sin hacks ni cálculos complejos.
  • Reducción significativa del tiempo de desarrollo.
  • Consistencia visual en todos los dispositivos.

Con Flexbox, diseñar y mantener interfaces fluidas y equilibradas se convierte en una tarea mucho más sencilla y satisfactoria.

Posicionamiento Vertical con Flexbox en CSS

¿Cómo posicionar contenedores horizontal y verticalmente con Flexbox?

Flexbox es una herramienta poderosa en CSS que permite alinear y distribuir espacio entre los elementos de un contenedor, haciéndolo simple y eficiente tanto para orientaciones horizontales como verticales. En las clases anteriores nos enfocamos en la disposición horizontal, pero el verdadero poder de Flexbox se manifiesta cuando quieres alinear elementos verticalmente.

¿Cómo cambiar la orientación de los contenedores?

Para cambiar la orientación y centrar o alinear los elementos dentro del contenedor padre:

  1. Establece la altura del contenedor principal.
.container {
  height: 50vh; /* Ocupa el 50% de la altura de la ventana */
  display: flex;
}
  1. Usa align-items para alinear verticalmente:
.container {
  align-items: center;      /* Centra verticalmente */
  /* flex-start / flex-end */
}

¿Qué propiedades de Flexbox inciden en el crecimiento y orden de contenedores?

  • align-items: stretch
    Estira los ítems para llenar el contenedor padre (solo si no tienen altura fija).

  • flex-grow
    Permite que un ítem crezca cuando hay espacio extra:

    .box1 {
  flex-grow: 1; /* La caja 1 ocupará el espacio disponible */
}

  • order
    Cambia el orden de los elementos sin modificar el HTML:

    .box1 { order: 2; }
.box2 { order: 1; }
/* Ahora box2 aparece antes que box1 */

¿Qué beneficios trae usar flex-wrap en Flexbox?

Cuando el espacio escasea, flex-wrap permite que los elementos salten a la siguiente línea:

.container {
  display: flex;
  flex-wrap: wrap; /* wrap-reverse para filas invertidas */
}

Esto facilita la adaptación a distintos tamaños de pantalla sin CSS extra.

¿Por qué elegir Flexbox para diseño responsive?

  • Redistribuye los elementos automáticamente al cambiar el viewport.
  • No requiere reestructurar el HTML para cambios de orden o tamaño.
  • Simplifica alineaciones complejas (horizontal y vertical).
  • Reduce tiempo de desarrollo y mejora la consistencia en distintos dispositivos.

Propiedades de Flexbox

  • Flex-direction:
    Te permite elegir la alineación de los elementos hijos sea en vertical (column) u horizontal (row). Esta alineación viene por defecto.

  • Justify-content:
    Permite alinear el contenido de forma horizontal.

    • flex-start: Alinear ítems desde el comienzo.
    • flex-end: Alinear ítems desde el final.
    • center: Alinear ítems en el centro del contenedor.
    • space-between: Distribuir ítems uniformemente; primer ítem al inicio, último al final.
    • space-around: Distribuir ítems uniformemente con el mismo espacio a su alrededor.
    • space-evenly: Distribuir el espacio de forma uniforme entre los ítems y sus bordes.

  • Align-items:
    Sirve para alinear los elementos hijos de forma vertical.

    • flex-start: Se alinean desde arriba.
    • flex-end: Se alinean desde abajo.
    • center: Alinear ítems al centro del eje vertical.
    • stretch: Estirar el alto de los ítems al 100% del alto del contenedor padre.
    • baseline: Alinear los ítems según la línea base de su contenido.

  • Flex-wrap:
    Permite que los ítems que superen el ancho del contenedor salten a la siguiente línea, evitando desbordes.

    • Valores: nowrap (por defecto), wrap, wrap-reverse.

  • Order:
    Especifica el orden en que se disponen los ítems dentro del contenedor flexible.

    • Ítems con menor valor de order aparecen antes.

  • Flex-grow:
    Indica cuánto puede crecer un ítem respecto al espacio disponible en el contenedor.

    • Si un ítem tiene flex-grow: 1, ocupará todo el espacio sobrante proporcionalmente.

  • Flex-basis:
    Define el tamaño inicial de un ítem antes de que el espacio restante se distribuya.

    • Puede especificarse en unidades fijas (px, rem) o relativas (%, auto).

Uso de Variables Custom en CSS para Optimizar Estilos

¿Cómo crear variables personalizadas en CSS?

Las variables personalizadas en CSS son una herramienta poderosa que nos permite definir y reutilizar valores en nuestros estilos de manera eficiente. Aunque las variables pueden sonar más asociadas a matemáticas o a lenguajes de programación como JavaScript, CSS también tiene esta capacidad. El uso de variables nos permite almacenar valores comunes que pueden ser reutilizados, evitando la repetición de código. Vamos a explorar cómo funcionan las variables en CSS a través de un ejemplo práctico.

¿Cómo se estructura un archivo HTML básico?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Variables en CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header></header>
  <main>
    <h1>Soy un título</h1>
    <section>
      <p>Lorem ipsum dolor sit amet.</p>
    </section>
  </main>
  <footer></footer>
</body>
</html>

En este ejemplo, hemos creado una estructura HTML con un header, un main que contiene un h1 y un section con un párrafo, y un footer para la parte semántica.

¿Cómo definir estilos CSS básicos?

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

html {
  font-size: 62.5%; /* 1rem = 10px */
}

header {
  width: 100vw;
  height: 15vh;
  background-color: #003476; /* Color principal */
}

main {
  width: 100vw;
  height: 70vh;
  font-size: 1.8rem; /* 18px */
}

footer {
  width: 100vw;
  height: 15vh;
  background-color: #b4d2f7; /* Color secundario */
}

h1 {
  font-size: 4rem; /* 40px */
}

En este caso, hemos definido un tamaño de fuente base de 62.5% para que 1 rem equivalga a 10 px, y hemos establecido estilos para el header, main, footer y h1.

¿Cómo se declaran y utilizan las variables en CSS?

Para declarar variables en CSS utilizamos el selector :root, que hace referencia a la raíz del documento HTML:

:root {
  --primary-color: #003476;
  --secondary-color: #b4d2f7;
  --header-size: 4rem;
  --paragraph-font: 1.8rem;
}

Una vez declaradas, podemos utilizar estas variables en nuestro CSS con la función var():

header {
  background-color: var(--primary-color);
}

main {
  font-size: var(--paragraph-font);
}

footer {
  background-color: var(--secondary-color);
}

h1 {
  font-size: var(--header-size);
  color: var(--primary-color); /* Opcional para el texto */
}

¿Cuáles son los beneficios de usar variables en CSS?

  • Mantenimiento más fácil: Cambiar un valor en un solo lugar y ver los cambios reflejados en todo el proyecto.
  • Consistencia en el diseño: Evita discrepancias de color y tamaño de fuente.
  • Reusabilidad: Facilita la reutilización de estilos a través de diferentes módulos o componentes.

Las variables personalizadas son, sin duda, una herramienta valiosa para cualquier desarrollador CSS serio.

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

¿Qué son las Web Fonts?

Las Web Fonts son grupos familiares de fuentes. Los navegadores web poseen fuentes predeterminadas y, dependiendo del navegador, cada una de ellas mostrará estilos diferentes.

Algunas Generic Families

  • Serif: Tipos de fuente de estilo formal o clásico (por ejemplo, Times New Roman).
  • Sans-serif: Fuentes sin remates en las puntas (por ejemplo, Verdana).
  • Cursive: Fuentes con estilo manuscrito o cursivo.
  • Monospace: Fuentes con espaciado fijo entre caracteres (por ejemplo, Roboto Mono).

¿Cómo puedo saber qué fuentes tengo instaladas en mi navegador?

  1. Abre el menú del navegador.
  2. Ve a Configuración > Diseño > Personalizar Fuentes.
  3. Revisa los desplegables de “Fuente Serif” y “Fuente Sans-serif”.

¿Cómo puedo importar tipos de fuentes a mi proyecto?

  1. Visita Google Fonts.
  2. Selecciona la fuente deseada.
  3. Elige los estilos (peso, cursiva, etc.).
  4. Agrega la fuente al proyecto copiando la etiqueta <link> que proporciona Google Fonts dentro del <head> de tu HTML.

Buenas Prácticas

  • Cargar una sola familia de fuente siempre que sea posible.
  • Importar las fuentes en la sección <head> del documento HTML.
  • Usar la etiqueta <link> en lugar de @import para mejorar el rendimiento de carga.

Explore Other Posts

Manipulación del DOM con JavaScript y APIs

Los fundamentos para crear paginas dinamicas mediante la man...

Fundamentos de Flutter

Las bases para desarrollar aplicaciones mobiles con Flutter.

Introducción a Conceptos Básicos de C#

Aprende los fundamentos de C# con esta guía introductoria qu...

Follow Me

Raul Dev