• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Configurar CSS

Log in or subscribe for free to enjoy all this course has to offer!

Habiendo pasado la primera parte del curso trabajando solo en HTML, ahora vamos a centrarnos en CSS que he querido dejar a un lado de forma deliberada. CSS no es más difícil que HTML. Complementa a HTML para ayudarte a dar formato a tu sitio web.

El primer capítulo de CSS trata la teoría que hay detrás de él: ¿Qué es? ¿Cómo es? ¿Dónde se escribe el código CSS? Aunque estos aspectos teóricos no son muy complicados, es necesario que los conozcas porque son la base del CSS. Y es lo único que os voy a pedir que os aprendáis de memoria del CSS, ya que el resto podéis encontrarlo en el apéndice.

Así que empecemos, que os veo muy impacientes.

La teoría que hay detrás del CSS

Os advertí sobre esto justo al comienzo del curso: vamos a aprender dos lenguajes. Ya hemos descubierto muchas cosas sobre HTML, aunque todavía quedan algunas cosillas que aprender (volveremos a ello dentro de algunos capítulos). Sin embargo, ha llegado la hora de centrarnos en el lenguaje CSS.

CSS ( Cascading Style Sheets) es otro lenguaje que complementa al lenguaje HTML.
¿Recuerdas cuál era su finalidad? Gestionar el formato de tu sitio web.

Breve recordatorio: ¿Para qué se utiliza CSS?

¿CSS? Es lo que te permite elegir el color de tu texto.
También te permite seleccionar la fuente usada en tu sitio web.
Y también te permite establecer el tamaño de texto, los bordes, el fondo, etc.

Y también es lo que utilizas para el diseño de tu página web. Puedes usarlo para decir: Quiero que el menú aparezca a la izquierda y que sea así de ancho. Quiero que la cabecera de mi página web esté alineada en la parte superior y esté siempre visible. Etc.

Recordemos la comparación que vimos en el primer capítulo (figura siguiente).

Con y sin CSS
Con y sin CSS

Usábamos HTML para escribir el contenido de nuestro sitio web pero era muy irregular por los bordes. CSS complementa este código para dar formato a todo el contenido y darle la apariencia que deseas.

CSS: un comienzo dudoso

Cabe destacar que el lenguaje CSS no existía en el momento en que nació la Red. De hecho solo existía HTML.
HTML fue creado en 1991 y CSS en 1996. Así que probablemente os estaréis preguntando: ¿Cómo daban formato al texto desde 1991 hasta 1996? Bueno, en realidad, solo con HTML. De hecho, había etiquetas HTML para dar formato. <font color="#aab1c3">, por ejemplo, se utilizaba para definir el color del texto.

Sin embargo, las páginas de HTML empezaron a hacerse muy complejas. Había cada vez más etiquetas de contenido y forma, lo que hacía que cada vez fuese más difícil actualizar las páginas web. Esa es la razón por la que se creó CSS.

CSS no fue adoptado de forma inmediata por los administradores de sitios web, en absoluto. Había que acabar con una serie de malos hábitos y eso llevo su tiempo. Incluso ahora, todavía podemos encontrar sitios web con etiquetas de formato HTML antiguas y obsoletas, como por ejemplo <font>.

CSS: soporte para navegadores

CSS ha cambiado, igual que HTML. Os he dicho que existían cuatro versiones principales de CSS:

  • CSS 1;

  • CSS 2.0;

  • CSS 2.1;

  • CSS 3.

El trabajo más complejo lo realizan los navegadores web: tienen que leer el código CSS y comprender cómo mostrar la página.

Aunque Internet Explorer era el navegador más común a principios del 2000, la forma en que gestionó el lenguaje CSS fue mediocre (si no rotundamente mala) durante mucho tiempo. Esto sucedió en el apogeo de la versión 6 (IE6), que desgraciadamente sigue siendo utilizada hoy en día por una pequeña proporción de usuarios (afortunadamente, esta proporción está disminuyendo).

