OpenWebinars

Desarrollo Web

Qué es CSS y para qué sirve

Si quieres saber qué es CSS, su origen, evolución, principales características y usos, estás en sitio adecuado. Descubre una visión general sobre CSS y como afecta a un documento HTML.

Angel Robledano

Angel Robledano

Product Manager

Lectura 7 minutos

Publicado el 26 de junio de 2019

Compartir

    Tabla de contenidos

Durante su evolución el lenguaje de marcas HTML ha ido permitiendo cierto grado de personalización. Desde poner en negrita un texto, cambiar su color o alinear una fotografía se iba haciendo casi de manera artesanal añadiendo línea a línea comentarios que ayudaban a su personalización.

Esto hacía que con el tiempo cualquier proyecto web se hacía muy difícil de mantener. Entre otros motivos la principal razón es que cualquier cambio en el estilo de una web debía replicarse en todos los elementos relacionados casi línea a línea manualmente. Entran sudores solo de pensarlo, pero así era todo no hace muchos años atrás.

La solución vino de la mano de CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", un lenguaje de marcas enfocado a definir, crear y mejorar la presentación de un documento basado en HTML. Para muchos diseñadores gráficos CSS significó la puerta de entrada al mundo de la web y junto con otras tecnologías como JavaScript, CSS se ha ido imponiendo como uno de los pilares imprescindibles de la web de hoy en día.

Para qué sirve CSS

El código CSS hace la vida más fácil al desarrollador front-end al separar las estructura de un documento HTML de su presentación. Dicho de otro modo el HTML actuaría como es esqueleto de la web, definiendo su estructura básica, y el CSS añadiría toda la capa de personalización sobre el que la web define su aspecto final.

Siguiendo este fundamento resulta muy fácil para un diseñador web realizar cambios en la apariencia de una web sin afectar de manera dramática a su contenido. El contenido siempre será el mismo, solo cambia como aquello que podemos ver. CSS es fácil de entender y aprender, y nos da un potente control de cómo diseñar los documentos HTML.

Por ejemplo, gracias al CSS podemos definir que todas las etiquetas <H1> de un texto cambie su apariencia por aquella que definamos, cambiando colores, fuentes y añadiendo efectos sin modificar nada del contenido que sirve de base. Imagina ahora si tuvieras que hacerlo revisando línea a línea.

Por tanto la principal ventaja del CSS es que al poder ordenar nuestras preferencias de estilo en un único documento independiente ahorramos una considerable cantidad de tiempo al escribir nuestras órdenes CSS en forma de plantilla una única vez para ser aplicado luego a todos las páginas que componen nuestra página web.

Pero no es la única ventaja. Gracias a esto también el rendimiento de nuestra web se ve incrementado cargando de una manera más rápida pues no es necesario escribir etiquetas HTML continuamente y al tener que insertar una menor cantidad de código también su mantenimiento es mucho menor. Un cambio en el CSS y nuestra página se actualizará al momento.

Conviértete en Frontend Developer
Domina las tecnologías más demandadas. Accede a cursos, talleres y laboratorios prácticos de JavaScript, React, Angular, HTML, CSS y más.
Comenzar gratis ahora

Cómo funciona CSS

Al contrario de lo que algunas personas piensan CSS no es un lenguaje de programación. En realidad interactúa con la Web pero lo hace en colaboración de otros lenguajes de programación.

CSS funciona de una manera muy simple. Los navegadores Web al aplicar las reglas CSS a un documento modifican la manera en que este nos es presentado. Todo se produce de manera transparente al usuario. Estas reglas se componen de dos elementos clave. El primero es un conjunto de propiedades con valores establecidos para actualizar la presentación del contenido HTML. El segundo elemento son los selectores. Estos nos ayudan a seleccionar los elementos afectados por el nuevo valor de la propiedad. De esta manera evitamos que el CSS afecte a todos los elementos del HTML y solo aquellos que queramos. Por ejemplo a los elementos contenidos en primer parrafo de nuestro documento o seleccionar de manera alterna las filas de una tabla.

Qué es el W3C: Historia de CSS

En los años 70, mucho antes de que la web diera sus primeros inicios, se desarrolló un rudimentario sistema de etiquetas llamado SGML. Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos.

