Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why do we have External CSS and JS files
In this article we will learn about the CSS and JS files. We will explore about their functions and different ways of using them in HTML document. And after learning about all these things we will understand why we have external CSS and JS files.CSS
CSS stands for Cascading Style Sheets. CSS is used to apply styles to your websites and webpages. It is used to make webpages look more understandable, presentable and more appealing to the user. A CSS file can be written in any text editor but must be saved with a .css extension.
A simple HTML document gives you a webpage with unorganized information. To organize that information and show it in a proper manner we use CSS files. Some uses of CSS are like background color selection, font-size selection, font-color, width of document and so many more.
There are three ways of using CSS in HTML document −
Inline − In Inline CSS we use CSS property inside the <body> tag and each element’s CSS property is attached with the element itself.
Internal or Embedded − In Internal CSS we use CSS property inside the head section of the HTML document. We have to create a <style> tag inside head section which contains all the styling of the HTML document.
External − In External CSS we define a separate CSS file outside the HTML document that contains all the styling of the webpage. We use <link> tag to link external css file with the HTML file to get all the css properties applied to HTML tags.
Example
<!DOCTYPE html> <html> <head> <title>External CSS</title> <link rel="stylesheet" href="file.css"> </head> <body> <h1>Computer Science </h1> <p>It is the most evolving sector of the industry and there are lot of job opportunities in this field in upcoming years.</p> </body> </html>
JS
JS stands for Java Script. It is a programming language for the web that is used to give a customize “behavior” to webpages. By using JS we can add interactivity to a website so as to make it visually appealing, fun to interact with, and a lot of added functionalities to make the user experience more refined.There are majorly two ways through which we can use JS within our HTML file −
Internal JS − In this method we make use of the <script> tag to embed our JS code within the HTML file itself. It is useful only if we have limited functionality to implement on the webpage for e.g. adding animation, accepting small forms. But as the complexity of the code grows it becomes important for us to use an external JS file.
External JS − If we create a file with .js extension it becomes a java script file and will contain all the necessary code for our website. To link it with the HTML file we need to use the <script> tag along with src property that defines the source of the JS file.
Example
<!DOCTYPE html> <html> <head> <title>External JS</title> </head> <body> <p>Let’s understand why external JS is prioritized over internal JS.</p> <script src="external.js"></script> </body> </html>
Why do we have External JS and CSS files
CSS- One of the major reason of using external css instead of inline or internal css is that external css file is reusable i.e. it can be used in more than one HTML document. We can create one CSS file and then we can attach it with different HTML file using <link> tag and it will apply the same properties over each webpage.
Another major reason is that it creates separation between the styling code i.e. CSS and Information code i.e. HTML. In Inline or internal css we write both the HTML tag and CSS either together or inside the HTML file which at the time of editing creates confusion.
External CSS solves this issue as both HTML and CSS are saved as different files and incase of any issue we know where we have our CSS code and where we have our HTML code.
Also according to an experiment at Google, websites who are using external css are suggested first to the user as it have cleaner codes that makes it easy for the search engine to access the information.
JS − Using external JS file allows us to reduce the complexity that can arise by having the code of multiple functionality in a single place by using a separate JS file for each functionality.
Another advantage of using external JS file is the ability to debug a code faster as compared to the slow debugging in the case of internal JS file.
Let us say that we have an internal JS file with thousands of lines of code and a lot of functionalities. If we encounter an irregular behavior on the webpage we will have to go through the entire code which will be a lengthy process for debugging.
But on the other hand if we had segregated the code as per the functionalities they are providing we could easily find the bug as we would already know which functionality is wrong in the website and where is the JS file located that provides this functionality.
253 Views