Desde entonces, muchos navegadores han salido a la palestra y se lo han puesto difícil a Internet Explorer: Mozilla Firefox por supuesto, pero también Google Chrome. Por no mencionar el éxito de los Mac y los teléfonos iPhone con su navegador Safari. Esto dio lugar a que Microsoft respondiera y lanzara (tras un largo periodo de inactividad) IE 7, IE 8 y después IE 9. Ya se está hablando de IE 10.

Bueno, tu lección de historia es bonita, ¿pero por qué ha de interesarme a mí hoy?

¿Qué podemos aprender de todo esto? Que los navegadores no conocen todas las propiedades de CSS existentes. Cuanto más viejo es el navegador, menos sabe de las funciones de CSS.

Voy a mostraros en este curso un número de funciones de CSS que no tienen por qué funcionar en navegadores viejos. No puedo evitarlo porque es así: ningún navegador tiene un conocimiento completo de todas las funciones de CSS de ninguna manera. Si el navegador no conoce una propiedad CSS, lo peor que puede pasar es que lo ignore y no de el formato, pero la página no se quedará colgada: por tanto, seguirá siendo legible.

Os recomiendo encarecidamente que añadáis a marcadores www.caniuse.com y normansblog.de, donde se muestran tablas de compatibilidad entre funciones de HTML y CSS en varios navegadores (y sus distintas versiones). En concreto, echad un vistazo a las tablas de compatibilidad de CSS de www.caniuse.com (siguiente ilustración).

Tabla de compatibilidad de CSS de caniuse.com

Tabla de compatibilidad de CSS de caniuse.com

¿Dónde se escribe el código CSS?

Puedes elegir, ya que el código en lenguaje CSS se puede escribir en tres lugares diferentes:

  • En un archivo con la extensión .css ( es el método más recomendado);

  • en la cabecera <head> del archivo HTML;

  • directamente en las etiquetas del archivo HTML a través de un atributo style ( es el método menos recomendado).

Aunque voy a describir los tres métodos, os puedo asegurar que el primero... es el mejor.

En un archivo .css (recomendado)

Como acabo de decir, lo más frecuente es escribir el código CSS en un archivo con la extensión .css (a diferencia de los archivos HTML que tienen extensión .html). Este es el método más cómodo y flexible. Evita mezclarlo todo en un solo archivo. Voy a utilizar esta técnica en lo que queda de curso.

¡Empecemos ahora mismo! Vamos a utilizar el siguiente archivo HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Primeras pruebas de CSS</title>
</head>

<body>
<h1>Mi gran sitio web</h1>

<p>¡Hola y bienvenidos a mi sitio web!</p>
<p>Mi sitio web todavía está un poco <em>vacío</em>. ¡Pero espera un poco!</p>
</body>
</html>

Fijaos en el contenido de la línea 5, <link rel="stylesheet" href="style.css" />: esta es la línea que indica que este archivo HTML está asociado con un archivo llamado style.css que se encarga del formato.

Guardad este archivo con el nombre que queráis (por ejemplo, page.html). Hasta ahora, no hemos hecho nada especial excepto la nueva etiqueta que hemos añadido.

Ahora cread un archivo nuevo vacío en vuestro editor de texto (por ejemplo, Notepad++) y copiad este trozo de código CSS (no os preocupéis, os explicaré lo que significa más adelante):

p
{
color: blue;
}

Guardar el archivo con un nombre que acabe con .css, como por ejemplo style.css. Guardar este archivo .css en la misma carpeta que vuestro archivo .html.

En Sublime, debéis obtener un resultado similar al de la imagen siguiente.

Archivos HTML y CSS en Notepad++
Archivos HTML y CSS en Sublime Text

En el explorador de archivos, lo veréis mostrador un al lado del otro. El archivo .html a un lado y el archivo .css al otro lado, como se muestra en la ilustración.

Archivos HTML y CSS en el explorador de archivos
Archivos HTML y CSS en el finder

Ahora abrid vuestro archivo de página .html en el navegador para probarlo, como siempre. Mirad, es mágico: los párrafos se muestran en azul, como en la siguiente ilustración.

El texto está escrito en azul
El texto está escrito en azul

En la cabecera <head> del archivo HTML

Existe otra forma de utilizar CSS en los archivos HTML: esto implica insertar el código CSS directamente en una etiqueta <style> dentro de la cabecera <head>.

