3 Best Ways to Add CSS to HTML
Free Web development courses with real-time projects Start Now!!
CSS, or Cascading Style Sheets, is a styling language used to enhance the visual appeal of web pages. It is used to control the layout, colors, fonts, and other visual elements of a website. In this article, we will go over the basics of how to add CSS to a webpage.
Ways to add CSS to HTML
1. Inline CSS
The simplest way to add CSS to a webpage is by using inline styles. This method involves adding the CSS code directly to the HTML element using the “style” attribute. Here’s an example:
<html>
<head>
<p style="color: cyan; font-size: 14px;">DataFlair</p>
</head>
</html>
Output:
In this example, we are changing the text color to cyan and the font size to 14px for the “p” element.
2. Internal CSS
Another way to add CSS to a webpage is by using an internal stylesheet. This method involves creating a separate “style” element within the head of the HTML document and linking it to the elements on the page using CSS selectors. Here’s an example:
<html>
<head>
<style>
p {
color: cyan;
font-size: 25px;
}
</style>
</head>
<body>
<p>DataFlair</p>
</body>
</html>
Output:
In this example, we are linking the CSS code to the “p” element, which will change the text color to cyan and the font size to 25px for all “p” elements on the page.
3. External CSS
Finally, you can add CSS to a webpage by linking to an external stylesheet. This method involves creating a separate .css file and linking it to the HTML document using the “link” element within the head of the HTML document. Here’s an example:
HTML
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>DataFlair</p> </body> </html>
CSS
p {
color: cyan;
font-size: 25px;
}
Output:
In this example, we are linking the external stylesheet “style.css” to the HTML document, which will change the text color to cyan and the font size to 25px for all “p” elements on the page.
It’s important to note that the order of CSS does matter, as the later style will overwrite the earlier one.
We can use any of the above methods to add CSS to your webpage, but using an external stylesheet is considered a best practice as it keeps your HTML and CSS separate, making it easier to maintain and update your website.
Conclusion
In conclusion, there are three main ways to add CSS to a webpage: inline styles, internal stylesheets, and external stylesheets.
Inline styles are the simplest method and involve adding the CSS code directly to the HTML element using the “style” attribute. Internal stylesheets involve creating a separate “style” element within the head of the HTML document and linking it to the elements on the page using CSS selectors. External stylesheets involve creating a separate .css file and linking it to the HTML document. It uses the “link” element within the head of the HTML document.
If you are Happy with DataFlair, do not forget to make us happy with your positive feedback on Google
