¿Qué es el formato de archivo CSS?
Los archivos .css se utilizan para formatear el contenido y describir la presentación de un sitio web.
Los archivos con la extensión .css contienen reglas que definen cómo deben mostrarse los elementos .html en una página determinada. Estas reglas cubren áreas como:
- ajustes de fuente (tipo de letra, tamaño, color y estilo),
- espaciado entre líneas y sangría,
- reglas de diseño para elementos incrustados y posicionados,
- referencias a recursos, animaciones y puntos de interrupción adaptativos mediante consultas
@media.
CSS - Cascading Style Sheets - es el lenguaje de hojas de estilo utilizado para crear archivos .css. Fue diseñado para permitir la separación del contenido del sitio web de su presentación, lo que facilita mucho la modificación del aspecto de un sitio sin afectar al contenido. Los archivos .css también permiten que las páginas se rendericen de forma diferente según el dispositivo utilizado para acceder a ellas -ya sea un dispositivo móvil, un PC de escritorio o una tableta- para una experiencia de usuario mucho mejor. La parte de «cascada» significa que múltiples reglas pueden aplicarse al mismo elemento simultáneamente, resolviéndose mediante la especificidad y el orden de origen cuál de ellas prevalece.
CSS no es un formato de versión única: desde CSS3 se ha desarrollado como módulos independientes (Selectores, Flexbox, Grid, Color, Animaciones y otros), cada uno avanzando a su propio ritmo. Los preprocesadores como .scss y .less extienden la sintaxis de autoría de CSS, pero siempre se compilan en archivos .css planos que los navegadores consumen directamente.
Los archivos .css almacenan datos en formato de texto plano y, por lo tanto, pueden editarse con cualquier editor de texto. Se recomienda, sin embargo, que los archivos .css se editen utilizando herramientas dedicadas para evitar posibles errores; dichas herramientas resaltan automáticamente las palabras clave, corrigen errores de sintaxis y ofrecen funciones de autocompletado. Un archivo .css no lleva firma binaria; opcionalmente puede comenzar con una declaración @charset, una regla @import o un /* comentario */.
Seguridad y protección
RIESGO: LOWCSS es texto plano y no ejecuta código, por lo que abrir un archivo .css es de bajo riesgo. Casos excepcionales: históricamente CSS podía cargar recursos remotos (fuentes/imágenes) y los navegadores antiguos tenían peculiaridades de CSS como expression() o behavior (hace tiempo obsoletas); el CSS moderno no puede ejecutar scripts. La verdadera precaución es descargar software de «editor/visor de CSS gratuito» de portales llenos de anuncios que incluyen programas potencialmente no deseados (PUP); use los editores de renombre listados anteriormente.
Detalles del formato
en pocas palabrasProgramas que abren archivos CSS
Windows4 apps
Visual Studio Code
Gratis Abra el .css para editarlo con resaltado de sintaxis, IntelliSense y extensiones de vista previa en vivo. 
Web browser (Chrome/Firefox/Edge)
Gratis Los navegadores aplican el CSS automáticamente al cargar una página; use DevTools (F12) para inspeccionar o editar estilos en vivo. 
macOS2 apps
TextEdit
Integrado Ábralo en modo de texto plano para leer o editar; desactive primero el texto enriquecido.
Visual Studio Code
Gratis Abra el .css para editarlo con resaltado de sintaxis, IntelliSense y extensiones de vista previa en vivo. 
Linux1 app
VS Code / gedit / GNU Emacs
Gratis Abra el .css en cualquier editor de texto o código para verlo o editarlo.
CodePen / JSFiddle
Gratis Pegue el CSS en un entorno de pruebas en línea para editarlo y previsualizarlo contra el HTML en vivo. Detalles técnicos
especificación profunda| Tipo MIME | text/css |
| Codificación de archivo | Texto plano, UTF-8 por defecto; el juego de caracteres puede declararse explícitamente con una regla `@charset` en la parte superior del archivo |
| Firma binaria | Ninguna - los archivos `.css` no tienen «magic bytes»; la identificación depende de la extensión del archivo o del tipo MIME |
| Tamaño de archivo típico | De 1 KB a 500 KB; los paquetes de frameworks de terceros minificados (Bootstrap, Tailwind) pueden alcanzar el extremo superior |
| Estructura principal | Conjuntos de reglas: un selector o lista de selectores seguidos de un bloque de declaración de pares `propiedad: valor` encerrados entre llaves |
| Reglas-at | `@media` (puntos de interrupción adaptativos), `@import`, `@font-face`, `@keyframes`, `@supports` y `@layer` controlan la carga condicional, fuentes personalizadas, animaciones y detección de características |
| Algoritmo de cascada | Las reglas en conflicto se resuelven por especificidad, origen de la cascada (autor / usuario / navegador) y orden de origen; los valores se propagan a los elementos hijos mediante herencia |
| Modelo de versiones | Modular desde CSS3; los módulos individuales como Selectores, Flexbox, Grid y Color avanzan de forma independiente a través de las etapas de Recomendación Candidata del W3C |
| Propiedades personalizadas | Variables nativas de CSS declaradas como `--nombre: valor` y consumidas mediante `var(--nombre)`, permitiendo tokens de diseño reutilizables sin un preprocesador |
| Interoperabilidad de preprocesadores | Los archivos `.scss`, `.sass` y `.less` se compilan a `.css` plano; PostCSS transforma el código fuente `.css` en el momento de la construcción; los navegadores consumen solo el `.css` final |
| Compresión de transferencia | Comúnmente servido con compresión gzip o Brotli sobre HTTP para ahorrar ancho de banda; el archivo es texto plano sin comprimir en el disco |
| Integridad de subrecursos | Se puede colocar un hash SHA-256/384/512 en el atributo `<link integrity="…">` de HTML para verificar el archivo obtenido; no se almacena ningún hash dentro del propio archivo `.css` |
| Prefijos de proveedor | Los prefijos `-webkit-`, `-moz-` y `-ms-` protegían históricamente las propiedades experimentales; la mayoría están obsoletos ya que las propiedades subyacentes se estandarizaron |
| Modelo de objetos del navegador | Analizado por el motor del navegador en el CSSOM (CSS Object Model), que se combina con el árbol DOM para calcular los estilos finales y pintar la página |
| Mantenedor del estándar | W3C CSS Working Group; las especificaciones se publican como documentos de módulos independientes, cada uno con sus propios borradores de editor y Recomendaciones Candidatas |
| Lanzado | CSS Level 1, December 1996 (W3C Recommendation) |
| Última versión | CSS is now modular (CSS3+); modules like Selectors, Flexbox, Grid, Color advance independently |
| Estándar abierto | Sí · libre de regalías |
| Especificación | www.w3.org |
Conversiones de CSS
Preguntas y respuestas de la comunidad
preguntado por usuariosAún no hay preguntas; sea el primero en preguntar sobre los archivos CSS.
