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

El diseño de una página web, y de todo un sitio, necesita un lenguaje en común para que los navegadores puedan interpretarlo y mostrarlo a las personas de la forma correcta. Pero también 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 en la adecuada. Si esta es la primera vez que lees el término, no te preocupes aquí aprenderás lo básico y todo lo que necesitas saber de sus funciones y ventajas.

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. Sin embargo, 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 puedes guardar los comandos para elementos de estilo (como fuentes, colores, tamaños, etc.) separados de los que configuran el contenido.

Así que, básicamente, si el contenido es el rey, CSS es el segundo al mando. Por eso como propietario de sitio o experto en marketing con conocimiento web es conveniente que conozcas algunos aspectos fundamentales; si estás listo, comenzamos.

1. Escribe reglas para la apariencia de tu sitio

Para 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 lo hace con 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 ya lo notaste, 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, y 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 un gato (#), seguido 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 contiene una o más declaraciones CSS. Una de estas declaraciones le dice al navegador qué estilo brindar al elemento seleccionado gracias a sus dos elementos: 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 sean fáciles de localizar y leer por las personas. Ahora veremos lo que son cada uno de los dos elementos de una declaración.

Propiedad CSS

Como la primera parte de una declaración CSS, 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 siempre se acompaña de al menos un valor y estos elementos aparecen siempre separados por dos puntos (:).

No todas las propiedades son compatibles con todos los navegadores, sin embargo algunas son bastante amigables, como color y ancho. Ten en mente el asunto de 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 asegurar que darás una buena experiencia de usuario.

Valor CSS

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

• 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 en tu página, pero ayudan a crear contexto y notas para tu código.

Para comentar en CSS, escribe /*, luego el texto con tu comentario, y cierra con */.

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. Te mencionaremos tres maneras de hacerlo: externo (external), interno (internal) y en línea (inline).

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 ligarlo con un archivo de HTML, acomoda 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 a cualquier archivo HTML que haga referencia a él con el elemento <link> de arriba.

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.

CSS en línea o inline 

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 hacer esto, usar este método viola la práctica de separar el estilo del contenido, por eso no se recomienda su uso. CSS en línea es ineficiente para programar y más difícil de comprender que los otros dos. Aun así es bueno que lo conozcas para que lo puedas identificar en cualquier caso. 

Ahora que conoces lo básico de CSS, lee las siguientes preguntas que te ayudarán a comprender de una forma más extensa  el lenguaje CSS.

10 preguntas frecuentes sobre CSS

1. ¿Por qué se recomienda el uso de CSS?

Existen 4 ventajas clave:

• Implica menos código: los desarrolladores usan CSS para aplicar el mismo estilo a múltiples páginas y elementos en todo un sitio web, lo que reduce el tiempo invertido y la probabilidad de errores.
• Da más opción de estilo: con CSS puedes hacer mucho más que lo que te permite el HTML. Con el conocimiento suficiente, y algo de paciencia, tu sitio lucirá tal y como deseas.
• El poder de la estandarización: debido a que CSS es un lenguaje uniforme, cualquier desarrollador o diseñador puede comprender el estilo de un sitio revisar los archivos CSS.
• Mejor desempeño: CSS reduce la cantidad de código repetido. Menos código significa archivos más pequeños, y archivos más pequeños significan tiempos más de carga más rápidos para tus páginas.

2. ¿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. Sin embargo, CSS es el lenguaje que se encarga de que el diseño sea atractivo, ordenado y que se le dé a los visitantes una buena experiencia de usuario.

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

Sin CSS, cambia mucho, ¿no crees? Te dejamos a continuación el aspecto que tiene con CSS.

3. ¿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 por 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, el navegador tomará el valor que fue procesado al final. En nuestro ejemplo, el valor azul se procesó después de rojo, así que aplica el primero.

La cascada resuelve reglas conflictivas dentro de la misma hoja de estilo y a través de varias de ellas. 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: inline anula interno, interno anula 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.

4. ¿Qué es especificidad CSS? 

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, deberías esperar que el valor azul anulara el 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: se conoce como especificidad CSS. Combinadas con la cascada, las reglas de especificidad CSS eligen cuál estilo aplicar en el caso de un conflicto.

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

5. ¿Qué es herencia CSS? 

Herencia significa que algunas declaraciones CSS aplicadas a un elemento se pasan a elementos niño. 

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

Sin embargo, 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. 

6. ¿Qué es padding?

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

7. ¿Qué es marging?

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

8. ¿Qué es hover?

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

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. Con CSS puedes aplicar estilos a un id o 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, deberías 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 un poco de todo ese mundo. Esperamos que comiences a informarte  más sobre el tema y que te ayude a diseñar el sitio web ideal que impulse a tu negocio a llegar lejos. Verás que no tienes límites una vez que CSS se convierte en un lenguaje familiar.