Enlaces y Recursos

Está es una guía rápida sobre HTML y CSS, sobre todo para no programadores.

En esta sección encontrarán todos los enlaces y recursos que vayamos viendo a lo largo de las clases:

🔼 Regresar

¿Qué es HTML?

Significa Hyper Text Markup Language, Lenguaje de Marcado de Hiper Texto.

HTML es un lenguaje de marcado de etiquetas que define el contenido de la web.

Una etiqueta es cada elemento del documento y las vamos a reconocer por que están entre picoparéntesis.

<etiqueta>Contenido de la etiqueta</etiqueta>

<p>Hola Mundo</p>

Las etiquetas van a tener atributos, estos describen alguna característica de las etiqueta.

La sintaxis de los atributos es la siguiente:

<etiqueta atributo="valor">Contenido de la etiqueta</etiqueta>

<html lang="es"></html>

Hay dos tipos de etiquetas:

  1. Las que abren y cierran en 2 etiquetas

    <head></head>

<body></body>

  2. Las que abren y cierran en 1 etiqueta

    <meta charset="UTF-8" />

<img src"" alt="" />

🔼 Regresar

Estructura básica

La estructura básica de un documento HTML es:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html>

Especifica el tipo de documento y define que está bajo el estándar de HTML5.

<html lang="en"></html>

La etiqueta html representa el nodo principal del documento, y tiene el atributo lang, que nos indica el idioma en el que el contenido del documento estará escrito.

Por ejemplo: en, es, jp, de, fr, pt, etc.

Si quieres ser más específico en la declaración del idioma, en el que redactas tu documento, puedes agregar el dominio del país al valor del atributo lang.

Por ejemplo es-MX, es-CO, es-CL, es-AR, en-US, en-UK, en-AU, en-CA, etc.

El documento HTML consta de 2 partes:

  1. Cabeza ( head ) y
  2. Cuerpo ( body ).

<head></head>

En la cabeza, vamos a tener etiquetas que establecen ciertas configuraciones al documento, como el idioma, el juego de carcactéres, el viewport, favicon, hojas de estilos, etc.

Adicionalmente definimos la meta información del documento, estos meta datos les sirven a los algoritmos de internet para dar información del contenido del documento a los motores de búsqueda como el título y la meta descripción.

<body></body>

En el cuerpo, irá todo el contenido textual y multimedia que queremos mostrar en el documento (todo lo que el usuario verá en el navegador).

<meta charset="UTF-8" />

El charset define el juego de caracteres que usará el documento, UTF-8 es la codificación universal para soportar caracteres ajenos al inglés.

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

La meta etiqueta viewport define como se visualizará el contenido en cualquier dispositivo, sea móvil, tableta, computadora de escritorio. Esta etiqueta es fundamental cuando hacemos diseño responsivo.

<title>Título del documento</title>

La etiqueta title representa el título de nuestro documento, éste se ve en la pestaña del navegador, también es el texto que se ve en los resultados de motores de búsqueda, el título no debe exceder los 65 carácteres.

🔼 Regresar

Template inicial

Adicionalmente a la estructura básica agregaremos 3 etiquetas más:

<meta name="description" content="Descripción del documento." />

La meta etiqueta description, es una breve descripción del contenido que se encontrará en el documento, también aparece en los resultados de los motores de búsqueda, debajo del enlace del resultado, no debe exceder los 165 caracteres.

Título y Meta Descripción

Un favicon es la imagen que se ve al lado del título de nuestro HTML en la pestaña del navegador, tiene que ser una imagen de dimensiones cuadradas y en formato .png Favicon

Esta etiqueta link nos permite enlazar la hoja de estilos CSS al documento HTML.

Entonces agregando estas 3 etiquetas la estructura básica quedaría así:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Título del documento</title>
    <meta name="description" content="Descripción del documento." />
    <link rel="icon" href="img/favicon.png" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body></body>
</html>

🔼 Regresar

Comentarios

Los comentarios son textos que son ignorados por el navegador. No se visualizarán. Sirven a los programadores para dejar notas en el código.

Comentarios en HTML

<!-- Esto es un comentario html por lo cual no se verá -->

<!--
  Esto es
  otro comentario html,
  en varías
  líneas de
  código
-->

Comentarios en CSS

/* Esto es un comentario css por lo cual no se verá *;

/*
  Esto es otro
  comentario css,
  en varías
  líneas de código
*/

