How to add CSS
To add CSS, use external, internal, or inline methods. External links with <link> tag connect to a separate CSS file. Internal styling via <style> tags applies to specific HTML documents. Inline styles use the style attribute within HTML elements to define CSS rules directly.
Below are three ways to add CSS to HTML:
Table of Content
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
To add CSS using inline methods, apply styles directly within HTML tags using the style attribute.
Example: In this example, we will add CSS using inline styling.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h2 style="color: green;">
Welcome to
<i style="color: green;">
w3wiki
</i>
</h2>
</body>
</html>
Output:
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.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h2 {
color: green;
}
</style>
</head>
<body>
<h2>Welcome to w3wiki</h2>
</body>
</html>
Output:
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.
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Welcome to w3wiki</h2>
</body>
</html>
h2 {
color: green;
font-size: 20px;
}
Output:
Contact Us