Está en la página 1de 22

CURSO DE INTRODUCCIÓN AL DESARROLLO WEB: HTML  Y CSS (2/2): MÓDULO ¼

Cómo se define la presentación de una página


web
1. CSS: conceptos básicos

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a ayudar con tus primeros pasos
con CSS, las hojas de estilo en cascada.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información
sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico
sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

Gracias a vídeos anteriores, ya sabrás escribir y leer el código HTML, que se emplea para crear las páginas web.
Recuerda que, con HTML, solo definimos la estructura y el contenido de las páginas web. Ahora queremos lograr
que las páginas web tengan la presentación visual que nosotros queramos, es decir, que las páginas web se
muestren con los colores, los tamaños y tipos de letra, los bordes y los fondos, que nosotros deseamos. Para lograr
que una página web en vez de verse así, se vea de esa otra forma o que, en vez de verse así, se vea con esta otra
presentación, es necesario utilizar una tecnología adicional.

Esa tecnología es CSS, Cascading Style Sheets, las hojas de estilo en cascada. Existen diferentes versiones de
CSS, que no se llaman versiones, sino niveles. Cada nivel de CSS se construye sobre el anterior, añadiendo
funciones al nivel previo. Yo te aconsejo que te centres en aprender CSS 2.1, ya que es el que aceptan la mayoría
de los navegadores actuales. CSS3 incorpora novedades muy interesantes, pero en la actualidad, está en
desarrollo y no todos los navegadores lo aceptan.

CSS es un lenguaje muy sencillo que se compone de reglas. Cada regla está formada por uno o más selectores y
una declaración formada por un bloque de estilos, que define los estilos a aplicar para los elementos del
documento que cumplan con el selector.

En este ejemplo el selector, es el elemento de HTML, h1, por lo que esta regla se aplicará a todos los encabezados
de nivel 1 de la página web. Cada declaración de estilos se define entre llaves y está formada por parejas,
propiedad, valor.

Desde que el lenguaje de CSS se lanzó en el año 1996, el número de propiedades que posee ha ido aumentando y
aumentando y en la actualidad en la versión CSS3, está formado por casi 200 propiedades.

Al igual que pasa con el lenguaje HTML, el lenguaje CSS también está desarrollado por el World Wide Web
Consortium, el W3C, el organismo internacional que vela por el correcto desarrollo de la web. En la página del W3C
puedes encontrar mucha información sobre CSS, pero para empezar no te lo recomiendo, porque te puede
abrumar y asustar, ya que es un sitio web dirigido a profesionales y expertos, no para principiantes.

En el sitio web del W3C, puedes consultar la especificación oficial del CSS, pero para empezar a aprender lo
encontrarás muy difícil. Yo te aconsejo que utilices, como en otras ocasiones el w3schools, por un lado, tienes el
tutorial sobre CSS y, por otro lado, tienes la guía de referencia en la que encontrarás todas las propiedades de
CSS, agrupadas en diferentes grupos, como, por ejemplo, background, border and outline, color, font o margin.

Además, también te recomiendo, que consultes el artículo dedicado al lenguaje CSS, que puedes encontrar en la
Wikipedia y también te recomiendo, que leas el CSS training, un curso de aprendizaje de CSS, preparado por el
W3C, que organiza el aprendizaje en cuatro semanas, empezando por los selectores en la semana 1 y acabando
con temas avanzados en la semana 4.
 OCULTAR
Aspectos clave
En el vídeo CSS: conceptos básicos se explica qué es CSS, las versiones que existen de CSS y el esquema de
una regla de CSS.

Comprueba tus conocimientos

Ángel trabaja desarrollando webs en HTML. Hasta ahora solo trabajaba en la definición
de las estructuras y contenidos de las páginas web, pero para avanzar en su carrera,
quiere complementar su formación aprendiendo a utilizar la tecnología CSS.
Ayuda a Ángel indicándole cuáles son los elementos que componen una regla de CSS y en qué
orden se escriben.
Haz clic con el ratón y mantenlo pulsado para arrastrar los elementos hasta colocarlos en el orden correcto. A
continuación, haz clic en ENVIAR.

1. Separador : (3)
2. Valor (4)
3. Selector (1)
4. Propiedad(2)

LECCIÓN COMPLETA

¡Enhorabuena, has completado la actividad!


Con HTML solo se define la estructura y el contenido de las páginas web. Para lograr que las
páginas web tengan la presentación visual que nosotros queramos, es decir, colores, tipo y tamaños
de letra, etc., es necesario utilizar una tecnología adicional. Esa tecnología es CSS, Cascading Style
Sheets. CSS es un lenguaje que se compone de reglas. Cada regla está formada por uno o más
selectores, y una declaración formada por un bloque de estilos que define los estilos a aplicar para
los elementos del documento que cumplan con el selector. Cada declaración de estilos se define
entre llaves y está formada por parejas Propiedad, Valor. Las parejas se presentan de la forma
Propiedad: Valor.

2. CSS: cómo se usa en HTML (parte 1)

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a ayudar con tus primeros pasos
con CSS, las hojas de estilo en cascada.

En este vídeo, formado por tres partes, te voy a explicar cómo se usa CSS en HTML.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información
sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico
sergio.lujan@ua.es y a través de mi cuenta en twitter @sergiolujanmora.

CSS, Cascading Style Sheets, las hojas de estilo en cascada, es la tecnología que se emplea para definir la
presentación visual de las páginas web. Antes de ver cómo se usa CSS en una página web, vamos a aprender un
término muy importante en los sistemas informáticos, el acoplamiento, un factor que incide en la calidad de los
sistemas informáticos. Según la Wikipedia, el acoplamiento informático indica el nivel de dependencia entre las
unidades de software de un sistema informático, es decir, el grado en que una unidad puede funcionar sin recurrir a
otras. Dos funciones son absolutamente independientes entre sí, el nivel más bajo de acoplamiento, cuando una
puede hacer su trabajo completamente sin recurrir a la otra. En este caso, se dice que ambas están desacopladas.
Evidentemente, lo mejor sería un desacoplamiento total, es decir, que no hubiese ninguna dependencia entre las
partes que constituyen un sistema informático, pero esa situación es más bien imposible de lograr. Por lo tanto, al
final, lo que se intenta lograr es reducir el acoplamiento al mínimo posible. Cuanto menos dependientes sean las
partes que constituyen un sistema informático, mejor será el resultado final.

Cuando usamos CSS para definir la presentación de una página web escrita en HTML, se crea un acoplamiento
entre HTML y CSS. Como acabamos de ver, debemos de intentar reducir este acoplamiento entre estas dos
tecnologías.

En HTML se puede indicar que queremos aplicar unas reglas CSS de tres formas. Mediante el atributo style,
mediante la etiqueta style y mediante la etiqueta link. En este vídeo vamos a ver el uso del atributo style, que es la
peor opción, ya que lleva aparejado un acoplamiento máximo entre HTML y CSS, como veremos a continuación
con un ejemplo.

El atributo style, es uno de los pocos atributos de HTML, que se puede aplicar a casi cualquier elemento de HTML.
En HTML 4.01 y XHTML 1.0, el atributo style se puede aplicar a casi todos los elementos o etiquetas, excepto
base, basefont, head, html, meta, param, script, style y title. Sin embargo, en HTML5 se ha cambiado y ahora se
indica que todos los elementos pueden tener el atributo style. A continuación, te voy a mostrar cómo utilizar este
atributo, pero antes, vamos a ver las propiedades de CSS que voy a utilizar. Voy a utilizar color, para definir el color
del texto, background-color, para definir el color de fondo del texto, font-family, para definir el tipo de letra o fuente y
font-size, para definir el tamaño del texto.

