How to add CSS
Last Updated :
28 Mar, 2024
CSS is a fundamental file of web development that allows you to control the presentation of a web page. In this article, we’ll learn about how to add CSS to the web page.
In this article, we’ll learn how to add CSS to HTML. There are different methods to add a CSS file to an HTML document.
3 ways to Link CSS to HTML
There are three ways in which a user can add CSS to HTML:
Note: It is a best practice to keep your CSS separate from your HTML, so this article focuses on how you can link that CSS to your HTML.
1. Inline CSS
CSS styles can be added inside the HTML tags. It is one of the preliminary techniques used to write CSS in HTML. Further, with a high amount of CSS, it can lead to confusion. To deal with this conspiracy further methods are implemented.
Example: In this example, we will add CSS using inline styling.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h2 style="color: green;">
Welcome to
<i style="color: green;">
GeeksforGeeks
</i>
</h2>
</body>
</html>
Output:
.png)
2. Internal CSS
CSS styles are added in the HTML file by writing inside the <style> </style> tag. This is a slightly efficient method of including CSS in HTML.
Note: Add <style> </style> tag before the body tag as the compiler reads the code line wise it will be effective considering the runtime of the code.
Example: In this example, we will use the internal CSS approach for styling the web page.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h2 {
color: green;
}
</style>
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
</body>
</html>
Output:
3. External CSS
In this type, we create an external stylesheet which means a separate file and then we link it to HTML. CSS file is written separately in a .css file extension and linked to the HTML file using the <link> tag.
Example: In this example, we will use the external CSS method.
HTML
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Welcome to GeeksforGeeks</h2>
</body>
</html>
/* index.css */
h2 {
color: green;
font-size: 20px;
}
Output:
Share your thoughts in the comments
Please Login to comment...