Aprendamos CSS

Cuando creamos código HTML, el navegador se encarga de darle una apariencia por defecto, la cual no es muy llamativa.

Para cambiar esto, el lenguaje CSS nos ayuda a darle estilo a los diferentes elementos que componen nuestro sitio web.

CSS viene del inglés Cascading Style Sheets u Hojas de Estilo en Cascada.

Una de las formas de agregar estilos a nuestros elementos HTML es desde la etiqueta de apertura, utilizando el atributo style. Dentro podemos escribir una o más reglas de CSS.

<p style="color:pink;">Contenido</p>

Anatomía de reglas CSS

Las reglas están compuestas por una propiedad y un valor, entre ellos deben existir el símbolo dos puntos (:), y al final debe ir el símbolo punto y coma (;).

propiedad: valor;

En el ejemplo inicial tenemos un estilo con una sola propiedad:

• color, que tiene el valor pink.

Aunque en realidad podemos usar varias propiedades dentro style, por ejemplo:

<p style="color:pink;font-size:32px;">Contenido</p>

Esta vez agregamos dos propiedades, cada una con su propio valor.

Sobre los valores

Los valores que podemos usar dependen de cada propiedad¹.

Por ejemplo:color, acepta diferentes formatos de color:

• Colores nombrados (como pink)
• Colores hexadecimales (como #ffc0cb)
• Colores RGB (como rgb(255, 192, 203))
• Entre otros

color: pink;
color: #ffc0cb;
color: rgb(255, 192, 203);

Otro ejemplo sería font-size, que acepta diferentes formatos de tamaños o medidas:

• Tamaños en pixels (como 32px)
• Tamaños en medidas relativas (como 2rem)
• Tamaños en medidas de fuente (como large)
• Entre otros

font-size: 32px;
font-size: 2rem;
font-size: large;

Existe una gran cantidad de propiedades². Dependiendo del sitio donde consultes el número puede variar pero son cientos de ellas.

Comentarios

Rutas relacionadas

Web Dev (Frontend)