Move Inline CSS Or JavaScript To External (FREE)

December 27, 2020
CSS stands for Cascading Style Sheets which is a design language, describes how and where the HTML elements are to be displayed on the web page. It mainly controls the looks of the website like the colour, size and font of the text. JavaScript is an object-oriented computer programming language commonly used to create complex features on web pages. It is also called interactive web language because it can create and change the static components of the web pages based upon the user input and always keeps running in the background to fetch the latest details.

What Is Inline / Internal CSS And Internal JavaScript?

All the CSS's and JavaScript's code that is embedded with in HTML document are know as inline or Internal CSS or Internal JavaScript.

<p style="color: red; text-align: center;">Hello World!</p>    /* Inline CSS */

<style type='text/css'>                                        /* Internal CSS */
  p {
    color: red;
    text-align: center;
  }
</style>

<script type='text/javascript'>                           // Internal JavaScript
var x = 5;
var y = 2;
var z = x + y;
alert(z);
</script>


Note: There is no inline Javascript.

What Is External CSS And JavaScript?

All the CSS's and JavaScript's code that is hosted externally (uploaded on a server) in form of a file but connected to the required HTML document are known as External CSS or JavaScript.

<link href='/myCSS.css' rel='stylesheet' type='text/css'/>    /* External CSS
<script src='/myJavaScript.js' type='text/javascript'/>    // External JavaScript


Note: Here /myCSS.css and /myJavaScript.js are links to the file uploaded on a server.

Benefits Of External CSS And JavaScript.

Page loading speed increases once file is cached.
- bandwidth reduces.
- Single file can used on multiple websites.
- Easy to update the code from single file.
- Make HTML document tidy.

You can also Minify JavaScript and CSS code to reduce the file size and execution time

How To Host CSS And JavaScript File For Free

Step 1. Open Notepad > Paste your code.

Note: For CSS remove <style> and </style> tags, for JavaScript remove <script> and </script> tags from start and end of the code if any.

Step 2. In the Notepad menu, select 'File' > 'Save as' and type the file name with extension .css for CSS and .js for JavaScript.

Step 3. In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8.

There are so many file hosting services, but google drive is free and easy to manage. You can also use google drive for windows to quickly manage your files.

Step 4. Open Google drive and login with your Gmail account. After you logged in, click on the NEW > Folder button and create a new separate folders to upload your JavaScript and CSS files.

Step 5. Open the newly created folder, and click on the NEW > File Upload. then choose the files to upload.

Step 6. After the files have been successfully uploaded, right click on the file names and select 'Share'. Again in the pop-up select change to anyone with the link and click Copy link.

Step 7. Link has been copied to your clipboard. Paste your code in the below form to generate direct download link from Google drive and Dropbox sharing link

 

Now you can use above code on your HTML document to add external CSS and JavaScript file.

Step 8. Login to blogger account, then navigate to Theme > Edit HTML and place your Code:

For CSS: Place code above </head>.
For JavaScript.: Place code above </body> to Defer parsing of JavaScript.

Tip: Use ctrl+f to find above codes.

.

That's all!

For any type of issue or suggestion, please comment below. Stay Updated! Browse Tech2site :)

Artikel Terkait

Previous
Next Post »