Aprende Html y CSS Facil y rapido

3.3. Estilos externos (external)

La tercera y más recomendada forma de aplicar CSS es mediante una hoja de estilos externa. En este método, los estilos se escriben en un archivo independiente con la extensión .css, el cual posteriormente se vincula al documento HTML.

Para enlazar el archivo CSS, se utiliza la etiqueta <link> dentro de la sección <head> del documento HTML. Esta etiqueta es autocontenida y requiere, como mínimo, dos atributos importantes:

• rel="stylesheet": indica que el archivo vinculado es una hoja de estilos CSS.

• href="...": especifica la ruta o el nombre del archivo CSS que se desea enlazar.

Cuando el navegador carga la página, también carga el archivo CSS y aplica automáticamente todos los estilos definidos en él. Este método es el más utilizado, ya que permite mantener separados el contenido (HTML) y el diseño (CSS), facilitando la organización, el mantenimiento y la reutilización del código.

<!DOCTYPE html>
<html>
  <head>
      <title>Document</title>
      <link rel="stylesheet" href="styles.css">
  </head>

3.4. Selectores básicos

En muchas ocasiones es necesario aplicar estilos únicamente a uno o varios elementos específicos, sin afectar a todos los elementos del mismo tipo. Para ello se utiliza el atributo class.

Para crear una clase, se agrega el atributo class="" en la etiqueta HTML que se desea identificar y, entre las comillas, se escribe un nombre representativo. Este nombre servirá para asociar ese elemento con una regla de estilos en CSS.

Posteriormente, en el archivo CSS, la clase se selecciona escribiendo un punto (.) seguido del nombre asignado. Todas las propiedades definidas dentro de esa regla se aplicarán únicamente a los elementos que tengan esa clase.

<!DOCTYPE html>
<html>
  <head>
      <title>Document</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <p>Hola</p>
      <p class="saludo">Hola</p>
  </body>
</html>

.saludo {
    color: red;
}

<!DOCTYPE html>
<html>
  <head>
      <title>Document</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <p>Hola</p>
      <p class="saludo">Hola</p>
      <ul>
          <li class="saludo">Papa</li>
          <li>Tomate</li>
          <li class="saludo">Fresas</li>
          <li>Cilantro</li>
      </ul>
  </body>
</html>

3.5. Identificador único (id)

Además del atributo class, HTML dispone de otro identificador llamado id, el cual también permite asignar un nombre a un elemento para poder seleccionarlo posteriormente desde CSS o JavaScript.

La principal diferencia entre ambos es que el valor de un id debe ser único dentro de un mismo documento HTML. Esto significa que un mismo identificador no debe asignarse a más de un elemento. En cambio, una clase (class) puede reutilizarse en tantos elementos como sea necesario.

Aunque algunos navegadores permiten que existan varios elementos con el mismo id, esta práctica no sigue el estándar de HTML y puede provocar comportamientos inesperados, especialmente al trabajar con JavaScript o al crear enlaces internos dentro de la página.

Para seleccionar un elemento mediante su id en CSS, se utiliza el símbolo # seguido del nombre del identificador. Los estilos definidos en esa regla se aplicarán únicamente al elemento que tenga ese id.

<body>
    <p id="saludo">Hola</p>
</body>

#saludo {
    color: red;
}

3.6. Color

La propiedad color se utiliza para cambiar el color del texto de un elemento en CSS. Después de escribir el nombre de la propiedad, se colocan dos puntos (:) y, a continuación, el valor correspondiente al color que se desea aplicar.

En este curso se utilizarán los nombres de los colores en inglés, como red, blue, green o black, ya que es la forma más sencilla de comenzar a trabajar con esta propiedad. Más adelante se estudiarán otros métodos para definir colores, como los valores RGB, HEX y HSL.

3.7. Tipo grafía

La propiedad font-family se utiliza para definir la tipografía de un texto en CSS. Puede aplicarse a cualquier elemento que contenga texto, como títulos, párrafos, enlaces o botones.

