-
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.
