Guía CSS: Sintaxis

Comprender bien la sintaxis es uno de los aspectos más importantes para tener una base sólida del lenguaje. En CSS todo sigue la misma lógica, esto hace posible que la curva de aprendizaje sea más sencilla a la hora de comprender conceptos más complejos de ahora en adelante.


Serie completa, Guía CSS:

  1. Qué es y cómo funciona
  2. Sintaxis ←

Anatomía de una regla CSS

Una regla está compuesta por: selector, declaraciones, propiedades y valores.

Regla CSS:

body {
  font-family: Helvetica;
  color: black;
  background-color: white;
}

Ahora veamos por partes cuales son sus funciones.

Selector: indica que elemento HTML queremos modificar, en este ejemplo es la etiqueta body.

body

Declaraciones: dentro del bloque, {…}, se escriben las propiedades que darán estilo al elemento descrito en el selector.

{
  font-family: Helvetica;
  color: black;
  background-color: white;
}

Propiedad-valor: en el lado izquierdo la propiedad, en el derecho el valor.

font-family: Helvetica;

Una declaración esta compuesta por la propiedad (“font-family“) y el valor (“Helvetica“). Se separan con el símbolo :, y el carácter ; indica el cierre.

Las reglas CSS tienen una estructura muy sencilla con la que pronto te vas a familiarizar. Las propiedades y sus valores tienen nombres descriptivos, cuando contienen más de una palabra se separan con guiones.

Propiedades

Hay muchas, nadie se las sabe todas de memoria. Con la práctica retendrás la información necesaria de manera natural y sin apenas dificultad. Lo mejor que puedes hacer es leer guías y artículos como los que publico aquí y crear tus pequeños retos diseñando con CSS.

Como todo en la vida: la práctica continuada de cualquier materia es la mejor forma de aprender. Intenta diseñar un botón o crea cajas con diferentes estilos para presentar información relevante como anotaciones.

Si necesitas consultar las propiedades disponibles en CSS puedes utilizar la Guía de referencia en la web de Mozilla: MDN1.

Los shorthands

Los shorthands son variantes cortas de varias propiedades de la misma familia. Fíjate en la diferencia de los siguientes ejemplos, aunque todos consiguen el mismo diseño, la opción abreviada es la más recomendada.

Sin ningún shorthand:

button {
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
    
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;  
  
  border-top-color: blue;  
  border-right-color: blue;
  border-bottom-color: blue;
  border-left-color: blue;
}

Con algunos shorthands:

button {
  border-style: solid;
  border-width: 2px;
  border-color: blue;
}

Shorthand de una sola línea:

button { border: 2px solid blue; }

Con los shorthands empleamos menos código. En el ejemplo anterior la declaración ha pasado de 16 lineas a 1. Nos ayuda a tener un código más eficiente y ordenado.

Shorthands en valores iguales: también es posible acortar el número de valores cuando estos son idénticos.

button { 
  margin-top: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  margin-left: 15px;
}

El ejemplo de arriba se puede reducir en esto:

/* #1 */
button { margin: 15px 15px 15px 15px; }

/* #2 */
button { margin: 15px; }

En el ejemplo #1, el shorthand asigna los 4 valores en una sola línea. El orden de los valores sigue el sentido de las agujas del reloj: top, right, bottom, left (arriba, derecha, abajo, izquierda). Cuando todos los valores son iguales se pueden omitir los 3 siguientes, como en el ejemplo #2.

También es posible reducir el número de propiedades y valores cuando dos valores opuestos son iguales:

/* Shorthand */
button { margin: 24px 15px 24px 15px; }

/* Shorthand tipo "espejo" */
button { margin: 24px 15px; }
  • top y bottom = 24px
  • right y left = 15px
/* Shorthand */
button { margin: 24px 10px 30px 10px; }

/* Shorthand tipo "espejo" */
button { margin: 24px 10px 30px; }
  • top = 24px
  • right y left = 10px
  • bottom = 30px;

Reglas @: otro tipo de sintaxis

Las reglas son la principal característica del lenguaje CSS, pero existen otro tipo de reglas con una sintaxis diferente y que es importante que conozcas: las reglas del tipo “@“. Este tipo de reglas se utiliza para aplicar estilos en base a una condición, introducir metadatos y otro tipo de información. Vamos a ver las cuatro más relevantes:

