# Comandos de CSS: instrucciones para los más utilizados

Para crear una página web se necesita una gran variedad de comandos de CSS. Te ofrecemos una visión general de los comandos de CSS más importantes y frecuentes, complementada con algunos ejemplos breves y personalizables para el diseño web.

## Variedad de comandos de CSS con CSS 3

Al principio, los comandos de CSS se utilizaban para definir fuentes y colores de letra, hacer más atractivas las tablas o hacer que el texto fluyera alrededor de los elementos, pero las posibilidades se han ampliado considerablemente. Hoy en día, se pueden crear **degradados de color**, **recortar imágenes**, generar **sombras** y redondeces o **usar animaciones**.

Nota Sin **Cascading Style Sheets (CSS)**, hoy en día no se puede crear una página web. En los artículos correspondientes te explicamos [qué es CSS](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/que-es-css/) y [cómo se integra CSS en HTML](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/css-en-html/). Si eres principiante, te recomendamos nuestro [tutorial de iniciación a las hojas de estilo en cascada](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/que-es-css-un-tutorial-con-lo-que-necesitas-saber/). También puedes consultar nuestros [trucos de CSS](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/consejos-y-trucos-css-que-debes-conocer/) para funciones CSS especiales.

Un **comando CSS**, también llamado regla CSS, se **estructura** de la siguiente manera:

<table>
  <thead>
    <tr>
      <th><strong>Selector</strong></th>
      <th><strong>Llave de apertura</strong></th>
      <th><strong>Propiedad</strong></th>
      <th><strong>Valor de la propiedad</strong></th>
      <th><strong>Llave de cierre</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>p</td>
      <td>{</td>
      <td>color:</td>
      <td>navy;</td>
      <td>}</td>
    </tr>
  </tbody>
</table>

La propiedad y el valor de la propiedad juntos forman lo que se llama una **declaración**.

Con CSS debes tener en cuenta que, a pesar de las mejoras y ajustes, **no todos los navegadores lo “entienden” todo**. En CSS existen los llamados prefijos de navegador, con los que los comandos se dirigen específicamente a los motores de los navegadores. Estos prefijos son:

- -moz-: para Firefox
- -ms-: para Internet Explorer
- -khtml-: para Konqueror
- -o-: para versiones antiguas de Opera
- -webkit-: para Safari, Chrome y versiones nuevas de Opera

Un ejemplo sencillo:

```none
.box { 
-moz-border-radius: 10px; / *Instrucciones para Firefox* / 
border-radius: 10px; 
}
```

