How to apply CSS in HTML. There are four common ways to apply CSS styles to an HTML document:
How to apply CSS in HTML Process.
- External stylesheet: You can create a separate CSS file and link to it from the HTML document using an
<link>element in the<head>of the HTML document. This is the recommended way to apply styles, as it allows you to reuse the same styles on multiple pages and makes it easier to maintain your site.
Example:
<head>
<link rel="stylesheet" href="/path/to/styles.css">
</head>
2. Internal stylesheet: You can also define your CSS styles within the HTML document itself using an <style> element in the <head> of the HTML document. This method is not recommended because it makes it difficult to reuse styles and can make your HTML document harder to read and maintain.
Example:
<head>
<style>
body {
background-color: yellow;
}
</style>
</head>
3. Inline styles: You can apply CSS styles directly to an HTML element using the style attribute. This method is not recommended because it makes it difficult to reuse styles and can make your HTML document harder to read and maintain.
Example:
<p style="color: red;">This paragraph is red.</p>
4. Importing: You can use the @import rule within a CSS file to import another CSS file. This is not recommended because it adds additional HTTP requests and can increase the load time of your page.
Example:
@import '/path/to/import.css';
It is generally best to use an external stylesheet to apply styles to your HTML document, as it allows you to easily reuse styles and makes it easier to maintain your site. However, the other methods can be useful in specific cases
Read More.