Así es como puedes obtener exactamente el mismo resultado con un solo archivo .html que contenga el código CSS (línes 5-10):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
color: blue;
}
</style>
<title>Primeras pruebas de CSS</title>
</head>

<body>
<h1>Mi gran sitio web</h1>

<p>¡Hola y bienvenidos a mi sitio web!</p>
<p>Mi sitio web todavía está un poco <em>vacío</em>. ¡Pero espera un poco!</p>
</body>
</html>

Probadlo y veréis que el resultado es el mismo.

Directamente en las etiquetas (no recomendado)

Con el último método hay que tener cuidado: se puede añadir un atributo style a cualquier etiqueta. Hay que insertar el código CSS directamente en este atributo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Primeras pruebas de CSS</title>
</head>

<body>
<h1>Mi gran sitio web</h1>

<p style="color: blue;">¡Hola y bienvenidos a mi sitio web!</p>
<p>Mi sitio web todavía está un poco <em>vacío</em>. ¡Pero espera un poco!</p>
</body>
</html>

Esta vez, solo el texto del primer párrafo (línea 11), que contiene el código CSS, aparecerá en color azul (siguiente ilustración).

El primer párrafo está escrito en azul
El primer párrafo está escrito en azul

¿Qué método debes elegir?

Creo que el primer método que nos has recomendado es más complicado que los otros dos. ¿Por qué nos recomiendas crear dos archivos? ¡Me iba bien con tan solo un archivo .html!

Os recomiendo encarecidamente que os acostumbréis a trabajar con el primer método porque es el que utilizan la mayoría de administradores de sitios web... ¿Por qué?

De momento, vais a realizar las pruebas en un solo archivo HTML. Sin embargo, más tarde vuestro sitio web incluirá varias páginas HTML, ¿verdad?
Imaginad esto: si ponéis el código CSS directamente en el archivo HTML, tendréis que copiar este código en todos los archivos HTML del sitio web. Y si mañana cambiáis de opinión y, por ejemplo, queréis los párrafos en color rojo en vez de azul, tendréis que cambiar todos los archivos HTML uno por uno, como se muestra en la siguiente ilustración.

El código CSS se repite en todos los archivos HTML
El código CSS se repite en todos los archivos HTML

Si trabajáis con un archivo CSS externo, solo tendréis que escribirlo una vez para toda la página web, como se muestra en la siguiente ilustración.

El código CSS se escribe una sola vez en un archivo CSS
El código CSS se escribe una sola vez en un archivo CSS

Aplicar un estilo: seleccionar una etiqueta

Ahora que ya sabemos donde poner el código CSS, estudiémoslo más detalladamente. Antes os dí un trozo de código CSS sin explicároslo:

p
{
color: blue;
}

El código CSS como éste contiene tres elementos diferentes:

  • Nombres de etiquetas: se escriben los nombres de las etiquetas cuya apariencia se quiere cambiar. Por ejemplo, si queremos cambiar la apariencia de todos los párrafos <p>, tenemos que escribir p.

  • Propiedades CSS: la página "efectos de estilo" está almacenada en propiedades. Por ejemplo, la propiedad color nos permite especificar el color del texto, y la propiedad font-size se usa para especificar el tamaño del texto, etc. Existen un montón de propiedades CSS y, como ya os he dicho, no voy a haceros que os las aprendáis todas de memoria.

  • Valores: para cada propiedad CSS, tenemos que especificar un valor. Para la propiedad color, por ejemplo, tenemos que especificar el nombre del color. Para la propiedad font-size, especificaremos el tamaño que queremos, etc.

Por lo general, una hoja de estilo CSS tiene esta apariencia:

tag1
{
property1: value1;
property2: value2;
property3: value3;
}

tag2
{
property1: value1;
property2: value2;
property3: value3;
property4: value4;
}

tag3
{
property1: value1;
}

En este fragmento de código, podemos ver las etiquetas, propiedades y valores que acabo de mencionar.