🔼 Regresar

Etiquetas HTML

Etiquetas HTML

🔼 Regresar

Encabezados

Se utilizan para definir encabezados (títulos) de texto. El número indica la jerarquía, siendo h1 el título principal y h6 el de menor importancia.

Se recomienda que sólo exista un título principal por documento como una buena práctica de SEO (Search Engine Optimization).

Puedes tener tantos h2, h3, h4, h5 y h6 como requiera la jerarquía textual de tu contenido.

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

🔼 Regresar

Etiquetas de Texto

Son etiquetas que nos van a permitir visualizar y dar formato a los textos de nuestro documento:

  • p: define un párrafo.
  • b: define texto en negritas.
  • i: define texto en itálicas.
  • u: define texto subrayado.
  • mark: define texto remarcado.
  • small: define letras pequeñas.
  • sub: define un subíndice.
  • sup: define un superíndice.
  • blockquote: define una cita textual.
  • cite: define la referencia de una cita textual.
  • span: define un bloque de texto en línea, no tiene carga semántica.
  • br: define un salto de línea ( dibuja un enter ).
  • hr: define un salto semántico de contenido ( dibuja una línea horizontal ).
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea minus iusto hic
  aperiam ratione, reiciendis, repellat sunt voluptatum deleniti inventore
  obcaecati, eaque ad! Quae excepturi sit unde, culpa exercitationem nostrum?
</p>
<p>
  Todo este bloque de texto es un párrafo. <b>Este texto esta en negritas</b>.
  <i>Este texto esta en itálicas</i>. <u>Este texto esta subrayado</u>.
  <mark>Este texto esta remarcado</mark>.
  <small>Este texto esta en letras pequeñas.</small>
</p>
<p>
  La fórmula de agua es <b><i>H<sub>2</sub>O</i></b> .
</p>
<p>
  La fórmula de la relatividad introducida por <i>Einstein</i> es
  <b
    ><i>E=mc<sup>2</sup></i></b
  >.
</p>
<hr />
<blockquote>
  "No hay necesidad de perturbar el alma por cosas que no puedes controlar".
  <br />
  <cite>Marco Aurelio</cite>
</blockquote>
<hr />
<p>
  Esto es un <span>bloque génerico de texto en línea</span>, que esta dentro de
  un párrafo que tiene más texto.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br />
  Aspernatur, aliquam. <br /><br />Eveniet beatae, ullam repellendus molestias,
  et doloremque id dolorem omnis necessitatibus distinctio maxime magnam
  perferendis quasi placeat rem harum provident.
</p>

🔼 Regresar

Listas

En HTML principalmente tenemos 2 tipos de listas:

  1. Ordenadas ( ol - order list ): Los elementos están numerados.
  2. Desordenadas ( ul - unorder list ): Los elementos están listados con viñetas.

Los elementos de ambas listas se llaman list items ( li ).

El atributo type permita cambiar la numeración o el estilo de la viñeta del list item.

El atributo reversed permite invertir el orden de los elementos de una lista ordenada.

El atributo start permite cambiar el valor inicial de los elementos de una lista ordenada.

<ol>
  <li>Primavera</li>
  <li>Verano</li>
  <li>Otoño</li>
  <li>Invierno</li>
</ol>

<ol type="i">
  <li>Primavera</li>
  <li>Verano</li>
  <li>Otoño</li>
  <li>Invierno</li>
</ol>

<ol reversed>
  <li>Primavera</li>
  <li>Verano</li>
  <li>Otoño</li>
  <li>Invierno</li>
</ol>

<ol start="100">
  <li>Primavera</li>
  <li>Verano</li>
  <li>Otoño</li>
  <li>Invierno</li>
</ol>

<ul>
  <li>Primavera</li>
  <li>Verano</li>
  <li>Otoño</li>
  <li>Invierno</li>
</ul>

<ul type="circle">
  <li>Primavera</li>
  <li>Verano</li>
  <li>Otoño</li>
  <li>Invierno</li>
</ul>

<ul type="square">
  <li>Primavera</li>
  <li>Verano</li>
  <li>Otoño</li>
  <li>Invierno</li>
</ul>

🔼 Regresar

Tablas