Esta es la página web que voy a usar como base para enseñarte a utilizar el atributo style. Vamos a ver primero,
cómo se visualiza esta página web en un navegador, en Google Chrome, este es el aspecto que tiene la página
cuando se visualiza sin CSS. Ahora voy a empezar a añadirle propiedades visuales con el atributo style. En primer
lugar, me voy a la etiqueta body, ya que al cambiar el color del texto y el color del fondo de la etiqueta o elemento
body, voy a cambiar todo el color del fondo y todo el color de la página. Así que, le añado el atributo style y primero
voy a cambiar el color del texto, le voy a indicar este color #333 y, a continuación, voy a cambiar el color del fondo y
le voy a poner el color CCC.

La forma de indicar los colores, la tienes explicada en otro vídeo, donde se explican las distintas formas que existen
en CSS para indicar un color. Fíjate que estas dos propiedades de CSS, color y background-color, la ha separado
con un punto y coma y al final de la última propiedad también le ha puesto un punto y coma. Este punto y coma no
es obligatorio, pero es una buena costumbre ponerlo, ya que, ahora, rápidamente, podría añadir otra propiedad de
CSS y no me tendría que preocupar en ver si tengo que poner o no poner el punto y coma. Si me acostumbro a
ponerlo siempre, podré añadir una nueva propiedad rápidamente.

Bien, hemos cambiado el color del texto, le hemos puesto 333, que es un gris muy oscuro, cercano al negro y el
color del fondo de la página, le he puesto CCC, que es un gris claro, no muy claro. Vamos a guardar la página y la
visualizamos en Google Chrome y podemos ver el resultado, vemos como el color del texto ahora no es un negro
completo, sino negro un poco apagado, porque es un gris oscuro, y el color del fondo ha cambiado a gris.

Vamos a añadir más propiedades. Ahora voy a cambiar los encabezados, etiqueta h1 y h2. Primero me voy a la
etiqueta h1, le añado el atributo style y voy a cambiar lo siguiente: Primero voy a cambiar el tipo de letra o fuente y
le voy a poner Georgia. Y también, le voy a cambiar el tamaño del texto y le voy a poner 3 em, 3em, que indica que
quiero que el h1 tenga un tamaño de del texto tres veces el tamaño base actual. Voy a copiar esta propiedad, esta
propiedad de style, porque en el h2, la voy a reutilizar. Voy a usar el mismo tipo de letra Georgia, Georgia, pero
ahora voy a indicar un tamaño del texto 2 em, el doble. Y ahora copio esta propiedad y la aplico al otro h2, lo
guardo, lo ejecutó otra vez en Chrome y vemos el resultado. Vemos que ha aumentado el tamaño de los
encabezados del h1, del h2 y, además, ha cambiado su tipo de letra, su fuente. Si lo comparo con la visualización
anterior, podemos ver que el cambio es evidente.

Vuelvo al código HTML y ahora lo que voy a cambiar son los párrafos y lo que voy a indicar, es que, en mis
párrafos de texto, quiero usar un tipo de letra Arial y, por si no está disponible el tipo de letra Arial, indicó un
segundo tipo de letra Helvética y finalmente, un tipo de letra Sans Serif, que es un tipo de letra genérico. Indica la
familia de tipos de letra Sans Serif.

Voy a copiar ahora, este atributo style, para aplicárselo a los otros párrafos de texto que hay en mi página web. Lo
guardo, lo visualizo otra vez en Google Chrome y podemos ver el cambio, como ahora el tipo de letra de mis
párrafos es Arial, si lo comparo con la versión anterior, vemos que hay un cambio significativo.
Así de fácil, es usar el atributo style para indicar las propiedades de un elemento o etiqueta de una página web,
pero vemos que hay un problema importante. El problema importante, sobre todo lo hemos visto aquí en el párrafo
que me ha tocado copiar una, dos, tres, cuatro veces, la misma propiedad style, porque quería aplicar las mismas
propiedades visuales a mis cuatro párrafos de texto. ¿Qué ocurre si ahora añado más párrafos de texto? Tendré
que volver a copiar esta propiedad style a cada uno de los párrafos de texto, y ¿qué ocurre si yo ahora quiero
cambiar y, por ejemplo, ponerle un tipo de letra distinto? Pues tendría que ir párrafo a párrafo cambiándolo.

Vemos que hay un alto acoplamiento entre el CSS y el HTML, ¿esto lo podemos resolver?, ¿podemos reducir el
acoplamiento? Sí, eso lo veremos en el siguiente vídeo, donde te explicaré cómo usar la etiqueta style para indicar
los estilos de una página. No te confundas, aquí estamos viendo el uso del atributo style y en el siguiente vídeo te
voy a explicar el uso de la etiqueta style. Atributo, etiqueta, son dos cosas distintas.
 OCULTAR

Aspectos clave
Debes ver el vídeo CSS: cómo se usa en HTML (parte 1) en el que se explica el acoplamiento en un sistema
informático, las tres formas de usar CSS en HTML, el atributo style y se muestra una demostración de uso en una
página web.

Comprueba tus conocimientos

Claudia está desarrollando su propia página web para su tienda de venta de electrodomésticos,
siguiendo un manual de HTML y CSS. Su amigo Andrés, que le está ayudando, le ha comentado que
hay varias formas de aplicar reglas CSS en HTML, pero que tiene que intentar que el acoplamiento
sea el mínimo.

Selecciona, de entre las siguientes opciones, la que Claudia no debería utilizar a la hora de aplicar
CSS a su web HTML.
Elige la imagen correcta y haz clic en ENVIAR.

1.
La etiqueta <style>.

2.

El atributo style.

3.

La etiqueta <link>.
Pagina base para utilizar el atributo style asi se ve la pag.

Se le coloca el atributo para cambiar el color asi se ve la pag con el fondo gris

3. CSS: cómo se usa en HTML (parte 2)

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a ayudar con tus primeros pasos
con CSS, las hojas de estilo en cascada.

En esta segunda parte del vídeo, CSS cómo se usa en HTML, te voy a explicar cómo se usa la etiqueta style para
definir los estilos de una página web,

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información
sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico
sergio.lujan@ua.es y a través de mi cuenta en twitter @sergiolujanmora.

En el vídeo anterior vimos el uso del atributo style para definir los estilos de los elementos de una página web. En
este vídeo vamos a ver el uso de la etiqueta style.
Al usar la etiqueta style reducimos un poco el acoplamiento que existe entre HTML y CSS. Es mucho mejor que
usar el atributo style, pero no es la mejor solución, porque el código CSS sigue estando en el mismo fichero que el
código HTML.

La etiqueta style la debemos escribir en el head de la página web. En las versiones antiguas de HTML, era
necesario incluir el atributo type y la etiqueta style, para indicar el tipo de lenguaje de estilos que se usaba. La idea
era permitir el uso de distintos lenguajes de estilo, pero al final solo quedó uno, CSS. Por ello, en HTML5 se ha
simplificado y podemos escribir la etiqueta style sin el atributo type, ya que tiene definido como valor por defecto,
CSS.

A continuación, te voy a mostrar cómo utilizar este atributo, pero antes vamos a ver las propiedades de CSS que
voy a utilizar. Voy a utilizar color para definir el color del texto; background-color, para definir el color de fondo del
texto; font-family, para definir el tipo de letra o fuente y font-size para definir el tamaño del texto.