Como podéis ver, se escribe el nombre de la etiqueta (por ejemplo, h1) y se incluyen las propiedades y valores deseados entre corchetes. Se pueden incluir todas las propiedades que queráis dentro de los corchetes. Cada propiedad va seguida de "dos puntos" (":") y después el valor correspondiente. Por último, cada línea acaba con un punto y coma ";".

Voy a enseñaros una serie de propiedades en los siguientes capítulos. De momento, solo vamos a cambiar el color de los ejemplos como ejercicio.

El código CSS que hemos usado hasta ahora:

p
{
color: blue;
}

…que significa: " Quiero que todos mis párrafos estén escritos en azul.". El resultado se muestra en la ilustración siguiente.

Párrafos escritos en azul
Párrafos escritos en azul

Intentad cambiar el nombre de la etiqueta afectada por el código CSS. Por ejemplo, si escribimos h1, el título estará escrito en azul. Editad vuestro archivo style.css así:

h1
{
color: blue;
}

Ahora abrid de nuevo la página HTML (recordad que es la página HTML que se abre en el navegador, no el archivo CSS): debe aparecer el título mostrado en azul (siguiente ilustración).

Título escrito en azul
Título escrito en azul

Aplicar un estilo a varias etiquetas

Tomemos como ejemplo el siguiente código CSS:

h1
{
color: blue;
}

em
{
color: blue;
}

Significa que nuestros títulos <h1> y nuestro teto importante <em> se debe mostrar en azul. Sin embargo, es un poco repetitivo, ¿no creéis?

Afortunadamente, en CSS hay un modo de hacerlo más rápido si se le quiere dar la misma presentación a dos etiquetas. Simplemente tenemos que combinar la declaración, separando los nombres de las etiquetas con una coma, así:

h1, em
{
color: blue;
}

El resultado se muestra en la ilustración siguiente.

Título y texto importante escrito en azul
Título y texto importante escrito en azul

Esto significa: " Quiero el texto de mis etiquetas <h1> y <em> escrito en azul ".

Se pueden especificar todas las etiquetas que queremos una detrás de otra.

Comentarios en CSS

Como ocurre en HTML, se pueden incluir comentarios. Los comentarios no se muestran, simplemente se usan para especificar información destinada a vosotros, para encontrar, por ejemplo, algo que estamos buscando en un archivo CSS largo.

Y, como veréis, el archivo HTML generalmente es bastante corto y la hoja CSS bastante larga (si contiene todos los elementos de estilo de vuestro sitio web, es bastante normal). Tened en cuenta que se pueden crear varios archivos CSS para un sitio web si tenemos la necesidad de separar el código CSS de alguna forma (dependiendo de las diferentes secciones del sitio web, por ejemplo).

¿De qué estábamos hablando? Ah, sí. Comentarios en CSS.

Pues eso, incluir un comentario es muy fácil. Tenemos que introducir /* seguido por nuestro comentario, y después */ para completar el comentario.
Se pueden escribir comentarios en una o más líneas. Por ejemplo:

/*
style.css
---------
 
Por Marta Fonda
*/
 
p
{
    color: blue; /* Los párrafos serán azules */
}

Puedo utilizar comentarios en el resto del curso para daros explicaciones dentro de los mismos archivos .css.

Aplicar un estilo: class y id

Lo que os he enseñado hasta ahora tiene una limitación: significa, por ejemplo, que TODOS los párrafos tendrán la misma presentación (en este caso, estarán escritos en azul).
¿Qué tenemos que hacer para que solo algunos párrafos estén escritos de forma diferente? Pondremos el código CSS en un atributo style de la etiqueta en cuestión (esta es la técnica que os enseñé antes), pero como os he dicho, no se recomienda (es mejor usar un archivo CSS externo).

Para solucionar el problema, podemos usar estos atributos especiales que funcionan con todas las etiquetas:

  • el atributo class;

  • el atributo id.

Seamos claros desde el principio: los atributos class y id son prácticamente lo mismo. Hay solo una pequeña diferencia que os mostraré más abajo.
Por ahora, y para hacerlo más simple, solo vamos a centrarnos en el atributo class.

Como acabo de deciros, es un atributo que se puede poner en cualquier etiqueta, ya sea título, párrafo, imagen, etc.

