How to link CSS with HTML Document?
Last Updated :
03 Sep, 2024
CSS is probably the most powerful style language in web development. It allows you to keep presentations of a document separate from the structure using CSS, making the maintenance and updating of a web page quite easy. CSS provides possibilities to style HTML elements, handle layouts, and create responsive designs that look great on any device.
Below are the three approaches to applying CSS in HTML:
Inline CSS
Inline CSS allows you to apply styles directly to specific HTML elements using the style attribute. This method is useful for applying unique styles to individual elements without influencing other document parts. Although convenient for quick adjustments or testing, inline CSS is typically not recommended for larger projects, as it can lead to a cluttered codebase and hinder maintainability.
Syntax:
<element style="property: value;">
Content
</element>
Example: This demonstrates the use of inline CSS to style an h1 heading with blue color and centered text, a paragraph with green text, and a font size of 18px.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">
Hello, World!
</h1>
<p style="font-size: 18px; color: green;">
This is a paragraph with inline CSS.
</p>
</body>
</html>
Output:
OutputInternal CSS
Internal CSS is written within a <style> element inside the <head> section of an HTML document. This method is useful when you want to apply styles to a single webpage without affecting other pages or when you need to keep the styles separate from the content within the same document. However, it may not be ideal for larger projects where multiple pages share the same styling, as external CSS is generally preferred for better organization and reusability.
Syntax:
<head>
<style>
selector {
property: value;
}
</style>
</head>
Example: This demonstrates the use of internal CSS within the <style> element to style the background, heading, and paragraph of a webpage.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: lightgrey;
}
h1 {
color: red;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Welcome to Internal CSS</h1>
<p>This is a paragraph
styled with internal CSS.</p>
</body>
</html>
Output:
OutputExternal CSS
On External CSS requires attaching an outside .css record to your HTML document. that is quite beneficial if you have multiple net pages on that you need to enforce the same patterns. This continues the code cleaner, isolating CSS absolutely from HTML.
Syntax:
<head>
<link rel="stylesheet" href="styles.css">
</head>
Example: This demonstrates the use of external CSS within the <style> element to style the background, heading, and paragraph of a webpage.
HTML
<!-- index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This paragraph is
styled using an external CSS file.</p>
</body>
</html>
/* Styles.css*/
body {
background-color: white;
}
h1 {
color: rgb(142, 37, 37);
text-align: center;
}
p {
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
color: rgb(100, 0, 0);
}
Output:
External CSSConclusion
Each of the above ways of CSS implementation in HTML has its own scenarios of usage and list of benefits. Inline CSS is handy and fast for minor adjustments; internal CSS comes in handy when it's about only one page styling, whereas external CSS is useful when it's about having a consistent look across many pages. Mastering these approaches will get you a well-structured and good-looking website.
Similar Reads
How to Link External CSS to HTML? External CSS is a method used to style multiple HTML pages with a single stylesheet. This approach involves creating a separate CSS file with a .css extension that contains style properties applied to various selectors (such as classes, IDs, headings, etc.). By using external CSS, you can maintain a
3 min read
How to Link a CSS to HTML? To apply custom styles to your HTML webpage, it's best practice to keep your CSS code in a separate file. In fact, over 90% of modern websites follow this approach for better organization and maintainability. Simply create a CSS file (e.g., styles.css) and write your styling rules in it. Then, use t
4 min read
How to Add Tailwind CSS to HTML ? Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows.Integration Options:CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.Using npm: In
3 min read
How to specify the location of the linked document in HTML5? In this article, we will learn how to specify the location of the linked document in HTML5. This can be done by using a href attribute in the <link> element. This has various uses. Most commonly it is used to link stylesheets or favicons to the document. Syntax: <link rel="stylesheet" type=
1 min read
How to use web fonts in CSS ? While designing web pages, developers use different fonts based on what the text represents and which fonts suit the best. Each system comes with some pre-installed fonts which are called system fonts. Since these are limited, one may come across the need to use a different font other than the pre-i
3 min read
How To Add Font In CSS? Adding fonts to a website enhances its design and readability. In CSS, custom fonts can be applied using several techniques that allow web designers to include specific fonts that aren’t system defaults.PrerequisitesHTMLCSSThese are the approaches to add a font in CSS: Table of ContentUsing web-safe
2 min read