Propiedades básicas CSS

Existe una gran variedad de propiedades que pueden ser usadas para cambiar el aspecto de los elementos de nuestra página. Aquí hay una pequeña lista de las más sencillas de utilizar y que provocan grandes cambios:

color

Cambia el color del texto del elemento:

<p style="color:red;">Texto</p>

Acepta valores de tipo <color>¹.

background-color

Cambia el color de fondo del elemento:

<p style="background-color:royalblue;">Texto</p>

Acepta valores de tipo <color>¹.

font-family

Cambia la familia de fuente/tipografía:

<p style="font-family:monospace;">Texto</p>

Acepta valores de tipo <string>², eso quiere decir que podemos usar cualquier texto, aunque los valores siempre deben pertenecer a una familia de fuente.

Podemos probar con algunos valores genéricos:

• serif
• sans-serif
• monospace
• cursive

font-size

Cambia el tamaño de la letra:

<p style="font-size: 32px;">Texto</p>

Acepta valores de diferentes tipos, algunos de ellos son <absolute-size>³ y <length>⁴.

Podemos probar con algunos valores de tipo <absolute-size> como:

• xx-small (extra extra chico)
• x-small (extra chico)
• small (chico)
• medium (mediano)
• large (grande)
• x-large (extra grande)
• xx-large (extra extra grande)

Y algunos de tipo <length> como:

• px (pixeles)
• cm (centímetros)
• mm (milímetros)
• in (pulgadas)
• % (porcentajes)
• Entre otros

text-align

Cambia la alineación de texto:

<p style="text-align:center;">Texto</p>

Los valores más comunes son:

• left (izquierda) es el valor por defecto
• right (derecha)
• center (centrado)
• justify (justificado)

border

Cambia el borde del elemento:

<p style="border:1px solid black;">Texto</p>

Está dividido en tres partes:

• border-width: indica el ancho del borde
• border-style: indica el estilo del borde
• border-color: indica el color del borde

En el ejemplo anterior, el borde tiene un ancho de 1px, un estilo solid (sólido) y un color con valor black (negro).

Para el ancho podemos usar valores de medidas³⁴.

Para el estilo del borde podemos usar:

• solid (sólido)
• dashed (discontinuo)
• dotted (punteado)
• double (doble)
• groove (acanalado)
• ridge (cuadrado)
• inset (insertado)
• outset (insertado)

Y para el color podemos usar valores de color¹.

margin

Cambia el espacio entre el elemento actual y los elementos consecuentes:

<p style="margin:12px;border:1px solid black;">Texto</p>
<p>Texto</p>

Podemos usar valores de medidas³.

padding

Cambia el espacio entre el contenido del elemento y el borde:

<p style="padding:12px;border:1px solid black;">Texto</p>
<p>Texto</p>

Podemos usar valores de medidas³⁴.

width

Cambia el ancho del elemento:

<p style="width:50%;border:1px solid black;">Texto</p>
<p style="border:1px solid black">Texto</p>

Podemos usar valores de medidas³⁴.

height

Cambia la altura del elemento:

<p style="height:40px;border:1px solid black;">Texto</p>
<p style="border:1px solid black">Texto</p>

Podemos usar valores de medidas³⁴.

Con estas reglas podemos comenzar a crear algunos cambios interesantes en nuestros proyectos.

Comentarios

Rutas relacionadas

Web Dev (Frontend)

Artículos relacionados