¿Qué es CSS?

Como mencionamos antes, CSS es un lenguaje para especificar cómo se presentan los documentos a los usuarios: cómo se les da estilo, cómo se presentan, etc.

Un documento suele ser un archivo de texto estructurado utilizando un lenguaje de marcado; HTML es el lenguaje de marcado más común, pero también puedes encontrar otros lenguajes de marcado como SVG o XML.

Presentar un documento a un usuario significa convertirlo en un formato que su audiencia pueda utilizar. Los navegadores , como Firefox, Chrome o Edge, están diseñados para presentar documentos visualmente, por ejemplo, en la pantalla de una computadora, un proyector o una impresora.

CSS se puede utilizar para aplicar estilos de texto a documentos muy básicos, por ejemplo, para cambiar el color y el tamaño de los títulos y enlaces. Se puede utilizar para crear un diseño; por ejemplo, convertir una sola columna de texto en un diseño con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede utilizar para efectos como animación . Eche un vistazo a los enlaces de este párrafo para ver ejemplos específicos.

CSS es un lenguaje basado en reglas: tú defines las reglas especificando grupos de estilos que deben aplicarse a elementos o grupos de elementos particulares en tu página web.

Por ejemplo, puedes decidir que el encabezado principal de tu página se muestre como texto rojo grande. El siguiente código muestra una regla CSS muy simple que lograría el estilo descrito anteriormente:

h1 {
  color: red;
  font-size: 5em;
}

• En el ejemplo anterior, la regla CSS se abre con un selector . Esto selecciona el elemento HTML al que le vamos a aplicar estilo. En este caso, estamos diseñando encabezados de nivel uno ( h1 ).
• Luego tenemos un conjunto de llaves { }.
• Dentro de las llaves habrá una o más declaraciones, que toman la forma de pares de propiedad y valor. Especificamos la propiedad ( color en el ejemplo anterior) antes de los dos puntos y especificamos el valor de la propiedad después de los dos puntos ( red en este ejemplo).
• Este ejemplo contiene dos declaraciones, una para color y otra para font-size. Cada par especifica una propiedad de los elementos que estamos seleccionando ( h1 en este caso), luego un valor que nos gustaría darle a la propiedad.

Las propiedades CSS tienen diferentes valores permitidos, según la propiedad que se especifique. En nuestro ejemplo, tenemos la propiedad color que puede tomar varios valores de color . También tenemos la font-size propiedad. Esta propiedad puede tomar como valor unidades de varios tamaños .

Una hoja de estilos CSS contendrá muchas de estas reglas, escritas una tras otra.

h1 {
  color: red;
  font-size: 5em;
}

p {
  color: black;
}

Descubrirás que aprendes rápidamente algunos valores, mientras que otros necesitarás buscarlos. Las páginas de propiedades individuales en MDN te brindan una manera rápida de buscar propiedades y sus valores cuando lo olvidas o cuando quieres saber qué más puedes usar como valor.

Como hay tantas cosas a las que puedes diseñar usando CSS, el lenguaje se divide en módulos. Verás referencias a estos módulos a medida que explores MDN. Muchas de las páginas de documentación están organizadas en torno a un módulo en particular. Por ejemplo, podrías echar un vistazo a la referencia de MDN al módulo Fondos y bordes para saber cuál es su propósito y las propiedades y características que contiene. En ese módulo, también encontrarás un enlace a Especificaciones que define la tecnología (consulta también la sección siguiente).

En esta etapa, no necesitas preocuparte demasiado por cómo está estructurado CSS; sin embargo, puede facilitar la búsqueda de información si, por ejemplo, sabes que es probable que una determinada propiedad se encuentre entre otras cosas similares y, por lo tanto, probablemente esté en la misma especificación.

Para ver un ejemplo específico, volvamos al módulo Fondos y Bordes; podría pensar que tiene sentido lógico que las propiedades background-color y border-color se definan en este módulo. Y estarías en lo cierto.

Todas las tecnologías de estándares web (HTML, CSS, JavaScript, etc.) se definen en documentos gigantes llamados especificaciones (o "specs"), que son publicados por organizaciones de estándares (como W3C, WHATWG, ECMA o Khronos ) y definen con precisión cómo se supone que deben comportarse esas tecnologías.

CSS no es diferente: lo desarrolla un grupo dentro del W3C llamado CSS Working Group . Este grupo está formado por representantes de proveedores de navegadores y otras empresas interesadas en CSS. También existen otras personas, conocidas como expertos invitados, que actúan como voces independientes; no están vinculados a una organización miembro.

El Grupo de Trabajo de CSS desarrolla o especifica nuevas funciones de CSS, a veces porque un navegador en particular está interesado en tener alguna capacidad, otras veces porque los diseñadores y desarrolladores web solicitan una función y, a veces, porque el propio Grupo de Trabajo ha identificado un requisito. CSS se desarrolla constantemente y aparecen nuevas funciones disponibles. Sin embargo, una cosa clave acerca de CSS es que todos trabajan muy duro para nunca cambiar las cosas de una manera que rompa los sitios web antiguos. Un sitio web creado en 2000, que utiliza el CSS limitado disponible entonces, ¡aún debería poder utilizarse en un navegador hoy en día!

Como recién llegado a CSS, es probable que las especificaciones de CSS te resulten abrumadoras: están destinadas a que los ingenieros las utilicen para implementar el soporte para las funciones en los agentes de usuario, no a que los desarrolladores web las lean para comprender CSS. Muchos desarrolladores experimentados preferirían consultar la documentación de MDN u otros tutoriales. Sin embargo, vale la pena saber que estas especificaciones existen y comprender la relación entre el CSS que estás utilizando, la compatibilidad del navegador (ver más abajo) y las especificaciones.

Una vez especificada una función CSS, solo nos será útil a la hora de desarrollar páginas web si uno o más navegadores han implementado la función. Esto significa que el código se ha escrito para convertir la instrucción de nuestro archivo CSS en algo que pueda mostrarse en la pantalla. Veremos más este proceso en la lección Cómo funciona CSS . Es inusual que todos los navegadores implementen una función al mismo tiempo, por lo que generalmente hay un espacio en el que se puede usar alguna parte de CSS en algunos navegadores y no en otros. Por este motivo, resulta útil poder comprobar el estado de la implementación.

El estado de compatibilidad del navegador se muestra en cada página de propiedades CSS de MDN en una tabla denominada "Compatibilidad del navegador". Consulta la información de esa tabla para comprobar si la propiedad se puede utilizar en tu sitio web. Para ver un ejemplo, consulta la tabla de compatibilidad del navegador para la font-familypropiedad CSS.

Según tus requisitos, puedes utilizar la tabla de compatibilidad del navegador para verificar cómo se admite esta propiedad en varios navegadores, o verificar si tu navegador específico y la versión que tienes admiten la propiedad, o si hay alguna advertencia que debas tener en cuenta para el navegador y la versión que estás utilizando.

https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS