CSS (Cascading Style Sheets, Hojas de Estilo en Cascada en español) es un lenguaje de estilo utilizado para definir la presentación y el diseño de documentos HTML (Ver tutorial HTML) o de cualquier lenguaje de marcado basado en XML (Ver tutorial de XML). Con CSS, se puede controlar la apariencia de los elementos de una página web, como el color de fondo, la tipografía, el espaciado, los bordes y la disposición de los elementos en pantalla. Veamos detalladamente qué es CSS y cuál es su sintaxis.
1. ¿Qué es CSS (Cascading Style Sheets)?
El lenguaje CSS está creado por el World Wide Web Consortium (W3C), la comunidad internacional que desarrolla estándares que aseguran el crecimiento futuro de la web y vela por conseguir webs disponibles para todo el mundo.
El lenguaje CSS se ha ido creando a lo largo del tiempo en varios niveles. Cada nivel de CSS se ha construido sobre el anterior, generalmente añadiendo funcionalidades nuevas. En la página oficial de W3C (w3.org/Style/CSS/) se pueden consultar todas las publicaciones relacionadas con las novedades del estándar CSS en sus diferentes versiones.
El estándar CSS2 define más de 100 propiedades, cada una de ellas con su lista de valores permitidos. Por su parte, el estándar CSS3 ya incluye más de 200 propiedades o atributos. A lo largo de todo el capítulo, se detallan las propiedades CSS más utilizadas en relación a los colores, el texto, los fondos, las listas, las tablas y el modelo de cajas. En el siguiente enlace puedes ver un resumen de las propiedades que se van a estudiar.
1.1. Soporte CSS en los navegadores más utilizados
Cada navegador ofrece un soporte CSS distinto. Por este motivo, es necesario comprobar que nuestras webs se visualizan correctamente en los diferentes navegadores. A continuación, se presentan algunas herramientas útiles para verificar la compatibilidad y resolver problemas de CSS:
- Can I use (caniuse.com): Esta herramienta en línea permite verificar el soporte de diferentes características de CSS en varios navegadores y versiones.
- Browserstack (browserstack.com): Es una plataforma que permite probar sitios web en diferentes navegadores y dispositivos para verificar la compatibilidad de CSS.
- Developer Tools en los navegadores: Chrome, Firefox, Safari y Edge ofrecen herramientas integradas de desarrollo que permiten inspeccionar y modificar el código CSS para solucionar problemas y ajustar el diseño.
- CSS Validator (jigsaw.w3.org/css-validator/): Es una herramienta de la W3C que verifica la validez del código CSS y muestra errores y advertencias para corregir problemas.
El uso de estas herramientas y el conocimiento del soporte de CSS en los navegadores más utilizados son fundamentales para garantizar que un sitio web tenga un diseño coherente y atractivo en diferentes entornos y dispositivos. Ver más información en el apartado de buenas prácticas CSS.
1.2. Sintaxis CSS
En CSS se utiliza la siguiente sintaxis para asignar valores a las propiedades de cada selector:
- Selector (selector): indica sobre qué elemento se aplican los estilos CSS.
- Propiedad o atributo (property or attribute): indica qué característica se va a cambiar.
- Valor (value): indica el valor de la propiedad que se desea modificar.
- Comentario (comment): los comentarios se escriben entre el carácter de apertura /* y el carácter de cierre */.
Comprueba tu apendizaje