Las tablas nos permiten tabular datos, las etiquetas para dibujar una tabla son:

  • table: Define la tabla en sí misma.
  • tr: Define la filas ( table row ) de la tabla.
  • td: Define las celdas ( table data ) dentro de las filas, lo que a su vez formará las
  • th: Define las celdas de cabecera ( table header ) dentro de la primer fila de la tabla, suele ser la fila de títulos de nuestra tabla.
<table border="1">
  <tr>
    <th>Ciudad</th>
    <th>País</th>
    <th>Continente</th>
  </tr>
  <tr>
    <td>Ciudad de México</td>
    <td>México</td>
    <td>América</td>
  </tr>
  <tr>
    <td>Tokyo</td>
    <td>Japón</td>
    <td>Asia</td>
  </tr>
  <tr>
    <td>Reikiavik</td>
    <td>Islandia</td>
    <td>Europa</td>
  </tr>
</table>

🔼 Regresar

Enlaces

Nos permiten enlazar documentos HTML entre sí, secciónes internas del propio documento o vincular hacia sitios y aplicaciones externas.

En el atributo href colocamos la url del enlace que queremos vincular.

El atributo target con el valor _blank permite abrir el enlace en una nueva pestaña, esto es muy útil cuando tenemos enlaces hacia sitios externos y redes sociales.

<a href="cursos.html">Ir a la página Cursos</a>
<a href="https://youtube.com/jonmircha" target="_blank">Canal de YouTube</a>
<a href="#top">Regresar al Temario</a>
<a href="mailto:jonmircha@gmail.com">jonmircha@gmail.com</a>

🔼 Regresar

Imágenes

La etiqueta img nos permite incrustar imágenes en nuestro documento html.

En el atributo src se define la ruta donde se encuentra la imagen.

En el atributo alt se define un texto alternativo para la imagen, este texto no se visualiza, pero es importante agregarlo por temas de accesibilidad ( este texto lo leerán los screen readers de una persona con discapacidad visual ).

Formatos de imágenes aceptados en la web:

  1. jpg / jpeg
  2. png
  3. gif
  4. svg
  5. webp
<img src="img/html-for-babies.jpg" alt="HTML para bebés" />
<img src="img/kenai.png" alt="Kenai" />
<img src="img/this-is-fine.gif" alt="This is Fine" />
<img src="img/html5.svg" alt="HTML5" />
<img src="img/wolf-chamanic.webp" alt="Chamanic Wolf" />

🔼 Regresar

Audio y Video

La etiqueta audio y video nos permite incrustar elementos multimedia en formato mp3 y mp4 en nuestro documento html.

En el atributo src se define la ruta donde se encuentra el archivo multimedia.

El atributo controls permite visualizar los controles de reproducción del elemento multimedia.

El atributo preload permite que se precargue el elemento multimedia, cuando se cargue el documento html en el navegador.

El atributo poster define una imagen previa que se visualizara antes de reproducir el video.

<audio src="assets/feels-patrick-patrikios.mp3" controls preload></audio>

<video
  src="assets/kenai.mp4"
  poster="img/puesta-de-sol.jpg"
  controls
  preload
></video>

🔼 Regresar

Iframe

Permite cargar contenido externo que se encuentre en otro sitio o plataforma, por ejemplo un video de YouTube, un mapa de Google, Documentos PDFs, etc.

<iframe width="100%" height="600px" src="media/emmet-cheat-sheet.pdf"></iframe>

🔼 Regresar

Etiquetas Semánticas

Definen la estructura semántica de las partes que conforman la interfaz del documento html, es decir, proporcionan sentido y significado a cada una de las etiquetas con su contenido.

Etiquetas Semánticas HTML5

Algunas de estas etiquetas son:

  • div: Es una etiqueta contenedora de bloque que no tiene semántica.
  • header: Representa la cabecera del sitio o de una sección.
  • nav: Representa una navegación.
  • main: Define la sección de contenido principal, se recomienda que sólo exista uno por documento.
  • aside: Representa una sección de contenido complementario o secundario.
  • article: Representa una sección autocontenida (que por sí sola se explica o se entiende).
  • section: Representa una sección de contenido genérico.
  • footer: Pié de página del sitio o de una sección.
<div>Esto es una div</div>
<header>Esto es un header</header>
<nav>Esto es un nav</nav>
<main>Esto es un main</main>
<aside>Esto es un aside</aside>
<article>Esto es un article</article>
<section>Esto es una section</section>
<footer>Esto es un footer</footer>

🔼 Regresar

