[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,,Miremos nuestra página
Dialogue: 0,0:00:02.28,0:00:04.54,Default,,0000,0000,0000,,tiene estos títulos principales
Dialogue: 0,0:00:04.54,0:00:07.58,Default,,0000,0000,0000,,tiene este párrafo que describe a los conejos
Dialogue: 0,0:00:07.58,0:00:10.59,Default,,0000,0000,0000,,y ahora de hecho tiene múltiples 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 última vez, nosotros dimos estilo al primer párrafo usando el id
Dialogue: 0,0:00:17.86,0:00:21.02,Default,,0000,0000,0000,,Pero ahora que yo tengo múltiples párrafos con letras de canciones,
Dialogue: 0,0:00:21.02,0:00:24.08,Default,,0000,0000,0000,,yo quiero que todos tengan ese fondo de color amarillo
Dialogue: 0,0:00:24.61,0:00:27.69,Default,,0000,0000,0000,,¿Como podriamos hacer eso usando lo que sabemos hasta el momento?
Dialogue: 0,0:00:28.22,0:00:30.37,Default,,0000,0000,0000,,La primera cosa que aprendimos como 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,,tal como con el selector 'p'
Dialogue: 0,0:00:34.89,0:00:39.12,Default,,0000,0000,0000,,pero eso coloreó todos los párrafos, no solo los párrafos con letras de canciones
Dialogue: 0,0:00:39.23,0:00:41.29,Default,,0000,0000,0000,,Nosotros necesitamos algo mas específico.
Dialogue: 0,0:00:41.51,0:00:44.90,Default,,0000,0000,0000,,Despues nosotros aprendimos como seleccionar etiquetas con un id particular,
Dialogue: 0,0:00:44.90,0:00:48.14,Default,,0000,0000,0000,,como seleccionando el párrafo con el id \N"rabbit-song".
Dialogue: 0,0:00:48.37,0:00:50.92,Default,,0000,0000,0000,,pero eso solo seleccionó el primer párrafo
Dialogue: 0,0:00:51.12,0:00:53.72,Default,,0000,0000,0000,,Nosotros no podemos adicionar ese id a los otros párrafos
Dialogue: 0,0:00:53.72,0:00:57.66,Default,,0000,0000,0000,,porque no nos es permitido usar el mismo id en múltiples etiquetas
Dialogue: 0,0:00:57.87,0:01:00.20,Default,,0000,0000,0000,,si nosotros queremos seleccionar los otros párrafos
Dialogue: 0,0:01:00.20,0:01:02.88,Default,,0000,0000,0000,,nosotros tendriamos que dar nuevos IDs a cada uno de ellos
Dialogue: 0,0:01:02.88,0:01:05.72,Default,,0000,0000,0000,,(como "song-lyrics2",\Ny "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 entonces nosotros tendriamos que adicionar reglas para cada uno de ellos
Dialogue: 0,0:01:09.81,0:01:12.40,Default,,0000,0000,0000,,Podriamos hacer eso, pero, eso es mucho trabajo
Dialogue: 0,0:01:12.40,0:01:14.69,Default,,0000,0000,0000,,y cada vez que nosotros adicionaramos 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 adicionar otro ID al HTML
Dialogue: 0,0:01:17.28,0:01:19.02,Default,,0000,0000,0000,,y otro ID a las reglas de CSS
Dialogue: 0,0:01:19.02,0:01:22.83,Default,,0000,0000,0000,,y si nosostros adicionaramos cientos de versos, eso solo sería agotador
Dialogue: 0,0:01:22.98,0:01:24.32,Default,,0000,0000,0000,,bueno, adivina que?
Dialogue: 0,0:01:24.49,0:01:27.38,Default,,0000,0000,0000,,Hay una mejor manera, y esta es llamada "clases".
Dialogue: 0,0:01:27.60,0:01:29.01,Default,,0000,0000,0000,,una clase es basicamente:
Dialogue: 0,0:01:29.01,0:01:32.07,Default,,0000,0000,0000,,un modo de asignar un elemento particular a un grupo
Dialogue: 0,0:01:32.16,0:01:35.15,Default,,0000,0000,0000,,y tu puedes asignar tantos elementos como tu quieras a un grupo.
Dialogue: 0,0:01:35.35,0:01:39.93,Default,,0000,0000,0000,,Para adicionar una clase, necesitamos adicionar un atributo "class", tal como lo hicimos con los IDs
Dialogue: 0,0:01:40.36,0:01:44.70,Default,,0000,0000,0000,,Primero, borraré este ID, dado que voy a reemplazarlo
Dialogue: 0,0:01:44.70,0:01:47.92,Default,,0000,0000,0000,,Ahora, yo he ubicado mi cursor en el comienzo de la etiqueta '',
Dialogue: 0,0:01:47.92,0:01:53.18,Default,,0000,0000,0000,,yo agregaré un espacio, y escribiré: class ="
Dialogue: 0,0:01:53.18,0:01:55.45,Default,,0000,0000,0000,,Ahora necesitamos inventarnos un nombre para la clase
Dialogue: 0,0:01:55.45,0:01:56.92,Default,,0000,0000,0000,,uno que sea descriptivo
Dialogue: 0,0:01:56.92,0:01:59.66,Default,,0000,0000,0000,,llamemoslo "song-lyrics".
Dialogue: 0,0:01:59.66,0:02:01.68,Default,,0000,0000,0000,,yo he tecleado eso allí dentro
Dialogue: 0,0:02:01.68,0:02:04.42,Default,,0000,0000,0000,,¿ que otros elementos deberian tener este nombre de clase?
Dialogue: 0,0:02:04.42,0:02:06.50,Default,,0000,0000,0000,,bien, todos los otros párrafos con letras de canciones,
Dialogue: 0,0:02:06.50,0:02:09.15,Default,,0000,0000,0000,,asi que, iremos hacia abajo en la página
Dialogue: 0,0:02:09.15,0:02:13.06,Default,,0000,0000,0000,,y adicionaremos el atributo a cada una de las clases de párrafos
Dialogue: 0,0:02:13.06,0:02:14.83,Default,,0000,0000,0000,,("song-lyrics")
Dialogue: 0,0:02:14.83,0:02:18.22,Default,,0000,0000,0000,,Bien, grandioso. Ahora, estamos listos para agregar la regla en CSS
Dialogue: 0,0:02:18.22,0:02:20.54,Default,,0000,0000,0000,,asi que volvemos a arriba a nuestra etiqueta ''
Dialogue: 0,0:02:20.54,0:02:24.58,Default,,0000,0000,0000,,y borramos el selector de id que teniamos antes,
Dialogue: 0,0:02:24.58,0:02:26.16,Default,,0000,0000,0000,,porque estamos reemplazandolo.
Dialogue: 0,0:02:26.16,0:02:28.92,Default,,0000,0000,0000,,y ahora necesitamos dar con nuestro selector de clase
Dialogue: 0,0:02:28.92,0:02:34.44,Default,,0000,0000,0000,,bien, para comenzar un selector de clase, usamos un periodo, un punto.
Dialogue: 0,0:02:34.44,0:02:39.03,Default,,0000,0000,0000,,luego, escribimos el nombre de la clase adelante: song-lyrics,
Dialogue: 0,0:02:39.03,0:02:46.63,Default,,0000,0000,0000,,y entonces solo hacemos lo de siempre: llaves, propiedad, color, y valor.
Dialogue: 0,0:02:46.63,0:02:47.82,Default,,0000,0000,0000,,Ta-da!
Dialogue: 0,0:02:47.82,0:02:51.34,Default,,0000,0000,0000,,Todas las letras de canciones ahora tienen fondos amarillos.
Dialogue: 0,0:02:51.34,0:02:55.23,Default,,0000,0000,0000,,¿Que pasaría si nosotros escribimos está s en mayúscula?
Dialogue: 0,0:02:55.23,0:02:56.49,Default,,0000,0000,0000,,No funciona,
Dialogue: 0,0:02:56.49,0:02:58.97,Default,,0000,0000,0000,,porque los nombre 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 cuales letras están en mayúsculas y cuales en minúsculas
Dialogue: 0,0:03:01.77,0:03:04.32,Default,,0000,0000,0000,,tal como con los IDs.
Dialogue: 0,0:03:04.32,0:03:08.52,Default,,0000,0000,0000,,¿Que pasaría si nosotros usamos el signo numeral(#) en vez de un periodo(.)?
Dialogue: 0,0:03:08.52,0:03:09.77,Default,,0000,0000,0000,,No funciona,
Dialogue: 0,0:03:09.77,0:03:13.09,Default,,0000,0000,0000,,porque entonces el buscador piensa que "song-lyrics" es un ID,
Dialogue: 0,0:03:13.09,0:03:16.41,Default,,0000,0000,0000,,y cuando este no puede encontrar algo en el atributo ID de "song-lyrics"
Dialogue: 0,0:03:16.41,0:03:18.11,Default,,0000,0000,0000,,este se rinde.
Dialogue: 0,0:03:18.11,0:03:25.25,Default,,0000,0000,0000,,¿Que pasaría si ponemos espacios en nuestros nombres de clases?
Dialogue: 0,0:03:25.25,0:03:27.47,Default,,0000,0000,0000,,bien, eso tampoco funciona
Dialogue: 0,0:03:27.47,0:03:30.18,Default,,0000,0000,0000,,porque las clases no pueden tener espacios
Dialogue: 0,0:03:30.18,0:03:31.64,Default,,0000,0000,0000,,y como encontraremos mas adelante
Dialogue: 0,0:03:31.64,0:03:35.87,Default,,0000,0000,0000,,un espacio significa algo muy especifico en el mundo de CSS
Dialogue: 0,0:03:35.87,0:03:39.48,Default,,0000,0000,0000,,Asi que, simplemente lo compondremos como estaba.
Dialogue: 0,0:03:39.48,0:03:41.11,Default,,0000,0000,0000,,Una vez mas:
Dialogue: 0,0:03:41.11,0:03:43.39,Default,,0000,0000,0000,,cuando queremos adicionar una clase,
Dialogue: 0,0:03:43.39,0:03:45.55,Default,,0000,0000,0000,,nosotros ideamos un nombre para la clases,
Dialogue: 0,0:03:45.55,0:03:49.27,Default,,0000,0000,0000,,y lo adicionamos a nuestro atributo en HTML
Dialogue: 0,0:03:49.68,0:03:51.30,Default,,0000,0000,0000,,luego escribimos una regla de estilo
Dialogue: 0,0:03:51.49,0:03:54.66,Default,,0000,0000,0000,,comenzando con un periodo(.) y luego escribiendo el nombre de clase
Dialogue: 0,0:03:55.63,0:03:58.61,Default,,0000,0000,0000,,y ahora tu CSS puede tener clase!