<h1 class=""> </h1>
<p class=""> </p>
<img class="" />

Sí pero, ¿qué valor se incluye para el atributo class?

Tenemos que introducir un nombre que identifique a la etiqueta. El que queramos, siempre que el nombre empiece con una letra.

Por ejemplo, voy a asociar el atributo class introduction con mi primer párrafo (línea 12):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Primeras pruebas de CSS</title>
    </head>

    <body>
        <h1>Mi gran sitio web</h1>
        
        <p class="introduction">¡Hola y bienvenido a mi sitio web!</p>
        <p>Mi sitio web todavía está un poco <em>vacío</em>. ¡Pero espera un poco!</p>
    </body>
</html>

Una vez hecho esto, el párrafo ya está identificado. Tiene un nombre: introduction. Podremos volver a usar este nombre en el archivo CSS para decir: " Quiero que se muestren en azul solo las etiquetas llamadas 'introduction'".

Para hacer esto en CSS, introducimos el nombre de nuestro atributo class con un punto al principio, como se muestra a continuación:

.introduction
{
    color: blue;
}

Probad el resultado: solo el párrafo llamado introduction se mostrará en azul (siguiente ilustración).

Solo el primer párrafo se muestra en azul
Solo el primer párrafo se muestra en azul

¿Y el atributo id?

Funciona exactamente igual que el atributo class, con una excepción: solo se puede utilizar una vez en el código.

¿Qué finalidad tiene esto? No mucha, para ser honestos. Os sería útil si utilizarais JavaScript más adelante para reconocer ciertas etiquetas. Y ya hemos visto el atributo id en el capítulo sobre enlaces (para introducir hipervínculos). En la práctica, solo introducimos un atributo id sobre elementos que son únicos en la página, como el logo:

<img src="images/logo.png" alt="Logo del sitio web" id="logo" ></code>

