What are the different ways to include CSS Code in HTML ?
Last Updated :
31 Jan, 2024
In HTML, styles can be incorporated through external linking, where a separate CSS file is connected to the HTML document using the <link> tag in the <head> section, ensuring consistency across multiple pages.
Alternatively, internal styling can be employed by placing CSS rules within a <style> tag in the <head> section, suitable for smaller projects or single-page styles.
External CSS Linking
It is used to Link an external CSS file to your HTML document. It promotes the separation of concerns, making it easy to manage styles across multiple pages.
Syntax
<link rel="stylesheet" type="text/css" href="styles.css">
Internal CSS Linking
It includes CSS directly within the HTML document. It uses the <style> element within the <head> or <body> section.
Syntax
<style>
body {
background-color: #f0f0f0;
}
</style>
Inline CSS
It apply styles directly to specific HTML elements. It also uses the style attribute within an HTML tag.
Syntax
<p style="color: blue;">This is a blue paragraph.</p>
Imported CSS
It imports an external CSS file from within another CSS file and uses the @import rule within a CSS file.
Syntax
@import url('otherStyles.css');
Share your thoughts in the comments
Please Login to comment...