Esta es la página web que voy a usar como base para mostrarte el uso de la etiqueta style. Vamos a ver primero,
cómo se visualiza en el navegador Google Chrome. Este es el aspecto que tiene esta página web. Ahora volvemos
al código fuente, al código HTML y voy a añadir en el head de la página, la etiqueta o elemento style. Como estoy
haciendo la página web con HTML5, no le pongo el atributo type, no es necesario, aunque sí quiero, se lo puedo
indicar, type, text, barra, css. Este es el tipo mime, que identifica los ficheros de tipo CSS. La etiqueta style la tengo
que escribir el head, pero la podría haber puesto detrás del title, como la he puesto o la podría poner delante.
Siempre que esté en el head, puede estar en cualquier parte.

Yo le voy a indicar mi primera regla de CSS. Mi primera regla, es para modificar el color del fondo de la página y el
color del texto, es decir, quiero modificar la etiqueta body. Así que tengo que indicar body, y entre llaves, escribiré
la regla de CSS, que voy a poner background-color y voy a indicar este gris y el color del texto, le pongo este otro
gris, que es un poco más oscuro. Grabo la página y la visualizo en Google Chrome y compruebo que,
efectivamente, me aparece con el color del fondo gris y con el color del texto un gris muy oscuro, cercano al negro.

Vuelvo al código fuente y voy a añadir otra regla de CSS. En este caso lo que voy a cambiar es el tipo de letra de
mis encabezados, de h1y h2, y voy a usar esta sintaxis de CSS, que me permite agrupar varios elementos y
aplicarles la misma regla de CSS. Cuando escribo h1, h2, significa que la regla de CSS que voy a escribir a
continuación, se la quiero aplicar a estos dos tipos de elementos o etiquetas. Y lo que voy a indicar es el tipo de
letra de letra, la fuente, Font-family y le pongo Georgia, Georgia.

A continuación, voy a cambiar el tamaño del texto de h1 y le pongo font-size 3 em, tres veces el tamaño base y h2
le pongo el tamaño Font-size 2 em, dos veces el tamaño base. Lo comprobamos en Google Chrome y podemos
ver cómo, efectivamente, ha cambiado el tipo de letra de los encabezados, es distinto y, efectivamente, también ha
aumentado el tamaño de los encabezados del h1 y del h2, ha cambiado su tamaño.

Vuelvo al código fuente de mi página web y voy a realizar el último cambio, que es, a los párrafos de texto le voy a
aplicar otro tipo de letra, font-family, y le pongo una lista de tipos de letra, Arial, Helvética y, por último, el tipo
genérico, Sans Serif. Lo guardo, lo ejecutó, lo visualizo en Google Chrome y comprobamos, si comparamos con la
versión anterior, aquí el tipo de letra, el que se usa por defecto, es Times New Roman y aquí, vemos que ahora el
texto aparece con el tipo de letra Arial.

Como vemos, hemos separado ahora el código CSS, lo hemos separado del código HTML. Antes, con el atributo
style, el código CSS, las propiedades de CSS, estaban escritas junto con el código HTML. Ahora, aunque esté en
el mismo fichero, lo hemos podido separar. Hemos reducido el acoplamiento entre el código HTML y el código
CSS. Y además fijaos, que hemos obtenido una ventaja adicional, antes, para los distintos párrafos que tenía mi
página web, debía de copiar el atributo style en cada una de ellas. Ahora simplemente, escribo la regla una vez y
ya se va a aplicar, con este selector p, se aplicará a todos los párrafos de mi página web. Si ahora quiero cambiar
el tipo de letra y que afecte a todos mis párrafos, no tengo que ir uno a uno, como ocurría antes con el atributo
style. Ahora simplemente, vengo aquí, a esta regla de CSS y, al cambiar aquí el valor del tipo de letra, se cambiará
en todos los párrafos de mi página web.

En el próximo vídeo veremos cómo podemos usar la etiqueta link para reducir, aún más, el acoplamiento entre el
código HTML y el código CSS. La etiqueta link es la solución que debes de usar en todas tus páginas web.
 OCULTAR
Aspectos clave
En el siguiente vídeo, CSS: cómo se usa en HTML (parte 2), se explica la etiqueta style y se muestra una
demostración de uso en una página web.

Comprueba tus conocimientos

Julia está impartiendo un curso sobre los usos y herramientas de HTML. Los nuevos usos de las
etiquetas han permitido reducir el acoplamiento que existe entre HTML y CSS, además de facilitar
herramientas de cambio para los contenidos de las páginas web.

Aparte de reducir el acoplamiento que existe entre HTML y CSS, teniendo en cuenta la etiqueta style
(que es la que marca el estilo de la página web): ¿qué otras cosas que pueden ayudarnos crees nos
dirá Julia sobre los nuevos usos a la hora de diseñar nuestra página web?
Selecciona la opción o las opciones correctas y haz clic en ENVIAR.

1.

Cambiar el color de letra.

2.

Cambiar el tamaño de letra.

3.
Cambiar el color de fondo.

4.

Cambiar de idioma.

4. CSS: cómo se usa en HTML (parte 3)

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a ayudar con tus primeros pasos
con CSS, las hojas de estilo en cascada.

En esta tercera parte del vídeo, CSS cómo se usa en HTML, te voy a explicar cómo se usa la etiqueta link para
definir los estilos de una página web.

Antes de empezar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información
sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico
sergio.lujan@ua.es y a través de mi cuenta en twitter @sergiolujanmora.

En el vídeo anterior vimos el uso del atributo style y de la etiqueta style para definir los estilos de los elementos de
una página web.

En este vídeo vamos a ver el uso de la etiqueta link. Al usar la etiqueta link, reducimos el acoplamiento que existe
entre HTML y CSS al máximo, ya que el código HTML y CSS no se encuentran en el mismo fichero, sino que los
almacenamos en ficheros distintos. Además, al estar el código CSS en un fichero separado, podemos hacer que
diferentes páginas web, diferentes ficheros HTML, utilicen el mismo fichero CSS.

La etiqueta link, la debemos escribir en el head, de la página web. En las versiones antiguas de HTML, era
necesario incluir el atributo type en la etiqueta link para indicar el tipo de lenguaje de estilos que se usaba. La idea
era permitir el uso de distintos lenguajes de estilo, pero al final solo quedó uno, CSS. Por ello, en HTML5 se ha
simplificado y podemos escribir la etiqueta link sin el atributo type, ya que tiene definido como valor por defecto
CSS, además, la etiqueta link debe llevar el atributo href, en el que se indica la ruta al fichero que contiene la hoja
de estilo y el atributo rel stylesheet, que indica que es una hoja de estilo.

La etiqueta link también puede incluir otros atributos como media o title, pero no lo vamos a ver en este vídeo.

A continuación, te voy a mostrar cómo utilizar esta etiqueta, pero antes vamos a ver las propiedades de CSS que
voy a utilizar. Voy a utilizar color, para definir el color del texto, background-color, para definir el color de fondo del
texto, font-family, para definir el tipo de letra, la fuente, y font-size, para definir el tamaño del texto.

Partimos del ejemplo que hicimos en el vídeo anterior, en el que explicaba el uso de la etiqueta style. En este
ejemplo teníamos esta página web sencilla y en el código HTML añadíamos la etiqueta style para incluir la hoja de
estilo en cascada, las propiedades para definir la presentación visual.
Lo que vamos a hacer, en este vídeo, es transformar esto en un fichero externo, vamos a almacenar la hoja de
estilo en un fichero aparte. Así que primero, lo que hago es, cortar este código, creo un fichero nuevo y pego el
código CSS. En el fichero CSS que vamos a almacenar de forma separada, no necesito la etiqueta style, porque
este fichero CSS va a ser exclusivo de CSS. Lo almaceno en el mismo directorio donde tengo almacenado el
código HTML y, por ejemplo, lo voy a llamar miestilo.css. fijaos como para almacenarlo con la extensión .css, el
editor, Notepad++, me detecta la sintaxis del lenguaje y me lo colorea. Ahora vuelvo al fichero HTML y donde antes
tenía la etiqueta style, añado la etiqueta link, primero le pongo el atributo href y pongo la ruta de acceso al fichero
CSS, como esta en el mismo directorio no hace falta que ponga una ruta, simplemente pongo el nombre del
fichero, miestilo.css.

