Diseño de una interfaz de pestañas con CSS

Para maquetar con CSS un sistema de pestañas o solapas (lo que se llama tabs en inglés), de una manera bastante sencilla, funcional y polivalente. Veremos paso apaso cómo crear las pestañas, desde el código HTML que utilizaremos, hasta las diferentes clases y estilos que definiremos para aplicar el aspecto final a laspestañas.
Las interfaces de pestañas las hemos visto en infinidad de sitios y de programas, por lo que resultan muy sencillas de usar por parte de los usuarios, ya queestán acostumbrados a trabajar con ellas. También aportan un atractivo estético bastante notable a los diseños de los sitios web, por lo que las convierte en uncomponente útil, atractivo y adecuado en la mayoría de casos.
CSS nos permite hacer diseño de interfaces de usuario de una manera elegante y sencilla y definiremosel aspecto únicamente con Hojas de Estilo en Cascada.
Para empezar, podemos ver lo que sería una interfaz de Pestañas en la siguiente imagen:

HTML: laspestañas como elementos de listas, LI
Veamos el código HTML que hemos utilizado para definir los contenidos de las pestañas:

   
      DesarrolloWeb.com      CriarWeb.com
      Comunidad
      Otro enlace más largo
   

Se define los distintos enlaces que aparecen en las pestañas con una simple lista HTML, etiquetas UL y LI.Todo el sistema de pestañas está metido en una capa con identificador (atributo id) "pestanas", a la que daremos estilos luego con CSS. Uno de los elementos de lalista LI, tiene la clase (atributo class) "activa", que nos servirá para hacer una pestaña con otro color, para simbolizar que es la pestaña activa..