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 File 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 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 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 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 Create A Box in HTML?
In HTML, you can create a "box" using several techniques, such as using <div> elements and styling them with CSS. These boxes can be used for various purposes, such as creating layouts, buttons, or sections within a webpage. Method 1. Div Element with CSSThe <div> element is a block-leve
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 Create a Box with HTML and CSS?
A box is a basic building block in web design, used to contain text, images, or other content. Understanding how to create and style a box is crucial for building responsive and visually appealing web pages. These are the below approaches to creating a box in HTML and CSS: Table of Content Using Bas
2 min read
How To Style a Table with CSS?
A table organizes data in rows and columns, making information easy to read and compare, like a spreadsheet or chart. To style a table with CSS, use properties like border for cell borders, padding for spacing, text-align for alignment, and background-color to color rows or headers for clarity. Appr
2 min read