A continuación, voy a poner el atributo rel stylesheet y el atributo type, que he indicado en el vídeo, que sí estamos
trabajando en HTML5, como es en este ejemplo, no hace falta que lo pongamos, pero lo podemos poner si
queremos, text barra css y cierro la etiqueta, lo guardo y, ahora mismo, tengo dos ficheros el fichero HTML y el
fichero CSS. Con esta estrategia logro reducir el acoplamiento al máximo, por supuesto, no podemos hacer que
haya un total desacoplamiento, tiene que haber algún punto de conexión entre el código HTML y el código CSS y,
ese punto de conexión, lo hemos reducido a la mínima expresión, a esta etiqueta link.

Vamos a probar esta página. Me voy al menú ejecutar, launch in Chrome y vemos que, efectivamente, aparece la
página web con los estilos que habíamos definido previamente. Para convencernos de que realmente se está
cargando esta hoja de estilos, vamos a hacer un cambio, por ejemplo, voy a cambiar el color de fondo y lo voy a
poner a rojo, f 00. Almaceno el fichero CSS, me vuelvo al navegador y recargo la página y, efectivamente, ha
cambiado el color al rojo. Por tanto, sí que esta página HTML está interpretando correctamente esta etiqueta link y
está cargando el CSS que tenemos en un fichero aparte. Ahora, yo podría hacer 5, 10, 50 o 1000 páginas y todas
podrían usar el mismo CSS, lo único que tendría que hacer es, en cada una de mis páginas, poner la etiqueta link,
que cargue el mismo fichero CSS y si quiero hacer un cambio en todas las páginas de mi sitio web, lo único que
tengo que hacer es cambiar, introducir ese cambio, en este fichero, en un único fichero.

Y con esto termina la tercera parte de este vídeo. En estos tres vídeos, hemos visto las tres formas que existen de
usar un CSS en HTML y hemos visto que la mejor forma es utilizar la etiqueta link.
 OCULTAR

Aspectos clave
Debes ver el vídeo CSS: cómo se usa en HTML (parte 3) en el que se explica la etiqueta &lt;link&gt; y se
muestra una demostración de uso en una página web.

Comprueba tus conocimientos

Guillermo trabaja en el departamento de atención al cliente de una gran empresa de


software. En los últimos meses ha recibido un gran volumen de preguntas sobre el
uso de HTML y cuál de las tres etiquetas es más recomendable utilizar para reducir el
acoplamiento entre HTML y CSS, por lo que ha decidido escribir la respuesta en
Twitter para resolver todas las dudas que se planteen.
Indica cuál es el mensaje que va a poner Guillermo.
Arrastra la mejor respuesta dentro del cuadro. A continuación, haz clic en ENVIAR.

HTMLCorp.

Arrástrala aquí
Con la etiqueta “style” reducimos al máximo el acoplamiento que existe entre HTML y CSS.

Con la etiqueta “link” reducimos al máximo el acoplamiento que existe entre HTML y CSS.

Con el atributo “style” reducimos al máximo el acoplamiento que existe entre HTML y CSS.

5. CSS: selectores básicos (1)

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a explicar los selectores básicos de
CSS.

CSS es un lenguaje muy sencillo, que se compone de reglas, cada regla está formada por uno o más selectores y
una declaración formada por un bloque de estilos, que define los estilos a aplicar para los elementos del
documento que cumplan con el selector, en este ejemplo, el selector es el elemento de HTML, h1, por lo que esta
regla se aplicará a todos los encabezados de nivel 1 de la página web. Cada declaración de estilos se define entre
llaves y está formada por parejas propiedad valor, en este ejemplo, a los elementos de tipo a h1, se le aplican dos
propiedades. En la primera propiedad, se indica que el color del texto debe ser rojo, en la segunda propiedad, se
indica que el color de fondo debe ser verde.

¿Qué tipos de selectores existen en CSS? Los selectores de CSS3 están definidos en el documento Selectors
Level Three, una recomendación del W3C de septiembre de 2011. La lista de selectores definidos en CSS3 es
enorme. Como podemos ver, CSS3 incluye los selectores definidos en CSS1 y CSS2. En este vídeo vamos a ver
los selectores básicos definidos en CSS1 y CSS2. En los siguientes vídeos, veremos los selectores avanzados y
las novedades que incorpora CSS3.

En este vídeo voy a utilizar el siguiente fragmento de código HTML para explicarte el uso de los selectores de CSS.
A la derecha del código HTML te mostraré el código CSS y el resultado final, la visualización del código HTML y del
código CSS en un navegador web.

Existen tres selectores básicos fundamentales, de tipo, de clase y de identificador. Veamos el primer selector, el
selector de tipo.

El selector de tipo, también es conocido como selector de elemento o selector de etiqueta. Este selector hace
referencia a todos los elementos o etiquetas de un mismo tipo. Para seleccionar una etiqueta, hacemos referencia
a esa etiqueta en nuestro código CSS. En este ejemplo, se han definido dos reglas de CSS. En la primera el
selector es h1 y se aplica al único encabezado de nivel 1 que hay en el código HTML. En la segunda regla, el
selector es span y se aplica a todos los span que hay en el código HTML. Como puedes observar, es un selector
poco específico y se aplicará a todas las etiquetas de ese tipo en el documento en el que se incluya este código
CSS.

El segundo, es el selector de clase. El atributo class es un atributo global común a todas las etiquetas HTML.
Permite especificar las clases que se aplicarán a un determinado elemento. En CSS los nombres de las clases
vienen precedidos por el carácter punto. Es imprescindible que recuerdes incluir este carácter en CSS y no lo
incluyas en el atributo class de las etiquetas en HTML. Un error muy común en los primeros desarrollos de
cualquier persona.

En el ejemplo, puedes ver cómo se aplica la clase punto box a la etiqueta div. Este tipo de selector se aplicará a
todas las etiquetas cuyo atributo class lo incluya. Esto se ilustra en el ejemplo, mediante la clase punto bold,
aplicada a varios elementos distintos, dos etiquetas span y un enlace.

Como puede que ya sepas, el atributo class permite múltiples valores separados por espacio, de forma que
podemos aplicar multitud de clases a una misma etiqueta. Esto favorece la reutilización de reglas, en lugar de tener
que repetir ciertas reglas una y otra vez. Por ejemplo, puedes ver como la última etiqueta span, aplica a dos clases,
una para el estilo de fuente y otra para el color.

Los selectores se pueden combinar entre sí, veamos un ejemplo sencillo. En este ejemplo, la regla CSS combina
span, un selector de tipo, con punto bold, un selector de clase. Esta combinación se aplica solo a las etiquetas
span que tengan la clase punto bold.

El tercer selector, más específico y no por ello menos importante, es el selector de identificador. Se diferencia del
selector de clase en dos aspectos fundamentales, primero el carácter inicial en el código CSS es la almohadilla en
vez del punto, segundo, se aplica a aquellas etiquetas cuyo atributo id coincida con el texto tras la almohadilla.
Recuerda que el atributo id se supone único en el documento HTML, por tanto, una regla de identificador solo se
aplicaría una vez en toda una página web. Sin embargo, el valor de un id, se puede repetir entre diferentes páginas
web.