Después de la propiedad font-family, se escriben dos puntos (:) y el nombre de la fuente que se desea utilizar. Si el nombre de la tipografía está compuesto por varias palabras, como Times New Roman, debe escribirse entre comillas simples. En cambio, si el nombre consta de una sola palabra o corresponde a una familia genérica, como Arial o sans-serif, no es necesario utilizar comillas.

Es recomendable especificar varias fuentes separadas por comas. De esta manera, si el navegador o el sistema operativo del usuario no dispone de la primera tipografía, intentará utilizar la siguiente de la lista. Como última opción, se suele indicar una familia genérica, como serif, sans-serif o monospace, para asegurar que siempre se muestre una fuente adecuada.

.saludo {
    font-family: 'Times New Roman', Times, serif;
}

3.8. Tamaño

La propiedad font-size se utiliza para definir el tamaño del texto en CSS. Puede aplicarse a cualquier elemento que contenga texto, como títulos, párrafos, enlaces o botones.

Después de la propiedad font-size, se escriben dos puntos (:) y el valor correspondiente al tamaño deseado, seguido de una unidad de medida. En este curso se utilizará la unidad px (píxeles), ya que es una de las más comunes y sencillas para comenzar a trabajar con tamaños de texto.

Por ejemplo, en los párrafos suelen utilizarse tamaños como 14px, 16px o 18px, dependiendo del diseño de la página. Es importante escribir siempre la unidad de medida después del número; de lo contrario, el valor no será válido en CSS.

.saludo {
    font-size: 18px;
}

3.9. Texto en negrilla

Existen dos formas comunes de mostrar un texto en negrita en una página web.

La primera consiste en utilizar la etiqueta <b></b> en HTML. Todo el contenido que se encuentre dentro de esta etiqueta se mostrará con un grosor mayor que el texto normal. Sin embargo, esta etiqueta solo modifica la apariencia visual del texto y no le aporta un significado especial.

<body>
    <p>Lorem, ipsum dolor sit amet <b>consectetur</b> adipisicing elit. Repudiandae optio nemo illum, quam accusamus ipsa dolore pariatur cum. Facere distinctio dolorem, rerum at quia voluptatibus eius blanditiis eos voluptatem accusamus!</p>
</body>

.saludo {
    font-weight: bold;
}

.saludo {
    font-weight: 100;
}

3.10. Resaltar texto con <strong> y <span>

En ocasiones es necesario aplicar un estilo únicamente a una palabra o a una parte específica de un texto, sin modificar el resto del contenido. Para ello se utiliza la etiqueta <span></span>

La etiqueta <span> no aplica ningún estilo por sí sola; su función es agrupar una porción de texto para poder seleccionarla posteriormente desde CSS o JavaScript. Es una de las etiquetas más utilizadas cuando se desea cambiar el color, el tamaño, la fuente u otra propiedad de una palabra o frase específica.

Ejemeplo:

Lorem ipsum dolor sit amet consectetur adipisicing

<body>
    <p>Lorem <span class="ejm_span">ipsum</span> dolor sit amet consectetur adipisicing</p>
</body>

.ejm_span {
    color: red;
    font-size: 30px;
    font-weight: bold;
}

<body>
    <p>Lorem <strong>ipsum</strong> dolor sit amet consectetur adipisicing</p>
</body>

3.11. Texto en cursiva

La propiedad font-style se utiliza para modificar el estilo de la tipografía en CSS. Uno de sus valores más utilizados es italic, el cual hace que el texto se muestre en cursiva, es decir, con una ligera inclinación hacia la derecha.

Aunque font-style admite otros valores, como normal e oblique, en este curso se trabajará principalmente con el valor italic, ya que es el más utilizado para aplicar texto en cursiva.

Ejemplo:

David Estudia Programación

<body>
    <p class="ejem_cursiva">David Estudia Programación</p>