@import2: se utiliza para importar otra hoja de estilo externa dentro de otra.

@import url('typografia.css');
@import url('formularios.css');

O su variante corta:

@import 'typografia.css';
@import 'formularios.css';

@media: esta es sin duda la clave fundamental para crear páginas web responsive —adaptación a dispositivos móviles.

@media (min-width: 768px) {
  body { font-size: 14px; }
}

@media (min-width: 1024px) {
  body { font-size: 16px; }
}

Nota: más información sobre @media aquí.

@font-face: esta regla permite importar fuentes que podemos usar en nuestros diseños.

@font-face {
  font-family: "Open Sans";
  src: url("/fuentes/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fuentes/OpenSans-Regular-webfont.woff") format("woff");
}

@supports: esta regla condicional nos permite aplicar estilos solo a los navegadores que tienen soporte para la propiedad que especifiquemos entre los paréntesis.

@supports (display: grid) {
  /* Aquí nuestro CSS */
}

Comentarios

Cualquier cosa que escribamos entre los símbolos /* */ no se mostrará en la web. Los empleamos para documentar nuestro código para futuras consultas. Podemos adornarlos de la forma más conveniente para destacarlo y hacerlo más visible.

/************************************************ 
 * Estilo de los enlaces de la web: "tomato" es
 * un color más suve que "red", ajustar al gusto.
 ***********************************************/
a { 
  color: tomato;
  text-decoaration: none;
}

Espacios, sangrado y estructuración del código

Mantener nuestro código limpio y ordenado es vital para poder localizar los estilos en un futuro. Podemos organizar el código con la ayuda de espacios, sangrados y comentarios. Te muestro un ejemplo:

/*************************************************
 * ÍNDICE:
 * 1. Tipografía
 * 2. Blog
 * 3. Página de inicio
 ************************************************/

/* 1. TIPOGRAFÍA
 ************************************************/
body {
  font-size: 16px;
  line-height: 1.5;
  color: black;
  background-color: white;
}

/* 2. BLOG
*************************************************/
blockquote { border-left: 2px solid gray; }
blockquote p { 
  text-align: center; 
  font-style: italic;
}
...

Conclusión

En esta ocasión has aprendido sobre las reglas de CSS,  reglas del tipo@“, propiedades, valores, shorthands, comentarios y la importancia de un código limpio y ordenado para mantener el código organizado.

Y en el siguiente artículo…

Veremos los diferentes tipos de selectores, gracias a ellos podemos aplicar estilos en base a unas condiciones y reglas concretas, lo que le otorga una gran flexibilidad. Espero verte de nuevo por aquí, ¡bye bye!

Notas al pie

  1. MDN: Mozila Developer Network es la web de referencia para Diseñadores y Desarrolladores web. Puedes encontrar información sobre HTML, CSS y JavaScript, esta bien documentada y suele
    traer ejemplos.
  2. El método para importar CSS con @import no se recomienda puesto que impide la descarga de archivos en paralelo.

Suscríbete al blog y consigue gratis el eBook "WordPress, guía práctica"

Víctor Rico

Soy Diseñador web especializado en WordPress. En el blog comparto mis conocimientos sobre técnicas y trucos de Diseño web y WordPress. Mi objetivo es ayudar a personas que están empezando en esto y que quieren aprender de forma autodidacta.

2 comentarios en “Guía CSS: Sintaxis

    • Hola, Josecar:

      Gracias por tus gratas palabras. El nuevo planteamiento de las publicaciones en serie para artículos largos me gusta más. Me permite escribir artículos en menos tiempo y organizar el contenido de una forma más amena y didáctica.

      Saludos.

Deja un comentario


Uso de los datos de los comentarios


Responsable del fichero: Víctor Rico Penalba. La finalidad: moderar los comentarios del blog. La legitimación: consentimiento del interesado. Destinatarios: tus datos se encuentran alojados en mi proveedor de hosting, Raiolanetworks, empresa de servidores Española ubicada en Lugo. Podrás ejercer tus derechos de acceso, rectificación, limitación o suprimir tus datos enviando un email a o ante la Autoridad de Control. Encontrarás más información en la Política de Privacidad.


Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.