View Discussion
Improve Article
Save Article
View Discussion
Improve Article
Save Article
The CSS file is used to describe how HTML elements will be displayed. There are various ways to add CSS file in the HTML document. JavaScript can also be used to load a CSS file in the HTML document.
Approach:
- Use document.getElementsByTagName[] method to get HTML head element.
- Create new link element using createElement[‘link’] method.
- Initialize the attributes of link element.
- Append link element to the head.
Example 1: This example uses JavaScript to add CSS file in HTML document.
- Create CSS file using name style.css:
html
- Use JavaScript to add CSS file:
javascript
Load CSS file using JavaScript
var head = document.getElementsByTagName['HEAD'][0];
var link = document.createElement['link'];
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
head.appendChild[link];
GeeksForGeeks
Output:
Example 2: This example uses JavaScript to add CSS file in HTML document.
- Create CSS file using name style.css:
html
.GFG {
font-size:24px;
font-weight:bold;
color:white;
background-color:green;
padding:10px;
text-align:center;
}
- Use JavaScript to add CSS file:
javascript
Load CSS file using JavaScript
var
link = document.createElement['link'];
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'style.css';
document.getElementsByTagName['HEAD'][0].appendChild[link];
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 Examples
- JavaScript Tutorial and JavaScript Examples