MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

A continuación, profundizaremos todavía más en la sintaxis, viendo cómo las propiedades y sus valores forman bloques declarativos, y cómo los bloques declarativos y los selectores forman reglas CSS completas. Terminaremos señalando otras características de la sintaxis CSS como los comentarios y los espacios en blanco.

Prerrequisitos: Conocimientos básicos de ordenadores, SW básico instalado, conocimiento básico de manejo de ficheros, y HTML básico (ver Introducción a HTML).
Objetivo: Aprender qué es CSS y su funcionamiento básico.

Nota: CSS es un lenguaje declarativo, lo que hace que su sintaxis sea bastante fácil de usar y de comprender. Además, dispone de un potente sistema de recuperación de errores que permite cometer fallos sin que esto afecte a todo el código — las declaraciones que no son comprendidas normalmente son ignoradas. La parte negativa es que puede ser más difícil averiguar de dónde proceden los errores. Si seguimos leyendo entenderemos porqué.

Un poco de vocabulario

En el nivel más básico, CSS se compone de dos bloques:

  • Propiedades: Son identificadores que indican a las personas qué característica de estilo (ancho, color de fondo, fuente) queremos cambiar.
  • Valores: A cada propiedad se le da un valor, que indica cómo queremos cambiar esta característica (por ejemplo qué fuente, qué ancho o qué color usar)

El par formado por una propiedad y un valor se denomina declaración CSS. Las declaraciones CSS forman bloques declarativos. Los bloques de declaraciones CSS emparejados con selectores forman Conjuntos de Reglas CSS (o simplemente Reglas CSS).

Antes de profundizar en la más en el tema, veamos un ejemplo concreto (vimos algo parecido en nuestro artículo anterior):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

Y el archivo CSS:

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

Combinando estos dos se producirá el siguiente resultado:

Veamos la sintaxis en más detalle.

Declaraciones CSS

La principal función del lenguaje CSS es asignar valores a las propiedades CSS. El motor CSS calcula qué declaraciones debe aplicar a cada elemento de una página para mostrarla y darle estilo de manera adecuada. Lo importante es recordar que tanto las propiedades como los valores son modificables en CSS. Los pares propiedad y valor, se separan por dos puntos (:).

Hay más de 300 propiedades diferentes en CSS y casi infinitos valores diferentes. Cada propiedad tiene una lista especifica de valores que puede adoptar.

Importante: Si definimos una propiedad desconocida o un valor no válido para una propiedad, la declaración será considerada inválida y será ignorada por el motor CSS del navegador.

Importante: En CSS (y otros estándares web), el deletreo USA se considera estándar cuando existe incerteza. Por ejemplo, color (como en el código anterior) se escribirá color (inglés US), colour (inglés británico) no funcionará.

Aprendizaje activo: Descubre las declaraciones

En nuestro anterior ejemplo, hay cinco declaraciones CSS separadas. ¿Puedes identificar la declaración incorrecta y explicar porqué?

Bloques declarativos en CSS

Las declaraciones están agrupadas por bloques, en los que el conjunto de declaraciones se encuentra enumerado entre corchetes, uno inicial ({) y otro final (}).

Cada declaración contenida en un bloque declarativo deber estar separada por un punto y coma (;), sino el código no funcionará (o producirá resultados inesperados). La última declaración de un bloque no necesita llevar (;), aunque se considera buena práctica añadirlo, para prevenir olvidos cuando se añaden más declaraciones al bloque.

Nota: Los bloques pueden estar anidados; En estos casos los corchetes de apertura y cierre deber definir el anidamiento de forma lógica deseada de las etiquetas de los elementos HTML. El ejemplo más usual son las reglas-@, que son bloques que comienzan por el identificador @ como @media, @font-face, etc. (ver las declaraciones CSS más abajo).

Nota: Un bloque declarativo puede estar vacío — es perfectamente válido.

Aprendizaje activo: ¿Donde están los bloques declarativos?

En el anterior ejemplo, ¿Has identificado los tres bloques declarativos CSS?

Selectores y reglas CSS

Pero, en este puzle falta una pieza — y es aprender a identificar los elementos a los que afectará nuestro bloque declarativo. Esto lo conseguiremos añadiendo a cada bloque declarativo un prefijo a modo de selector — un módulo que identificará a ciertos elementos de nuestra página. Las declaraciones asociadas se aplicarán solo a estos elementos. El selector más el bloque declarativo se llama regla o regla-conjunto.

Los selectores (filtros) pueden llegar a ser bastante complicados — se puede establecer una regla que afecte a múltiples elementos separándolos en el selector por comas, y estos pueden ser identificados en conjunto, por ejemplo: Seleccionar los elementos de la clase "blah", pero solo los que estén dentro de un <artículo>, y solo cuando pase por encima el puntero del ratón. Tranquilidad — esto lo iremos viendo claro a medida que ganemos experiencia con CSS, veremos los selectores con más detalle en el siguiente artículo dedicado a los Selectores.

Un elemento puede estar afectado por varios selectores, por tanto, una propiedad puede ser asignada en distintas ocasiones por distintas reglas. CSS definirá cual tiene preferencia sobre las otras para ser aplicada: esto se conoce como algoritmo en cascada, y veremos cómo funciona en Cascada y herencia.

Importante: Si en un grupo de selectores hay uno inválido, como cuando se usa un pseudo-elemento o una pseudo-clase desconocidos, el grupo entero de selectores será considerado inválido y esa regla se considerará inválida y será ignorada.

