¿Qué es CSS?
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o
presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es
la mejor forma de separar los contenidos y su presentación y es imprescindible
para crear páginas web complejas.
Separar la definición de los contenidos y la definición de su aspecto presenta
numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien
definidos y con significado completo (también llamados "documentos semánticos").
Además, mejora la accesibilidad del documento, reduce la complejidad de su
mantenimiento y permite visualizar el mismo documento en infinidad de
dispositivos diferentes.
Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML
para marcar los contenidos, es decir, para designar la función de cada elemento
dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de
cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y
vertical entre elementos, posición de cada elemento dentro de la página, etc.
¿Qué es el CSS?
CSS es un lenguaje de programación que se utiliza para definir el estilo y el aspecto de un
documento que se ha escrito a través de un lenguaje de etiquetas, como HTML. Conocido también
como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o
incluso señalar aspectos como el espacio entre elementos para dotar de estilo a una web.
Es uno de los pilares fundamentales del desarrollo y el diseño web, como también una de las
mayores pesadillas de todo programador. Dado que es el conjunto de reglas que se indican a los
navegadores para que muestren los elementos de una página, realizar las instrucciones incorrectas
puede desembocar en la presentación de una web imposible de visualizar correctamente.
Generalmente, cada una de las reglas CSS que se emplean están compuestas por una serie de
propiedades, o properties, que poseen valores con los que se indica la presentación de todo el
contenido dictado en HTML; y, por otra parte, selectores con los que se indican qué elementos se
verán afectados por dichas propiedades y sus valores.
Todo este conjunto es el que conforma los archivos que se han de indicar a los navegadores para
determinar la apariencia de las páginas web. No obstante, lo complicado de su manejo y la
necesidad de aprender nociones de programación son algo que suele llevar a muchos a confiar en
plantillas predeterminadas u otras soluciones mucho más cómodas que hacen estas tareas
infinitamente más sencillas, aunque renunciando a la total personalización.
Para qué sirve el CSS
CSS sirve para poder dar un estilo a cualquier web y hacerlo con las reglas que se deseen. Es el
lenguaje con el que el programador y el navegador se comunican para indicar a este último cómo
ha de distribuir los contenidos de una web en base a las instrucciones indicadas en los
correspondientes ficheros.
A su vez, tiene como principal finalidad conseguir estilos diferentes y a medida de las necesidades
de cada página. Aunque, desafortunadamente, exige un amplio conocimiento de programación y
grandes nociones de lenguaje HTML también para conseguir la conexión perfecta entre estilo y
contenidos.
Ejemplos de CSS
Para dar un ejemplo de CSS, vamos a proceder con unas sencillas líneas de código para web y para
la hoja de estilo.
Primero, vamos con la web:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>CSS Ejemplo de NeoAttack</title>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<h1>Agencia de marketing digital</h1>
</body>
</html>
Ahora, seguimos indicando que el texto dentro del título H1 tendrá color rojo y un fondo azul
usando CSS:h1
background-color: blue;
color: red;
Combinando ambos, el primer conjunto llama al archivo [Link] para hacer que el H1 luzca como
hemos indicado.
Como usar css ¿?
Antes de comenzar a trabajar con CSS hay que conocer las diferentes formas para incluir estilos en
nuestros documentos HTML, ya que hay varias, cada una con sus particularidades y diferencias.
En principio, tenemos tres formas diferentes de hacerlo, siendo la primera la más común y la
última la menos habitual
Nombre Método Descripción
CSS Externo Etiqueta <link> El código se escribe en un archivo .css a parte. Método más
habitual.
CSS Interno Etiqueta <style> El código se escribe en una etiqueta <style> en el
documento HTML.
Estilos en línea Atributo style="..." El código se escribe en un atributo HTML de una etiqueta.
Veamos cada una de ellas detalladamente:
Enlace a CSS externo (link)
En la cabecera de nuestro documento HTML, más concretamente en el bloque <head></head>,
podemos incluir una etiqueta <link> con la que establecemos una relación entre el documento
actual y el archivo CSS que indicamos en el atributo href:
<link rel="stylesheet" href="[Link]" />
De esta forma, los navegadores sabrán que deben aplicar los estilos que se encuentren en el
archivo [Link]. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de los scripts),
obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa percepción visual de
que la página está en blanco y no ha sido cargada por completo.
Esta es la manera recomendada de utilizar estilos CSS en nuestros documentos.
Incluir CSS en el HTML (style)
Otra de las formas habituales que existen para incluir estilos CSS en nuestra página es la de
añadirlos directamente en el documento HTML, a través de una etiqueta <style> que contendrá el
código CSS:
<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<style>
div {
background: hotpink;
color: white;
</style>
</head>
...
</html>
Este sistema puede servirnos en ciertos casos particulares, pero hay que darle prioridad al método
anterior (CSS externo), ya que incluyendo el código CSS en el interior del archivo HTML arruinamos
la posibilidad de tener el código CSS en un documento a parte, pudiendo reutilizarlo y enlazarlo
desde otros documentos HTML mediante la etiqueta <link>.
Aunque no es obligatorio, es muy común que las etiquetas <style> se encuentren en la cabecera
<head> del documento HTML, ya que antiguamente era la única forma de hacerlo.
Estilos en línea (atributo style)
Por último, la tercera forma de aplicar estilos en un documento HTML es hacerlo directamente, a
través del atributo style de la propia etiqueta donde queramos aplicar el estilo:
<p>¡Hola <span style="color:red">amigo lector</span>!</p>
De la misma forma que en el método anterior, se recomienda no utilizarse salvo casos muy
específicos, ya que los estilos se asocian a la etiqueta en cuestión y no pueden reutilizarse. Sin
embargo, es una opción que puede venir bien en algunos casos.