Detalles

Un detalle es un bloque de contenido que puede alternar su visualización a manera de acordeón.

La etiqueta details, es el contenedor del acordeón completo.

La etiqueta summary, es el resumen que siempre se verá del acordeón.

El contenido restante que este dentro del details, se mantendrá oculto hasta que el usuario de clic al summary.

El atributo open hace que el contenido del detalle permanezca visible cuando el documento carga.

<details>
  <summary>Resumen del Detalle</summary>
  <div>
    <p>Contenido oculto del detalle</p>
    <img src="img/this-is-fine.gif" alt="This is Fine" />
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, quasi
      quo! Autem, mollitia voluptate necessitatibus optio quam, nisi dolorum
      ducimus magni unde illum perspiciatis soluta ipsa vitae fuga inventore
      reprehenderit!
    </p>
  </div>
</details>
<details open>
  <summary>Resumen del Detalle</summary>
  <div>
    <p>
      Este detalle tiene el atributo <b><i>open</i></b
      >, por lo que comienza abierto al cargar el documento.
    </p>
    <img src="img/this-is-fine.gif" alt="This is Fine" />
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, quasi
      quo! Autem, mollitia voluptate necessitatibus optio quam, nisi dolorum
      ducimus magni unde illum perspiciatis soluta ipsa vitae fuga inventore
      reprehenderit!
    </p>
  </div>
</details>

🔼 Regresar

¿Qué es CSS?

Significa Cascading Style Sheet, Hojas de Estilo en Cascada.

CSS es un lenguaje de definición de estilos que provee diseño y presentación a la web.

Una hoja de estilos se invoca con la etiqueta link:

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

Sintaxis CSS

El código CSS se escribe en reglas de estilos, una regla se compone de 2 partes:

  1. El selector al que se aplica la regla y,
  2. El bloque de declaraciones de estilos.
selector {
  propiedad: valor;
  otra-propiedad: otro-valor;
}

Por ejemplo:

html {
  font-family: sans-serif;
  font-size: 16px;
  background-color: black;
  color: white;
}

🔼 Regresar

Selectores CSS

Un selector, es cualquier etiqueta HTML a la que se le aplica una regla CSS.

Existen diferentes tipos de selectores:

🔼 Regresar

Selector de Etiquetas

Es cualquier etiqueta HTML.

/* En el CSS */
li {
  background-color: lavender;
  color: deeppink;
}
<!-- En el HTML -->
<ul>
  <li>Primavera</li>
  <li>Verano</li>
  <li>Otoño</li>
  <li>Invierno</li>
</ul>

🔼 Regresar

Selector de Identificador

Es cualquier etiqueta HTML que tiene asignado un valor en el atributo id.

En la hoja de estilos para definir un identificador se antepone el símbolo del # antes de su nombre.

/* En el CSS */
#titulo-principal {
  font-family: sans-serif;
  font-size: 30px;
  text-align: center;
  background-color: teal;
  color: springgreen;
}
<!-- En el HTML -->
<h1 id="titulo-principal">Título Principal</h1>

Selector de Clases

Es cualquier etiqueta HTML que tiene asignado un valor en el atributo class.

En la hoja de estilos para definir una clase se antepone el símbolo del . antes de su nombre.

/* En el CSS */
.bg-khaki {
  background-color: khaki;
}

.text-chocolte {
  color: chocolate;
}

.text-right {
  text-align: right;
}
<!-- En el HTML -->
<p class="bg-khaki text-chocolte text-right">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt quaerat
  iure error est perferendis, consectetur nesciunt dignissimos molestias
  voluptates molestiae ex! Provident voluptates quasi dolor magni eum minus quis
  quae.
</p>

🔼 Regresar

Selector Universal

Aplica los estilos a todas las etiquetas del documento HTML.

/* En el CSS */
* {
  box-sizing: border-box;
}

🔼 Regresar

Pseudo Clases

Son estados especiales de las etiquetas HTML, por ejemplo:

  • Cuando tenemos el puntero del ratón sobre la etiqueta ( hover ).
  • Cuando el elemento es el primero descendiente del contendor ( first-child ).
  • Cuando el elemento es el último descendiente del contendor ( last-child ).
  • Cuando el elemento es el enésimo descendiente del contendor ( nth-child ).
  • Existen muchas más...
/* En el CSS */
a {
  color: dodgerblue;
}

