Introducción al CSS: qué es, para qué sirve y otras 10 preguntas frecuentes

El diseño de una página o sitio web necesita un lenguaje común para que los navegadores puedan interpretarlo y mostrarlo a las personas de la forma correcta. Pero también lo requieren para que otros diseñadores hagan las modificaciones necesarias para su optimización.

Uno de estos lenguajes es el CSS, un gran aliado del HTML que transforma la experiencia de tus visitantes.

Aquí aprenderás todo lo que necesitas saber sobre sus funciones y ventajas.

¿Qué es CSS? 

CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un usuario las visita. Funciona junto con el lenguaje HTML que se encarga del contenido básico de las páginas.

Se les denomina hojas de estilo «en cascada» porque puedes tener varias hojas y una de ellas con las propiedades heredadas (o «en cascada») de otras.

Para muchas personas una simple plantilla de blog es suficiente. Aun así, cuando quieras personalizar la apariencia de un sitio necesitarás implementar CSS que, en conjunto con un buen CMS, te ayudará a potenciar el alcance de tu contenido.

¿Para qué sirve CSS?

Con CSS puedes crear reglas para decirle a tu sitio web cómo quieres mostrar la información y guardar los comandos para elementos de estilo (como fuentes, colores, tamaños, etc.) separados de los que configuran el contenido.

Además, puedes crear formatos específicos útiles para comunicar tus ideas y producir experiencias más agradables visualmente para los usuarios del sitio web.

Al desarrollar una página web es necesario hacer énfasis en la importancia de los elementos visuales para comunicar un mensaje. La presentación de los datos de una empresa y la usabilidad de la plataforma son factores fundamentales para atraer visitantes a tu sitio y retener su atención en el contenido que presentas. Algunas ventajas adicionales en el uso de CSS son que:

Optimiza la edición

Los sitios web de algunas empresas contienen grandes cantidades de información que deben ser accesibles a los usuarios. Homologar los estilos de todos los accesos a esta información puede ser complicado si no se cuenta con una herramienta que facilite el proceso. CSS permite crear estilos que pueden aplicarse a todas las páginas de un sitio web. Esto ahorra tiempo y posibilita crear una imagen de la marca a través de tipografías, colores y recursos visuales.

Facilita la accesibilidad al usuario

La multiplicidad de visitantes de un sitio web es tan amplia como la diversidad de dispositivos utilizados para acceder a ellos. Al momento de diseñar una página es necesario tener presentes las posibilidades de interacción y diferencias en la presentación de contenidos en distintos dispositivos. Adecuar la plataforma para medios de acceso como teléfonos, tabletas, computadoras de escritorio o laptops puede resultar una tarea complicada.CSS tiene la ventaja de facilitar la accesibilidad al usuario, gracias a las hojas de estilo estandarizadas.

Promueve la creatividad

El uso de CSS para la construcción de páginas web tiene la ventaja de permitir explotar la creatividad de los diseñadores de manera rápida e intuitiva. Esto acelera el proceso de personalización de los sitios, que pueden ser construidos con especificaciones claras o bien sujetarse a las particularidades de los distintos navegadores.

Al construir una imagen de marca es importante modificar, innovar y proponer soluciones. CSS simplifica esta tarea para los desarrolladores. 

Prioriza la limpieza del código

Una estrategia común, pero poco eficiente, consiste en escribir las instrucciones de un programa en lenguaje HTML. Esto implica la redacción de una gran cantidad de líneas de código que se intercalan con el contenido de un sitio web.

Al utilizar CSS puedes separar todo el código relacionado con el estilo de un sitio web del contenido base de una página, que puede estar en lenguaje HTML. De este modo, mantienes una limpieza en ambos conjuntos de información y evitarás tener líneas de código de contenido interfiriendo entre sí.

Al acceder a un sitio web el navegador debe rastrear la información contenida en el HTML y traducirla a un DOM (o modelo de objetos del documento). Estos objetos deberán ser conjuntados con los bloques de código correspondientes en CSS para que el estilo elegido sea aplicado a ellos y aparezcan en el formato asignado en el computador.

Según sean los selectores que hayas utilizado en tu CSS se aplicarán diferentes propiedades a cada bloque de información en HTML. Al utilizarlos podrás modificar fácilmente el estilo de un conjunto definido de bloques, manteniendo la imagen de tu marca en todo tu contenido.

Diferencia entre HTML y CSS