Es posible utilizar la combinación de selectores para seleccionar etiquetas anidadas. Para aplicarles una regla
exclusivamente a las etiquetas span, anidadas a la etiqueta div del ejemplo, con todo lo aprendido hasta ahora, no
nos quedaría más remedio que modificar el código HTML. Sin embargo, si utilizamos combinaciones de selectores,
podemos aplicar la regla solo a las etiquetas span que estén anidadas en etiquetas div, mediante la regla div,
espacio en blanco, span o a todos los hipervínculos que estén en el interior de una etiqueta span, mediante spam,
espacio en blanco, a.

Como ves, para anidar selectores, se especifican uno tras otro separados por espacios en blanco, siempre
empezando por el elemento con menor nivel de anidamiento en el documento HTML.

En este otro ejemplo, te muestro cómo aplicar estilos a todas las etiquetas span que estén anidadas en etiquetas
con la clase punto box. Del mismo modo que en el ejemplo anterior, especificamos, en primera instancia, el selector
de clase punto box y después, separado por el espacio en blanco, el selector de etiquetas span. El resultado final
del ejemplo anterior, también se puede lograr, si se usa el selector de identificador myDiv, en vez de la clase punto
box.

Y ahora, al ejemplo anterior, le añado otra regla de CSS. El ejemplo, muestra cómo aplicar un estilo a las etiquetas
span dentro de una etiqueta identificada como myDiv y aplicar una regla a todos los enlaces que estén anidados en
una etiqueta con el identificador mySpan, fácil, ¿no?

Como ya sabes, la reutilización y la reducción de códigos, son primordiales para asegurar un fácil mantenimiento
del código. Para aplicar el mismo estilo a diferentes reglas, no es necesario repetir código, puedes separar las
reglas por comas y especificar el estilo una sola vez.

En este ejemplo, se indica que los elementos con el identificador myDiv y mySpan se deben presentar con el color
verde. Estas dos reglas, se pueden agrupar en una sola. Los dos selectores se separan con una coma, por
supuesto, puedes agrupar reglas de cualquier tipo de selector.

Ahora te invito a que veas la segunda parte de este vídeo. Este vídeo está basado en los vídeos CSS selectores y
CSS selectores avanzados, de Guzmán Fernández, que puedes encontrar en estas direcciones de YouTube.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información
sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico
sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora. Muchas gracias por tu atención.
 OCULTAR

Aspectos clave
Debes ver el vídeo CSS: selectores básicos (1) en el que se muestran diferentes tipos de selectores de CSS, como
el selector de tipo (elemento o etiqueta), el selector de clase y el selector de identificador, se explica la selección de
etiquetas anidadas y la agrupación de reglas.

Comprueba tus conocimientos


David acaba de empezar a trabajar en una empresa de creación y diseño de páginas web. Aún está
aprendiendo cómo utilizar las herramientas que ofrece HTML. Ahora mismo está aprendiendo a
utilizar los selectores básicos fundamentales.

Ayuda a David a identificar cuál es la finalidad de cada uno de estos selectores.


Selecciona cada una de las preguntas para ver sus posibles respuestas. Responde a cada pregunta y haz clic
en ENVIAR.

1 Hace referencia a todos los elementos de un mismo tipo.

A clase
B Identificador
C CSS
D tipo

2 Atributo global común a todas las etiquetas HTML.

A clase
B Identificador
C CSS
D tipo

3 No es un selector básico.

A clase
B Identificador
C CSS
D tipo

4 Se aplica a aquellas etiquetas cuyo atributo ID coincida con el texto tras #.

A clase
B Identificador
C CSS
D tipo

6. CSS: selectores básicos (2)

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a explicar los selectores básicos de
CSS.

En este vídeo, vamos a seguir viendo diferentes tipos de selectores que existen en CSS. El selector universal se
representa mediante un asterisco. Cuando se incluye en una regla, el selector universal selecciona todos los
elementos. ¿Cuándo lo utilizarás? Probablemente nunca, al menos, yo desaconsejó su uso. Es difícil tenerlo bajo
control y puedes estar aplicando estilos sin darte cuenta.

En muchas situaciones el selector universal se puede omitir. El selector universal se aplica a veces, para inicializar
todos los elementos de una página web a un mismo estado. En este ejemplo, el margen y el relleno de todos los
elementos, se establece en 0 píxeles.
Habrás comprobado, que algunos enlaces cambian de color cuando ya estuviste en esa página, cuando los
mantienes pulsados o incluso se modifica su estilo, cuando pasas el ratón por encima de ellos. Gracias al
carácter :, vamos a ver cómo hacer todo esto.

Para ver el funcionamiento de estos selectores, vamos a utilizar un ejemplo nuevo. El estado :link, solo aplicable a
enlaces, modifica el estilo por defecto de aquellos hipervínculos no visitados a los que se aplique la regla. En este
caso, suponemos que tanto índice, como visitado, son enlaces visitados. El segundo, porque se navegó a la página
visit.html, en algún momento y el primero, porque la página en la que nos encontramos es index.html. Puede ser
una buena idea que hagas unas pruebas si no te quedó claro.

El estado :visited, se aplicará a los hipervínculos visitados. Es el selector complementario a : link. Por tanto, en este
ejemplo, esta regla de CSS, se aplica a los dos primeros enlaces.

El estado : hover, modifica el estilo cuando el puntero del ratón, está sobre un elemento al que se le aplica la regla.
Como puedes ver en el ejemplo, todos los enlaces tienen el estilo aplicado, pero solo lo muestra el enlace visitado,
puesto que tiene el puntero sobre él. Es posible utilizar : hover, en todos los elementos, no solo en los
hipervínculos. En caso de enlaces, es muy importante declarar :hover, después de : link y : visited. En caso de que
existan, para que : hover funcione correctamente.

Ten en cuenta, que los dispositivos táctiles como tabletas o teléfonos inteligentes, smartphones, no tienen la
capacidad de situar el puntero sobre un elemento, sin pulsarlo. Utiliza con cabeza todo esto, por ejemplo, a la hora
de mostrar u ocultar menús o tu página no será accesible a multitud de usuarios.

El estado :active, se aplica a enlaces que están siendo pulsados, normalmente no mantenemos pulsado un
hipervínculo, puesto que su principal utilidad es la navegación, pero es posible definir enlaces sin destino para
casos particulares como pueden ser los menús desplegables. Al pulsar, se activa el estilo definido por esta regla de
CSS y al dejar de pulsar se deja de aplicar la regla.

De nuevo, es necesario declarar : active después de : hover, para que tenga efecto. Que : active y : hover, tengan
los mismos estilos puede ser una solución elegante al problema de accesibilidad desde tabletas y teléfonos
inteligentes, que te comentaba hace un momento. El único inconveniente es que solo servirá para hipervínculos,
puesto que : active, solo se aplica a este tipo de elementos.

Puedes utilizar : link, :visited y : active solos, para aplicarlos a todos los enlaces de la página, aunque es más
común verlos acompañados del selector a. También, es posible utilizarlos en combinación con clases e
identificadores, así como en anidamientos, del mismo modo que con los selectores básicos.

Así como los enlaces tienen selectores particulares, los elementos de formulario, que aceptan entradas por parte
del usuario, campos de texto, listas desplegables, etcétera, también tienen un selector que puede resultar
interesante, para destacar el elemento que está activo, o siendo rigurosos, el elemento que tiene el foco. Este
selector también se puede aplicar a los enlaces, ya que pueden recibir el foco desde el teclado.

