Última actualización: abril 14, 2021
Existen diferentes lugares en los que puede aplicarse el estilo a tu contenido de HubSpot. El lugar en el que se agregue el CSS (Cascading Style Sheets) en HubSpot, tendrá un impacto en el orden en el que se aplica. CSS se aplica en cascada, lo que significa que los últimos estilos que se aplicados anularán los que se haya aplicado antes. Como regla general, el estilo más específico es prioritario. Esto significa que CSS aplicado a una página o módulo específico tendrá prioridad sobre lo establecido en una plantilla o aplicado a tu dominio en tu configuración.
Este artículo abarca cómo se aplica el estilo CSS a tu contenido de HubSpot, y cómo usar las herramientas de desarrollador en tu navegador web para localizar este estilo.
Nota: Si no te sientes cómodo leyendo o editando CSS, es altamente recomendable que trabajes con un diseñador para realizar cambios en el estilo de tu sitio web.
Cómo se aplica el estilo a tu contenido de HubSpot
El estilo puede aplicarse a tu contenido en algunas ubicaciones diferentes en HubSpot. CSS se aplicará en cascada en orden descendente. Los últimos estilos que se apliquen tienen prioridad.
Nota: el último estilo aplicado a tu contenido tendrá prioridad sobre los estilos establecidos anteriormente en el CSS. El estilo también puede anularse mediante una declaración más específica o una etiqueta !importante.
El estilo se aplicará a tus páginas o publicaciones de HubSpot del blog en el siguiente orden. El último estilo que se aplique tiene prioridad:
CSS en la hoja de estilo
El estilo de una hoja de estilo es el primer CSS aplicado a tu página o publicación de blog. Cualquier estilo aplicado en el editor de páginas tendrá prioridad sobre la plantilla que tendrá prioridad sobre las hojas de estilo adjuntas en tu configuración.
El CSS se aplicará en este orden. El último estilo que se aplique tiene prioridad:
- Una hoja de estilo adjunta en tu configuración para todos los dominios.
- Una hoja de estilo adjunta en tu configuración para un dominio específico.
- Una hoja de estilo adjunta a la plantilla de tu página o post de blog.
- Una hoja de estilo aplicada en la pestaña de configuración de tu página.
- También hay algunos estilos predeterminados aplicados a todas las páginas de HubSpot.
Si CSS proviene de una hoja de estilo, el nombre de la hoja de estilo aparecerá junto a la declaración CSS en el inspector. Si colocas el cursor sobre el nombre de la hoja de estilo, puedes ver el nombre completo del archivo.
Una vez que hayas encontrado el nombre de la hoja de estilo, navega a tu administrador de diseño (En tu cuenta de HubSpot, dirígete a Marketing > Archivos y plantillas > Herramientas de diseño.) para encontrar tu hoja de estilo y hacer ediciones según sea necesario.
Si ves el nombre de tu hoja de estilo en el inspector, el CSS se está usando en la hoja de estilo de otro archivo codificado. Esto es indicado por una declaración "includes", como se muestra aquí:
CSS agregado a la <style>etiqueta
CSS agregado a la <style>etiqueta se puede aplicar la etiqueta en cualquiera de las siguientes ubicaciones, con el último estilo que se aplique teniendo la mayor prioridad:
- HTML de encabezado del sitio o HTML de pie de página del sitio web agregado en tu configuración para todos los dominios.
- HTML del encabezado del sitio o HTML de pie de página del sitio web agregado en tu configuración para un dominio específico.
- HTML de encabezado del sitio o HTML del pie de página del sitio web aplicado en la pestaña Configuración de tu página.
- HTML del encabezado del sitio o HTML del pie de página del sitio web aplicado a tu plantilla en el administrador de diseño.
- Estilo en línea agregado a un módulo en la plantilla.
- Estilo en línea agregado a un módulo en el editor de contenido.
Si aparece la URL de la página junto a la declaración, sabemos que el CSS está dentro de las etiquetas <style> en la página. Si element.style aparece junto a la declaración en el inspector, el CSS ha sido establecido en línea.
Esto significa que el CSS no proviene de una hoja de estilo o dentro de <style>etiquetas en el encabezado o pie de página de tu página, pero en lugar de ello, se ha establecido en el mismo módulo.
CSS desde el navegador
Si ves la hoja de estilos de agente del usuario junto a la declaración, el CSS es parte del estilo predeterminado del navegador. Verás esto con más frecuencia para el estilo de etiquetas HTML más amplio como<p>,<h1>, <h2>, <span>, <div>, etc.
Este estilo se aplica por última vez y toma prioridad sobre tus hojas de estilo adjuntas y CSS agregado en una etiqueta <style>, pero se puede sobrescribir en la hoja de estilo aplicado a tu página con una declaración más específica.
Usar herramientas de desarrollador en tu navegador web
Puedes usar herramientas de desarrollador del navegador web para analizar los estilos aplicados a tu sitio en vivo. Si estás usando otro tipo de navegador, busca su documentación de ayuda para materiales de referencia sobre cómo revisar los elementos de la página web.
A continuación, se encuentra un enlace a recursos sobre cómo usar herramientas de desarrollador en los navegadores web usados con más frecuencia
Si estás usando otro tipo de navegador web, echa un vistazo a su documentación de usuario para obtener más detalles sobre cómo inspeccionar los elementos de la página.