a:hover {
  color: orangered;
}

li:first-child {
  background-color: turquoise;
}

li:last-child {
  background-color: powderblue;
}

li:nth-child(3) {
  background-color: skyblue;
}
<!-- En el HTML -->
<a href="https://youtube.com/jonmircha" target="_blank">Ir a <i>YouTube</i></a>
<ol>
  <li>Primavera</li>
  <li>Verano</li>
  <li>Otoño</li>
  <li>Invierno</li>
</ol>

🔼 Regresar

Selector Descendiente

El espacio en blanco en CSS es el selector de hijos descendientes.

Aplica los estilos al segundo selector, que es descendiente del primer selector, es decir el segundo se encuentra contenido dentro del primero, en la estructura del documento HTML.

/* En el CSS */
.seasons h4 {
  background-color: yellowgreen;
}

.seasons li:first-child {
  background-color: springgreen;
}

.seasons li:last-child {
  background-color: palegreen;
}

.seasons li:nth-child(3) {
  background-color: darkseagreen;
}
<!-- En el HTML -->
<div class="seasons">
  <h4>Las Estaciones del Año</h4>
  <ol>
    <li>Primavera</li>
    <li>Verano</li>
    <li>Otoño</li>
    <li>Invierno</li>
  </ol>
</div>

🔼 Regresar

Variables CSS

Una variable es un espacio donde podemos almacenar información. En CSS una variable empieza por dos guiones medios "--".

Si queremos que la variable este disponible para todo el documento HTML, debemos definirla en el selector :root, éste hace referencia a la raíz del documento, que es la etiqueta html.

Para usar una variable se hace uso de la función var().

/* En el CSS */
:root {
  --color-first: rgb(40, 167, 226);
  --color-second: rgb(23, 18, 38);
  --color-black: rgb(0, 0, 0);
  --color-white: rgb(255, 255, 255);
  --font-primary: Avenir, system-ui, sans-serif;
  --font-size: 16px;
}

html {
  font-family: var(--font-primary);
  font-size: var(--font-size);
  color: var(--color-white);
  background-color: var(--color-black);
}

.bg-first-color {
  background-color: var(--color-first);
}

.bg-second-color {
  background-color: var(--color-second);
}

🔼 Regresar

Orden del Código

Es importante mantener un orden en nuestro código CSS, para que se aplique de forma correcta y evitemos tener problemas de cascáda o especificidad.

El orden que te sugiero es el siguiente:

  1. Definición de variables.
  2. Definición de estilos de etiquetas html
  3. Definición de estilos de secciones o componentes de tu interfaz de usuario.
  4. Definición de estilos de clases utilitarias.

Por ejemplo:

/* ********** VARIBLES ********** */
:root {
  --first-color: rgb(40, 167, 226);
  --second-color: rgb(23, 18, 38);
  --black-color: rgb(0, 0, 0);
  --white-color: rgb(255, 255, 255);
}

/* ********** ETIQUETAS HTML ********** */
html {
  font-family: sans-serif;
  font-size: 16px;
}

a {
  color: var(--first-color);
}

a:hover {
  color: var(--second-color);
}

img {
  max-width: 100%;
}

/* ********** SECCIONES o COMPONENTES de UI ********** */
.logo {
  width: 200px;
  height: auto;
  background-color: var(--second-color);
  border: 5px solid var(--first-color);
  border-radius: 50%;
}

/* ********** CLASES UTILITARIAS ********** */
.bg-first-color {
  background-color: var(--first-color);
}

.bg-second-color {
  background-color: var(--second-color);
}

.border-first-color {
  border: 5px solid var(--first-color);
}

.border-second-color {
  border: 5px solid var(--second-color);
}

.rounded {
  border-radius: 50%;
}

🔼 Regresar

Modelo de Caja

Es la forma en que CSS visualiza a las etiquetas HTML, y ¿cómo las ve?, cómo si fueran cajas.

Dentro del modelo de caja intervienen las siguientes propiedades CSS:

Modelo de Caja CSS

  1. width: Define el ancho del contenido de la caja.
  2. height: Define el alto del contenido de la caja.
  3. border: Define el borde que delimita cada caja HTML.
  4. padding: Define el relleno de la caja. Es el espaciado interno entre el borde y el contenido de la caja.
  5. margin: Define el margen de la caja. Es el espaciado externo entre el borde la caja y el resto de los elementos HTML.
  6. box-sizing: Define desde dónde empieza el tamaño de la caja. El valor por defecto es content-box. Pero el valor que vamos a aplicar a todas nuestras cajas es border-box.

