When and Why to Use the Style Tag Outside of CSS Stylesheets

Posted on October 29, 2017 by in Resources | 12 comments

When and Why to Use the Style Tag Outside of CSS Stylesheets

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: http://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: http://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.

Style Tags, Modern Usage

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

12 Comments

  1. I will feel less guilty now when I’m forced to do this ๐Ÿ˜‰

  2. 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.

  3. 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.

    • I’ve always thought it was a bad practice too.

    • 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/

  4. 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.

  5. once i was trying to dabble in the css and ruined my site. finally re-uploaded the theme.

  6. Using the Style Tag Outside of CSS Stylesheets can affect the SEO. So it is still good to use it outside?

  7. It will bypass css file and of course bad practice.

  8. 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?

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest