Estamos de vuelta con nuestra página web de donas y los peligros de comerlas.

Me gusta mucho la clase "warning" que añadimos en nuestras etiquetas "" y "".

Pero quiero hacer que este párrafo de advertencia se vea más destacado.

Ahora tiene un borde gris, por la regla de clase "fact".

Pero creo que se vería mejor con un borde naranja grueso.

Vamos a tratar de añadirlo a la regla "warning".

Escribimos "border: 5px solid orange".

¡Ah! Me encanta. Pero también lo hizo en la etiqueta ""

y no se ve bien en una línea de texto.

Sólo quiero que esté en el párrafo de advertencia,

no en la advertencia que es una línea de texto.

¿Cómo puedo hacer una regla de CSS más específica?

Bueno, una manera de abordarlo es hacer una nueva clase: "warning-paragraph",

y mover las propiedades hacia allá. Pero no tenemos que hacer eso.

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",

pero no a otras etiquetas aunque tengan la clase "warning".

Para hacer esa regla, primero escribimos el elemento que estamos buscando: "p",

luego ponemos un punto, y el nombre de la clase: "warning".

Eso le dirá al navegador que encuentre todas las etiquetas "" que tengan el nombre de clase "warning"

y les aplique las propiedades.

Así que vamos a pegar esta propiedad de borde aquí.

¡Ya está! Tenemos el borde sólo en la clase "fact" y no está en la etiqueta "".

Podemos hacer eso con cualquier combinación de elementos y nombres de clases,

cuando queramos que el navegador aplique el estilo a etiquetas particulares que tengan una clase específica.

Asegúrate de seguir exactamente esta secuencia:

el nombre de la etiqueta, el punto y el nombre de la clase.

Si pones un espacio accidentalmente entre el nombre de la etiqueta y el punto, no va a funcionar.

Esto es porque el espacio significa otra cosa en CSS.

Y el navegador interpreta esa regla de manera diferente.

Mantente en sintonía para descubrir qué es ese espacio tan especial.