👨‍💻 Definición de estilos para etiquetas HTML con CSS

⏩ Snippet: ⏪
👉 Snippet: Esta publicación se centra en lo relativo a dar formato o redefinir una etiqueta HTML existente aplicando CSS

Portafolio de temas tratados en esta publicación:

• 1. GENERALIDADES
• 2. COMENTARIOS
• 3. DEFINICION DE VARIOS ESTILOS A LA VEZ
• 4. ESTILOS ANIDADOS
• 5. FUENTES

IR A PORTAFOLIO

---

1. GENERALIDADES.

Si lo que queremos es dar formato o redefinir una etiqueta HTML existente, usaríamos la sintaxis:

  
etiqueta {
   estilo CSS 1;
   estilo CSS 2;
   ...
}

En "etiqueta" pondríamos el nombre de la etiqueta (por ejemplo "h1", "p", etc. pero sin los signos < >) y los estilos que definirían esa etiqueta irían encerrados entre las llaves "{...}

Por ejemplo:

    h1 {
   estilo CSS 1;
   estilo CSS 2;
   ...
}
  

IR A PORTAFOLIO

---

2. COMENTARIOS

En las hojas de estilo también se pueden escribir comentarios usando los símbolos: /* texto del comentario */. Pero es importante usar esta notación y no ninguna otra, ya que es la única soportada. A continuación se incluye un ejemplo con comentarios:

  
/* Definimos el estilo de la cabecera principal */
h1 {
   estilo CSS 1; /* Cambiamos el estilo de su... */

   /* También cambiamos este otro estilo porque... */
   estilo CSS 2;
}
  

IR A PORTAFOLIO

---

3. DEFINICION DE VARIOS ESTILOS A LA VEZ

También podemos redefinir varias etiquetas a la vez que compartirán los mismos estilos, separándolas por comas, de la forma:

etiqueta1, etiqueta2, etiqueta3 {
   /* estilos CSS */
}

Imaginen por ejemplo que queréis cambiar el color de todas las cabeceras, lo podéis hacer a la vez escribiendo:

 h1, h2, h3, h4, h5, h6 {
   /* estilos CSS */
}
    
 

IR A PORTAFOLIO

---

4. ESTILOS ANIDADOS

Otra opción interesante es definir el estilo de etiquetas "dentro" de otras etiquetas. Para esto tenemos que escribir primero la etiqueta contendora, seguida de un espacio y por último la etiqueta a definir. En este caso el estilo CSS solo se aplicará cuando la etiqueta definida se encuentre dentro de la etiqueta contenedora:

contenedor etiqueta {
   /* estilos CSS */
}

Por ejemplo, una etiqueta <span> dentro de una sección <p>:

p span {
   /* estilos CSS */
}

Este estilo solo se aplicaría cuando se encuentre la etiqueta <span> dentro de una sección <p> de la forma:

<p>
    Párrafo de ejemplo donde 
    el estilo solo se aplicará sobre este texto 
    y no sobre el resto del texto. 
</p>

Esta opción es muy útil pues nos permitirá definir diferentes estilos para la misma etiqueta dependiendo de donde se encuentre.