Para dar formato y estilo a un documento HTML se utiliza el lenguaje de hojas de estilo CSS. Con él se definen atributos como el diseño, los colores y las formas de los diferentes elementos HTML. El objetivo principal del desarrollo de CSS es separar el contenido del diseño de un documento, lo que aumenta la accesibilidad, proporciona mayor flexibilidad y reduce la complejidad del código.
Sintaxis y estructura del código CSS
CSS tiene una sintaxis relativamente sencilla. Primero especifica un selector, que elige un elemento concreto de la página, y después, entre corchetes, especifica la declaración: las propiedades con sus valores, separadas por dos puntos. Las declaraciones en sí están separadas por un punto y coma (;).
Un selector en CSS es una estructura que permite seleccionar elementos individuales o similares. Por ejemplo, podemos crear una regla que permita mostrar el texto rojo de todos los elementos párrafo <p> y además que queden alineados a la derecha. En el código, se escriben una serie de órdenes y el cliente (navegador) las interpreta y aplica a los documentos HTML.
Buenas prácticas en la declaración
A medida que escribimos código CSS, este se va haciendo más grande y más difícil de controlar. Para mantener un código limpio, los desarrolladores consideramos obligatorias las siguientes prácticas:
- Escribe una regla por línea: Será mucho más fácil de leer y modificar.
- Usa la indentación: Tras escribir el carácter { al empezar un bloque de reglas, las propiedades se separan hacia la derecha.
- Usa punto y coma: Se aconseja escribirlo al final de cada declaración para mantener coherencia y evitar errores al modificar el código.
Tipos de selectores y jerarquía
Para seleccionar elementos con una clase específica, se precede de un punto (.). El parámetro class sirve para crear un conjunto de etiquetas que forman parte del mismo grupo. Por otro lado, podemos diferenciar un único elemento entre todos los demás mediante el atributo id (identificador). Además, el signo * se emplea para definir a todo el conjunto de etiquetas de una página web.
Lea también: Entendiendo el componente inflacionario según los lineamientos de la NIF B-10
Prioridades en CSS
La jerarquía de prioridades determina qué reglas se aplican cuando existen conflictos. Su orden de relevancia es:
- Propiedades con !important.
- Estilos inline (definidos en el atributo style).
- Estilos en la etiqueta style del documento.
- Estilos adjuntos mediante un archivo CSS externo con <link>.
Métodos de inclusión de CSS en HTML
Cuando quieras incluir CSS en HTML, puedes hacerlo mediante hojas de estilo internas o externas. El método más habitual y limpio en el desarrollo de páginas web es el uso de hojas de estilo externas, ya que permite una separación clara entre el contenido y el diseño.
| Método | Descripción |
|---|---|
| Inline | Definido directamente en el atributo style. |
| Interno | Dentro de la etiqueta <style> en el head. |
| Externo | Archivo .css vinculado mediante <link>. |
Dado que una página web suele estar compuesta por varias secciones, resulta más práctico guardar las reglas de estilo en un archivo independiente. El archivo externo simplemente se vincula con el documento HTML utilizando la etiqueta link para incluirla.
Lea también: pasos para declarar componentes correctamente
Lea también: Guía sobre el reporte de componente inflacionario en CONTPAQi®
tags: #componente #declaracion #en #css