HTML da estructura al contenido de un sitio web. Sus siglas en inglés significan «lenguaje de marcas de hipertexto» (HyperText Markup Language), y hacen referencia al código que define el significado de las instrucciones dadas a una plataforma computacional.

Estas instrucciones representan todos los enlaces (o hipertextos) que vinculan los contenidos de un sitio, por lo que HTML es la base de cualquier página web. En este lenguaje es posible incluir toda la información referente al contenido de un sitio, así como las imágenes, audios y estilos del mismo; sin embargo, su uso para estas tareas conlleva una mayor complejidad en el código fuente.

Para hacer más eficiente el uso de HTML, se han diseñado lenguajes computacionales que facilitan la gestión de los datos relacionados con el diseño visual de las plataformas. CSS es uno de los lenguajes más importantes que se utilizan para ordenar las instrucciones referentes a la apariencia de un sitio y presentar los contenidos de una página de forma atractiva.

De este modo, HTML se emplea para estructurar el contenido de un sitio, mientras que CSS se usa para estructurar su presentación.

Básicamente, si el contenido es el rey, CSS es el segundo al mando. Por eso como propietario de un sitio o como experto en marketing con conocimiento web es conveniente que comprendas algunos aspectos fundamentales. ¡Comencemos!

1. Es un lenguaje de programación diferente a HTML

Como hemos revisado, HTML es un lenguaje que sirve para gestionar la información contenida en un sitio web; por otro lado, CSS tiene la función de estructurar el estilo de las páginas. Ambos lenguajes trabajan en conjunto para presentar la información al público final.

2. Permite el apilamiento de instrucciones para definir formatos específicos

Esto significa que se pueden crear bloques de instrucciones anidadas que permiten hacer modificaciones generales de modo sencillo, lo cual simplifica la tarea de diseño y la creación de estilos estandarizados. Así, se crean formatos específicos que pueden aplicarse a distintas páginas y que son fácilmente modificables.

3. Es utilizable en todos los navegadores y plataformas

Debido a que es un lenguaje ampliamente utilizado para dar formato a los sitios web, su uso es universal para un amplio número de dispositivos, formatos y plataformas como Edge, Safari, Chrome, etc. Por ello es fácil dar formato a las páginas dependiendo del navegador utilizado por cada usuario.

4. Optimiza el funcionamiento de las páginas web

Al separar el código de contenido del código de estilo es mucho más rápido el procesamiento de la información, lo cual se traduce en una experiencia más fluida para los usuarios y en una carga de trabajo menor para los procesadores. Es importante e imprescindible la sincronización del código en HTML con CSS para que la información se presente de modo correcto.

5. Tiene una sintaxis específica

Si bien la mayoría de los lenguajes comparten algunas funciones y signos, existen particularidades en el uso de CSS, por lo que es necesario conocer el lenguaje de programación, así como las características de apilamiento. Más adelante revisaremos algunas de sus utilidades específicas.

6. Permite personalizar totalmente la apariencia de las páginas

CSS da cabida a una gran libertad creativa, lo que significa que los diseñadores tienen un amplio espectro de posibilidades en sus herramientas. El uso de diferentes códigos de colores y de fuentes permite emplear paletas de muchísimas tonalidades y múltiples tipografías; asimismo, se pueden disponer los elementos visuales de un sitio de acuerdo con las necesidades del diseño.

1. Escribe reglas para la apariencia de tu sitio

Las personas que ya están familiarizadas con HTML notarán que la sintaxis de CSS es un poco distinta. En lugar de hacer un listado del contenido de la página, CSS utiliza las reglas asignadas a elementos HTML, un documento HTML completo o varios de ellos. Estas reglas son procesadas por el navegador web cuando carga el archivo HTML.

Una regla en CSS luce así:

2. Conoce los componentes de la regla

Como lo muestra la imagen anterior, existen cuatro componentes principales: selector, declaraciones, propiedades y valores. 

Selector CSS

Todas las reglas CSS comienzan con un selector. Este indica la parte del documento donde se aplica la regla. Y al selector le siguen una o más declaraciones dentro de corchetes. Existen varias formas de escribir un selector; el más básico es el que viste en el ejemplo de arriba: cada elemento HTML a modificar se menciona por su nombre (p, div, a, etc.):