Si utilizamos atributos id, al definir sus propiedades en el archivo CSS, tenemos que poner una almohadilla (#) delante del nombre de id:

#logo
{
    /* Especificad las propiedades CSS aquí */
}

No os molestéis en probarlo, funciona exactamente igual que class.

Etiquetas de propósito general

Quizás alguna vez tengamos que aplicar un atributo class (o un atributo id) a algunas palabras que originalmente no iban entre etiquetas.

De hecho, el problema de class es que es un atributo. Así que solo podemos introducirlo en una etiqueta. Si, por ejemplo, solo quiero cambiar "bienvenido" en el siguiente párrafo:

<p>¡Hola y bienvenido a mi sitio!</p>

Sería fácil hacerlo si "bienvenido" estuviera entre etiquetas, pero no lo está. Por suerte, alguien inventó... la etiqueta-sin-propósito.

De hecho, se inventaron dos etiquetas llamadas de propósito general, que no tienen un significado especial (no especifican que la palabra es importante, por ejemplo). Existe una pequeña (aunque importante) diferencia entre estas dos etiquetas:

  • <span> </span>: es una etiqueta de tipo inline, es decir, una etiqueta situada dentro de un párrafo de texto, para seleccionar solo ciertas palabras. <strong> y <em> son de la misma familia. Esta etiqueta se utiliza en medio de un párrafo y es la etiqueta que vamos a usar para darle color a "bienvenido".

  • <div> </div>: es una etiqueta de tipo block, entre la cual se encuentra un bloque de texto. <p>, <h1>, etc. son de la misma familia. Estas etiquetas tienen algo en común: crean un nuevo "bloque" en la página y, de este modo, insertan un salto de línea necesariamente. <div> es una etiqueta que se usa frecuentemente para crear un diseño, como veremos más adelante.

Por ahora, utilizaremos la etiqueta <span> en su lugar. La colocamos alrededor de "bienvenido", le añadimos un atributo class (el nombre que queráis), creamos el archivo CSS y ya lo tenemos.

<p>¡Hola y <span class="heybuddy">bienvenidos</span> a mi sitio web!</p>
.heybuddy
{
    color: blue;
}

Podéis observar el resultado en la siguiente ilustración.

La palabra bienvenido está escrita en azul
La palabra bienvenido está escrita en azul

Aplicar un estilo: los selectores avanzados

En CSS, lo más difícil es saber cómo dar en el clavo con el texto al que queremos cambiar el formato. Para seleccionar los elementos de la página que queremos cambiar, usamos los llamados selectores. Ya hemos usado varios de ellos anteriormente en este capítulo, así que vamos a resumirlos para comenzar.

Los selectores que ya conocemos

Estos selectores, como hemos visto más arriba, son los más usados con diferencia. Tenéis que aprendéroslos de memoria. Empecemos por el principio:

p
{

}

significa "quiero cambiar todos los párrafos". Después de eso, es decisión tuya lo que quieras hacerle a estos párrafos (escribirlos en azul, por ejemplo).

También vimos:

h1, em
{

}

... que significa "Todos los títulos y todo el texto importante". Hemos seleccionado dos etiquetas a la vez.

Y, por último, hemos visto cómo seleccionar etiquetas específicas a las que les hemos dado un nombre utilizando los atributos class y id:

.class
{

}

#id
{

}

¿Y sabes qué? Hay muchas más formas de seleccionar etiquetas en CSS. No vamos a verlas todas porque son muchas y algunas son bastante complejas, pero a continuación te doy algunos consejos a tener en cuenta para ser más efectivo en CSS.

Los selectores avanzados

*: selector de propósito general
*
{

}

Selecciona todas las etiquetas sin excepción. Se llama selector de propósito general.

A B: una etiqueta dentro de otra
h3 em
{

}

Selecciona todas las etiquetas <em> situadas dentro de una etiqueta <h3>. Ten en cuenta que no hay coma entra los nombres de las dos etiquetas.

Ejemplo de código HTML correspondiente:

<h3>Título con <em>texto importante</em></h3>
A + B: una etiqueta seguida de otra etiqueta
h3 + p
{

}

Selecciona la primera etiqueta <p> situada después de un título <h3>.

Ejemplo:

<h3>Título</h3>

<p>Párrafo</p>
A[attribut]: una etiqueta que tiene un atributo
a[título]
{

}

Selecciona todos los enlaces <a> que tienen un atributo title.

Ejemplo:

<a href="http://site.com" title="Descripción emergente">
A[attribute="Valor"]: una etiqueta, un atributo y un valor exacto
a[title="Clic aquí"]
{

}

Igual, pero el atributo también debe tener el valor exacto "Clic aquí".

Ejemplo:

<a href="http://site.com" title="Clic aquí">
A[attribute="Valor"]: una etiqueta, un atributo y un valor
a[title*="aquí"]
{

}

Igual, pero el atributo esta vez tiene que contener la palabra "aquí" en este valor (en cualquier posición).

Ejemplo:

<a href="http://site.com" title="Por aquí">

¡También existen otros selectores!

Aquí solo he descrito algunos selectores CSS y hay muchos más. Si queréis una lista completa, podéis encontrarla directamente en el sitio web de W3C website. Es muy completa.

Descubriremos más selectores más adelante.

En resumen

  • CSS es otro lenguaje que complementa al lenguaje HTML. Su función es dar formato a tu sitio web.

  • Tienes que tener cuidado con la compatibilidad de los navegadores con algunas funciones recientes de CSS3. Cuando un navegador no conoce una instrucción de formato, simplemente la ignora.

  • Podemos escribir código CSS en varios sitios diferentes, siendo el más recomendado crear un archivo separado con la extensión .css (por ejemplo: style.css).

  • En CSS, seleccionamos qué partes de la página HTML queremos editar y después cambiamos su presentación con propiedades CSS:

tag1
{
    property1: value1;
    property2: value2;
}
  • Hay muchas formas de seleccionar la sección de la página a la que queremos dar formato. Por ejemplo, podemos seleccionar:

    • todas las etiquetas del mismo tipo, con tan solo introducir su nombre ( h1 por ejemplo);

    • algunas etiquetas específicas, a las que hemos asignado etiquetas utilizando los atributos class o id ( .classname o #idname) ;

    • solo etiquetas situadas dentro de otras etiquetas ( h3 em).

    • ...

Example of certificate of achievement
Example of certificate of achievement