|

Sintaxis básica de una regla CSS

Como todo lenguaje, CSS tiene una sintaxis estricta para poder aplicar estilos en nuestras páginas web o aplicaciones.

A cada estilo se le define como regla CSS y todo el archivo .css simplemente son un conjunto de reglas de estilos.

Anatomía de una regla CSS

  1. El primer elemento de la regla es el selector, pseudo selector, clases o pseudo elementos. El selector le indica al navegador a qué elemento se le va a agregar el estilo.
  2. Las llaves de declaración { … }. Dentro, se ubica la declaración del estilo que está compuesta por una propiedad (estilo a aplicar) y el valor que va a tener esa propiedad. Cada declaración debe ser finalizada con un;”.

Consideraciones importantes para definir las reglas CSS

  • El selector debe estar escrito de forma correcta, es decir, debe estar escrito exactamente igual al elemento que se está referenciando desde el documento .html.
  • Las declaraciones CSS con errores de sintaxis no se aplican, así que no olvides: “:” después de cada propiedad, la “;” para finalizar cada modificación de una propiedad y no olvides las “{}” para encerrar la regla completa.

Próxima lectura

Lectura anterior

Publicaciones Similares

  • |

    Accesibilidad

    Semántica La semántica sirve para implementar herramientas para brindar la accesibilidad a las personas con ciertas limitaciones físicas y que estas puedan consumir nuestros productos digitales. En HTML, la semántica consiste en utilizar las etiquetas específicas según la utilidad que van a tener en nuestro documento HTML, por ejemplo, si el área del contenido es…

  • |

    Imágenes responsive con CSS

    Se recomienda utilizar la etiqueta <picture></picture> como contenedor de la imagen. Además se recomienda tener diferentes imágenes con diferentes dimensiones de tamaño para que se carguen en la medida que se observa la página web en dispositivos grandes. Es decir, si se abre en un dispositivo móvil, colocar una imagen con el tamaño y optimizada…

  • |

    Responsive design: Media Queries

    Responsive design es un patrón de diseño web estándar en la industria. A través de estas prácticas, lograremos que los productos que estamos desarrollando para la web puedan funcionar en cualquier plataforma. Es decir, pueda ser visualizado en cualquier dispositivo. El objetivo principal de responsive design es que nuestro producto pueda ser perfectamente visualizado desde…

  • |

    Patrones de maquetación Responsive: Column Drop

    Inicia todo en forma vertical y una vez comienza a crecer el viewport empieza a generar el drop de los contenedores. Es decir, comienza a posicionar los contenedores hacia arriba por orden de importancia que se haya definido. Platzi.com Ejemplo Documento HTML <!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Column…

  • |

    Modelo de caja

    Para CSS, todos los elementos de un documento HTML son cajas. Tú trabajas con cajas que son contenedoras de contenido. A estas cajas se le puede aplicar estilos y a esto se le denomina, modelo de cajas. Esta imagen es tomada de la opción inspeccionar del navegador web Google Chrome 1 – margin. Es un…