[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.34,0:00:03.90,Default,,0000,0000,0000,,Estamos de vuelta con nuestra página web de donas y los peligros de comerlas.
Dialogue: 0,0:00:03.90,0:00:08.15,Default,,0000,0000,0000,,Me gusta mucho la clase "warning" que añadimos en nuestras etiquetas "" y "".
Dialogue: 0,0:00:08.15,0:00:12.67,Default,,0000,0000,0000,,Pero quiero hacer que este párrafo de advertencia se vea más destacado.
Dialogue: 0,0:00:12.67,0:00:16.89,Default,,0000,0000,0000,,Ahora tiene un borde gris, por la regla de clase "fact".
Dialogue: 0,0:00:16.89,0:00:20.92,Default,,0000,0000,0000,,Pero creo que se vería mejor con un borde naranja grueso.
Dialogue: 0,0:00:20.92,0:00:25.80,Default,,0000,0000,0000,,Vamos a tratar de añadirlo a la regla "warning".
Dialogue: 0,0:00:25.80,0:00:29.58,Default,,0000,0000,0000,,Escribimos "border: 5px solid orange".
Dialogue: 0,0:00:29.68,0:00:34.20,Default,,0000,0000,0000,,¡Ah! Me encanta. Pero también lo hizo en la etiqueta ""
Dialogue: 0,0:00:34.22,0:00:37.32,Default,,0000,0000,0000,,y no se ve bien en una línea de texto.
Dialogue: 0,0:00:37.32,0:00:39.98,Default,,0000,0000,0000,,Sólo quiero que esté en el párrafo de advertencia,
Dialogue: 0,0:00:39.98,0:00:43.74,Default,,0000,0000,0000,,no en la advertencia que es una línea de texto.
Dialogue: 0,0:00:43.74,0:00:46.51,Default,,0000,0000,0000,,¿Cómo puedo hacer una regla de CSS más específica?
Dialogue: 0,0:00:46.51,0:00:50.53,Default,,0000,0000,0000,,Bueno, una manera de abordarlo es hacer una nueva clase: "warning-paragraph",
Dialogue: 0,0:00:50.53,0:00:55.15,Default,,0000,0000,0000,,y mover las propiedades hacia allá. Pero no tenemos que hacer eso.
Dialogue: 0,0:00:55.15,0:01:01.22,Default,,0000,0000,0000,,En su lugar, vamos a decirle al navegador que aplique las propiedades de borde a las etiquetas de párrafo que tengan la clase "warning",
Dialogue: 0,0:01:01.22,0:01:04.58,Default,,0000,0000,0000,,pero no a otras etiquetas aunque tengan la clase "warning".
Dialogue: 0,0:01:04.58,0:01:09.12,Default,,0000,0000,0000,,Para hacer esa regla, primero escribimos el elemento que estamos buscando: "p",
Dialogue: 0,0:01:09.12,0:01:14.17,Default,,0000,0000,0000,,luego ponemos un punto, y el nombre de la clase: "warning".
Dialogue: 0,0:01:14.17,0:01:18.67,Default,,0000,0000,0000,,Eso le dirá al navegador que encuentre todas las etiquetas "" que tengan el nombre de clase "warning"
Dialogue: 0,0:01:18.67,0:01:21.38,Default,,0000,0000,0000,,y les aplique las propiedades.
Dialogue: 0,0:01:21.38,0:01:26.45,Default,,0000,0000,0000,,Así que vamos a pegar esta propiedad de borde aquí.
Dialogue: 0,0:01:26.45,0:01:34.32,Default,,0000,0000,0000,,¡Ya está! Tenemos el borde sólo en la clase "fact" y no está en la etiqueta "".
Dialogue: 0,0:01:34.32,0:01:37.60,Default,,0000,0000,0000,,Podemos hacer eso con cualquier combinación de elementos y nombres de clases,
Dialogue: 0,0:01:37.60,0:01:42.60,Default,,0000,0000,0000,,cuando queramos que el navegador aplique el estilo a etiquetas particulares que tengan una clase específica.
Dialogue: 0,0:01:42.60,0:01:45.23,Default,,0000,0000,0000,,Asegúrate de seguir exactamente esta secuencia:
Dialogue: 0,0:01:45.23,0:01:50.71,Default,,0000,0000,0000,,el nombre de la etiqueta, el punto y el nombre de la clase.
Dialogue: 0,0:01:50.71,0:01:56.45,Default,,0000,0000,0000,,Si pones un espacio accidentalmente entre el nombre de la etiqueta y el punto, no va a funcionar.
Dialogue: 0,0:01:56.45,0:01:59.94,Default,,0000,0000,0000,,Esto es porque el espacio significa otra cosa en CSS.
Dialogue: 0,0:01:59.94,0:02:02.80,Default,,0000,0000,0000,,Y el navegador interpreta esa regla de manera diferente.
Dialogue: 0,0:02:03.12,0:02:07.29,Default,,0000,0000,0000,,Mantente en sintonía para descubrir qué es ese espacio tan especial.