Introducción a CSS

Si el HTML es la estructura que soporta tu web, el CSS es lo que hace que luzca genial. Fácil de entender y de aplicar, con CSS puedes conseguir el «outfit» ideal para tu blog, landing page o tienda online.

¿Qué es CSS?

CSS  (siglas en inglés de Cascading Style Sheets), en español Hojas de Estilo en Cascada, es un lenguaje de marcas enfocado a definir, crear y mejorar la presentación de un documento basado en HTML.

Un documento HTML es lo que coloquialmente llamamos «una página web». Por lo tanto, podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web.

CSS fue desarrollado por W3C (World Wide Web Consortium) en 1996 por una razón muy sencilla: HTML no fue diseñado para tener etiquetas que ayuden a formatear la página. Está hecho solo para escribir el marcado para el sitio.

La relación entre HTML y CSS es muy fuerte, ya que HTML es un lenguaje de marcado (es decir, constituye la base de un sitio) y CSS construye el estilo (toda la parte estética de un sitio web).

¿Por qué utilizar CSS?

Aunque CSS no es técnicamente necesario, un sitio construido solo con HTML se vería completamente desnudo.

CSS se utiliza para definir estilos para tus páginas web, incluido el diseño y las variaciones en la visualización para diferentes dispositivos y tamaños de pantalla.

Por lo tanto, el código CSS sirve para separar la estructura de un documento HTML de su presentación.

Dicho de otro modo, el HTML actúa como el esqueleto de la web, definiendo su estructura básica, y el CSS añade toda la capa de personalización sobre el que la web define su aspecto final.

Ventajas de CSS

CSS es fácil de entender y aprender, y nos da un potente control de cómo diseñar los documentos HTML.

Antes de CSS, todo el estilo debía incluirse en el marcado HTML. Esto significa que había que describir por separado todos los fondos, los colores de fuente, las alineaciones, etc.

CSS permite estilizar todo en un archivo diferente, creando el estilo allí e integrando el archivo CSS sobre el marcado HTML. Esto hace que el marcado HTML sea mucho más limpio y fácil de mantener.

En resumen, con CSS no tienes que describir repetidamente cómo se ven los elementos individuales. Esto ahorra tiempo, hace el código más corto y menos propenso a errores.

Por ejemplo, gracias al CSS podemos definir que todas las etiquetas <H1> de un texto cambien su apariencia por aquella que definamos, cambiando colores, fuentes y añadiendo efectos sin modificar nada del contenido que sirve de base.

CSS te permite tener múltiples estilos en una página HTML, y esto hace que las posibilidades de personalización sean casi infinitas. Hoy en día, esto se está volviendo una necesidad más que algo básico.

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.

Gracias a esto, 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.

Cómo funciona CSS

CSS utiliza una sintaxis simple basada en el inglés con un conjunto de reglas que modifican la forma en que un documento nos es presentado.

Estas reglas se componen de dos elementos clave:

1. Un conjunto de propiedades con valores establecidos para actualizar la presentación del contenido HTML.
2. Unos selectores que nos ayudan a seleccionar los elementos afectados por el nuevo valor de la propiedad.

Así pues, cada regla cuenta con un selector y un bloque de declaración. Primero seleccionamos un elemento y luego declaramos lo que queremos hacer con él.

El selector apunta al elemento HTML al que queremos dar estilo. El bloque de declaración contiene una o más declaraciones separadas por punto y coma.

Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos. Una declaración CSS siempre termina con un punto y coma, y ​​los bloques de declaración están rodeados por llaves.

Por ejemplo, si queremos que todos los elementos de párrafo estén alineados en el centro y tengan un tamaño de letra de 16px y de color azul, aplicaremos esta regla:

p {
   text-align: center;
   font-size: 16px;
   color: blue;
}Lenguaje del código: PHP (php)

¿Como se aplican los estilos CSS a páginas HTML?

Para ello tenemos tres opciones:

• Estilos CSS inline
• Hojas de estilo CSS internas
• Hojas de estilo CSS externas

