Welcome • User Guide
ToS • Privacy • Canary
Donate • Bugs • License

©2025 Poal.co

1.4K

It does obviously not bother me, but I am just wondering whether there is a technical reason for having the CSS contents inline in the HTML source code, instead of a dedicated .CSS file, referenced to using <link rel="stylesheet" href="custom.css" />.

About the priority: I know that whichever comes last out of two identical CSS references (whether in the same style sheet or multiple style sheets of the same page), has the higher priority.

Whether a style sheet CSS is embedded in the HTML source code (<style> … </style>) or outsourced to a separate file (<link rel="stylesheet" href="stylesheet_filename.css" />) makes no difference in terms of priority, as long as the tags are at the same position.

But is there a technical reason for having the custom style sheet inside the HTML source code instead of a separate file?

It does obviously not bother me, but I am just wondering whether there is a technical reason for having the CSS contents inline in the HTML source code, instead of a dedicated .CSS file, referenced to using `<link rel="stylesheet" href="custom.css" />`. ---- About the priority: I know that **whichever comes last** out of two identical CSS references (whether in the same style sheet or multiple style sheets of the same page), has the higher priority. Whether a style sheet CSS is embedded in the HTML source code (`<style> … </style>`) or outsourced to a separate file (`<link rel="stylesheet" href="stylesheet_filename.css" />`) makes no difference in terms of priority, as long as the tags are at the same position. But is there a **technical** reason for having the custom style sheet inside the HTML source code instead of a separate file?

(post is archived)

You are currently inside a comment thread.
Click here to see all the comments (13).
[–] • 1 pt (edited )

Well it certainly won't let you upload raw text for security reasons, so it passes the whole shit to the shreder in order to remove unnecessary code and unwanted code, evidently

Have you tried add svg image via your css? Because if that works... Well that's a potential security flaw eventually

Something like

body { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>"); }

[–] • 1 pt

Of course, it does not work.

But I wonder why that filtered CSS is embedded inside the HTML instead of a separate CSS file.

Not that it bothers me, but I would like to know a technical explanation.

[–] • 1 pt

I'm not saying angular is used here, but I believe what's going on under the hood is handled in a similar fashion

https://www.w3schools.com/angular/ng_ng-style.asp

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">Welcome</h1>

<script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.myObj = { "color" : "white", "background-color" : "coral", "font-size" : "60px", "padding" : "50px" } }); </script> </body>

As you can see here, all css is handled with js, there' s no separate css file