How to load CSS files using JavaScript? Last Updated : 07 Dec, 2023 Comments Improve Suggest changes Like Article Like Report The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS files to the HTML document. JavaScript can also be used to load a CSS file in the HTML document. Approach:Use the document.getElementsByTagName() method to get HTML head element.Create a new link element using createElement('link') method.Initialize the attributes of the link element.Append the link element to the head.Example 1: This example uses JavaScript to add CSS files to an HTML document. Create CSS file using name style.css: CSS .GFG { color:green; } Use JavaScript to add CSS file in HTML file: HTML <!DOCTYPE html> <html> <head> <title> Load CSS file using JavaScript </title> <script> // Get HTML head element let head = document.getElementsByTagName('HEAD')[0]; // Create new link Element let link = document.createElement('link'); // set the attributes for link element link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'style.css'; // Append link element to HTML head head.appendChild(link); </script> </head> <body> <h2 class="GFG">GeeksForGeeks</h2> </body> </html> Output: Example 2: This example uses JavaScript to add CSS files in HTML document. Create CSS file using name style.css: CSS .GFG { font-size:24px; font-weight:bold; color:white; background-color:green; padding:10px; text-align:center; } Use JavaScript to add CSS file in HTML file: HTML <!DOCTYPE html> <html> <head> <title> Load CSS file using JavaScript </title> <script> // Create new link Element let link = document.createElement('link'); // set the attributes for link element link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'style.css'; // Get HTML head element to append // link element to it document.getElementsByTagName('HEAD')[0].appendChild(link); </script> </head> <body> <div class="GFG">GeeksforGeeks</div> </body> </html> Output: CSS is the foundation of webpages, is used for webpage development by styling websites and web apps. JavaScript is best known for web page development but it is also used in a variety of non-browser environments.You can learn more about CSS and Javascript from the links given below: CSS Tutorial and CSS ExamplesJavaScript Tutorial and JavaScript Examples Comment More infoAdvertise with us Next Article How to load CSS files using JavaScript? aman neekhara Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Create Tab Headers using CSS & JavaScript? Tab headers are a commonly used user interface element in web development. They provide a way to organize content into distinct sections, allowing users to switch between them easily. Each tab represents a different category or topic, and clicking on a tab displays the corresponding content while hi 2 min read How to Load DIV Content on Click Only using JavaScript? To load content into a div when a button or any other element is clicked using JavaScript, you can follow these simple steps. You can either load static content or fetch data from an external source using AJAX (for more advanced usage). Below is a basic example to load content into a div when a butt 2 min read How to read CSS rule values with JavaScript? DOM (Document Object Model) object can read and manipulate CSS rules. We can use the following approaches to read all the Embedded CSS rules using JavaScript. Using getElementsByTagName() MethodUsing window.getComputedStyle() MethodApproach 1: Using the getElementsByTagName() MethodUse document.getE 3 min read How to reload CSS without reloading the page using JavaScript ? While working with CSS, you might have come across situations where you made some changes in the stylesheet and had to do a hard reload to see the changes reflected in your browser. Or maybe the style depends on some user interaction and you don't wish to hard reload the page every time. Sometimes y 2 min read How to add CSS Rules to the Stylesheet using JavaScript ? In this example, we will see how to add CSS rules to the stylesheet element using JavaScript. First, we will create an HTML document and then add some CSS rules using JavaScript. Syntax: let styleText = document.getElementById('GFG').sheet; let st = `.box { width: 100px; height: 100px; }`; styleText 2 min read How to Access Tailwind Colors from JavaScript ? Tailwind CSS is a "Utility first CSS framework". The feature that makes Tailwind has a variety of classes and provides a huge set of predefined colors that can be used in our stylesheets without the need to define them manually. These predefined colors are categorized into different color palettes w 4 min read HTML content modification using JavaScript JavaScript is the dynamic, lightweight, and most common computer programming language used to create web pages. It interacts with client-side and makes dynamic pages. JavaScript Can Change the Content of an HTML page. The getElementById() method is used to get the id of the element and change the HT 2 min read How to Include CSS Inside a JavaScript File? Here are the various ways to include CSS inside a JavaScript file.1. Using style Property (Inline Styling)The simplest way to include CSS in JavaScript is by directly modifying the style property of an HTML element. This method applies styles inline, directly to the elements, and overrides any exter 4 min read How to load external HTML file using jQuery ? In this article, we will learn how to load an external HTML file into a div element. The following jQuery functions are used in the example codes. ready(): The ready event occurs when the DOM (document object model) has been loaded.load(): The load() method loads data from a server and gets the retu 3 min read DOM Loading Issues with JavaScript DOM loading issues in JavaScript typically occur when your scripts are trying to interact with elements that haven’t fully loaded yet. This can cause errors or unexpected behavior. Common CausesScripts Loading Before DOM is Ready: If your JavaScript is placed in the <head> section or before th 2 min read Like