Con la llegada de Internet esta evidencia se hizo todavía más manifiesta y era necesario incorporar una tecnología que permitiera añadir una capa de personalización extra a los documentos HTML. La falta de un estándar hizo que compañías como Microsoft y Netscape, en ese momento en guerra por el navegador más popular, hizo la web un lugar en donde el mensaje “Este sitio web solo es compatible con Internet Explorer” fuera casi la norma. Prácticamente era imposible crear una web que se viera igual en los diferentes navegadores de la época.

Para resolver esto la W3C (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).

Irónicamente para resolver la guerra entre los dos navegadores más populares de la época, internet explorer y netscape communicator, parecía inevitable tener que utilizar dos estándares diferentes hasta que en 1995 la W3C decidió apostar por la estandarización y confluencia de ambos con la primera versión de CSS.

La aceptación fue casi inmediata en 1998 se publica la segunda revisión. CSS 2.1 dando un paso de gigante al mismo tiempo que se publican los primeros borradores de CSS 3.

Si te lo estás preguntando, como curiosidad, el primer navegador en adoptar soporte parcial a CSS fue Internet Explorer 3.0 y finalmente, el primer navegador con soporte completo de CSS 1 fue la versión para Mac de Internet Explorer 5, que se publicó en el año 2000.

Sintaxis y estructura de CSS: Reglas, selectores, declaraciones, atributos, valores, identificadores y clases.

CSS se compone de dos partes. Una parte llamada "selector" y otra parte llamada "declaración". La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.

Selector universal

Se utiliza para seleccionar todos los elementos de la página y se indica mediante un asterisco (*). No se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.

* {
  margin: 0;
  padding: 0;
}

Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página.

 

CSS permite agrupar reglas que aplican a diferentes etiquetas en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,).

 

p {
  color: red; 
}

 

h1, h2, h3 {
  color: #AA8020;
  font-weight: normal; }
  font-family: Arial, Helvetica, sans-serif;
}

 

Selector descendente

 

Los selectores descendentes permiten aumentar la precisión del selector de tipo o etiqueta. Selecciona los elementos que se encuentran dentro de otros elementos.

Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

p span  { color: red;  }
h1 span { color: blue; 
}

Selector de clase

Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.).

 

El selector .destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición.

    

 

.destacado { color: red; }

  

Selectores de ID

El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id.

#destacado { color: red; }
p#aviso { color: blue; }

Mejora la colaboración entre tus equipos de diseño y desarrollo
Cursos, talleres y laboratorios de JavaScript, React, Angular, UX, HTML y CSS para todos los niveles. Incrementa la productividad de tus proyectos en un 45%
Solicitar más información

Herencia en CSS

CSS permite que estilos definidos para los elementos se heredan de forma automática entre sus elementos descendientes o hijos. Para entenderlo un poco mejor veamos el siguiente ejemplo:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia en css</title>
<style type="text/css">
/* Comentario en CSS una sola línea */
  		body { color: blue; }
</style>
</head>

<body>
  <h1>Titular de la página</h1>
  <p>Un párrafo de texto no muy largo.</p>
</body>
</html>

En las propiedades de estilo de este ejemplo el definimos el color del texto para el elemento <body> usando el selector body. Lo interesante es que salvo que indiquemos lo contrario todos los elementos hijos que desciendan de este selector heredarán la propiedad color. Esta herencia de estilos se aplica automáticamente y para anularla sobre otro elemento debemos crear una regla explícita con otro valor. Por ejemplo añadiendo lo siguiente al estilo podemos cambiar las propiedades del documento o el tipo de letra en CSS:

<style type="text/css">
/* 
Un comentario 
que se extiende
en varias líneas 
*/
  body { font-family: Arial; color: black; }
  h1 { font-family: Verdana; }
  p { color: red; }
</style>

Puede que al principio sea un concepto un poco complicado de entender pero a la larga simplifica y mucho la creación de hojas de estilo más complejas. Aquí la práctica hace al maestro y este artículo pretende ser de introducción para que te animes a dar tus primeros pasos.

Compartir este post

También te puede interesar

Qué es CSS3 y sus fundamentos
Blog

Qué es CSS3 y sus fundamentos

Si quieres conocer qué es CSS3, cuáles son sus fundamentos y cómo funciona conjuntamente con HTML, tienes toda la información en este...

Juan Diego Pérez Jiménez
Icono de la tecnología
Curso

HTML5 y CSS3

Intermedio
4 h. y 21 min.

Aprende desde cero a crear páginas Webs con este curso de HTML5 y CSS3. Crea paso a paso...

Juan Diego Pérez Jiménez
4.5