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.

What is WP Enqueue and How Do You Use It?

When a person first learn HTML, the only way you understand how to insert any kind of interactivity is using script tags within the header or footer of the page to create the type and source of an external JavaScript file. (Or if you’re really simply learning, the entire JS function between script tags right there in the body by itself. That’ s fine for learning, yet it’ s pretty bad practice as soon as you transfer to advanced WordPress development. Get into the enqueue function.

Once you move past simple, one-page websites, those beginner practices can create some really sticky situations. As you start adding more and more JavaScript, your website gets slower and slower. Updating it requires longer. Eventually, you’ve made a big pile of JavaScript-getti and no matter how hard you try, that pile of noodles ain’t coming untangled.

Thankfully, you can use the particular enqueue perform in WordPress to add styles plus scripts that the CMS take care of for you. All the messiness is handled for you. While it’s not as simple as directly pasting the script or styles you want in the header or footer of each page, it’s the right way in order to handle it. WordPress isn’t terribly opinionated, there is certainly definitely a series of best practices you should know about

And wp_enqueue_scripts is at the forefront of those practices.

What’s the particular Big Deal?

The primary reason you will want to make use of wp_enqueue is definitely to maintain your site running smoothly plus quickly. Page speed is important and using the same scripts and fashions more than and over and over again doesn’t help. At all.

Luckily, wp_enqueue is definitely an example of functional programming. Almost all that means is that you write a single piece of code to become executed (your JavaScript snippet), and you use wp_enqueue to call it instead of needing to rewrite/paste the whole thing every time you need it.

That’s. Awesome.

Even more awesome, using the enqueue method makes WordPress itself insert the _script_ labels into the header and footer where they belong automagically, loading them with out having to input them on every page separately.

WP Enqueue Syntax and Params

Enqueueing scripts really isn’t that tough. If you are savvy enough in order to work with JavaScript in the very first place, the PHP functions you make use of for enqueueing will be a easy.

In a common script tag, you will either import the external. js file directly or paste the entire, long snippet of code in between the tags themselves. (This can also be exactly what you’ re doing if you paste something into the Divi code component or the WP Custom HTML or Text widgets).

You just require to know a few basic parameters and syntax.

The particular Codex gives this as the base enqueue code:

   wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );   

All in all of, it’s pretty simple to break down into usable bits by parameters.

  • wp_enqueue_script() is the function all that will place all the code in the page where it goes.
  • $handle is a unique name for the script by itself.
  • $src represents the URL of the actual. js file you’re enqueueing.
  • $deps are the $handle s of any dependencies this one requires.
  • $ver will be the version number. If not one is specified, you get the WP installation version added automatically.
  • $in_footer or even $in_header informs WordPress where to put your screenplay.

The full documents to enqueue scripts can be seen in the Codex.

Attention, Students: WP Registration Begins At this point!

In addition to _wp_enqueue__, WP has a handy-dandy method called _wp_register__, too. Both methods use the particular same parameters and syntax, so a person really get a two-for-one deal along with the pair of them. Essentially, signing up a script is the same because naming a function in JavaScript.

While not necessary, registering your own scripts can make your life a lot easier because you won’t have to announce them as dependencies later on lower the line. They’ll already be registered. Hence… _wp_register__. Once a script can be registered, you can call it back by its $handle , as you will discover in the instance below.

You will register your code like this:

   wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, $in_footer);   

After that, whenever you need it again, a person can always call it back like this:

   wp_enqueue_script( 'jquery' );   

Additionally, sign up means that you don’t have to load a script even when it’s not needed. WPMU posseses an awesome instance of shortcode creation: if you sign up the script to a shortcode that uses _wp_enqueue__, it will only obtain used when the shortcode is. However when you only call it by enqueueing it, it will be loaded even if the shortcode isn’t used.

You can read all about the particular method in the Codex.

Additionally, plugin authors are needed to enqueue scripts if they need within the WordPress. org repo, so in the event that that’s on your plate… better get to queuein’.

Putting It Together

Implementing the code is usually easy. Just drop a snippet like the one below into your functions. php . and WordPress handles the rest. I mean, this particular is a really basic snippet to call jQuery, but you can see how the stuff plays together.

You would normally use something that looks like this:

  < script type=" text/javascript" src=" jquery. js" > < /script>  

As soon as you learn how use enqueue_scripts_ , you will see some thing more like this:

   add_action('wp_enqueue_scripts', 'add_scripts'); function add_scripts()  wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', false, null, true); wp_enqueue_script( 'jquery' );    

Now, notice in the code above how it uses the add_scripts()_ function that’ s a part of WordPress currently to outline the order from the next few steps. First, the wp_register_ function gets every the details specified and puts the script in the page footer, plus then uses wp_enqueue to finally call it as soon as everything is set up.

Wrapping Up

That’ s i9000 really all there is to this. Well, that’ s not true– enqueue is a pretty ingrained part of WP. But those are the fundamentals that get you poking around with doing more with WordPress than you may have before.

The basics we all learned of placing in scripts when we started internet development still work, but they aren’ t always the best way to do things. Part of the attractiveness of WordPress being built on PHP is that you can bring this sort of logic into your work while nevertheless really keeping the same basic framework and workflow as you would possess had anyway.

Article thumbnail image by hanss / shutterstock. com

The blog post What is WP Enqueue and How Perform You Use It? appeared first upon Elegant Themes Blog.

eleven Amazing Beauty Blogs Made with WordPress

