[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.33,0:00:02.08,Default,,0000,0000,0000,,Vamos a echarle un vistazo a nuestra página web.
Dialogue: 0,0:00:02.28,0:00:04.54,Default,,0000,0000,0000,,Tiene estos encabezados,
Dialogue: 0,0:00:04.54,0:00:07.58,Default,,0000,0000,0000,,tiene estos párrafos que describen conejos,
Dialogue: 0,0:00:07.58,0:00:10.59,Default,,0000,0000,0000,,y aquí en realidad tienen muchos párrafos,
Dialogue: 0,0:00:10.59,0:00:13.42,Default,,0000,0000,0000,,con la letra de mi canción favorita sobre conejos.
Dialogue: 0,0:00:13.54,0:00:17.55,Default,,0000,0000,0000,,La vez anterior, estilizamos el primer párrafo de la canción usando el "Id".
Dialogue: 0,0:00:17.86,0:00:21.02,Default,,0000,0000,0000,,Pero ahora que tengo muchos párrafos con la letra de la canción,
Dialogue: 0,0:00:21.02,0:00:24.08,Default,,0000,0000,0000,,quiero que todos tengan el color de fondo amarillo.
Dialogue: 0,0:00:24.61,0:00:27.69,Default,,0000,0000,0000,,¿Cómo podemos hacer eso usando lo que sabemos hasta el momento?
Dialogue: 0,0:00:28.22,0:00:30.37,Default,,0000,0000,0000,,Lo primero que aprendimos a hacer
Dialogue: 0,0:00:30.37,0:00:33.00,Default,,0000,0000,0000,,fue seleccionar todas las etiquetas de un tipo particular,
Dialogue: 0,0:00:33.00,0:00:34.66,Default,,0000,0000,0000,,como con el selector "p".
Dialogue: 0,0:00:34.89,0:00:39.12,Default,,0000,0000,0000,,Pero eso coloreaba todos los párrafos, no sólo los párrafos con las letras de las canciones.
Dialogue: 0,0:00:39.23,0:00:41.29,Default,,0000,0000,0000,,Necesitamos algo más específico.
Dialogue: 0,0:00:41.51,0:00:44.90,Default,,0000,0000,0000,,Luego aprendimos cómo seleccionar etiquetas con un "Id" particular,
Dialogue: 0,0:00:44.90,0:00:48.14,Default,,0000,0000,0000,,como cuando seleccionamos el párrafo con el "Id": "rabbits-song".
Dialogue: 0,0:00:48.37,0:00:50.92,Default,,0000,0000,0000,,Pero eso sólo selecciona el primer párrafo.
Dialogue: 0,0:00:51.12,0:00:53.72,Default,,0000,0000,0000,,No podemos añadir ese "Id" a los otros párrafos,
Dialogue: 0,0:00:53.72,0:00:57.66,Default,,0000,0000,0000,,porque no está permitido usar el mismo "Id" en múltiples etiquetas.
Dialogue: 0,0:00:57.87,0:01:00.20,Default,,0000,0000,0000,,Si queremos seleccionar los otros párrafos,
Dialogue: 0,0:01:00.20,0:01:02.88,Default,,0000,0000,0000,,le tendríamos que dar a cada uno de ellos nuevos "Id´s"
Dialogue: 0,0:01:02.88,0:01:05.72,Default,,0000,0000,0000,,(como "song-lyrics2" y "song-lyrics3"),
Dialogue: 0,0:01:05.72,0:01:07.36,Default,,0000,0000,0000,,porque cada "Id" debe ser único.
Dialogue: 0,0:01:07.36,0:01:09.81,Default,,0000,0000,0000,,Y luego tendríamos que añadir reglas a cada uno de ellos.
Dialogue: 0,0:01:09.81,0:01:12.40,Default,,0000,0000,0000,,Podríamos hacer eso.\NPero, ¡es mucho trabajo!
Dialogue: 0,0:01:12.40,0:01:14.69,Default,,0000,0000,0000,,Y cada vez que añadimos un nuevo verso a la canción,
Dialogue: 0,0:01:14.69,0:01:17.28,Default,,0000,0000,0000,,tendríamos que recordar añadir otro "Id" al HTML,
Dialogue: 0,0:01:17.28,0:01:19.02,Default,,0000,0000,0000,,y otro "Id" a las reglas CSS,
Dialogue: 0,0:01:19.02,0:01:22.83,Default,,0000,0000,0000,,y si añadimos cientos de versos, eso sería abrumador.
Dialogue: 0,0:01:22.98,0:01:24.32,Default,,0000,0000,0000,,Bueno ¿adivina qué?
Dialogue: 0,0:01:24.49,0:01:27.38,Default,,0000,0000,0000,,Hay una mejor manera, llamada "clases".
Dialogue: 0,0:01:27.60,0:01:29.01,Default,,0000,0000,0000,,Un clase básicamente es:
Dialogue: 0,0:01:29.01,0:01:32.07,Default,,0000,0000,0000,,una manera de asignar un elemento particular a un grupo.
Dialogue: 0,0:01:32.16,0:01:35.15,Default,,0000,0000,0000,,Y puedes asignar tantos elementos como quieras a un grupo.
Dialogue: 0,0:01:35.35,0:01:39.93,Default,,0000,0000,0000,,Para añadir una clase, necesitamos añadir un atributo de clase, como lo hicimos con "Id´s".
Dialogue: 0,0:01:40.36,0:01:44.70,Default,,0000,0000,0000,,En primer lugar, voy a borrar este "Id", porque lo voy a reemplazar.
Dialogue: 0,0:01:44.70,0:01:47.92,Default,,0000,0000,0000,,Ahora he colocado mi cursor en el principio de la etiqueta ".
Dialogue: 0,0:01:47.92,0:01:51.68,Default,,0000,0000,0000,,Voy a añadir un espacio y a escribir: 'class = "'
Dialogue: 0,0:01:53.18,0:01:55.33,Default,,0000,0000,0000,,Ahora tengo que escribir un nombre de clase.
Dialogue: 0,0:01:55.33,0:01:56.79,Default,,0000,0000,0000,,Uno lindo y descriptivo.
Dialogue: 0,0:01:56.93,0:01:59.29,Default,,0000,0000,0000,,Llamémosle "song-lyrics".
Dialogue: 0,0:01:59.66,0:02:01.45,Default,,0000,0000,0000,,Lo he tecleado ahí.
Dialogue: 0,0:02:01.66,0:02:04.34,Default,,0000,0000,0000,,¿Qué otros elementos deberían tener este nombre de clase?
Dialogue: 0,0:02:04.42,0:02:06.42,Default,,0000,0000,0000,,Bueno, todos los otros párrafos de la letra de la canción.
Dialogue: 0,0:02:06.51,0:02:09.15,Default,,0000,0000,0000,,Así que vamos hacia abajo en la página,
Dialogue: 0,0:02:09.15,0:02:12.78,Default,,0000,0000,0000,,y añadimos los atributos de clase a cada uno de los párrafos.
Dialogue: 0,0:02:13.06,0:02:14.54,Default,,0000,0000,0000,,("song-lyrics")
Dialogue: 0,0:02:14.84,0:02:18.00,Default,,0000,0000,0000,,Ok, genial.\NAhora estamos listos para añadir la regla CSS.
Dialogue: 0,0:02:18.22,0:02:20.54,Default,,0000,0000,0000,,Entonces regresamos a nuestra etiqueta "",
Dialogue: 0,0:02:20.54,0:02:24.57,Default,,0000,0000,0000,,y borramos el selector "id" que pusimos antes,
Dialogue: 0,0:02:24.57,0:02:25.77,Default,,0000,0000,0000,,porque lo estamos reemplazando.
Dialogue: 0,0:02:26.16,0:02:28.59,Default,,0000,0000,0000,,Y ahora tenemos que llegar a nuestro selector de clase.
Dialogue: 0,0:02:28.93,0:02:34.04,Default,,0000,0000,0000,,Bueno, para iniciar un selector de clase usamos un punto.
Dialogue: 0,0:02:34.43,0:02:39.03,Default,,0000,0000,0000,,Luego escribimos el nombre de clase "song-lyrics",
Dialogue: 0,0:02:39.03,0:02:46.42,Default,,0000,0000,0000,,y luego como siempre:\Nuna llave, la propiedad, dos puntos, el valor
Dialogue: 0,0:02:46.63,0:02:47.58,Default,,0000,0000,0000,,¡Tan tan!
Dialogue: 0,0:02:47.82,0:02:51.01,Default,,0000,0000,0000,,Toda la letra de la canción tiene un color de fondo amarillo.
Dialogue: 0,0:02:51.34,0:02:55.14,Default,,0000,0000,0000,,¿Qué pasaría si ponemos esta "s" en mayúsculas?
Dialogue: 0,0:02:55.24,0:02:56.40,Default,,0000,0000,0000,,No funciona.
Dialogue: 0,0:02:56.49,0:02:58.95,Default,,0000,0000,0000,,Porque los nombres de clases distinguen entre mayúsculas y minúsculas.
Dialogue: 0,0:02:58.97,0:03:01.77,Default,,0000,0000,0000,,Es importante cuáles letras están mayúsculas y cuáles en minúsculas,
Dialogue: 0,0:03:01.77,0:03:03.56,Default,,0000,0000,0000,,como con los "Id´s".
Dialogue: 0,0:03:04.32,0:03:08.30,Default,,0000,0000,0000,,¿Qué pasaría si usamos el signo # en lugar de un punto?
Dialogue: 0,0:03:08.54,0:03:09.67,Default,,0000,0000,0000,,No funciona.
Dialogue: 0,0:03:09.77,0:03:13.08,Default,,0000,0000,0000,,Porque entonces el navegador piensa que "song-lyrics" es un "Id",
Dialogue: 0,0:03:13.08,0:03:16.41,Default,,0000,0000,0000,,y cuando no lo encuentra en el atributo "Id" de "song-lyrics",
Dialogue: 0,0:03:16.41,0:03:17.58,Default,,0000,0000,0000,,falla.
Dialogue: 0,0:03:18.10,0:03:24.51,Default,,0000,0000,0000,,¿Qué pasaría si ponemos espacios en nuestros nombres de clases?
Dialogue: 0,0:03:25.25,0:03:27.48,Default,,0000,0000,0000,,Bueno, tampoco funciona,
Dialogue: 0,0:03:27.48,0:03:29.100,Default,,0000,0000,0000,,porque las clases no pueden tener espacios en blanco.
Dialogue: 0,0:03:30.19,0:03:31.65,Default,,0000,0000,0000,,Y como lo veremos después,
Dialogue: 0,0:03:31.65,0:03:34.97,Default,,0000,0000,0000,,un espacio significa algo muy específico en el mundo de CSS.
Dialogue: 0,0:03:35.87,0:03:38.78,Default,,0000,0000,0000,,Así que arreglemos esto como estaba.
Dialogue: 0,0:03:39.52,0:03:41.11,Default,,0000,0000,0000,,Entonces, una vez más:
Dialogue: 0,0:03:41.11,0:03:43.39,Default,,0000,0000,0000,,Cuando queremos añadir una clase,
Dialogue: 0,0:03:43.39,0:03:45.59,Default,,0000,0000,0000,,ideamos un nombre de clase,
Dialogue: 0,0:03:45.59,0:03:49.00,Default,,0000,0000,0000,,y lo añadimos al atributo clase en el HTML.
Dialogue: 0,0:03:49.25,0:03:51.32,Default,,0000,0000,0000,,Luego escribimos una regla de estilo,
Dialogue: 0,0:03:51.32,0:03:54.69,Default,,0000,0000,0000,,empezando con un punto y luego el nombre de clase.
Dialogue: 0,0:03:55.22,0:03:58.43,Default,,0000,0000,0000,,¡Y ahora tu CSS puede tener clase!