Como habrás podido comprobar, he vuelto a cambiar el código HTML para este ejemplo. Puesto que necesito
campos de formularios. Para mejorar la experiencia del usuario, puede ser una buena práctica resaltar los campos
de formulario que están siendo utilizados en cada momento. Para ello utilizamos el selector : focus, como en el
ejemplo. Puedes ver, cómo se destaca el campo que está activo.

Ahora te invito a que veas el vídeo CSS selectores avanzados, en el que se explican algunos de los selectores
avanzados que puedes emplear para crear reglas de CSS más complejas. Este vídeo, está basado en los vídeos
CSS selectores y CSS selectores avanzados, de Guzmán Fernández, que puedes encontrar en estas direcciones
de YouTube.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información
sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico
sergio.lujan@ua.es y a través de mi cuenta en twitter @sergiolujanmora.
Recuerda que este vídeo forma parte del curso Introducción al desarrollo web que está disponible en la dirección
idesweb.es. Muchas gracias por tu atención.
 OCULTAR

Aspectos clave
Debes ver el vídeo CSS: selectores básicos (2) en el que se muestran diferentes tipos de selectores de CSS: el
selector universal (*) y las pseudoclases de estado (link, visited, hover, active, focus).

Comprueba tus conocimientos

Patricia quiere utilizar de forma independiente el pseudo-selector de CSS :link en todos los enlaces
de su página. No obstante, Patricia quiere saber más sobre las características de este selector y
tiene las siguientes dudas.

Ayúdale a resolverlas seleccionando la opción correcta.


Responde a todas las preguntas y haz clic en ENVIAR.

1. 1 / 4

Este selector no puede utilizarse sólo.

SÍ NO

2. 2 / 4

Suele ir acompañado del selector a de la forma a :link.

SÍ NO

3. 3 / 4

Nunca se utiliza acompañado de clases e identificadores.

SÍ NO

4. 4 / 4

Puede usarse en anidamientos y con selectores básicos.

SÍ NO
7. CSS: colores

Hola, soy Guzmán Fernández García, desarrollador web, y en este vídeo que forma parte del curso Introducción al
desarrollo web, voy a explicar los colores en HTML y CSS.

Puedes encontrarme en mi web guzmanfernandez.com y en twitter como pie izquierdo. También puedes contactar
conmigo a través de mi correo electrónico guzman.fg@gmail.com.

¿Cómo definimos el color? No divagaré sobre la definición de color, hablaré sobre el método que utilizamos
en HTML y CSS para definir colores.

En arte, diseño y otras especialidades, se utilizan varios métodos para describir el color. Algunos de los más
conocidos son CMYK, HSV o HSB y el que utilizaremos para HTML y CSS, RGB. Cada uno tiene sus ventajas y
desventajas, pero el análisis se escapa al objetivo de este vídeo.

Según Wikipedia, la descripción RGB de un color, hace referencia a la composición del color según la intensidad de
los colores primarios con que se forma rojo, verde y azul, en inglés, red, green, blue. Es un modelo con el que es
posible representar un color, mediante la mezcla por adición, de los tres colores luz primarios.

El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los
mismos valores RGB, pueden mostrar colores notablemente diferentes en distintos dispositivos que usen este
modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar
considerablemente. Los colores son importantes, pero no pierdas mucho tiempo en buscar un color concreto,
porque cada usuario verá uno distinto al que tú ves. La idea es buscar una paleta o combinación de colores
armoniosa y con buenos contrastes. Por paleta o combinación de colores, me refiero a dos, tres o cuatro colores.
No necesitarás más para definir el esquema de color de tus diseños.

En HTML y CSS tenemos tres formas básicas de representar colores en RGB, por nombre de color, color name,
algo tan sencillo como elegir uno de los 147 nombres de colores en inglés que es capaz de interpretar un
navegador. 16 básicos y 130 variantes.

Especificando los valores de cada canal, rojo, verde y azul, con valores entre 0 y 255 y en el estricto orden que
marcan las siglas rojo, verde y azul. En el ejemplo te muestro como un valor cero para los tres canales, da como
resultado el negro y un valor de 255 para todos los canales, especifica el color blanco. Puede que al principio te
resulte extraño, que la suma de todos los colores sea blanco y la ausencia de color negro, pero estamos trabajando
con un modelo aditivo, luz directa, que funciona de forma contraria al sustractivo, luz reflejada, al que podemos
estar acostumbrados a observar en tintas o pinturas.

O en hexadecimal, probablemente la forma más utilizada, que funciona de forma parecida a RGB. Las dos
diferencias fundamentales con el primer esquema, son que, en lugar de encerrar entre RGB y paréntesis, los
valores separados por comas dichos valores se especifican tras el símbolo #, uno tras otro, sin espacios ni
caracteres separadores y que en lugar de ser un número en base decimal entre 0 y 255, están en base
hexadecimal. No te preocupes, no es necesario dominar la base hexadecimal, aunque terminarás por
acostumbrarte. De nuevo, en el ejemplo, te muestro cómo codificar el blanco, #, seis efes y el negro, # seis ceros.
Puedes observar que existe una versión reducida con solo tres dígitos, en este caso, cada dígito representa una
pareja cuando ambos dígitos son iguales, como es el caso del blanco, # tres efes y el negro, # tres ceros.

Los colores que hemos visto, se pueden aplicar a distintas partes de nuestro modelo de caja. A la fuente, texto,
dándole valor al atributo color. Al fondo, especificando el código de color en el atributo background-color o
modificando el valor del atributo border-color, al borde. En este ejemplo puedes ver el uso de los tres
simultáneamente.

Puedes ver más sobre colores en el vídeo: colores, novedades en CSS3, disponible en la quinta semana del curso
idesweb.
En resumen, hemos visto cómo utilizar los color names y RGB, tanto en decimal como en hexadecimal, para darle
un poco de color a la web. Tienes la posibilidad de cambiar los colores de fuente, mediante el atributo color, de
fondo con background-color y el de los bordes gracias al atributo border-color.

Para terminar, te dejo dos consejos que espero te resulten útiles. Aprende utilizar el modelo RGB aunque no lo
utilices en tu codificación. Puede que no sea el más intuitivo, pero te encontrarás con multitud de diseños que
hacen uso del modelo y siempre es interesante saber utilizarlo. Con esto, no pretendo decirte que aprendas la
codificación de los colores de memoria, ni mucho menos, solo que te familiarices con ella. Utiliza la notación
decimal o la hexadecimal, pero intenta evitar, en la medida de lo posible, mezclarlas en el mismo desarrollo, lo
agradecerás cuando quieras realizar modificaciones sobre el código más adelante. Recuerda que el poder de la
web reside en la accesibilidad universal de la misma. Haz uso de alguna utilidad, como el Planning Colors Checker
para Firefox, para validar el contraste de colores de frente y fondo y asegurar un mínimo de accesibilidad en tus
páginas.

Puedes consultar los nombres de los colores en la página de la w3schools. También puedes obtener los códigos de
color en RGB y hexadecimal, en colorpicker.com. Tienes disponible Color Contrast Checker, una utilidad muy fácil
de usar, para comprobar el contraste de color de frente y fondo.

Y como no todo va a ser trabajo, ¿qué tal si jugamos un poco? Te presento color.method.ac. Yo obtuve un siete y
medio y estoy medio cegato. Te invito a que superes mi marca.

Puedes hacerme llegar cualquier duda a través de mi correo electrónico o de mi cuenta en twitter. Recuerda que
este vídeo forma parte del curso Introducción al desarrollo web, disponible en la dirección idesweb.es.
 OCULTAR

