Hello, CSS world!

Luego de discutir qué es CSS y por qué deberías usarlo, probablemente estes ansioso de verlo en acción. Si estas leyendo esto en tu navegador, entonces ya puedes ver a CSS haciendo su magia -desde el color de encabezado y tamaño de las cajas de código, menús, listas y casi todo lo demas - si tiene un fondo, un borde, diferente tamaño de texto o color, entonces sea probablemente gracias a CSS. Sin embargo, eso quizá sea un poco complejo de comprender por el momento, así que vamos a llevarlo a un nivel mucho más básico.

A través de la historia de la programación, todo tutorial que se respete ha comenzado con un ejemplo "Hola, mundo!", con el único propósito de enseñar la manera más básica de mostrar el texto "Hola, mundo!" en la pantalla del usuario. Esto podría ser sencillamente logrado con HTML puro, sin uso alguno de CSS, así que vamos a ponerle un poco de sabor con un color diferente:

<style type="text/css">
h1 {
	color: DeepSkyBlue;
}
</style>

<h1>Hello, world!</h1>

Eso es todo - acabamos de escribir nuestra primera regla CSS, seleccionando la etiqueta H1 y usándola para cambiar el color del texto, usando la propiedad "color" y una propiedad llamada DeepSkyBlue como valor. Puedes verificar el resultado pegando el código en tu editor o simplemente haciendo click al botón de prueba arriba del ejemplo.

En resumen

Como probablemente notes, CSS es un lenguaje sencillo, pero no temas si no entiendes nuestro primer ejemplo. En el siguiente capítulo, discutiremos qué es lo que realmente significa el código CSS de arriba y por qué está escrito esa manera.