Los lenguajes más importantes para la construcción de páginas web son HTML y CSS. Forman un tándem perfecto para definir las páginas, mientras que HTML se ocupa del contenido, CSS trata sobre la forma en la que ese contenido tiene que visualizarse. En este post vamos a explicar CSS y dar un repaso general a los conocimientos que necesitas para poder entenderlo y utilizarlo.
¿Qué es CSS?
CSS es uno de los dos lenguajes más importantes para la creación de páginas web. Su nombre viene de las siglas en inglés de Cascading Style Sheets (Hojas de Estilo en Cascada). Con CSS definimos los estilos con los que tiene que representarse el contenido de los documentos HTML. Para ello utilizamos diversos mecanismos que vamos a explicar más adelante en este post, como selectores, propiedades de estilos y sus valores.
¿Para qué sirve CSS a la hora de crear tu web?
El objetivo principal de CSS es permitir separar el contenido de la presentación. Antes de aparecer CSS, el lenguaje HTML debía especificar el contenido y cómo ese contenido tenía que visualizarse en la ventana del navegador. Con la aparición de CSS se consiguió separar ambas partes, lo que propició un gran avance en el mundo de la web y las posibilidades del diseño.
Gracias a esa separación, un mismo documento HTML se puede visualizar de distintas formas, tan solo cambiando el código CSS asociado. Esta posibilidad, aunque pueda parecer irrelevante para ojos inexpertos, es fundamental para el mantenimiento de las páginas, ya que permite que los diseñadores puedan actualizar el aspecto del documento sin cambiar el contenido. Y viceversa, los editores son capaces de crear nuevo contenido con un aspecto definido de antemano, simplificando su vida y reutilizando las definiciones de estilos a lo largo de toda una web.
Vamos ahora a señalar brevemente algunas ventajas adicionales que nos aporta el lenguaje CSS.
Estilización y diseño visual
Gracias a la especialización en el diseño que nos aporta CSS, los profesionales pueden definir aspectos visuales de las páginas web de una manera muy detallada.
Mejora de la legibilidad y usabilidad
Gracias a la separación entre contenido y estilo, es muy fácil leer el código HTML e interpretarlo por los humanos, así como el CSS resulta también sencillo de leer y aplicar. Esto simplifica la vida de los desarrolladores de sitios web.
Adaptable a diferentes dispositivos y tamaños de pantalla
Otra cosa que permite CSS es definir estilos diferentes para distintos tipos de dispositivos y tamaños de pantalla, permitiendo que la web sea un entorno adaptable a la gran cantidad de medios de acceso actuales, como smartphones, tabletas y ordenadores.
Consistencia y coherencia en el diseño
Gracias a la definición centralizada de los estilos, las páginas web de un mismo sitio se presentarán bajo un mismo patrón visual, permitiendo diseños consistentes.
Separación de la estructura del contenido y su presentación
Este punto lo hemos mencionado ya, pero resulta extraordinariamente importante, ya que ha permitido mejorar el mantenimiento de las páginas y el trabajo de equipos con profesionales de distintos perfiles en los proyectos.
Animaciones y efectos visuales
Con CSS3 se introdujo la capacidad para crear animaciones y efectos visuales atractivos en las páginas web, todo sin necesidad de código JavaScript.
Optimización del rendimiento y la velocidad de carga
Gracias a la definición centralizada del CSS se consigue mayor velocidad de carga de los sitios web, ya que los estilos solo necesitan descargarse una única vez y se reutilizarán a lo largo del sitio entero.
Sintaxis y estructura básica de CSS
Ahora queremos dar un repaso general, aunque sin entrar en excesivos detalles sobre la estructura y sintaxis del lenguaje CSS, para definir las hojas de estilo en cascada.
Reglas CSS
Llamamos regla CSS a una combinación entre varios elementos, que permite aplicar un estilo particular a una sección específica de una página web. Vamos a describir estos elementos en detalle pero en resumen son: selectores, propiedades y valores de estilos.
A continuación encontramos las definiciones más importantes que debes conocer sobre estos elementos y luego veremos ejemplos de código.
Selectores CSS
Los selectores nos permiten determinar a qué elementos queremos aplicar ciertas reglas de estilo. Existen muchos tipos de selectores: de etiqueta, de clase, de identificador, etc. Además pueden combinarse los selectores entre sí para crear otros más complejos.
Propiedades CSS
Las propiedades indican a qué aspectos de un elemento queremos referirnos, para modificar atributos como el color, espaciados, bordes, fondos, etc.
Valores CSS
Por último, tenemos que definir los valores que queremos asignar a las distintas propiedades. Existen diversos tipos de valores como las medidas (que a su vez se pueden expresar en distintos tipos de unidades como píxeles o porcentajes), colores, direcciones de recursos (URLs), etc.
Vamos a ver un ejemplo de la combinación de estos elementos. para aterrizarlo en un poco de código.
p { margin: 10px; background-color: red; }
En el ejemplo anterior:
- «p» sería el selector, en este caso seleccionaría todos los párrafos que hay en una página web.
- «margin» y «background-color» son las propiedades, en este caso se refieren all espacio desde el elemento hacia afuera y el color de fondo.
- «10px» y «red» son los valores que estamos asignando a las propiedades. «10px» indica 10 píxeles y «red» indica el color rojo.
Comentarios en CSS
Luego tenemos otros elementos en el lenguaje como los comentarios, que son simplemente mensajes que se pueden dejar en el propio código y que no tendrán una representación alguna a la hora de renderizarse el documento HTML.
/* Esto es un comentario */
Métodos para seleccionar elementos HTML y aplicar estilos con CSS
Una vez entendidos los anteriores conceptos, podemos avanzar para conocer otros aspectos más sofisticados del lenguaje CSS, como métodos para seleccionar elementos, de modo que luego podamos aplicarles estilo.
Selección por tipo de elemento
Tenemos los selectores por tipo de elemento, que son los más sencillos de entender. Simplemente seleccionan todas las etiquetas de un tipo específico. Por ejemplo, «p» para los párrafos o «ul» para las listas desordenadas.
ul { margin: 20px; }
Selección por clase
Los selectores por clase permiten aplicar estilos a elementos que comparten un mismo valor de atributo «class» en su HTML.
<p class="destacado">texto</p> <div class="destacado">elementos</div>
Las dos etiquetas anteriores comparten una misma clase y podemos aplicarles estilos gracias al selector siguiente:
.destacado { font-size: 20px; font-weight: bold; }
Selección por ID
El selector por identificador nos permite referirnos de manera única a un elemento de la página, que tenga un atributo id determinado.
<li id="firstid">texto</li>
El selector de identificador tiene la siguiente sintaxis:
#firstid { border-bottom: 3px solid red; }
Selección por atributo
Los selectores de atributos en CSS van un paso más allá y permiten aplicar estilos a elementos basados en la presencia o el valor de un atributo.
input[type="text"] { border: 1px solid gray; }
El anterior ejemplo permite especificar un estilo CSS para los campos input de formulario, pero únicamente cuando el tipo de esos campos input sea «text».
Selección por relación entre elementos
Luego tenemos otros selectores más complejos que nos permiten seleccionar elementos dependiendo de la estructura en la que se encuentran dentro del documento HTML.
Estos son selectores un poco más avanzados y merecería la pena ver detalladamente, porque ofrecen bastantes posibilidades. El más usado es el selector de descendientes que se expresa con un espacio en blanco.
p span { color: red; }
En el selector anterior estamos indicando que queremos aplicar estilo de color de texto rojo a las etiquetas span que están dentro de párrafos.
Adicionalmente tenemos otros selectores de relación entre elementos no tan utilizados como el selector de hijos directos (`>`), el selector de hermanos adyacentes (`+`), y otros.
Pseudoclases en CSS
La pseudoclases son muy importantes también porque nos permiten aplicar estilos a elementos cuando éstos se encuentran en determinados estados.
Por ejemplo, podemos aplicar estilos a los distintos estados de un enlace.
/* Estilo base para los enlaces */ a { color: blue; } /* Estilo para enlaces visitados */ a:visited { color: purple; } /* Estilo para enlaces cuando se hace clic en ellos */ a:active { color: red; }
Pseudoelementos en CSS
Los pseudoelementos son otro de los sectores avanzados de CSS, que permiten aplicar estilos a elementos que no forman parte específica del documento, pero que podríamos utilizar para agregar contenido directamente desde CSS.
Se especifica por la sintaxis de dos puntos seguidos de otros dos puntos «::» y permiten aplicar estilos a partes específicas de un elemento, como «::before» y «::after». Vamos a verlos con un ejemplo rápidamente.
h1::after { content: "!!!"; color: gold; }
El anterior código haría que los encabezados de nivel 1 tuviesen tres signos de admiración después del contenido del propio encabezado.
Propiedades y valores más comunes utilizados en CSS
El lenguaje CSS es suficientemente amplio como para escribir libros completos en los cuales abordar la sintaxis. Ya hemos explicado las generalidades sobre los selectores, pero existe una cantidad enorme de propiedades posibles que podemos aplicar a cada uno de los elementos de la página, incluso una riquísima gama de valores disponibles.
De todos modos, para poder ilustrar este post con nuevos ejemplos, vamos a escoger varios códigos representativos de las propiedades y valores más comunes utilizados en CSS.
Propiedades de texto
Las propiedades del texto nos permiten definir estilos como el tipo de letra, el tamaño del texto, su color o atributos como su alineación.
p { font-family: Arial, sans-serif; /* Tipo de letra */ font-size: 16px; /* Tamaño del texto */ color: #333; /* Color del texto */ text-align: center; /* Alineación del texto */ }
Propiedades de color y fondo
Las propiedades de color y fondo nos permiten especificar los colores de los elementos, tanto en lo que respecta al texto como al fondo, existiendo una amplia gama de posibilidades tanto para la definición de colores sólidos como semitransparentes o incluso degradados.
En el siguiente código puedes ver definiciones de colores tanto con el nombre del color como con un valor RGB.
div { color: white; /* Color del texto */ background-color: #007bff; /* Color de fondo */ }
Propiedades de tamaño y posición
También son muy importantes las propiedades de tamaño y posición de los elementos. Con el tamaño podemos especificar dimensiones de la caja del elemento y gracias a la posición podemos indicar dónde deben pintarse.
.box { width: 100px; /* Ancho */ height: 100px; /* Alto */ position: relative; /* Tipo de posicionamiento */ top: 10px; /* Desplazamiento hacia abajo desde su posición original */ left: 10px; /* Desplazamiento hacia la derecha desde su posición original */ }
Propiedades de borde y contorno
Los elementos también pueden tener un borde en la caja cuyas propiedades las podemos definir, con muchas variantes, tanto en el color como la forma o grosor del borde, redondeando sus esquinas, etc.
.border-box { border: 2px solid #000; /* Borde sólido, de 2px de grosor, de color negro */ border-radius: 5px; /* Bordes redondeados */ }
Propiedades de espaciado
Otros aspectos muy relevantes dentro de todo lo que permite son los espaciados. Éstos se dividen entre el espacio que hay desde un elemento hacia los otros elementos de alrededor (espacio externo o margin) y el espacio que hay entre la caja del elemento y el contenido que hay dentro (espacio interno o padding).
.margin-padding-box { margin: 10px; /* Margen exterior */ padding: 20px; /* Margen interior (relleno) */ }
Propiedades de visualización y ocultamiento
Con CSS también podemos conseguir definir las propiedades de visualización de los elementos y especificar si algunos elementos no deben estar visibles.
.hidden-element { display: none; /* Oculta el elemento */ }
Propiedades de animación y transición
Entre las innumerables posibilidades de CSS, muchas de ellas que no hemos llegado a nombrar, vamos a finalizar con un ejemplo un poquito más avanzado, en el se puede apreciar el modo de especificar una animación basada en una transición.
.animate-box { width: 100px; height: 100px; background: red; transition: width 2s; /* La propiedad 'width' tendrá una transición de 2 segundos */ } .animate-box:hover { width: 200px; /* Al pasar el cursor, el ancho del elemento aumenta a 200px con una transición suave */ }
En el anterior ejemplo se define una transición para una caja. Esa transición se produce al pasar el ratón por encima, gracias a la pseudoclase «:hover». La transición se aplica en el tamaño de la anchura de la caja, cambiando de 100 píxeles de anchura en su estado normal a 200 píxeles de anchura cuando ponemos el puntero del ratón encima.
Aunque ha sido un artículo bastante extenso para presentar el lenguaje CSS, en realidad nos hemos quedado en una mínima parte de todo lo que nos permite realizar en el marco del desarrollo web. Te recomendamos estudiarlo más a fondo si te vas a dedicar profesionalmente al mundo de la creación de sitios web.