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 CSS with HTML Document?
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 re
5 min read
How to write articles in HTML document ?
The <article> tag is one of the new sectioning element in HTML5. The HTML <article> tag is used to represent an article. More specifically, the content within the <article> tag is independent from the other content of the site (even though it can be related). In other words, the ar
1 min read
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 link a CSS file to an HTML file, Create a separate CSS file (styles.css) and write styles on it. Now we need to use the <link> element inside the <head> section of the HTML file to attach the CSS file. Syntax:<link rel="stylesheet" href="styles.css">rel="stylesheet": It specifie
3 min read
How to access an HTML document in a browser ?
HTML represents Hypertext Markup Language and is web - based scripting language. Its primary object is to make and design website pages. Records with the HTML (or HTM) augmentation just hold back text and references to different documents, similar to pictures or video. How to access an HTML file in
3 min read
How to Style an hr Element with CSS?
The <hr> element in HTML is used to create a horizontal line or thematic break between sections of a webpage. By default, it shows as a solid, thin line that spans the width of its container. You can easily customize the appearance of the <hr> element using CSS to match your website's de
4 min read
How To Change Font in HTML?
Changing fonts in HTML can significantly improve the readability and appearance of your website. There are several methods for adjusting the style, size, or type of font. Let's see each approach in detail. Table of Content How to Change Font Using CSSChanging Font Using Inline CSSChanging Font Using
6 min read
How to add color in HTML without CSS ?
In HTML, adding color to text and elements is typically done using CSS. However, there are several approaches to add color directly in HTML, without using CSS. We will discuss the following approaches to add color without CSS in HTML Elements. Table of Content Using Font TagUsing JavaScriptUsing SVG
3 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:
3 min read
How to Write a:hover in Inline CSS?
The :hover pseudo-selector in CSS enables you to modify the style of elements when a user hovers their mouse over them. This selector is widely used to improve user experience by adding visual feedback on elements like buttons, links, images, or any interactive items on a webpage. For the :hover eff
2 min read