Dentro del modelo de caja hay que considerar que una caja tendrá 4 lados:

  1. Arriba ( top ).
  2. Abajo ( bottom ).
  3. Izquierda ( left ).
  4. Derecho ( right ).

🔼 Regresar

Línea VS Bloque

display: inline; vs display: block;

Etiquetas de Línea

Son etiquetas que sólo ocupan el espacio que requieren, ignoran las propiedades width y height.

Etiquetas que son de naturaleza de línea, son:

  • Todas las que dan formato al texto como span, b, i, u, sup, sub, mark, small, a, etc.
  • Todas las etiquetas de contenido multimedia como img, audio, video, iframe, etc.

Etiquetas de Bloque

Son etiquetas que ocupan todo el ancho de la línea en que han sido colocadas, lo que generará saltos de línea ( enters ) para las etiquetas que tiene antes y después.

Ejemplos de etiquetas de bloque son:

  • Los encabezados h1, h2, h3, h4, h5, h6.
  • Etiquetas contenedoras como div, p, details, summary, ul, ol, li, table.
  • Etiquetas de salto como hr, br.
  • Etiquetas semánticas como header, nav, main, article, section, aside, footer.

Valores de la propiedad display

  • inline: Ocupa sólo el espacio que requiere, ignora las propiedades de width y height.
  • block: Ocupa todo el espacio a lo ancho, genera saltos de línea, para los elementos que lo rodean.
  • inline-block: Es una mezcla de inline y block, ocupa sólo el espacio que requieren pero acepta las propiedades de width y height.
  • none: Oculta el elemento de la visualización en el navegador, es decir, si carga el contenido pero no se ve.
  • flexbox.
  • grid.
  • Entre otros más...

🔼 Regresar

Unidades de Medida

En CSS tenemos dos tipos de unidades de medida:

  1. Absolutas y
  2. Relativas

Medidas Absolutas

Su valor no cambia, son unidades del mundo real. Por ejemplo: pc, cm, mm, in, Q, pt, px.

Las unidades absolutas más usadas en CSS son los puntos y los pixeles:

  • 1pt = 1/72in.
  • 1px = 1/96in.

Medidas Relativas

Su valor es relativo a un contexto. Algunas medidas son:

  • Porcentajes ( % ): Su valor es relativo al tamaño de su contenedor. Los valores van de 0 a 100.
  • Unidades del Viewport ( vw, vh ): Su valor es relativo al tamaño de la pantalla. Los valores van de 0 a 100.
  • Root EM ( rem ): Su valor hace referencia al tamaño de fuente ( font-size ) de la etiqueta html Sí html tiene un valor de 16px, entonces esa será la equivalencia de 1rem. 16px = 1rem.
  • Caracteres ( ch ): Su valor hace referencia a la anchura de los caracteres. Por ejemplo un valor de 5ch, significa que tendrá un tamaño de 5 caracteres.

🔼 Regresar

Retículas

Grid System: Filas y Columnas

En CSS podemos generar sistemas de retículas mediante un módulo que se llama Grid, que nos permite generar filas y columnas para maquetar el contenido de nuestras interfaces web.

Si quieres aprender más sobre Grid CSS te dejo mi curso en YouTube.

/* En CSS */
.grid-3 {
  display: grid;
  grid-template-columns: 20% 30% 50%;
}

.col {
  border: thin solid black;
  padding: 1rem;
}
<!-- En HTML -->
<section class="grid-3">
  <div class="col">
    <h4>Columna 1</h4>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis
      unde ullam modi non quae voluptatum placeat!
    </p>
  </div>
  <div class="col">
    <h4>Columna 2</h4>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis
      unde ullam modi non quae voluptatum placeat!
    </p>
  </div>
  <div class="col">
    <h4>Columna 3</h4>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis
      unde ullam modi non quae voluptatum placeat!
    </p>
  </div>
  <div class="col">
    <h4>Columna 4</h4>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis
      unde ullam modi non quae voluptatum placeat!
    </p>
  </div>
  <div class="col">
    <h4>Columna 5</h4>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque nobis
      unde ullam modi non quae voluptatum placeat!
    </p>
  </div>
</section>

🔼 Regresar