Aprendizaje activo: Revisa los grupos de selectores

En el ejemplo, ¿Has sido capaz de relacionar la regla que afecta a dos elementos diferentes?

Declaraciones CSS

Las Reglas CSS son los bloques principales de un documento de estilos — el bloque más usual que veremos en un CSS. Pero nos podemos encontrar con otros tipos de bloques — Las reglas CSS son uno de los tipos de declaraciones CSS. Los otros son:

  • Reglas-@: Usadas en CSS para definir metadatos, información condicional u otra información descriptiva. Comienzan con el símbolo (@), seguido del identificador del tipo de regla, luego un bloque sintáctico correspondiente y terminará con un (;). Cada tipo de Regla-@ definido por un identificador dispondrá de su propia sintaxis y semántica internas. Ejemplos: Ejemplo concreto de sintaxis:
    @import 'custom.css';
    Esta Regla-@ importará un archivo CSS externo hasta nuestro CSS actual.
  • Declaraciones anidadas son un subtipo de Reglas-@, su sintaxis es un bloque de reglas CSS anidadas que solo afectará al documento bajo ciertas condiciones:
    • El contenido de la regla-@ @media se aplicará solo si el dispositivo que ejecuta el navegador cumple la condición expresada.
    • El contenido de la regla-@ @supports se aplicará solo si el navegador soporta la característica mencionada.
    • El contenido de la regla-@ @document se aplicará solo si la página actual cumple ciertas condiciones.
    Ejemplo de sintaxis:
    @media (min-width: 801px) {
      body {
        margin: 0 auto;
        width: 800px;
      }
    }
    
    Esta regla anidada solo se aplicará cuando el ancho de la página sea superior a 800 pixels.

Veremos más tipos de reglas-@ y declaraciones anidadas a lo largo de este curso.

Importante: Cualquier declaración aparte de las reglas, reglas-@ o declaraciones anidadas se considerará inválida, y por tanto será ignorada.

Más allá de la sintaxis: Hacer CSS legible

Como podemos comprobar, la sintaxis CSS no es difícil de escribir: podemos escribir reglas y si cometemos errores simplemente serán ignoradas. Pero, aunque funcionen, hay ciertas buenas prácticas que debemos conocer para hacer el código CSS más fácil de usar y de mantener.

Espacio en blanco

El espacio en blanco se refiere a la barra espaciadora, tabulador o cambio de línea. Podemos añadir espacio en blanco para hacer más 'legibles' nuestros documentos de estilo.

Al igual que en HTML, el navegador suele ignorar la mayoría del espacio en blanco en nuestro CSS; mucho espacio en blanco está ahí solo como ayuda a la lectura. En el siguiente ejemplo vemos que cada declaración (y de inicio/fin de regla) está en una línea diferente — esta es sin duda una buena forma de escribir CSS, pues lo hace fácil de entender y de mantener:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

Podríamos haber escrito el mismo código CSS quitando la mayoría del espacio en blanco — esto no afectaría al funcionamiento, pero estaremos de acuerdo en que este resulta más complicado de leer:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

La apariencia del código es una preferencia personal, aunque cuando se trabaja en equipo, normalmente cada equipo tiene su propia guía de estilo que indica las convenciones a seguir.

El espacio en blanco del que nos debemos preocupar en CSS es el que rodea a las propiedades y sus valores. Veamos el siguiente ejemplo de codificación válida:

margin: 0 auto;
padding-left: 10px;

Sin embargo la siguiente es inválida:

margin: 0auto;
padding- left: 10px;

0auto no es un valor correcto para la propiedad de margen (0 y auto son dos valores diferentes), además el navegador no reconoce padding- como una propiedad válida. Debemos asegurarnos de separar unos valores de otros por al menos un espacio, pero debemos mantener juntos los nombres/valores de las propiedades.

Comentarios

Al igual que en HTML, se aconseja incluir comentarios en el CSS para ayudar a entender el funcionamiento del código al tiempo de haberlo programado, además de ayudar a otros a entenderlo. Los comentarios son prácticos cuando se está probando ciertas partes del código, por ejemplo para averiguar que parte del código está causando el error encontrado.

Los comentarios en CSS comienzan con /* y acaban con */.

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size for better readability */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

Abreviadas

Algunas propiedades como: font, background, padding, border, y margin se llaman propiedades abreviadas — permiten establecer varios valores a la vez en una sola línea, ahorrando tiempo y haciendo el código más limpio.

Por ejemplo, esta línea:

/* in shorthand like padding and margin, the values are applied
   in the order top, right, bottom, left (the same order as an analog clock). There are also other 
   shorthand types, for example two values, which set for example
   the padding for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

Hace lo mismo que todas estas:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

Mientras que esta línea:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

Hace lo mismo que todas estas:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

No vamos a mostrar esto ahora en profundidad — veremos muchos ejemplos a lo largo del curso, además disponemos de una lista de nombres de abreviaciones en referencia CSS si deseamos consultarlas.

¿Qué es lo siguiente?

En este punto deberíamos entender los fundamentos de la sintaxis de CSS necesarios para escribir un documento de estilos que sea fácil de mantener a lo largo del tiempo. En el siguiente artículo profundizaremos en los selectores CSS, mostrando los diferentes disponibles y su funcionamiento.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: javierpolit
 Última actualización por: javierpolit,