Pero también puedes señalar los elementos por su clase o atributo. La clase de selector está escrito como un punto (.) seguido del nombre de la clase. La identidad del selector se escribe con una almohadilla (#), seguida del nombre de identidad.

Para dirigirte a un elemento «hijo» dentro de un elemento «padre», escribe el selector como si fuera el elemento padre, seguido del elemento hijo (con un espacio entre ellos):

Y si deseas asignar la misma regla a múltiples elementos, puedes hacerlo con el selector en grupo. Este abarca dos o más nombres de elementos separados por comas. El orden no es importante, pues la regla se aplicará a todos los elementos que se enumeren: 

Declaración CSS

Como habrás visto en los ejemplos anteriores, después del selector sigue el bloque de declaración: un par de corchetes que contienen una o más declaraciones CSS. Una de estas declaraciones le dice al navegador qué estilo brindar al elemento seleccionado gracias a sus dos aspectos: una propiedad y un valor. Cada declaración termina con un punto y coma (;). 

Aunque no es obligatorio, es común que cada declaración ocupe una sola línea. Esta práctica hace que las instrucciones sean fáciles de localizar y leer por las personas.

Ahora veremos los dos elementos de una declaración.

Propiedad CSS

Como la primera parte de una declaración, una propiedad CSS le indica al navegador cuál característica de estilo del elemento debe cambiarse. Existen muchas propiedades CSS que afectan diferentes cosas: color, tamaño, fuente, forma o locación en una página. Una propiedad se acompaña de al menos un valor y estos elementos siempre aparecen separados por dos puntos (:).

No todas las propiedades son compatibles con todos los navegadores; no obstante, algunas son bastante amigables, como color y ancho. Ten en mente la compatibilidad entre navegadores si las propiedades que usas son menos habituales. Probar tus diseños en navegadores comunes (así como en dispositivos móviles y de escritorio) es una buena práctica para garantizar una buena experiencia de usuario.

Valor CSS

Cada propiedad tiene un paquete de valores, los cuales especifican el estilo de la propiedad. Estas son algunas propiedades usuales y sus valores: 

• Las propiedades de color pueden tener valores tan simples como una palabra (red o blue para rojo y azul, por ejemplo), códigos hexadecimales como #33E0FF o valores RGB como rgb (51, 224, 255). 
• La propiedad de ancho (width) puede tener un valor de longitud, como píxeles, o un porcentaje, que le da tamaño al elemento, según la dimensión del contenedor padre. 
• La propiedad para la familia de fuente (family font) acepta los nombres por escrito de tipografías amigables con web como Arial, Times New Roman o Courier. 

3. Utiliza comentarios para probar tu código

Al igual que con HTML, puedes escribir comentarios en CSS. Estos comentarios son ignorados por el navegador, por lo que no son visibles para el visitante de tu página, pero ayudan a crear contexto y notas para tu código.

Para comentar en CSS, escribe: /*texto con tu comentario*/

Los comentarios también pueden usarse para probar tu CSS: para deshabilitar una regla o declaración, solamente comenta el código y luego elimina ese comentario del código para reactivar la regla:

4. Añade CSS a tu HTML

Por supuesto, CSS no sirve de mucho si no está vinculado a un archivo HTML. Existen tres estilos para llevar a cabo esta importante tarea: mediante un CSS externo (external), CSS interno (internal) o CSS en línea (inline). A continuación, veremos las características de estos tres estilos de CSS.

Los 3 tipos de estilos CSS

1. CSS externo

El CSS externo existe en su propio archivo. Este archivo está enlazado a un documento HTML con una etiqueta <link>. Este es el método más usado para añadir CSS a HTML, ya que una hoja de estilo externa puede dictar el estilo de diferentes documentos HTML. Esto permite que los desarrolladores hagan cambios a lo ancho del sitio con un solo archivo CSS.

Para crear un archivo CSS, escribe tu código en cualquier editor de texto o editor de código y guarda el archivo con la extensión .css; para vincularlo con un archivo de HTML, guarda tus HTML y CSS en la misma carpeta y luego pega el siguiente código dentro de la sección <head> del archivo HTML:

<link rel="stylesheet" target="_blank" rel="noopener" href="style.css">

Agrega en "style.css" el nombre de tu archivo CSS. Las reglas de este archivo se aplicarán en cualquier archivo HTML que haga referencia a él con el elemento <link> de arriba.

2. CSS Interno

El CSS interno es un código CSS incrustado en un documento HTLM. Está escrito dentro del elemento <style>, que se acomoda en la sección de <head>:    

El CSS interno puede utilizarse para algunos proyectos pequeños de web y páginas individuales con su propio estilo. En estos casos será más fácil guardar todo tu código en el mismo archivo y no en dos.

3. CSS en línea

CSS en línea se ubica dentro de una etiqueta HTML para cambiar el estilo de un elemento en específico. La sintaxis inline es un poco diferente de lo que hemos visto: la declaración está escrita como el valor del atributo de estilo.

Aunque es posible, usar este método viola la práctica de separar el estilo del contenido, por eso no se recomienda su empleo. El CSS en línea es ineficiente para programar y resulta más difícil de comprender que los otros dos. Aun así, es bueno que lo conozcas para que lo puedas identificar, si se presenta el caso. 

4 ejemplos de CSS

CSS es útil para llevar a cabo diversas modificaciones de estilo mediante el uso de código. Los siguientes ejemplos de CSS te darán un panorama de las posibilidades de uso del lenguaje para familiarizarte con algunas de sus implementaciones:

1. Cambio del color de fondo

CSS te permite cambiar el fondo de una página completa o de solamente una sección de manera sencilla:

body { background-color: green; }

2. Añadir imágenes como fondo

Si prefieres utilizar una imagen en lugar de un único color, utiliza la URL de la imagen para usarla como fondo de tu página:

body { background-image: url("barn.jpg"); }

3. Emplear diferentes códigos de color

Si bien existen colores básicos, es probable que quieras optar por alguna tonalidad o matiz específico. En CSS puedes emplear valores de color en RGB, HEX o HSL, entre otros. Un ejemplo para modificar el color de un elemento (p) a azul en formato RGB se vería de este modo:

p { color: rgb(0, 0, 255); }

4. Usar tipografías variadas

Así como los colores, las tipografías son un elemento fundamental para crear una identidad de marca. El uso de tipos de letra diversos puede dinamizar la experiencia de los usuarios. En CSS es posible utilizar diferentes tipografías de tu ordenador. Para recurrir a estas fuentes debes usar un código especial mediante la instrucción:

p { font-family: "Times New Roman", Times, serif; }

Adicionalmente, puedes modificar el formato de la tipografía para hacerla cursiva. La instrucción en CSS será:

.italic { font-style: italic; }

Ahora que conoces lo básico de CSS, te presentamos las respuestas a algunas dudas comunes que te ayudarán a comprender con mayor profundidad el lenguaje CSS.

10 preguntas frecuentes sobre CSS

1. ¿Puedes diseñar una página web sin CSS?

Debido a que el lenguaje HTML es el que se encarga de estructurar los contenidos de una página web, técnicamente sería lo único que necesitarías para mostrar texto, imágenes, secciones y videos a tus visitantes. No obstante, CSS es el lenguaje que se encarga de que el diseño sea atractivo, ordenado y que dé una buena experiencia de usuario.

¿Quieres saber cómo luce una página sin CSS? Mira la siguiente imagen, extraída de una publicación de nuestro blog:

Te dejamos a continuación el aspecto que tiene con CSS.

2. ¿Qué es cascada CSS? 

Mira el siguiente código. Se ve como si tuviéramos dos reglas dirigidas a la propiedad de color de fondo para el elemento p:

Esto representa un conflicto, pues el mismo elemento no puede tener distintos colores de fondo. En este caso, CSS se queda con azul debido a la forma en que operan las cascadas.

En términos más sencillos, cascada significa que CSS considera el orden de las reglas cuando le da estilo a los elementos. La regla de la cascada dicta que si la propiedad CSS de un elemento tiene asignados diferentes valores, entonces el navegador tomará el valor que fue procesado al final. En nuestro ejemplo, el valor rojo se colocó primero y azul está después, así que aplica el último.

La cascada resuelve reglas conflictivas dentro de la misma hoja de estilo o en varias de ellas; es decir, las reglas que se procesaron en hojas de estilo posteriores anulan las reglas conflictivas en páginas previas. La regla de la cascada también aplica cuando se trata de CSS interno, externo y en línea: en línea anula el interno y el interno anula el externo. 

La cascada es central para las funciones de CSS: es la «C» de su nombre. De cualquier modo, no tienes por qué preocuparte, ya que si la comprendes de forma adecuada podrás utilizarla correctamente.

3. ¿Qué es especificidad CSS? 

Existe otro escenario: tu etiqueta p tiene un id. Según el CSS, ¿tu párrafo será rojo o azul?

Según la regla de la cascada, se supone que el valor azul anula al rojo. Sin embargo, no pasó eso. ¿Por qué? El problema con este ejemplo es que los selectores CSS son de diferentes tipos, pero describen el mismo elemento. En casos así, CSS designa algunos selectores como «más específicos» que otros; a esto se le conoce como «especificidad CSS». Combinadas con la cascada, las reglas de especificidad CSS eligen cuál estilo aplicar en caso de un conflicto.

CSS dice que los selectores de clase son más «específicos» que los selectores de elementos; y los selectores de identidad son más «específicos» que los selectores de clase. En el ejemplo anterior, la primera regla CSS utiliza un selector de identidad, por lo que el valor de rojo prevalece, ya que es más específico que el valor del elemento.

4. ¿Qué es herencia CSS? 

Herencia significa que algunas declaraciones CSS aplicadas a un elemento «padre» se pasan a elementos «hijo». 

Podemos ver herencia con una propiedad como tamaño de fuente: 

No todas las propiedades heredan valores de elementos «padre». Como en el caso anterior: el estilo solo está aplicado al elemento «padre». La declaración tamaño de fuente se hereda, pero no la del borde. 

5. ¿Qué es padding?

Algunas propiedades aceptan múltiples valores. La propiedad padding (relleno) es una de ellas. Acepta hasta cuatro valores que establecen el espacio de arriba, abajo, a la derecha y a la izquierda de un elemento. 

6. ¿Qué es marging?

Al igual que padding, la propiedad de marging (margen) define el espacio alrededor de un elemento fuera del borde, solamente que no tiene color de fondo y es transparente.

7. ¿Qué es hover?

Es una pseudoclase que se utiliza cuando un visitante interactúa con un elemento utilizando el cursor. Aunque no siempre activará el elemento, sí habrá un cambio perceptible, como el tamaño de la fuente o el color de fondo. Un ejemplo es cuando pasas puntero del mouse sobre el enlace de una página, y este cambia de color para llamar tu atención e invitarte a hacer clic.

8. ¿Qué es un CSS Grid?

Un CSS Grid, también conocido como diseño de cuadrícula en CSS, es una funcionalidad que permite a los diseñadores de páginas web crear cuadrículas de contenido. Estos cuadrantes facilitan la edición, ya que se pueden designar estilos diferentes para cada bloque móvil y esperar las secciones uniformemente dentro de la página.

Además, esta solución de diseño funciona muy bien con la pseudoclase hover, ya que permite crear cuadrículas de opciones que serán activadas o que descubrirán alguna información oculta cuando el visitante se desplace sobre un cuadrante específico.

9.¿Cuál es la diferencia entre id y class?

Ambos son atributos HTML, aunque tienen diferentes funciones. Id asigna un nombre a un elemento determinado, por lo que no puede utilizarse en otro. Y class asigna un elemento a una clase; tampoco puede haber dos elementos con la misma clase. Pero con CSS puedes aplicar estilos tanto a un id como a una clase.

Si usas un estilo de id, restringes las reglas de estilo a un bloque o elemento concreto. Si usas un estilo de class, aplicas las reglas de estilo a una determinada clase de bloques y elementos.

10. ¿Cómo se restaura el valor por defecto de la propiedad de un elemento?

Antes no era posible simplemente escribir una palabra clave para regresar el valor de un elemento a su estado original. Sin embargo, ya existe una: initial. Para hacerlo, debes escribir la regla de este modo, suponiendo que quieres indicar que el h1 de un artículo sea otra vez de color negro una vez que lo cambiaste a azul:

/* Heading default color is black */ h1 { color: blue; } h1 { color: initial; }

Hay muchísimas más cosas que puedes hacer con CSS. Esto es apenas una pequeña muestra de todo ese mundo.  Puedes experimentar con gradientes de colores en tus textos, dar un estilo único a tus formularios emergentes o incluso generar páginas responsivas a partir de diseños de cuadrículas que harán que tus visitantes queden fascinados con tu sitio web.

Esperamos que comiences a informarte más sobre el tema y que este contenido te motive a diseñar el sitio web ideal que impulse a tu negocio a llegar lejos. Una vez que CSS se convierta en un lenguaje familiar para ti, no habrá limites.