Sintaxis de CSS

Introducción

Entender la sintaxis de CSS es esencial para lograr un diseño coherente, y asegurarse de que la página se visualice correctamente en todos los dispositivos.

En este artículo, nos enfocaremos en explicar los elementos básicos de la sintaxis de CSS, las propiedades y valores, y cómo funciona la cascada y el anidamiento en CSS.

Esperamos que esta información te ayude a mejorar tu habilidad para escribir código CSS de manera efectiva y eficiente.

La guía definitiva de HTML5 y CSS3: (Spanish Edition)

Ver Ofertas en Amazon

CSS: Diseño web (Desarrollo web nº 2) (Spanish Edition)

Ver Ofertas en Amazon

La Guía de HTML5, CSS3 y JavaScript: 2ª Edición

Ver Ofertas en Amazon

¿Qué es la sintaxis de CSS?

La sintaxis de CSS es el conjunto de reglas que definen cómo escribir código en CSS. Estas reglas definen cómo se deben estructurar las reglas de estilo y cómo se deben combinar los selectores, propiedades y valores para producir un diseño coherente en una página web.

La sintaxis de CSS es bastante sencilla, y generalmente se escribe en archivos separados para evitar mezclar el código HTML con el CSS.

A continuación, te presentamos algunos ejemplos de la sintaxis de CSS:

Ejemplo 1: Cambiar el color del texto


/* Selector */
h1 {
  /* Propiedad */
  color: red;
  /* Valor */
}

Lenguaje del código: CSS (css)

En este ejemplo, el selector h1 apunta al elemento HTML <h1> en la página web. La propiedad color especifica que queremos cambiar el color del texto dentro de este elemento.

El valor red se utiliza para cambiar el color del texto a rojo.

Ejemplo 2: Cambiar el tamaño de la fuente


/* Selector */
p {
  /* Propiedad */
  font-size: 16px;
  /* Valor */
}

Lenguaje del código: CSS (css)

En este ejemplo, el selector p apunta a todos los elementos HTML <p> en la página web. La propiedad font-size especifica que queremos cambiar el tamaño de la fuente dentro de este elemento.

El valor 16px se utiliza para establecer el tamaño de la fuente a 16 píxeles.

Ejemplo 3: Cambiar el fondo


/* Selector */
body {
  /* Propiedad */
  background-color: #f2f2f2;
  /* Valor */
}

Lenguaje del código: CSS (css)

En este ejemplo, el selector body apunta al elemento HTML <body> en la página web. La propiedad background-color especifica que queremos cambiar el color de fondo del elemento.

El valor #f2f2f2 se utiliza para establecer el color de fondo a un gris claro.

Elementos básicos de la sintaxis de CSS

Para poder escribir CSS correctamente, es importante conocer los elementos básicos de su sintaxis.

A continuación, explicaremos los principales elementos de la sintaxis de CSS:

Selectores

Los selectores son la forma en que se apunta a los elementos HTML que se quieren estilizar. Los selectores pueden ser de diferentes tipos, como de etiqueta, de clase, de ID, entre otros.

Ejemplos de algunos selectores:

  • Selectores de etiqueta: Estos selectores apuntan a elementos HTML específicos. Por ejemplo, el selector de etiqueta p apuntaría a todos los elementos <p> en la página.

p {
  font-size: 16px;
  color: black;
}

Lenguaje del código: CSS (css)
  • Selectores de clase: Los selectores de clase apuntan a elementos HTML que tienen una clase específica. Por ejemplo, el selector .mi-clase apuntaría a todos los elementos que tienen la clase mi-clase.

.mi-clase {
  background-color: #f2f2f2;
  border: 1px solid black;
}


Lenguaje del código: CSS (css)
  • Selectores de ID: Los selectores de ID apuntan a elementos HTML que tienen un ID específico. Por ejemplo, el selector #mi-id apuntaría al elemento que tiene el ID mi-id.

#mi-id {
  color: red;
}

Lenguaje del código: CSS (css)

2. Propiedades

Las propiedades definen las características de los elementos HTML que se quieren estilizar. Cada propiedad tiene un valor que se le asigna para determinar cómo se verá el elemento.

Ejemplos de algunas propiedades:

  • Color: Define el color del texto o de fondo. Ejemplo: color: red; o background-color: #f2f2f2;

h1 {
  color: red;
  background-color: #f2f2f2;
}

Lenguaje del código: CSS (css)
  • Tamaño de fuente: Define el tamaño de la fuente. Ejemplo: font-size: 16px;

h2 {
  font-size: 16px;
}

Lenguaje del código: CSS (css)
  • Tamaño de borde: Define el tamaño del borde de un elemento. Ejemplo: border: 1px solid black;

div {
  border: 1px solid black;
}