Dar estilo a un elemento HTML con CSS inline

La primera opción consiste en usar el atributo "style" en un elemento HTML específico, tal como se puede ver aquí:

<h1 style="font-family:Verdana; color:red">Título de nivel 1</h1>Lenguaje del código: PHP (php)

En este caso, no hay selector puesto que la regla se aplica al elemento que tiene el atributo style. Por tanto, se especifican simplemente las propiedades a aplicar al elemento en cuestión. Este tipo de reglas tienen prioridad sobre todas las reglas aplicadas por otro método.

Esta forma de incluir CSS directamente en los elementos HTML no es la mejor forma, ni la más rápida para manejar CSS, por lo que no se recomienda.

Pero puede ser útil en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.

Hojas de estilo CSS internas

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).

Por ejemplo:

<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
  p {
     color: black;
     font-family: Verdana; 
  }
</style>
</head>Lenguaje del código: PHP (php)

Los estilos CSS aplicados de esta manera se cargan cada vez que se actualiza un sitio web, lo que puede aumentar el tiempo de carga.

Además, no se puede usar el mismo estilo CSS en varias páginas, ya que está contenido en una sola página.

Sin embargo, esto también tiene sus beneficios: Tener todo en una página facilita compartir la plantilla para una vista previa.

Hojas de estilo CSS externas

Esta opción es la más recomendable y consiste en crear uno o varios ficheros con extensión «.css» en los cuales se declaran las reglas CSS.

La manera de vincular estas reglas a una página HTML consiste en referenciar el fichero .css desde esa página. De este modo se puede crear un fichero global para una web entera y usarlo en todas las páginas que se quiera.

En este caso, la declaración también se incluye dentro del elemento <head> y tiene el siguiente aspecto:

<link rel="stylesheet" type="text/css" href="estilos-1.css" />
<link rel="stylesheet" type="text/css" href="estilos-2.css" />Lenguaje del código: PHP (php)

La etiqueta <link> dispone de cuatro atributos cuando enlaza un archivo CSS:

• rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
• type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css
• href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
• media: indica el medio en el que se van a aplicar los estilos del archivo CSS.

Herencia en CSS

El nombre de hojas de estilo en cascada no es casual, expresa que los estilos se especifican con reglas que se pueden heredar de forma jerárquica.

Veamos, por ejemplo, esta regla:

body {
  font-family: Verdana;
}Lenguaje del código: PHP (php)

Aquí estamos diciendo que la etiqueta <body>, que es la que envuelve el contenido de cualquier página web, tenga un tipo de letra «Verdana».

Gracias a la capacidad de herencia de las reglas, de este modo, por defecto cualquier elemento hijo de <body> como un título o un párrafo va a «heredar» ese estilo, salvo que especifique lo contrario como, por ejemplo, en esta regla:

p {
  font-family: Arial;
}Lenguaje del código: PHP (php)

En esta última regla aplica el principio de «especificidad». En principio, se plantearía un conflicto entre la regla general de <body> con lo que dice la regla de <p>, pero se resuelve fácilmente puesto que se aplica la regla más específica y referirse a un párrafo es más específico que referirse a los elementos hijos que pueden dentro de <body>.

Igualmente, una regla con un selector p a (un enlace dentro de un párrafo) tendría precedencia sobre una regla con un selector <a>, que se refiere a un enlace a secas.

Esta herencia de estilos se aplica automáticamente y para anularla sobre otro elemento debemos crear una regla explícita con otro valor.

Puede que al principio sea un concepto un poco complicado de entender pero a la larga simplifica la creación de hojas de estilo más complejas.

Resumamos lo aprendido

• CSS fue creado para trabajar en conjunto con lenguajes de marcado como HTML. Se utiliza para estilizar una página.
• El código CSS sirve para separar la estructura de un documento HTML de su presentación.
• 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».
• Hay tres estilos de implementación de CSS, y puedes usar el método Externo para dar estilo a varias páginas a la vez.
• Los estilos se especifican con reglas que se pueden heredar de forma jerárquica y se aplican en cascada.