1
00:00:00,342 --> 00:00:03,899
Estamos de vuelta con nuestra página web de donas y los peligros de comerlas.

2
00:00:03,899 --> 00:00:08,150
Me gusta mucho la clase "warning" que añadimos en nuestras etiquetas "" y "".

3
00:00:08,150 --> 00:00:12,673
Pero quiero hacer que este párrafo de advertencia se vea más destacado.

4
00:00:12,673 --> 00:00:16,889
Ahora tiene un borde gris, por la regla de clase "fact".

5
00:00:16,889 --> 00:00:20,922
Pero creo que se vería mejor con un borde naranja grueso.

6
00:00:20,922 --> 00:00:25,802
Vamos a tratar de añadirlo a la regla "warning".

7
00:00:25,802 --> 00:00:29,581
Escribimos "border: 5px solid orange".

8
00:00:29,675 --> 00:00:34,198
¡Ah! Me encanta. Pero también lo hizo en la etiqueta ""

9
00:00:34,219 --> 00:00:37,319
y no se ve bien en una línea de texto.

10
00:00:37,319 --> 00:00:39,982
Sólo quiero que esté en el párrafo de advertencia,

11
00:00:39,982 --> 00:00:43,744
no en la advertencia que es una línea de texto.

12
00:00:43,744 --> 00:00:46,511
¿Cómo puedo hacer una regla de CSS más específica?

13
00:00:46,511 --> 00:00:50,532
Bueno, una manera de abordarlo es hacer una nueva clase: "warning-paragraph",

14
00:00:50,532 --> 00:00:55,152
y mover las propiedades hacia allá. Pero no tenemos que hacer eso.

15
00:00:55,152 --> 00:01:01,220
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",

16
00:01:01,220 --> 00:01:04,576
pero no a otras etiquetas aunque tengan la clase "warning".

17
00:01:04,576 --> 00:01:09,121
Para hacer esa regla, primero escribimos el elemento que estamos buscando: "p",

18
00:01:09,121 --> 00:01:14,170
luego ponemos un punto, y el nombre de la clase: "warning".

19
00:01:14,170 --> 00:01:18,673
Eso le dirá al navegador que encuentre todas las etiquetas "" que tengan el nombre de clase "warning"

20
00:01:18,673 --> 00:01:21,385
y les aplique las propiedades.

21
00:01:21,385 --> 00:01:26,453
Así que vamos a pegar esta propiedad de borde aquí.

22
00:01:26,453 --> 00:01:34,321
¡Ya está! Tenemos el borde sólo en la clase "fact" y no está en la etiqueta "".

23
00:01:34,321 --> 00:01:37,595
Podemos hacer eso con cualquier combinación de elementos y nombres de clases,

24
00:01:37,595 --> 00:01:42,603
cuando queramos que el navegador aplique el estilo a etiquetas particulares que tengan una clase específica.

25
00:01:42,603 --> 00:01:45,233
Asegúrate de seguir exactamente esta secuencia:

26
00:01:45,233 --> 00:01:50,707
el nombre de la etiqueta, el punto y el nombre de la clase.

27
00:01:50,707 --> 00:01:56,453
Si pones un espacio accidentalmente entre el nombre de la etiqueta y el punto, no va a funcionar.

28
00:01:56,453 --> 00:01:59,940
Esto es porque el espacio significa otra cosa en CSS.

29
00:01:59,940 --> 00:02:02,795
Y el navegador interpreta esa regla de manera diferente.

30
00:02:03,124 --> 00:02:07,294
Mantente en sintonía para descubrir qué es ese espacio tan especial.