Style tags are a pretty interesting part of web development. I mean, theyβre fundamental and basic to how the current web works, but most of the time, your siteβs actual styling comes from importing and using numerous CSS stylesheets for themes, plugins, and the everyday look your visitors see.
But back in the old days of website building, you could use style tags in the very body of the website, and it would be okay. Most, if not all, of the CSS for the page would go on the page itself, and back thenβ¦it worked okay. Nowadays, there are issues with that, of courseβsuch as page load speed and execution orders, and the more mature web technologies grow, the less often you want to use style tags all by their lonesome.
There are, however, times when you would want to use them. Sometimes, they enhance your workflow, while other instances really make your usersβ lives betterβmobile optimization, for example, or drawing their attention to a specific element through awesome styling.
Typical Stylesheet Use
In almost every website today, you will see the styling implemented like this:
<link rel='stylesheet' id='divi-style-css' href='/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />
If youβre an Elegant Themes member who uses Divi (you should be!), that calls up the full stylesheet I took this snippet from:
/* Theme Name: Divi Theme URI: https://www.elegantthemes.com/gallery/divi/ Version: 3.0.40 Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection. Author: Elegant Themes Author URI: https://www.elegantthemes.com License: GNU General Public License v2 License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* Browser Reset */ body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
Now, in theory, you could put that in a style tag in the header of any page you write. It would definitely work, but thatβs stinky coding and not at all what style tags are good for.
Of course your website has CSS stylesheets like those. Youβre going to use them. You have custom.css and stylesheet.css and probably way more than that. Youβve figured out exactly what your site should look like, and youβre happy with it.
So why do you need the style tags?
Because stylesheets are big-picture solutions. A style tag is a small-scale solution.
Sheets handle the greater appearance of your site, not the nitty-gritty individual elements and special highlights. Sometimes, itβs more work than itβs worth to throw a one-off piece of code into a stylesheet.
Thatβs when style tags really become useful. Also, sometimes you need to tweak a single element or make a specific style choice for certain devices or use cases. Thatβs when style tags really shine in modern web development.
A Single Instance of an Element
Probably the main reason youβd use style tags in your site is if youβre dealing with a single, one-off element on your page. It can be a lot of hassle (for very little, if any, return) to include the styling in an external CSS file attached to that elementβs id. What you can do, however, is throw a style tag onto the element and go on with your day.
For instance, if you have a sidebar widget that needs a special font, you could put it in a div, give the div a CSS id, and then head to your spreadsheet to include something as simple as {font-family: βExoβ, Arial, sans-serif;}, but thatβs a lot of trouble.
The better option, would be to simply do this?
<div style="font-family: "Exo", Arial, sans-serif;" />
Bada-bing, bada-boom, youβre done and that widget now stands out because itβs the only one that gets that particular styling. (And yes, I realize that using a new and different font likely clashes with the rest of your design. But itβs an example.)
One Simple Page
Sometimes, you have a very simple, one-off page on your site. It might be a splash page or a squeeze page. You probably just need a few tweaks to your styling here, but you need them to apply to this page, and this page alone.
So you can use the oft-maligned !important tag along with style to get things done more quickly and easier than creating a new stylesheet and linking it. This method is best used if you donβt have a lot of new CSS because loading oodles of CSS like this can slow page load. But you already knew that.
Something simple like this, however, wouldnβt be too big a strain on your usersβ connections, and it isnβt honestly worth adding into a stylesheet. (And to be fair, this CSS is hideous and isnβt worth adding to any site. Tee hee!)
<style> h2, h3, h4 { font-family: "Exo", Arial, sans-serif!important; text-align: right; font-size: 2rem; color: blue;} body, p {font-family: "Roboto", Arial, sans-serif!important; font-size: 1.2rem; color: red; background: #000;} </style>
The point here, though, is that HTML 5 is cool with you adding style tags into the head of your website so that you tweak the existing stylesheets. While the !important tags are definitely not required in this instance (they rarely are), I feel as though this is, perhaps, the one time to use them because theyβre not going to cause a lot of tag spaghetti as you (or other devs) start to work on the site because they only apply to this single page.
Multiple Viewport Sizes
Media queries are your friend. If youβre not totally familiar with them, then I highly suggest you read up on them. Basically, you can declare what parameters have to be met for certain CSS to take effect. Mostly, though, you will use this to make sure your sites work on different devices. When you need site-wide responsiveness, that will go in a stylesheet.
But again, if you have a single page or element that you need to be appear differently or not at all on mobile (or even smallerβor largerβdesktop resolutions), you can do that with style tags in the header.
<style> @media (max-width: 767px) { .white_text { color: #ffffff; } .blue_text { color: #cbe1f3; } .white_background { background-color: #ffffff; } .blue_background { background-color: #003663; } #email_form_a { display:none; } </style>
Stylinβ and Profilinβ
CSS is such a major part of web development now that itβs something almost everyone has to know and use. And even more than knowing CSS is knowing when to use the nuanced tools you have access to.
So donβt feel as though you are limited to stylesheets. Sure, theyβre fantastic and useful, and they make the entire web a nicer place to be, but you can still get use out of simple style tags, too, and give your sites a little extra pop.
So how do you use style tags outside of your .css stylesheets? What insights can you give folks?
Article thumbnail image by Creative Thoughts / shutterstock.com
Thanks for all this information. Elegant Themes Team ROCKS!!!
I want to learn the best practices for using css with Elegant Themes and DIVI. I’d like to find and study the DIVI CSS encyclopedia…
Any tips or recommends?
It will bypass css file and of course bad practice.
Using the Style Tag Outside of CSS Stylesheets can affect the SEO. So it is still good to use it outside?
once i was trying to dabble in the css and ruined my site. finally re-uploaded the theme.
I would only consider adding “style=” dynamically through a custom field. This works well for a background-color which is used for a product.
As best I can judge, the suggestions that are offered in the article are “lazyness” which is a poor excuse for bypassing best practices.
Yupp. I only use it in conjunction with custom fields so my clients can change their background images/colors easily. And really I do this for images because there really isn’t a behavioral replacement for background-size:cover.
You’re wrong. It’s simply bad practice and makes things harder to manage. Use a custom class using something like the BEM style mentality.
For those that have not stumbled upon BEM methodology, or had it go onto a shelf somewhere in their head, here’s a link that sums up its benefits fairly decently.
https://css-tricks.com/bem-101/
I’ve always thought it was a bad practice too.
how do I use style tags outside of the .css stylesheets? —Holiday layouts/layout sections. I just did a Halloween Header for a client. It’s fun, spooky, self contained (styles tag added via code module), and I saved it to the Divi Library. Nov 1st I’ll take it down and revert to the regular hero/splash header—Next year I can load it from the library, update it if desired and I’m ready for the holiday in no time at all.
I will feel less guilty now when I’m forced to do this π
Cool read.