En la página [CANIUSE](https://caniuse.com/ "Support tables for HTML5, CSS3, etc") puedes **probar gratuitamente la compatibilidad** de los comandos de CSS con todos los navegadores habituales.

Consejo Todas las entradas en CSS entre / *…* / no son ejecutadas por el navegador. Esto permite colocar **comentarios** y ocultar comandos de CSS para realizar pruebas sin tener que borrarlos y reescribirlos.

Para el **diseño responsivo de páginas web**, se han añadido la [CSS Flexbox](https://www.ionos.mx/digitalguide/paginas-web/creacion-de-paginas-web/css-flexbox/), la [CSS Grid](https://www.ionos.mx/digitalguide/paginas-web/creacion-de-paginas-web/css-grid-layout/) y las [Media Queries](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/css-media-queries/), que ayudan a aplicar el principio “Mobile First” con nuevos comandos de CSS.

## Colores en CSS

El mundo de los **colores en Internet** se basa en el [espacio de color RGB](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/css-media-queries/). Existen comandos de CSS para definir los colores de los distintos componentes de una página web. Casi cada elemento puede ser provisto de un color o incluso de un degradado de colores.

Nota Los nombres de clases y de identificadores en los comandos de CSS son “**case sensitive**”, lo que significa que responden a mayúsculas y minúsculas. Por lo tanto, hay una diferencia entre la declaración de un ID como “**\#AMARILLO** { … }” y “**\#amarillo** { … }”. Debe usarse igual en el elemento HTML.

### Opciones para especificar los valores de color

- **Hexcode**: #63f0ac
- **Nombres de colores**: red, green, blue, coral, white, black …
- **RGB**: rgb(238,130,238) y transparencia RGB con rgba(238,130,238, 0.7)
- **HSL con transparencia**: hsla(140,20%,50%,0.5) -Hue (Tono de color) de 0 a 360 grados en la rueda de color -Saturation (Saturación): de 0 % incoloro a 100 % de mayor intensidad de color -Lightness (Luminosidad): de 0 % como negro a 100 % como blanco -Valor numérico de transparencia hasta 1,0 = cobertura total del color

### Ejemplos de definición de colores para elementos HTML

Para el **color del texto**, se utiliza la propiedad *color*:

```none
p { color: red; } / *un párrafo en rojo* / 
div { color: #ffc3dd; } / *contenedor DIV con texto en rosa claro* / 
h1 { color: rgba(220,0,218,0.85); } / *título en violeta intenso con una transparencia del 85 %* /
```

### Los gradientes de color también son posibles

Lo gradientes de color, que antes había que crear con archivos de imagen, ahora se puede hacer con comandos de CSS. Para ello se utiliza la instrucción *background-image: gradient* o de forma abreviada *background:gradient*. El *gradient* representa un valor para una imagen sin dimensiones y crea un **gradiente de color** que puede cambiarse en puntos definidos.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descripción</strong></th>
      <th><strong>Posibles valores</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>linear-gradient</td>
      <td>Gradiente lineal de un color a otro o con múltiples colores</td>
      <td>to-top, to-right, 45deg (ángulo arbitrario), colores con % como puntos de parada/transición</td>
    </tr>
    <tr>
      <td>radial-gradient</td>
      <td>Gradiente radial de un color a otro</td>
      <td>círculo, elipse con valores de píxeles y colores</td>
    </tr>
    <tr>
      <td>conic-gradient</td>
      <td>Gradiente cónico de un color a otro</td>
      <td>colores con valores % y ángulo de inicio como número</td>
    </tr>
  </tbody>
</table>

La tabla muestra solo **algunos de los atributos posibles**. Todos los valores comunes pueden utilizarse como especificaciones de color, incluidos los valores de color con transparencia.

El formato completo de un comando CSS podría ser, por ejemplo:

```none
.box { background-image: linear-gradient(to top, white 0%, black 50%); }
```

## Comandos de CSS para fuentes

Con el comando CSS *font*, se pueden cambiar de una sola vez las **seis propiedades** de una **fuente** utilizada.

```none
p { font: italic small-caps 700 1.2em/1.5em Arial, Helvetica, sans-serif; }
```

Esta declaración CSS resumida se puede desglosar individualmente, en el orden dado:

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descripción</strong></th>
      <th><strong>Valores posibles</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>font-style</td>
      <td>Estilo de la fuente</td>
      <td>normal, italic, oblique</td>
    </tr>
    <tr>
      <td>font-variant</td>
      <td>Variante de la fuente</td>
      <td>normal, small-caps</td>
    </tr>
    <tr>
      <td>font-weight</td>
      <td>Grosor de los caracteres</td>
      <td>normal (= 400), bold, bolder, lighter, 100 a 900 (en incrementos de 100)</td>
    </tr>
    <tr>
      <td>font-size / line-height</td>
      <td>Tamaño de la fuente</td>
      <td>Valores en px, %, em, rem, vw, vh</td>
    </tr>
    <tr>
      <td>font-family</td>
      <td>Familia de fuentes</td>
      <td>Fuentes dependiendo del sistema operativo, navegador o extensiones instaladas adicionalmente</td>
    </tr>
  </tbody>
</table>

La definición de *font-family* para el cuerpo de la página web se hereda en todas las instrucciones subyacentes. El color del texto no se establece con una instrucción *font*, sino con *color:valor de color*.

Consejo Los nombres de **fuentes con espacios** deben estar entre comillas simples o dobles en el comando CSS, por ejemplo, *font-family: “Lobster Two”*.

Puedes encontrar más información sobre las **unidades de medida** a utilizar para *font-size* en el artículo sobre [tipografía en el diseño web adaptable](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/tipografia-para-el-diseno-responsivo-con-css/).

## Comandos de CSS para el diseño de texto

Además de la fuente, su color y tamaño, hay otras sutilezas tipográficas importantes para la legibilidad de una página web. Entre ellas:

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descripción</strong></th>
      <th><strong>Valores posibles</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>text-align</td>
      <td>Alineación del texto</td>
      <td>left, right, center, justify (jusitificado)</td>
    </tr>
    <tr>
      <td>text-decoration</td>
      <td>Decoración del texto</td>
      <td>underline, overline, line-through</td>
    </tr>
    <tr>
      <td>word-spacing</td>
      <td>Espaciado entre palabras</td>
      <td>valor numérico en pt (puntos), mm, cm, px, em, rem</td>
    </tr>
    <tr>
      <td>letter-spacing</td>
      <td>Espaciado entre letras</td>
      <td>valor numérico en pt (puntos) mm, cm, px, em, rem</td>
    </tr>
    <tr>
      <td>text-indent</td>
      <td>Sangría de la primera línea</td>
      <td>valor numérico en pt (puntos) mm, cm, px, em, rem</td>
    </tr>
    <tr>
      <td>text-transform</td>
      <td>Transformación del texto</td>
      <td>capitalize, uppercase, lowercase, none</td>
    </tr>
  </tbody>
</table>

## Comandos de CSS para líneas y marcos

Para diseñar bordes, se utiliza el elemento CSS *border*, en el que, de forma similar a *font*, se resumen varias propiedades.

Ejemplo: una imagen, con la etiqueta HTML *img*, está rodeada por una **línea** de 5 píxeles de ancho en azul marino. La **forma abreviada** es:

```none
img { border: 5px solid #000080; }
```

Este comando CSS puede desglosarse de la siguiente manera:

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descripción</strong></th>
      <th><strong>Valores posibles</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>border-width</td>
      <td>Grosor de la línea</td>
      <td>px, mm, in, em, rem</td>
    </tr>
    <tr>
      <td>border-style</td>
      <td>Estilo de la línea</td>
      <td>none, hidden, dotted, dashed, double, groove, ridge, inset, outset</td>
    </tr>
    <tr>
      <td>border-color</td>
      <td>Color de la línea</td>
      <td>Ver sección sobre colores</td>
    </tr>
  </tbody>
</table>

Las líneas a lo largo de los **bordes individuales** de una imagen o rectángulo se colocan individualmente con *border-top*, *border-right*, *border-bottom* y *border-left* con los mismos atributos que en la forma abreviada de *border*.

## Comandos de CSS para definir el espaciado

Existen dos tipos de espaciado:

- *padding* como distancia interior del contenido al elemento circundante
- *margin* como distancia exterior de un elemento al siguiente

### Distancia interior

El *padding* define la distancia entre un bloque de texto o una imagen y el marco circundante. Existe una **forma abreviada** y especificaciones definidas para todas las páginas de un bloque de contenido.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descripción</strong></th>
      <th><strong>Valores posibles</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>padding: 1px</td>
      <td>Espaciado interior general</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding: 1em 2.5em;</td>
      <td>Espaciado interior arriba y abajo (1er valor), izquierda y derecha (2do valor)</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding: 5px 2px 4px;</td>
      <td>Espaciado interior arriba (1er valor), izquierda y derecha (2do valor), abajo (3er valor)</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding-top: 1mm;</td>
      <td>Espaciado interior en la parte superior</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding-right: 1pc;</td>
      <td>Espaciado interior a la derecha</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding-bottom: 3pt;</td>
      <td>Espaciado interior en la parte inferior</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>padding-left: 2in;</td>
      <td>Espaciado interior a la izquierda</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
  </tbody>
</table>

Cuando en la forma abreviada de *padding* se proporcionan valores para las cuatro posiciones, se procede desde arriba en sentido horario, es decir, en el siguiente formato:

```none
p { padding: 5px 0 5px 0; } / *5 píxeles arriba y abajo, ningún espacio interior a la derecha e izquierda* /
```

### Distancia exterior

El comando CSS *margin* define la distancia entre un elemento de diseño y el siguiente. La sintaxis y enumeración de los valores individuales es idéntica a *padding*.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descripción</strong></th>
      <th><strong>Valores posibles</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>margin: 5px;</td>
      <td>Margen exterior general</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin: 2em 1.5em;</td>
      <td>Margen exterior arriba y abajo (1er valor), izquierda y derecha (2ndo valor)</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin: 2px 10px 15px;</td>
      <td>Margen exterior arriba (1er valor), izquierda y derecha (2do valor), abajo (3er valor)</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin-top: 2pc;</td>
      <td>Margen exterior en la parte superior</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin-right: 5mm;</td>
      <td>Margen exterior a la derecha</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin-bottom: 7pt;</td>
      <td>Margen exterior en la parte inferior</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
    <tr>
      <td>margin-left: 1in;</td>
      <td>Margen exterior a la izquierda</td>
      <td>px, em, mm, in, pt, pc, %</td>
    </tr>
  </tbody>
</table>

Nota Al calcular los elementos de un diseño, deben incluirse **todos los componentes**, es decir: la anchura del texto o la imagen (*width*), el espaciado interior (*padding*), el grosor de la línea (*border-width*) y el espaciado exterior (*margin*).

## Comandos de CSS para enlaces

Si defines el diseño de los enlaces en CSS, puedes diseñar cada **estado de un enlace** por separado. Además de la apariencia normal, también puedes especificar cómo se muestra un enlace al pasar el ratón por encima de él, durante el clic y al seleccionarlo (por ejemplo, con la tecla Tab).

```none
a:link   { background-color: black; color: white;}
```

Por regla general, se realizan cambios en estas llamadas **pseudoclases** para cambiar el color de los enlaces. En principio, sin embargo, todos los comandos de CSS posibles pueden integrarse en estas clases.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descripción</strong></th>
      <th><strong>Valores posibles</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a:link</td>
      <td>Enlace en estado normal</td>
      <td>se puede combinar con comandos de CSS</td>
    </tr>
    <tr>
      <td>a:hover</td>
      <td>Enlace al pasar el cursor sobre él</td>
      <td>se puede combinar con comandos de CSS</td>
    </tr>
    <tr>
      <td>a:active</td>
      <td>Enlace mientras se hace clic</td>
      <td>se puede combinar con comandos de CSS</td>
    </tr>
    <tr>
      <td>a:focus</td>
      <td>Enlace seleccionado, por ejemplo, con la tecla Tab</td>
      <td>se puede combinar con comandos de CSS</td>
    </tr>
    <tr>
      <td>a:visited</td>
      <td>Enlace después de haber sido visitado</td>
      <td>se puede combinar con comandos de CSS</td>
    </tr>
  </tbody>
</table>

## Comandos de CSS para fondos

El fondo de una página web también puede modificarse mediante CSS. Esto puede hacerse especificando el color o añadiendo una imagen, por ejemplo. Si seleccionas una imagen, también puedes definir características adicionales.

<table>
  <thead>
    <tr>
      <th><strong>Comando CSS</strong></th>
      <th><strong>Descripción</strong></th>
      <th><strong>Valores posibles</strong></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>background-color</td>
      <td>Color de fondo</td>
      <td>Ver sección sobre colores</td>
    </tr>
    <tr>
      <td>background-image</td>
      <td>Imagen de fondo</td>
      <td>URL</td>
    </tr>
    <tr>
      <td>background-attachment</td>
      <td>¿El fondo se mueve al desplazarse o permanece fijo?</td>
      <td>scroll, fixed</td>
    </tr>
    <tr>
      <td>background-clip</td>
      <td>Determina para qué área se aplican las propiedades de fondo</td>
      <td>padding-box, corner-box, content-box</td>
    </tr>
    <tr>
      <td>background-position</td>
      <td>Alineación de la imagen de fondo</td>
      <td>top, center, bottom / left, center, right</td>
    </tr>
    <tr>
      <td>background-repeat</td>
      <td>¿Si la imagen es más pequeña que el fondo, se puede repetir?</td>
      <td>repeat, repeat-x (horizontal), repeat-y (vertical), space (repetir sin recorte), round (repetir con escalado)</td>
    </tr>
  </tbody>
</table>

Estos son **comandos de detalle**. También pueden anidarse bajo el comando de nivel superior *fondo*:

```none
background: white url("http://example.org/image.png") 
    repeat-x
```

Aquí se integran los parámetros *background-color*, *background-image* y *background-repeat*.

Consejo Te explicamos [cómo anclar esta página a la barra de tareas en Windows 11](https://www.ionos.mx/digitalguide/servidores/configuracion/windows-11-anclar-pagina-a-la-barra-de-tareas/). De este modo, podrás acceder rápidamente a una vista general de todos los comandos de CSS en cualquier momento.


This is a markdown version of: [https://www.ionos.mx/digitalguide/paginas-web/diseno-web/comandos-de-css/](https://www.ionos.mx/digitalguide/paginas-web/diseno-web/comandos-de-css/) for AI/LLM consumption.