Re: Custom CSS not applying in SAS Studio using _webout + data null

rabkabizan

Hi all,

I'm trying to generate a custom HTML report using data _null_ and the _webout fileref in SAS Studio. I'm injecting my own CSS styles directly into the HTML using PUT statements, but the CSS doesn't seem to apply at all when viewed in the SAS Studio results pane.

Here’s a simplified version of my code:

data _null_;
    file _webout;
    put '<style>';
    put '*,*:before,*:after{box-sizing:border-box}';
    put 'body{font-family:Arial,Helvetica,sans-serif;margin:0;padding:18px;}';
    put '.pm{max-width:820px;margin:0 auto;}';
    put '.pm-title{font-size:22px;font-weight:700;color:#2b5c83;';
    put '  border:2px solid #2b5c83;padding:10px 14px;border-radius:6px;';
    put '  margin-bottom:14px;display:inline-block;}';

    put '.card{border:1px solid #d9dee6;background:#f4f6f8;margin:10px 0;';
    put '  border-radius:8px;padding:16px 18px;}';
    put '.card.top{background:#e9f7e6;}';

    put '.card h3{margin:0 0 10px 0;font-size:16px;color:#2d4c6b;}';
    put '.card h3 .method{font-weight:700;text-decoration:underline;}';

    put '.metric{margin:8px 0;}';
    put '.metric .label{font-weight:700;color:#333;margin-bottom:4px;}';
    put '.metric .value{font-size:14px;color:#333;}';
    put '.metric .value.big{font-size:32px;line-height:1;color:#3a7bd5;';
    put '  font-weight:800;letter-spacing:0.5px;}';
    put '.metric .value.rate{font-size:18px;font-weight:700;}';
    put '</style>';

	put '<div class="pm">';
run;

data _null_;
    set public.prediksi_premium_rate_row;
    file _webout mod; 
    put '<div>';
    put '  <h3>Model <span class="method">' metode '</span></h3>';

    put '  <div class="metric">';
    put '    <div class="label">Premium</div>';
    put '    <div class="value big">' premium comma20 '</div>';
    put '  </div>';

    put '  <div class="metric">';
    put '    <div class="label">Premium Rate</div>';
    put '    <div class="value rate">' rate COMMA12.4 '</div>';
    put '  </div>';
    put '</div>';
run;

data _null_;
    file _webout mod;
    put '</div>';
run;

However, the styles are not applying at all (the text doesn’t change size or color). I'm expecting it to look styled, but it's just plain unformatted HTML.

My question is, why isn't the CSS applying in the _webout output in SAS Studio?

Any help would be greatly appreciated!

Thanks in advance.

arthurdpereira

Hi there! The issue you’re seeing happens because the SAS Studio Results Pane doesn’t render HTML/CSS as a real web browser would, it just shows the raw text, so any CSS or HTML tags are ignored. That’s why your styles don’t show up.

To actually see your styled HTML, write the output to a physical .html file (using the file statement), then open that file in your web browser (like Chrome or Firefox). There, your CSS will work as expected!

data _null_;
    file '/path/report_test.html';
    put '<html>';
    put '<head><style>body{color:red;}</style></head>';
    put '<body>Testing CSS :)</body>';
    put '</html>';
run;

After running, just open the file in your browser and you’ll see your styles!

The Results Pane in SAS Studio can’t render CSS from _webout. For a styled view, save as a .html file and open it in your browser.

By the way, if you’re running your code through the SAS Job Execution Service (JES)—for example, using SAS Viya or deploying your jobs as web endpoints—the output will be rendered in a real web browser. In that scenario, your HTML and CSS should display exactly as you designed, because the response goes straight to the browser, not the Studio Results Pane.

So, if you test your HTML report using Job Execution (accessing via a browser), your CSS will apply and look as expected. The main limitation is really with SAS Studio’s Results Pane itself.

SAS Studio Results Pane: no real HTML/CSS rendering (raw output).
Job Execution (JES) / Browser: real HTML/CSS rendering, everything works as designed.

Hope this helps!

SAS Job Execution Developer
I love sharing knowledge and helping the community.

Follow me:
GitHub | LinkedIn

Custom CSS not applying in SAS Studio using _webout + data null

Re: Custom CSS not applying in SAS Studio using _webout + data null

The 2025 SAS Hackathon has begun!

SAS Training: Just a Click Away