Aspectos clave
Debes ver el vídeo CSS: colores en el que se explican los métodos para definir colores, los nombres de los colores,
el método RGB (Red, Green, Blue), la notación de los colores en decimal, porcentaje y hexadecimal y el uso de los
colores en CSS mediante las propiedades color, background-color y border-color.

Comprueba tus conocimientos

Marta contrató un servicio de diseño web hace un par de años, ahora que se ha formado y puede
hacerlo ella misma quiere cambiar su web a colores más actuales. Está pensando en su público,
quiere hacerla más atractiva pero sin perder su esencia, ya que podría ser contraproducente realizar
un cambio radical y que perder su identidad. Está analizando cómo realizar estos cambios en CSS.

Indica, de las siguientes afirmaciones cuáles son verdaderas a la hora de realizar estos cambios.
Activa los interruptores de las opciones correctas y haz clic en ENVIAR.

1. Los espacios de color pueden variar según el dispositivo.


2. Se pueden representar en caracteres decimal y hexadecimal a la vez.
3. Debes utilizar, cuantos más colores mejor.
4. En CSS los colores se representan mediante "color name".

8. CSS: selectores avanzados

En este vídeo que forma parte del curso Introducción al desarrollo web, voy a explicar los selectores CSS
avanzados. Puedes encontrarme en mi web guzmanfernandez.com y en twitter como pie izquierdo. También
puedes contactar conmigo a través de mi correo electrónico guzman.fg@gmail.com.

En el vídeo selectores CSS, vimos los selectores básicos, otros selectores, como los selectores de enlace o su
estado, la combinación de selectores y la agrupación de reglas.
CSS2 incluyó algunas mejoras para realizar selecciones, como las que veremos a continuación. A menudo
pretendemos seleccionar cierto nivel de anidamiento, pero las reglas se nos van de las manos. En el ejemplo,
vemos cómo seleccionar los elementos de una lista desordenada, pero, ¿por qué se seleccionan todos? Como
verás, todos los elementos cumplen la regla, están dentro de una etiqueta ul y son etiquetas li.

En un primer momento se nos ocurriría, que la lista anidada cumple con el esquema y que dándole un identificador
a la principal, se soluciona el problema. La idea es buena, pero observa que sigue cumpliéndose la regla. Dentro
de la lista desordenada con identificador lista, hay cinco ítems, lo cambio de color para que se vea mejor, puedo
parecer pesado, pero no te imaginas la cantidad de veces que he visto casos como éste.

¡Vale, vale! ya lo solucionamos. Si entre el selector de la etiqueta superior, en este caso, a la lista con identificador
lista y el de las etiquetas anidadas, incluimos el carácter mayor que, solo se seleccionarán los elementos li, que
sean descendientes directos. Desafortunadamente, ni siquiera en CSS3, existe el carácter menor que, para
seleccionar etiquetas padre.

Seguro que te encontrarás con casos en los que quieras aplicar estilos a ciertos elementos, dependiendo de si
tienen otro elemento junto a ellos o no. En el ejemplo, puedes ver cómo funciona el selector +, entre dos
elementos. En este caso, se aplicarán los estilos a todos los elementos span, que estén tras una imagen con clase
new. ¡Ojo! Solo los inmediatamente contiguos.

En este caso, no se aplicaría el estilo a la palabra php, ya que no sucede inmediatamente a una imagen con clase
new. Puede que quieras destacar el primer elemento de una lista y ya que nos ponemos, por qué no poder darle
estilos a la primera línea de un párrafo o a la primera letra de un texto.

El selector :first-child, de forma conjunta a un elemento, en el ejemplo li, aplica la regla al primer elemento de ese
tipo, que además sea el primero anidado, en este caso en la etiqueta ul. En este otro, como el primer li con clase
letra, no es el primero de su grupo, no se aplicará el estilo.

Sí, hay un selector last-child, pero solo a partir de CSS3 y entrar ahí sería salirnos de tema. Siguiendo con los
primeros de la fila, el selector : first-letter, es bastante más intuitivo. Se aplica a la primera letra del texto, del
elemento seleccionado. Puede servirte, por ejemplo, para simular letras capitales.

Por último, el selector : first-line, se aplica a la primera línea del texto del elemento seleccionado. En el ejemplo, he
forzado el salto de línea, puesto que no tengo espacio para más, sin embargo, en los códigos de ejemplo
disponibles, he incluido un párrafo lo suficientemente largo, como para que tenga más de una línea. Efectivamente
con : first-line, solo se aplicará a la primera línea de este párrafo, no es necesario insertar saltos de línea.

Y, ¿por qué no utilizar otros atributos, propios de ciertas etiquetas, para darles estilos? Vamos a verlo.

El código HTML que utilizaré en esta parte, muestra tres párrafos con un enlace cada uno, cuyos diferentes
atributos espero ya te sean familiares.

Si especificamos entre corchetes el nombre de un atributo, en este caso title, los estilos se aplicarán a todos los
elementos que tengan un atributo title, no importa cuál sea su valor. Si quieres especificar más, puedes igualar el
atributo a una cadena de texto. En este caso escribimos title=Buscador. ¡Ojo! Distingue mayúsculas de minúsculas,
si escribiésemos buscador con b minúscula, no se aplicarían los estilos al enlace, además, si en la cadena que vas
a especificar, aparecen caracteres no alfanuméricos, es muy posible que necesites entrecomillarla, por ejemplo, si
quisiéramos hacer referencia a todos los enlaces vacíos, a aquellos cuyo atributo href, es igual la tablilla, o a los
enlaces cuyo atributo title, fuera igual a la cadena, página del curso. Necesitaríamos especificar, tanto la tablilla,
como la frase entre comillas. Las comillas no molestan, por lo que te recomiendo utilizarlas siempre.

Para seleccionar elementos cuyo atributo empieza por una palabra, como puede ser top, en el caso de los
identificadores de los enlaces del ejemplo, añadimos la barra vertical, precediendo al símbolo igual. En la
distribución del teclado en español, puedes encontrar este carácter en la tecla 1. El valor del atributo del elemento
debe ser la palabra completa, como en el caso que vimos anteriormente sin la barra vertical, o seguida del guion,
como en el ejemplo.
Y uno más, mediante la virgilla o tilde de la ñ, en la tecla 4 para teclados con distribución en español, o atl+126 de
tu teclado numérico, podemos especificar que el atributo contenga una palabra, esta vez el valor del elemento sí
puede estar separado por espacios. En el ejemplo, destacamos todos los enlaces cuyo atributo title contenga la
palabra curso.

Para que los selectores de tipo atributo funcionen correctamente en Internet Explorer 8, es necesario que declares
doctype. No sé si te resultará interesante destacar las palabras o textos en otro idioma, pero también es posible
centralizar este comportamiento, sin necesidad de trabajar con clases.

:lang y entre paréntesis el código del idioma según la ISO 639, selecciona todas las etiquetas cuyo valor del
atributo lang, coincida con la especificada entre paréntesis, como en el ejemplo. Ten cuidado, ya que algunos
desarrolladores incluimos el idioma principal de la página en la etiqueta HTML, Si le das estilos a este idioma, se
aplicará a todos los elementos de tu documento HTML. ¿Cómo?, ¿no conoces la ISO 639? No te preocupes, te
dejo un enlace al final del documento.

Mediante CSS, también es posible incluir contenido antes o después de la etiqueta seleccionada. Algo no muy
recomendado, ya que el contenido y el estilo, deberían separarse, pero bien utilizado, ese contenido tiene más que
ver con estilos que con contenido en sí y consigue que esta regla tenga sentido. Por ejemplo, voy a incluir el texto
nuevo detrás de todos los enlaces cuya clase sea new y dep delante del enlace cuya clase sea old.