</body>

.ejem_cursiva {
    font-style: italic;
}

3.12. Alinear texto (text-align)

La propiedad text-align se utiliza para alinear horizontalmente el contenido de texto dentro de un elemento. Puede aplicarse a títulos, párrafos y otros elementos que contengan texto.

Después de la propiedad text-align, se escriben dos puntos (:) y el valor que indica la alineación deseada. Los valores más utilizados son:

• left: alinea el texto a la izquierda.

CodeStart

• center: centra el texto horizontalmente.

CodeStart

• right: alinea el texto a la derecha.

CodeStart

Estos valores permiten organizar el contenido de acuerdo con el diseño de la página y mejorar su presentación.

3.13. Texto justificado (justify)

Además de los valores left, center y right, la propiedad text-align dispone del valor justify.

El valor justify distribuye el texto de manera uniforme entre los márgenes izquierdo y derecho del elemento. Para lograrlo, el navegador ajusta automáticamente el espacio entre las palabras, haciendo que todas las líneas del párrafo (excepto, normalmente, la última) queden alineadas en ambos lados.

Este tipo de alineación es muy utilizado en libros, periódicos y documentos, ya que proporciona una apariencia más ordenada y uniforme al texto.

3.14. Decoración del texto (text-decoration)

La propiedad text-decoration se utiliza para agregar o modificar decoraciones en el texto de un elemento. Con ella es posible aplicar efectos como subrayados, líneas sobre el texto o líneas que lo atraviesan.

Los valores más utilizados de esta propiedad son:

• underline: agrega una línea debajo del texto, es decir, lo subraya.

Ejemeplo:

Lorem ipsum dolor sit amet consectetur adipisicing elit.

.decore_underline {
    text-decoration: underline;
}

.decore_overline {
    text-decoration: overline;
}

.decore_line-through {
    text-decoration: line-through;
}

• Antes:

• Despues:

.a__text-decoration {
    text-decoration: none;
}

3.15. Espaciado entre letras (letter-spacing)

La propiedad letter-spacing se utiliza para modificar el espacio entre las letras de un texto en CSS. Permite aumentar o reducir la separación entre los caracteres.

Después de los dos puntos (:), se indica el valor de separación junto con una unidad de medida, como px (píxeles). Un valor positivo aumenta el espacio entre las letras, mientras que un valor negativo lo reduce.

Ejemplo:

• letter-spacing: 20px; aumenta la separación entre los caracteres

Lorem, ipsum dolor sit amet consectetur adipisicing elit.

• letter-spacing: -2px; hace que las letras estén más juntas.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi impedit fugiat error ducimus alias eligendi veniam repudiandae? Pariatur

.p__spacing_positivo {
    letter-spacing: 20px;
}


.p__spacing_negativo {
    letter-spacing: -2px;
}

3.16. Transformación del texto (text-transform)

La propiedad text-transform se utiliza para modificar la forma en que se muestran las letras de un texto, permitiendo convertirlas en mayúsculas, minúsculas o aplicar mayúscula inicial a cada palabra.

Los valores más utilizados son:

• uppercase: convierte todas las letras del texto en mayúsculas.

Ejemplo:

Espero que estén aprendiendo.

.texto {
    text-transform: uppercase;
}

.texto {
    text-transform: lowercase;
}

.texto {
    text-transform: capitalize;
}

3.17. Importar fuentes externas a HTML y CSS

3.17.1. Primera forma de exportar tipografías HTML

Una de las formas más sencillas de utilizar una tipografía externa en CSS es mediante Google Fonts, un servicio que ofrece una gran variedad de fuentes que pueden utilizarse en páginas web.

Primero, se debe ingresar a Google Fonts y buscar la tipografía que se desea utilizar. Después de seleccionarla, se debe elegir la opción para obtener el código de inserción (Get embed code). Google Fonts proporcionará el código necesario para incorporar la fuente en el proyecto.

