En el artículo anterior aprendimos qué era el lenguaje HTML, y que servía para mostrar contenido en una página web. Pues con el lenguaje CSS es con el que daremos estilo a ese contenido.

Sus siglas significas Cascading Style Sheets (Hojas de estilo en cascada) y cómo dije, sirve para indicarle al navegador cómo debe mostrar el contenido que escribimos en HTML.

Para crear un archivo de CSS simplemente creamos un archivo con la extensión '.css' en el mismo directorio donde tenemos nuestro HTML.

See the Pen Basic CSS sctructure by Iván Barcia (@barcia) on CodePen.

En este ejemplo podemos ver el HTML casi idéntico al del artículo anterior, con el añadido de que dentro del head, le decimos al documento HTML que cargue también nuestro archivo '.css'.

Si revisas el código CSS seguramente puedes entender su sintaxtis sin casi explicación. Aún así, la revisamos a continuación:

h1 {
  color: brown;
}
  • h1: Es el selector. Es decir, en qué elemento queremos aplicar los estilos indicados dentro de los corchetes. Podemos usar directamente una etiqueta HTML, un clase (en el ejemplo usamos .parrafoError, después de añadirla como clase a algunos párrafos), u otros que veremos más adelante.
  • color: Es la propiedad que queremos modificar. Hay muchísimas -también terminarás sabiendo la mayoría de memoria-
  • brown: Es el valor de la propiedad. Cada propiedad tiene determinados valores permitidos.

Como puedes ver, la sintaxis es muy sencilla al principio, por lo que puedes modificar y dar estilos a tus documentos HTML sin problemas. Iremos viendo todo lo relativo a CSS en futuras entradas. Posiblemente sea la temática que más tratemos en este blog, pues es el lenguaje que mejor domino y que más me gusta.  Como digo, es muy sencillo al principio, con una sintaxis muy simple, pero que se vuelve complicadísimo cuando tenemos miles de líneas de código y cuando tenemos que hacer proyectos mantenibles, escalables, etc. Es el lenguaje que nos permite hacer diseños espectaculares en nuestros sitios web, el que permite plasmar toda la creatividad del diseñador en una página websólo escribiendo lineas de código. El CSS es pura magia ❤.

Os recomiendo visitar la Mozilla Developer Network donde puedes ver las propiedades que existen y los valores que aceptan cada una.

¡No dudéis en contactar conmigo para hablar de CSS!

Un saludo. 😉