Beauty blogs are one of those kinds of websites which have a lot of relevant content aimed in a specific target audience. The bloggers at the rear of these sites are usually very energetic and try to keep their visitors as up-to-date as possible with all of kinds of tips revolving around elegance; from makeup to skincare, health plus more. One thing you might not really have known is that many of these beauty blogs use WordPress because their articles management system. For this post, we’ ve created a list of 11 amazing beauty blogs made with Wp for you to discover and maintain in mind while designing your next attractiveness blog.

1. Remarques

beauty blog

The first beauty blog in the row can be called Remarques. You can find all kinds of content on this blog but the particular main topics that are discussed are usually beauty-related, such as makeup, skincare and hair. The first thing we observe is that the homepage and menus are nicely balanced. The posts upon the homepage are carefully selected and beautifully presented. Rather than filling the homepage with all kinds of posts, the particular menu items contain a preview of the last three articles that can be found in that specific category. This allows visitors to quickly find the content they’ re looking for without becoming overwhelmed.

2. Manface

beauty blog

The next beauty blog on the list, Manface, is focused on all sorts of beauty elements that are relevant to men. It is definitely a go-to for men who else want to explore different tips plus products; from skincare to body, curly hair and fragrance. In comparison with Remarques, the previous beauty blog we’ ve distributed in this post, this website shares a lot more of their content on the homepage. The menu, on the additional hand, is rather simple yet easy to navigate through.

3 or more. The Formulation

beauty blog

Next up, we also possess The Formula blog which looks incredible. This website puts its design focus on giving that black and white balance to their website which these people absolutely manage to pull off. The internet site is simple yet provides all the information a visitor could be searching for. The menu items seem such as they are just hyperlinked, but once you hover over them they catch you by surprise by showing a drop-down menu. They also have a beautiful way of showing the title along with the category a post belongs to.

 4. Barefoot Golden-haired

beauty blog

Then, we also have the Barefoot Blonde beauty blog. This website definitely emphasizes the person behind the beauty blog and uses Instagram posts on the top of the page along with the social icons to continue the particular storytelling process elsewhere as well. Besides that will, the entire website focuses on the visual part of each post and allows visitors to share the write-up without having opened it yet.

5. Very Good Lighting

beauty blog

Up following, we have the Very Good Lighting beauty blog for men. This blogging website gives the men out there almost all the tips they need for encounter, body and hair. One of the particular very pleasant things about this web site is the scrolling animation that will keep you interacted with the content that will you come across on their website. Within overall, this beauty blog is quite easy to navigate through and provides its visitors with the content they’ ve created in a very simple and user-friendly way.

6. Beauty is Boring

beauty blog

The next beauty blog we want to put in the limelight is Beauty is Boring. This site uses primarily black and white colors throughout their website. However, they do manage to mix that beautifully with the images they will use throughout the website. This beauty blog has a very recognizable way of creating their posts. Although each publish is different, they use the same kind of visualities. In late each article, and even on their homepage, they share all the items that had been used in a post and where they can be purchased; super easy for people who want to get to this right away.

7. Maskcara

Another simple yet elegant beauty blog is definitely Maskcara. The website starts with the slideshow of featured posts that instantly makes sure the visitors are up-to-date regarding all the new content that’ s getting provided on the blog. This elegance blog has everything you’ d anticipate a beauty blog to have and finishes the homepage by showing site visitors the latest Instagram posts from the particular beauty blogger.

8. Jaclyn Hill Makeup

beauty blog

The well-known beauty blogger, Jaclyn Hill, has a pretty awesome web site as well. Something we’ ve seen in some of the previous beauty blogs, all of us see with this blog as well; the combination of black and white colors throughout the web design. That’ s not really this type of coincidence. Most of these websites provide makeup tutorials that are currently pretty colorful. By using black and white colors throughout their website, they make certain their web design matches the colours that are being used within the tutorials.

9. Nikkie Lessons

beauty blog

Speaking about well-known beauty bloggers and make-up artists; Nikkie Tutorials definitely belongs on that list as well. Like the particular Jaclyn Hill website, this website is definitely mostly used to share the video content material from her YouTube channel. The site design is sober but it looks quite elegant at the same time. The particular right sidebar bio’ s purpose is to make people immediately recognize the beauty blogger’ s identity and brand.

10. Amelia Liana

beauty blog

Then, we all also have Amelia Liana. This beauty blog immediately gives you summer vibes by looking on the colors of the particular website only. The website comes with an awesome menu that shows you the three latest post in a very attractive way while hovering over the menu items. That allows users to instantly find the latest posts that they need to meet up with. Besides that, the website also shares three ways to navigate through the posts while becoming on the homepage; by latest, popular of. Another well-thought-out extra touch this particular website offers is two video slideshows. You can find them at the end of the homepage and they will allow visitors to look into the latest videos and vlogs.

Made with Divi

11. One particular Turn Kill

beauty blog

Lastly, we have One Turn Kill, a blog that is made with the Divi theme. This website is not only aimed at beauty, it also handles other topics such as looks and home decor. The particular website is a bundle of all kinds of stuff that might come within handy when trying to find inspiration. One of the nice things about this internet site is that it starts with a slideshow that will showcases featured posts along with a good intro to what the post will be all about. This inspires visitors to click on the slide and read the blog post entirely.

Final Thoughts

Throughout this awesome article, we’ ve discussed some great beauty blogs that are made with WordPress. These websites can give you inspiration for a next beauty blog website you need to create to get yourself or for a client. Should you have any questions or suggestions; make sure you leave a comment in the particular comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss the big announcement, useful tip, or Divi freebie!

Showcased Image by Pro Symbols / shutterstock. com

The post eleven Amazing Beauty Blogs Made with Wp appeared first on Elegant Themes Blog.