Luego, se debe dirigir al documento HTML y, dentro de la etiqueta <head>, colocar el código proporcionado por Google Fonts. Este código normalmente contiene una o más etiquetas <link> que permiten cargar la tipografía desde los servidores de Google.

Una vez vinculada la fuente, esta puede utilizarse desde el archivo CSS mediante la propiedad font-family. Para ello, se utiliza el nombre de la tipografía indicado por Google Fonts.

De esta manera, la fuente queda disponible para utilizarla en los diferentes elementos de la página web.

Ejemplo:

Espero que estés aprendiendo mucho.

<!DOCTYPE html>
<html>
  <head>
      <title>Document</title>
      <link rel="stylesheet" href="styles.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik+Spray+Paint&family=Smooch+Sans:wght@100..900&display=swap" rel="stylesheet">
  </head>
  <body>
      <p class="texto">Espero que estés aprendiendo mucho.</p>
  </body>
</html>

.texto {
    font-family: "Rubik Spray Paint";
}

@font-face {
    font-family: f;
    src: url();
}

@font-face {
    font-family: Sekuya;
    src: url(Sekuya/Sekuya-Regular.ttf) format("truetype");
}

@font-face {
    font-family: Sekuya;
    src: url(Sekuya/Sekuya-Regular.ttf) format("truetype");
    font-weight: 900;
}