Te presento el selector universal. Sí, algo tan sencillo como un asterisco, puede arruinar tu hoja de estilos. Cuando
se incluye en una regla, el selector universal selecciona todos los elementos, sin mirar caras. ¿Cuándo lo
utilizarás? Probablemente nunca, al menos yo desaconsejó su uso, es difícil tenerlo bajo control y puedes estar
aplicando estilos sin darte cuenta.

Algunos autores lo utilizan para que todos los navegadores empiecen sin estilos o para forzarle unos. A esta
técnica se le denomina CSS reset y existen otras formas menos agresivas de llevarla a cabo, te dejo un enlace al
final del vídeo.

En resumen, hemos visto cómo seleccionar descendientes directos mediante el símbolo mayor que. Elementos
contiguos, gracias al carácter +. Como seleccionar el primer elemento de un grupo o la primera letra o la primera
línea de un texto utilizando dos puntos. La selección de elementos con atributos especificándolos entre corchetes.
Cómo aplicar estilos a etiquetas en otros idiomas, con :lang. Y a insertar contenido mediante CSS, utilizando
:before y :after. Y sí, también intenté convencerte de que no utilices el selector universal, asterisco.

Para terminar, te dejo unos consejos que espero te sean de utilidad. Reinicia la hoja de estilos, para que todos los
navegadores empiecen con los mismos estilos por defecto. En la medida de lo posible, no utilices el selector
universal para esta tarea, en su lugar busca un CSS reset que te guste. Cuidado con las reglas a partir de
selectores del nuevo estándar CSS3, seguramente no se apliquen a navegadores antiguos. Simplifica los
documentos HTML, de esta forma no tendrás que utilizar reglas complejas en CSS, y usa clases para centralizar y
estandarizar estilos, sobre todo en lo que a colores y tipografías se refiere.

Puedes consultar el uso de los selectores vistos en este vídeo y los de CSS3 en la página de la w3schools. Te dejo
el enlace a la ISO 639-1 como te dije. la ISO 639, tiene más de una parte en la que se especifican más idiomas,
pero incluir enlaces a todas las partes de la ISO me pareció un poco friki y no creo que llegues a necesitarlos. Para
reiniciar estilos, en lugar de utilizar el selector universal, puedes utilizar el CSS reset, de Eric Meyer, uno de los
mejores que encontrarás en la web.

Te recuerdo que puedes hacerme llegar cualquier duda a través de mi correo electrónico o de mi cuenta en twitter y
que este vídeo forma parte del curso Introducción al desarrollo web, disponible en la dirección idesweb.es. Muchas
gracias por tu atención.
 OCULTAR

Aspectos clave
Debes ver el vÃdeo CSS: selectores avanzados en el que se te muestran algunos selectores avanzados, como
descendientes directos, elementos contiguos, :first-child, :first-letter, :first-line, valores de
atributos, :lang, :after, :before y content.
Comprueba tus conocimientos

Jaime está trabajando en un proyecto web de notable envergadura. Quiere evitar que con el tiempo
se acumulen gran cantidad de formatos específicos para diversos documentos. Esto puede ser un
problema a futuro ya que, al hacer modificaciones al código, se le pueden escapar detalles, por lo
que va a utilizar selectores avanzados en las anotaciones de estilo.

¿Cuáles de las siguientes opciones atienden a este criterio?


Selecciona la opción o las opciones correctas y haz clic en ENVIAR.

1. (>)
2. (-)
3. (+)
4. (
5. ([ ])
6. (~)

9. CSS: selectores CSS3

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a presentar algunos de los nuevos
selectores que existen en CSS3. Los selectores de CSS3 están definidos en el documento Selectors Level Three,
una recomendación del W3C, de septiembre de 2011. La lista de selectores definidos en CSS3 es enorme. CSS3
incluye los selectores definidos en CSS1 y CSS2. En este vídeo vamos a ver algunos de los nuevos selectores de
CSS3. En CSS2 se definió la pseudoclase first-child, que permite definir una regla que se aplica al primer hijo del
selector indicado. En este ejemplo, se selecciona el primer elemento de la lista y se le aplica al estilo de texto en
negrita.

En CSS3 se han añadido estos selectores que complementan a first-child de CSS2. Last-child selecciona el último
elemento de la lista. Las otras dos pseudoclases seleccionan el hijo enésimo, empezando desde el principio o
desde el final de la lista de hijos. Por tanto, existe una equivalencia con first- child y last-child, cuando ambos
selectores, ambas pseudoclases, toman el valor 1.

En este ejemplo, se selecciona el segundo elemento de la lista y se le aplica el estilo de texto negrita. Estos
selectores son similares a los anteriores, pero seleccionan un hijo entre todos los que son del mismo tipo y que
ocupe la posición indicada. El funcionamiento de estas pseudoclases puede ser un poco confuso, así que vamos a
ver un ejemplo para entenderlo mejor.

P:first-child selecciona un párrafo cuando sea el primer hijo de su padre, en este caso, ningún párrafo es el primer
hijo, así que la regla CSS no se aplica. Sin embargo, p:first-of-type, sí selecciona el primer párrafo HTML, aunque
sea el segundo hijo de su padre section, porque este párrafo es el primer hijo, entre todos los hijos de tipo párrafo.
¿Se entiende? ¿está claro?

Por último, en CSS3 se ha añadido este operador, la tilde o virguilla, para seleccionar un elemento en función de
sus hermanos. Este operador es el complemento al operador + definido en CSS2. Vamos a recordar primero el
funcionamiento de este operador, en este ejemplo, puedes ver cómo funciona el selector + entre dos elementos. En
este caso se aplica el estilo a todos los elementos p que estén justo detrás de un elemento h1. Solo se aplica a los
inmediatamente contiguos, así que solo se aplica al primer párrafo. Sin embargo, al aplicar este otro operador, los
elementos p, no tienen que ser inmediatamente contiguos a h1, solo tienen que ser hermanos de h1. Así que en
este ejemplo la regla CSS, se aplica a todos los párrafos del fragmento de código HTML.

Muchas gracias por tu atención.


 OCULTAR

Aspectos clave
Debes ver el vÃdeo CSS: selectores CSS3 en el que se presentan los nuevos selectores que incorpora
CSS3: :last-child, :nth-child(n), :nth-last-child(n), :first-of-type, :last-of-type, :nth-
of-type(n), :nth-last-of-type(n) y ~.

Comprueba tus conocimientos

Antonio y Pablo están discutiendo sobre las funcionalidades de CSS3. Antonio dice que con las
“pseudo clases” de CSS3 se facilita el aplicar estilos a los elementos a través de los selectores con
la misma condición se facilita.

Identifica del siguiente listado cuál o cuáles de las “pseudo clases” se han mantenido de la versión
CSS2.
Selecciona la opción o las opciones que quieras tachar y haz clic en ENVIAR.

 first-child
 last-child
 nth-child
 nth-last-child

Examen final modulo I


Pregunta 1
Las actualizaciones de CSS se llaman:

 AVersiones.

 BNiveles.

 CEdiciones.

 DLas anteriores respuestas no son correctas.

Pregunta 2
En CSS, ¿qué pseudo clase se emplea para definir una propiedad cuando el cursor del ratón se sitúa sobre un elemento?

 A:active.
 B:hover.

 C:over.

 D:on.

Pregunta 3
En CSS, para definir el color del borde de un elemento se emplea la propiedad:

 Abackground-color.

 Bborder-color.

 Cmargin-color.

 Dpadding-color.

Pregunta 4
En CSS, la expresión ".elemento" es un selector.

 ADe clase.

 BDe elemento.

 CDe identificador.

 DLas anteriores respuestas no son correctas.