External CSS does not get applied to CloudPage Code View or Preview
Trailblazer Community

External CSS does not get applied to CloudPage Code View or Preview

Marketing Cloud Pages/Sites

Last updated 2021-09-20 ·Reference W-9868940 ·Reported By 1 users

No Fix

Summary
When a link tag (i.e. <link rel="stylesheet" type="text/css" href=...>) is used within HTML in a CloudPage to reference external CSS, the CSS from the external stylesheet does not get applied in the preview of the page that is displayed in the Code View or the preview that renders after clicking the Schedule/Publish button.

However, once the page is published and the URL to the CloudPage is opened in browser, the external CSS is applied. This only appears to affect the previewing of the page within the editor.

Repro
Within CloudPages perform the following actions:

Create Code Resource as external stylesheet:

1. Click Add Content > Code Resource.
2. Add Name.
3. Press Next.
4. Select CSS from Layout.
5. Press Save.
6. Add the following CSS to the Code Resource:

body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}

7. Press Save & Publish.

Create Landing Page and link external stylesheet:

1. Click Add Content > Landing Page.
2. Add Name.
3. Press Next.
4. Select Black Layout.
5. Press Save.
6. Within the editor in the Default view drag a HTML block.
7. Add the following code to reference the CSS Code Resource as an external CSS stylesheet:

<link rel="stylesheet" type="text/css" href="<CSS Code Resource URL>";

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

8. Press Save.

Note: the Code View does not show the styles from the external CSS applied.

7. Press Schedule/Publish.

Note: the Preview does not show the styles applied. Page needs to be published and opened for external CSS to apply.

Workaround
This issue does not affect Internal CSS so as a workaround the CSS can be applied internally temporarily to enable the preview of the CSS in the Code View and Preview prior to Publishing the page.

For example, the CSS from the Code Resource can be added to a style tag within the CloudPage HTML as follows:

1. Add the following code to a HTML block on your CloudPage Landing Page. Note: the CSS is placed within a style tag instead of using the link tag to reference an external stylesheet:

<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Note: the styling is rendered in the Code View and in the Preview as it is not external CSS.

Reported By (1)

Any unreleased services, features, statuses, or dates referenced in this or other public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make their purchase decisions based upon features that are currently available.