@font-face {
    font-family: "MiFuente";
    src: url("fuentes/mi-fuente-regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "MiFuente";
    src: url("fuentes/mi-fuente-bold.ttf") format("truetype");
    font-weight: 700;
}

@font-face {
    font-family: "MiFuente";
    src: url("fuentes/mi-fuente-black.ttf") format("truetype");
    font-weight: 900;
}

p {
    font-family: "MiFuente";
    font-weight: 700;
}

3.18. Modelo de caja (Box Model)

En esta parte se creará un contenedor que más adelante se modificará y se utilizará para organizar diferentes elementos de la página. Por ahora, únicamente se creará su estructura básica y se le asignarán algunas propiedades de CSS para poder visualizarlo.

Dentro del documento HTML, específicamente en la etiqueta <body></body>, se agregará la etiqueta <div></div>

La etiqueta <div> se utiliza como un contenedor genérico, es decir, permite agrupar y organizar diferentes elementos dentro de una página web. Posteriormente, este contenedor puede modificarse mediante CSS para definir su tamaño, color, posición y otras características visuales.

<body>
    <div></div>
</body>

div {
    background-color: red;
}

div {
    background-color: red;
    width: 500px;
    height: 500px;
}

3.19. Espaciado interno y externo de la caja (padding y margin)

Cuando hablamos de bordes y relleno, estamos hablando de diferentes espacios que pueden existir alrededor del contenido de un elemento. En este ejercicio comenzaremos trabajando con el relleno (padding), que permite crear espacio entre el contenido y los límites internos del elemento.

3.19.1. Creando un formulario

Para realizar este ejercicio se creará un formulario sencillo en HTML, en el que se solicitará al usuario su correo electrónico y contraseña.

<body>
    <form class="formulario">
        <input class="formulario_input" type="email" placeholder="daniel@gmail.com">
        <input class="formulario_input" type="password" placeholder="contraseña">
        <input class="formulario_input" type="submit">
    </form>
</body>

.formulario {
    background: red;
}

La propiedad background permite establecer el fondo del elemento. En este caso, se utiliza red para darle un fondo rojo.

3.19.2. Relleno en todos los lados

Para agregar espacio entre el contenido y los límites internos del elemento, se utiliza la propiedad padding.

Si se coloca un solo valor, este espacio se aplicará en los cuatro lados:

.formulario {
    background: red;
    padding: 20px;
}

En este ejemplo se agregarán 20px de espacio arriba, abajo, izquierda y derecha.

Relleno superior

Si únicamente se necesita espacio en la parte superior, se utiliza:

• padding-top: 20px;

Esto agregará espacio solamente en la parte superior del elemento.

Relleno inferior

Para agregar espacio únicamente en la parte inferior, se utiliza:

• padding-bottom: 20px;

Relleno izquierdo

Para agregar espacio únicamente en el lado izquierdo:

• padding-left: 20px;

Relleno derecho

Para agregar espacio únicamente en el lado derecho:

• padding-right: 20px;

3.19.3. Especificar todos los lados con padding

No es necesario escribir padding-top, padding-right, padding-bottom y padding-left por separado. La propiedad padding permite indicar los valores de todos los lados en una sola línea.

Si se utiliza un solo valor, se aplica a los cuatro lados, pero si se utilizan cuatro valores, estos se aplican siguiendo el sentido de las manecillas del reloj:

arriba → derecha → abajo → izquierda

padding: 10px 20px 30px 40px;

En este ejemplo:

• 10px → arriba

• 20px → derecha

• 30px → abajo

• 40px → izquierda

Si alguno de los valores es 0, no es necesario escribir px.

3.19.4. Relleno vertical y horizontal

También es posible utilizar solamente dos valores.

En este caso:

padding: 20px 40px;

El primer valor se aplica verticalmente, es decir, a arriba y abajo.

El segundo valor se aplica horizontalmente, es decir, a izquierda y derecha.

Por lo tanto:

• 20px → arriba y abajo

• 40px → izquierda y derecha

Esta forma permite escribir menos código cuando se desea utilizar el mismo espacio en los lados opuestos.

3.19.5. Margen

El margen (margin) permite crear espacio por fuera de un elemento, separándolo de otros elementos que se encuentren a su alrededor.

Para entenderlo mejor, se puede comparar con el padding: primero se encuentra el contenido, después el padding, y finalmente el margin, que es el espacio exterior del elemento.

Creando dos cajas

Para realizar este ejercicio se crearán dos elementos <div> en HTML. Al primero se le asignará la clase box_1 y al segundo la clase box_2.

En CSS se les dará el mismo ancho y alto, pero cada uno tendrá un color de fondo diferente para poder distinguirlos:

.box_1 {
    width: 250px;
    height: 250px;
    background: red;
}

.box_2 {
    width: 250px;
    height: 250px;
    background: blue;
}

.box_1 {
    width: 250px;
    height: 250px;
    background: red;
    margin: 20px;
}

margin-top: 20px;

margin-top: 20px;

margin: 10px 50px 50px 100px;

margin: 100px 50px;

3.20. Bordes en CSS

Para aprender a utilizar los bordes (border) en CSS, primero se creará un <div> en el documento HTML. Después, en CSS, se le asignará un ancho, una altura y un color de fondo para poder visualizarlo claramente.

Por ejemplo:

.caja {
    width: 250px;
    height: 250px;
    background: red;
}

Una vez creada la caja, se comenzará a trabajar con sus bordes.

3.20.1. Grosor del borde

Para definir el grosor de un borde se utiliza la propiedad border-width.

Después de los dos puntos (:), se escribe el valor del grosor seguido de una unidad de medida, como px.

• border-width: 5px;

Sin embargo, utilizar únicamente border-width no hará que el borde sea visible. Para que aparezca, también es necesario definir su estilo.

3.20.2. Estilo del borde

Para indicar qué tipo de borde se desea utilizar se emplea la propiedad border-style.

Uno de los valores más utilizados es solid, que crea una línea continua:

• border-style: solid;

Existen otros estilos, como:

• dotted → borde de puntos.

• dashed → borde de líneas discontinuas.

• double → borde formado por dos líneas.

• groove → efecto de borde con apariencia hundida.

• ridge → efecto de borde con apariencia elevada.

• inset → efecto de borde hacia el interior.

• outset → efecto de borde hacia el exterior.

• none → no muestra ningún borde.

• hidden → oculta el borde.

3.20.3. Color del borde

Para establecer el color del borde se utiliza la propiedad border-color.

Por ejemplo:

• border-color: black;

De esta manera, para crear un borde visible se pueden utilizar las tres propiedades:

border-width: 5px;
border-style: solid;
border-color: black;

Estas propiedades permiten controlar por separado el grosor, el estilo y el color del borde.

3.20.4. Crear un borde en una sola línea

En lugar de escribir las tres propiedades por separado, existe una forma más sencilla de definirlas utilizando únicamente border.

Los valores se escriben en el siguiente orden:

grosor → estilo → color

Por ejemplo:

• border: 5px solid black;

En este caso:

• 5px → grosor del borde.

• solid → estilo del borde.

• black → color del borde.

Esta forma permite escribir el borde de manera más rápida y mantener el código más sencillo.

3.20.5. Redondear las esquinas

Para redondear las esquinas de un elemento se utiliza la propiedad border-radius.

• border-radius: 20px;

El valor determina qué tan redondeadas serán las esquinas. Cuanto mayor sea el valor, mayor será el redondeo, hasta alcanzar el límite permitido por el tamaño del elemento.

También es posible utilizar porcentajes. Por ejemplo:

• border-radius: 50%;

Cuando se aplica 50% a un elemento cuadrado, sus esquinas pueden llegar a formar un círculo. Si el elemento es rectangular, el resultado puede ser una forma ovalada.

La diferencia principal es que los valores en px representan una medida fija, mientras que los porcentajes se calculan en relación con el tamaño del elemento.

3.20.6. Bordes independientes

No es obligatorio aplicar el mismo borde a los cuatro lados. CSS permite modificar cada lado de manera independiente.

Para ello se pueden utilizar:

• border-top → borde superior.

• border-right → borde derecho.

• border-bottom → borde inferior.

• border-left → borde izquierdo.

Por ejemplo:

border-top: 3px solid red;
border-bottom: 5px dashed blue;

En este caso, el borde superior será rojo y continuo, mientras que el borde inferior será azul y discontinuo.

De esta manera, es posible utilizar diferentes grosores, estilos y colores en cada lado del mismo elemento.

3.21. Controlar el tamaño de la caja (box-sizing)

Cuando se crea una caja en CSS y se le asignan propiedades como padding y border, su tamaño total puede aumentar.

Esto ocurre porque, de forma predeterminada, el ancho y el alto establecidos mediante width y height corresponden al contenido. El padding y el border se agregan por fuera de esas dimensiones.

Por ejemplo, si una caja tiene:

width: 100px;

height: 100px;

y posteriormente se le agrega:

padding: 30px;

border: 10px solid black;

El tamaño total de la caja será mayor que los 100px establecidos inicialmente.

Sin embargo, en muchas ocasiones se desea que la caja mantenga exactamente el ancho y el alto definidos, haciendo que el padding y el border formen parte de esas dimensiones.

Para conseguirlo se utiliza la propiedad box-sizing con el valor border-box:

box-sizing: border-box;

Con border-box, el width y el height establecidos representan el tamaño total de la caja, incluyendo su padding y su border.

Ejemplo:

Para observar la diferencia de una manera más clara, se crearán dos <div> en HTML.

Ambos tendrán dos clases: una clase general llamada box y otra clase específica para diferenciarlos.

Por ejemplo:

<div class="box box_1"></div>
<div class="box box_2"></div>

Un elemento puede tener varias clases siempre que los nombres estén separados por espacios.

En este caso, ambos elementos tienen la clase box, por lo que compartirán las mismas propiedades. Además, cada uno tiene una segunda clase diferente.

En CSS se definirán las propiedades generales:

.box {
    width: 250px;
    height: 250px;
    margin: 30px;
    background: red;
}

De esta manera, las dos cajas tendrán el mismo ancho, alto, margen y color de fondo.

Ahora se agregará padding y border únicamente a la primera caja:

.box_1 {
    padding: 30px;
    border: 10px solid black;
}

Al visualizar la página, se podrá observar que la primera caja aumentó su tamaño total. Esto ocurre porque, con el comportamiento predeterminado de box-sizing, el padding y el border se agregan al tamaño establecido mediante width y height.

Ahora se aplicarán las mismas propiedades a la segunda caja, pero agregando box-sizing: border-box:

.box_2 {
    padding: 30px;
    border: 10px solid black;
    box-sizing: border-box;
}

Al visualizar nuevamente la página, se podrá observar que, aunque la segunda caja también tiene padding y border, mantiene el tamaño total de 250px × 250px establecido en la clase box.

Esto ocurre porque box-sizing: border-box hace que el padding y el border se incluyan dentro del ancho y alto definidos.

Diferencia principal

• box-sizing: content-box → width y height corresponden al contenido, y el padding y border se agregan al tamaño total.

• box-sizing: border-box → width y height incluyen el contenido, el padding y el border.

Por esta razón, border-box es muy utilizado cuando se quiere tener un mayor control sobre el tamaño final de los elementos.

3.22. Colores

RGBA

RGBA es una forma de representar colores en CSS utilizando cuatro valores:

• B (Red) → rojo.

• G (Green) → verde.

• B (Blue) → azul.

• A (Alpha) → transparencia del color.

Los tres primeros valores (R, G y B) permiten crear diferentes colores mediante la combinación de rojo, verde y azul.

Para utilizar RGBA se escribe rgba() y dentro de los paréntesis se colocan los cuatro valores:

background: rgba(255, 0, 0, 1);

Los valores de rojo, verde y azul van desde 0 hasta 255.

Por ejemplo:

• rgba(0, 0, 0, 1) → negro.

• rgba(255, 255, 255, 1) → blanco.

• rgba(255, 0, 0, 1) → rojo.

El cuarto valor corresponde al canal alfa, que controla la transparencia del color y va desde 0 hasta 1.

• 0 → completamente transparente.

• 0.5 → 50 % de transparencia.

• 1 → completamente opaco.

Por ejemplo:

background: rgba(255, 0, 0, 0.5);

Esto creará un rojo con una transparencia del 50 %.

Recomendación

Para facilitar la creación de colores RGBA, se puede buscar en internet “RGBA picker”. Estas herramientas permiten seleccionar un color visualmente y modificar sus valores de rojo, verde, azul y transparencia sin tener que probar los valores manualmente.

hexadecimales

Los colores hexadecimales son otra forma de representar colores en CSS. A diferencia de rgba(), utilizan un código que comienza con el símbolo #.

Después del # normalmente se escriben seis caracteres, divididos en tres grupos de dos:

rojo → verde → azul

Por ejemplo:

#ff0000

En este caso:

• ff → rojo.

• 00 → verde.

• 00 → azul.

Por lo tanto, #ff0000 representa el color rojo.

Algunos ejemplos son:

• #ff0000 → rojo

• #00ff00 → verde

• #0000ff → azul

Los valores hexadecimales utilizan los números del 0 al 9 y las letras de la A a la F.

Las letras representan los valores que continúan después del 9:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

Por ejemplo:

• 0 → valor mínimo.

• 9 → valor 9.

• A → valor 10.

• F → valor 15.

Cada grupo de dos caracteres puede representar un valor desde 00 hasta FF.

Forma abreviada

También existe una forma abreviada de escribir algunos colores hexadecimales utilizando solamente tres caracteres en lugar de seis.

Esto es posible cuando cada par de caracteres es igual.

Por ejemplo:

#ff0000

puede escribirse de forma abreviada como:

#f00

De la misma manera:

#00ff00 → #0f0

#0000ff → #00f

Esta abreviación solo es válida cuando los dos caracteres de cada par son iguales.

Por ejemplo, #ff0000 puede convertirse en #f00, pero #fa0032 no puede abreviarse de esta manera porque sus pares no están formados por caracteres iguales.