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

Style tags are a pretty interesting part of web development. I suggest, they’ re fundamental and basic in order to how the current web works, several of the time, your site’ s i9000 actual styling comes from importing and using numerous CSS stylesheets for styles, plugins, and the everyday look your visitors see.

But back in the old days of website building, a person could use style tags in the particular very body of the website, plus it would be okay. Most, when not all, of the CSS regarding the page would embark on the web page itself, and back then… it worked okay. Nowadays, there are difficulties with that will, of course– such as page fill speed and execution orders, and the particular more mature web technologies grow, the particular less often you need to use style tags all by their lonesome.

There are, however, times when a person would want to use them. Sometimes, they improve your workflow, while other situations really make your users’ lives better– mobile optimization, for example, or drawing their attention to a particular element through awesome styling.

Typical Stylesheet Use

In almost every website today, you will see the particular styling implemented like this:

   < link rel='stylesheet' id='divi-style-css' href='https://cdn.elegantthemes.com/blog/wp-content/themes/Divi-child-theme-01/style.css?ver=3.0.40' type='text/css' media='all' />   

If you’ re an Elegant Designs member who uses Divi (you ought to be! ), that calls up the particular full stylesheet I took this snippet from:

   /* Style Name: Divi Theme URI: http://www.elegantthemes.com/gallery/divi/ Edition: 3. 0. 40 Description: Smart. Flexible. Beautiful. Divi is the most effective theme in our collection. Author: Sophisticated 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 within the header of any page you write. It would definitely work, yet that’ s stinky coding and not at all what style tags are usually good for.

Style Tags, Modern Usage

Associated with course your website has CSS stylesheets like those. You’ re going in order to make use of them. You have customized. css and stylesheet. css and most likely way more than that. You’ ve figured out exactly what your site should look like, and you’ re pleased with it.

So why do you need the style tags?

Because stylesheets are big-picture options. A style tag is really a small-scale remedy.

Sheets handle the greater appearance of your site, not the nitty-gritty individual elements and unique highlights. Sometimes, it’ s more function than it’ s worth to throw a one-off piece of code straight into a stylesheet.

That’ s when style tags really turn out to be useful. Also, sometimes you need to tweak a single element or make a specific style choice for particular devices or use cases. That’ ersus when style tags really shine within modern web development.

The Single Instance of an Element

Probably the major reason you’ g use style tags inside your site is usually if you’ re dealing with just one, one-off element on your page. This can be a lots 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 perform, however, is throw a style tag onto the element and go upon with your day.

For example, if you have a sidebar widget that needs a special font, you could place it in the div, give the div a CSS id, and then mind to your spreadsheet to include something as simple as font-family: “Exo”, Arial, sans-serif; , but that’ s a great deal of trouble.

The much better option, would be to simply try 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 will particular styling. (And yes, I realize that using a new and various font likely clashes with the sleep of your design. But it’ t an example. )

1 Simple Page

Sometimes, you have a very simple, one-off page on your own site. It could be a splash page or even a squeeze page. You probably just require a few tweaks to your design here, but you need them to apply to this page, and this web page alone.

So you may utilize the oft-maligned ! important tag along with style to get matters done more quickly and easier compared to creating a new stylesheet and linking it. This method is best utilized if you don’ t have a great deal of new CSS because loading tons of CSS such as this can slow page load. But you already knew that.

Something simple such as this, nevertheless, wouldn’ t be too big stress on your users’ connections, and it isn’ t honestly worth adding straight into a stylesheet. (And to be reasonable, 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, even though, is that HTML 5 is cool together with you adding style tags into the particular head of your website so that you tweak the existing stylesheets. As the ! important tags are usually definitely not required in this example (they rarely are), I feel as though this is, perhaps, the a single time to use them because they’ lso are not going to cause a lot associated with tag spaghetti as you (or other devs) start to work on the site because they only apply to this single page.

Several Viewport Sizes

Media concerns are your friend. If you’ re not totally familiar with them, i then highly suggest you read up on them. Basically, you can declare exactly what parameters have to be met pertaining to certain CSS to take effect. Mostly, though, you will use this in order to make sure your sites work on various devices. When you need site-wide responsiveness, that will go in a stylesheet.

However, if you have the single page or element that you should end up being appear differently or not at just about all on mobile (or even smaller– or larger– desktop resolutions), you can perform that with style tags in the particular header.

   < style> @media (max-width: 767px) {. white_text {{|in front} color: #ffffff; }. blue_text { {color|colour}: #cbe1f3; }. white_background { background-color: #ffffff; }. blue_background { background-color: #003663; {}|is parked ,} #email_form_a { display: none; } < /style>   

Stylin’ {and|plus} Profilin’

CSS is {such|this kind of} a major part of web {development|advancement|growth} now that it’ s something {almost|nearly} everyone has to know and {use|make use of}. And even more than knowing CSS is {knowing|understanding} when to use the nuanced tools you {have|possess|have got} access to.

So don’ t feel as though you {are|are usually} {limited to|restricted to} stylesheets. Sure, they’ re fantastic and useful, and {they|these people|they will} make the entire web a {nicer|better} place to be, but you {can|may} still get use out of {simple|easy|basic} style tags, too, and give {your|your own} sites a little extra pop.

So how do {you|a person} use style tags outside of {your|your own}. css stylesheets? What insights can {you|a person} give folks?

Article thumbnail image by Creative {Thoughts|Ideas} / shutterstock. com

The post When and Why {to|in order to} Use the Style Tag {Outside of|Beyond} CSS Stylesheets appeared first on {Elegant|Stylish|Sophisticated|Classy} Themes Blog.