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

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