Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Why do we have External CSS and JS files
In this article we will learn about CSS and JS files, explore their functions, different ways of using them in HTML documents, and understand why external CSS and JS files are preferred over inline and internal approaches.
CSS (Cascading Style Sheets)
CSS stands for Cascading Style Sheets and is used to apply styles to websites and webpages. It makes webpages look more organized, presentable, and appealing to users. CSS handles visual aspects like background colors, font sizes, colors, layout dimensions, and much more.
There are three ways of using CSS in HTML documents
Inline CSS CSS properties are applied directly within HTML tags using the style attribute.
Internal CSS CSS is defined within <style> tags in the <head> section of the HTML document.
External CSS CSS is defined in a separate .css file and linked to HTML using the <link> tag.
Example: External CSS Implementation
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<style>
/* Simulating external CSS content */
h1 {
color: #2c3e50;
text-align: center;
font-family: Arial, sans-serif;
}
p {
color: #34495e;
line-height: 1.6;
margin: 20px;
}
</style>
</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>
A webpage with a centered dark blue heading "Computer Science" and styled paragraph text with improved readability appears.
JavaScript (JS)
JavaScript is a programming language that adds interactivity and dynamic behavior to webpages. It enables animations, form validation, interactive elements, and enhanced user experiences.
There are two main ways to include JavaScript in HTML
Internal JS JavaScript code is embedded within <script> tags inside the HTML file.
External JS JavaScript code is written in separate .js files and linked using <script> tags with the src attribute.
Example: External JavaScript Implementation
<!DOCTYPE html>
<html>
<head>
<title>External JS Example</title>
</head>
<body>
<h2>Click the button to see JavaScript in action</h2>
<button onclick="showMessage()">Click Me</button>
<p id="demo"></p>
<script>
// Simulating external JS content
function showMessage() {
document.getElementById("demo").innerHTML = "Hello from external JavaScript!";
}
</script>
</body>
</html>
A webpage with a button appears. When clicked, the text "Hello from external JavaScript!" is displayed below the button.
Why Use External CSS and JS Files?
Benefits of External CSS
Reusability One CSS file can be used across multiple HTML pages, ensuring consistent styling throughout a website.
Separation of Concerns Keeps styling code separate from content, making both easier to maintain and edit.
Faster Loading External CSS files are cached by browsers, improving page load times for subsequent visits.
Better SEO Search engines prefer clean HTML code, and external CSS helps achieve this by reducing inline styling.
Benefits of External JavaScript
Code Organization Complex functionality can be split into multiple files, making code more manageable.
Easier Debugging Issues can be located faster when code is organized by functionality across separate files.
Reusability JavaScript functions can be shared across multiple pages without code duplication.
Performance External JS files are cached by browsers, reducing load times for returning visitors.
Conclusion
External CSS and JavaScript files provide better code organization, maintainability, and performance compared to inline or internal approaches. They enable code reusability, easier debugging, and improved website loading speeds through browser caching.
616 Views
