Usage of style tag in HTML - but why?

Usage of style tag in HTML - but why?

bramley

bramley

Member
Local time
14:43
Joined
Jan 28, 2020
Messages
11

Does anyone have any scenarios where using the <style> tag could be useful? Is there a browser that doesn't interpret the actual stylesheet properly? I'm genuinely interested, so please leave any ideas below. The only real use case I could think of is not knowing how to link stylesheets in your HTML doc.

 
adam

adam

Mr. Webwide
Administrator
Local time
20:43
Joined
Sep 24, 2019
Messages
1,264
Pronouns
he/him

Sure! Here's some I can think of:

  • You're distributing a single HTML file as a document format and want it to work independently and offline (documentation perhaps?)
  • You only have a very small amount of CSS on your page and want to reduce the amount of requests (eg. an error page or status page perhaps, particularly a sever overloaded error page after high traffic, sticking CSS for that page in the HTML is going to reduce another request)
  • The <style> tag can also be used in SVG files to apply styles to shapes and paths

 
Last edited:
adam

adam

Mr. Webwide
Administrator
Local time
20:43
Joined
Sep 24, 2019
Messages
1,264
Pronouns
he/him

bramley said:
Oh cool! I never knew about the .svg functionality!
Click to expand...
It's pretty great! You're right that most of the time though if you're using the CSS on multiple pages and have a good amount of it you're almost always going to want to link it instead.

Sometimes some software plugins/add-ons will use the style tag to dynamically generate styles in the HTML as they load which tends to be easier than generating a CSS file and linking it. Say for example if a plugin has some style settings that an admin can pick. I have seen this a fair bit in PHP/WordPress, though I wouldn't advocate it as great practice.

 
Last edited:
adam

adam

Mr. Webwide
Administrator
Local time
20:43
Joined
Sep 24, 2019
Messages
1,264
Pronouns
he/him

You can see an example of CSS in SVG here, just view the source and scroll all the way to the bottom.


You can see that I have used it to implement animation directly in to the image without requiring a separate file. The benefit of doing it that way is that I no longer need to inline the file which means I can defer it loading and also use it as a background image.

 
Last edited:
VickiLanger

VickiLanger

Asks "why?" too much
Gold Member
Local time
15:43
Joined
Oct 7, 2019
Messages
189
Pronouns
she/her

bramley said:
Yeah that's totally cool! However, please mention my twitter @bramleylmao when doing so!
Click to expand...

Done. I've added it to the list. Can't say when it will be asked as it asks questions randomly, but you'll get a notification when it does.

Python: 
'When would using the HTML <style> tag could be useful? \ncredit @bramleylmao',  # https://webwide.io/threads/usage-of-style-tag-in-html-but-why.646/

 
Top