Custom CSS - not using head tag

Hello guys,

I’d like to use my custom CSS code but I don’t want to make a mess in the html structure. Is there some workaround? Using custom code via tag is not an option for me.

Thank you

Can you describe what would be putting a mess in the HTML structure?

With Webflow you have 3 ways to add custom code: In site’s Settings Custom Code tab (site level), in page’s Settings head and end of body code (page level), or in a Embed component anywhere inside of the page (page level with effects seen in the Designer).

None of them is going to put a mess in your HTML structure.

HTML structure is highly permissive. For instance, nowadays, you shouldn’t even use <head> and <body> tags, they aren’t recommended anymore. The Google Style Guide for HTML recommends omitting all optional tags. That includes <html> , <head> , <body> (even <p> and <li> end tags) .

If Google recommends this, it’s because the HMTL5 Specifications defines it: https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission

You’re going to affect nothing — in terms of SEO and performances — by placing your bits of CSS anywhere you want. of course it’s going to be loaded at each page load, which isn’t ideal, but so is the case with other Webflow methods of adding custom CSS.

I recommend that you place your custom CSS inside of an Embed component that you’ll place in your navbar symbol, so it impacts all the pages, AND shows you the results right in the Designer.

Thank you so much Vincent.

Unfortunately, my employer requires that css styles shouldn’t be in the HTML structure. In my case, it’s many lines of code.

For better code clarity, it is better to have css in an external file. And I agree with that. Are you planning this feature in the future?

I am not working with Webflow so I really don’t know :slight_smile: I don’t think you’ll have this anytime soon though.

So, you can just add a link to an external CSS file in the HEAD custom code at site level, and then host your CSS on any CDN/repository that suits your need.

Looks like this:

<head>
<link rel="stylesheet" type="text/css" href="myserver.com/mystyle.css">
</head>

However, using Webflow and having to rely on an external CSS file is a bit counter productive, a bit odd if there aren’t strong valid reasons for it.

1 Like