The Anatomy of a CSS Rule

En el capítulo anterior usamos el clásico ejemplo "Hola, mundo!" para mostrar lo fácil que es darle estilo a un elemento HTML con CSS. Pero, ¿Por qué lucía de esa manera? En este capítulo, nos enfocaremos en la anatomía y sintaxis de CSS, para obtener un entendimiento profundo de como trabaja. Echemos un vistazo al ejemplo anteriormente mencionado otra vez, donde tenemos una regla CSS que se dirige a los elementos H1:

h1 {
	color: DeepSkyBlue;
}

Lo que tenemos aquí es un selector con una propiedad y un valor - estos son los conceptos pricipales de CSS y deberías intentar de recordar sus nombres a medida avances en el tutorial. En este ejemplo, h1 es el nombre del selector, color es la propiedad y DeepSkyBlue es el valor

Entre estos tres conceptos, verás una variedad de caracteres especiales: Estan las llaves al rededor de la propiedad y el valor, Estan los dos puntos separando la propiedad de su valor y esta el punto y coma después del valor. Cada uno de ellos hace que el navegador pueda interpretar y entender tu código CSS fácilmente: Las llaves permite agrupar varias propiedades en la misma regla (selector), los dos puntos le dice al interprete donde termina la propiedad y empieza el valor, y el punto y coma le dice al interprete dónde termina el valor.

Esto quizá luzca un poco complejo para un simple selector como el que tenemos arriba, pero en cuanto usemos nombres de selectores más complejos con más propiedades y valores más complejos, tendrá más sentido. Déjame ilustrártelo con un ejemplo más complejo:

h1, h2, h3 {
	color: DeepSkyBlue;
	background-color: #000;
	margin: 10px 5px;
}

h2 {
	color: GreenYellow;
}

Ahora tenemos varios selectores, el primero va dirigido a varios elementos, igualmente tiene varias propiedades con sus respectivos valores - ahora probablemente puedas ver por qué necesitamos la sintaxis de las reglas CSS para permitir el análisis correcto de tus instrucciones.

Formateado y espaciado en CSS

Quizá te preguntes por qué le doy formato al selector de la manera en que lo hago: La llave de apertura está en la misma linea del nombre del selector, pero la de cierre está en una linea ella sola, las propiedades han sido identadas y hay un espacio después de los dos puntos separando propiedad y valor, pero no antes de ellos. ¿Por qué? Porque así es como me gusta, pero la verdad es que al interprete de CSS no le importan los espacios en blanco.

Algunas personas prefieren tener la llave de apertura en una línea ella sola y tener espacio antes de los dos puntos:

h1
{
	color : DeepSkyBlue;
}

Y esta manera funciona de la misma manera. De hecho, muchos softwares han sido escritos para compactrar/minificar CSS para tomar la menor cantidad de espacio posible, así:

h1{color : DeepSkyBlue;}

Eso también funcionará bien, pero para reglas más complejas, lo hará más dificil de leer y editar. Sin embargo, el interprete lo entenderá igual que el primer ejemplo, gracias a los caracteres especiales usados como separadores, como ya hablamos.

En resumen

En este capítulo, aprendimos que los ingredientes básicos de CSS son los selectores, propiedades y valores. Un documento CSS puede contener multiples selectores y un selector puede tener múltiples propiedades que cada uno puede tener un valor que consiste en uno o más elementos. También aprendimos que las llaves, dos puntos y punto y coma separa cada uno de los tres ingredientes del otro, y que los espacios en blanco y formateo depende de ti - al interprete generalmente no le importa.

Miramos algunos selectores básicos con algunas propiedades básicas por el momento, pero los selectores son un tema más profundo y hay muchas más propiedades para trabajar. Por supuesto que hablaremos de ambos en mayor detalle adelante en el tutorial.