Lenguaje del código: CSS (css)

3. Valores

Los valores son las opciones que se pueden asignar a una propiedad. Cada propiedad tiene un conjunto específico de valores que se pueden asignar. Por ejemplo, para la propiedad de color, los valores podrían ser rojo, azul, verde, etc.

Algunos ejemplos de valores:

  • Colores: Los colores se pueden definir utilizando palabras clave como red o blue, o utilizando códigos hexadecimales como #ff0000 o #0000ff.

h3 {
  color: #ff0000;
  background-color: yellow;
}

Lenguaje del código: CSS (css)
  • Tamaños: Los tamaños se pueden definir utilizando unidades como px (píxeles), em (relativo al tamaño de fuente), o rem (relativo al tamaño de fuente de la raíz).

p {
  font-size: 1.2em;
  padding: 0.5rem;
}

Lenguaje del código: CSS (css)
  • Estilos de borde: Los estilos de borde se pueden definir utilizando palabras clave como solid, dotted, dashed, etc.

Los selectores, propiedades y valores son los elementos básicos de la sintaxis de CSS. Con estos elementos, se pueden crear reglas de estilo que aplican diferentes estilos y diseños a los elementos HTML de una página web.

Anidamiento y cascada en la sintaxis de CSS

En CSS, el anidamiento y la cascada son dos conceptos importantes que pueden ayudar a hacer el código más legible y eficiente.

Veamos cada uno de ellos:

Anidamiento:

El anidamiento se refiere a la práctica de anidar selectores y reglas de estilo dentro de otros selectores y reglas de estilo. Esto permite que los estilos se apliquen de manera más específica a ciertos elementos.

Por ejemplo:


<code>.mi-clase {</code>
    color: blue; background-color: yellow;
    border: 1px solid black;

  p { 
      font-size: 16px; 
  }

}

Lenguaje del código: CSS (css)

En este ejemplo, los estilos para los elementos que tienen la clase mi-clase se definen en el primer bloque. El selector p dentro de ese bloque anida los estilos adicionales para los elementos <p> dentro de la clase mi-clase.

Cascada:

La cascada se refiere a la forma en que se aplican los estilos en CSS. Cuando hay varias reglas de estilo que aplican a un mismo elemento, la cascada determina cuál regla tendrá prioridad.

La cascada se basa en varios factores, incluyendo la especificidad del selector, el orden en que se definen las reglas de estilo, y si se utilizan valores importantes.

Por ejemplo:


h1 { 
    color: blue; 
} 

.mi-clase { 
    color: red !important; 
}

Lenguaje del código: CSS (css)

En este ejemplo, el selector h1 define el color del texto como “azul”. Sin embargo, la clase mi-clase redefine el color del texto como “rojo”, y utiliza el valor importante para asegurarse de que se aplique ese estilo, incluso si otras reglas lo intentan sobrescribir.

El anidamiento y la cascada son dos conceptos importantes en la sintaxis de CSS que pueden ayudar a hacer el código más legible y eficiente. El anidamiento permite aplicar estilos de manera más específica, mientras que la cascada determina cómo se aplican los estilos cuando hay varias reglas que aplican a un mismo elemento.

Ejemplos prácticos

Para ilustrar la sintaxis de CSS en acción, aquí te presentamos algunos ejemplos prácticos:

  • Cambiar el color de fondo:

body { 
    background-color: #f2f2f2; 
}

Lenguaje del código: CSS (css)
  • Cambiar el color del texto:

h1 { 
    color: red; 
}

Lenguaje del código: CSS (css)
  • Cambiar el tamaño de fuente:

p { 
    font-size: 16px; 
}

Lenguaje del código: CSS (css)
  • Agregar un borde:

div { 
    border: 1px solid black; 
}

Lenguaje del código: CSS (css)
  • Cambiar la alineación:

img { 
    display: block; 
    margin: 0 auto; 
}

Lenguaje del código: CSS (css)
  • Crear un efecto hover:

button { 
    background-color: blue; 
    color: white; 
    transition: background-color 0.5s ease; } 

button:hover { 
    background-color: red; 
}

Lenguaje del código: CSS (css)

En estos ejemplos, se utilizan diferentes selectores, propiedades y valores para aplicar diferentes estilos y efectos a los elementos HTML de una página web. Como se puede ver, la sintaxis de CSS puede ser muy flexible y permite una gran variedad de estilos y diseños.

Es importante recordar que la sintaxis de CSS es solo una parte de la creación de una página web bien diseñada. También es importante considerar la accesibilidad, la usabilidad y la experiencia de usuario al crear un sitio web.

Referencia

  1. Mozilla Developer Network (MDN) – CSS syntax,
  2. W3Schools – CSS syntax.