Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are the ways to include style sheet rules in an HTML document
There are three main ways to include CSS styles in an HTML document: inline styles using the style attribute, internal stylesheets using the <style> element, and external stylesheets using the <link> element.
Method 1: Inline Styles
Inline styles are applied directly to HTML elements using the style attribute:
<!DOCTYPE html>
<html>
<head>
<title>Inline Styles Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">Inline Styled Heading</h1>
<p style="background-color: yellow; padding: 10px;">This paragraph has inline styles.</p>
</body>
</html>
Method 2: Internal Stylesheets
Internal stylesheets are defined within the <style> element in the document's <head> section:
<!DOCTYPE html>
<html>
<head>
<title>Internal Stylesheet Example</title>
<style>
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
p {
background-color: #f0f0f0;
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Internal Styled Heading</h1>
<p>This paragraph uses internal CSS styles.</p>
</body>
</html>
Method 3: External Stylesheets
External stylesheets are separate CSS files linked to your HTML document using the <link> element. This is the most common and recommended approach for larger projects.
Syntax
<head>
<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" media="all" />
</head>
Link Element Attributes
| Attribute | Value | Description |
|---|---|---|
| rel | stylesheet | Defines the relationship between HTML document and linked file |
| type | text/css | Specifies the MIME type of the linked document |
| href | URL | Specifies the path to the CSS file (required) |
| media | all, screen, print, etc. | Specifies target media/device (optional, default is "all") |
Example: External Stylesheet
First, create a CSS file named styles.css:
/* styles.css */
h1, h2 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
p {
line-height: 1.6;
margin: 10px 0;
}
Then link it to your HTML document:
<!DOCTYPE html>
<html>
<head>
<title>External Stylesheet Example</title>
<link rel="stylesheet" type="text/css" href="styles.css" media="all" />
</head>
<body>
<h1>External Styled Heading</h1>
<p>This content uses external CSS styles.</p>
</body>
</html>
Comparison of Methods
| Method | Best For | Advantages | Disadvantages |
|---|---|---|---|
| Inline | Quick styling, testing | High specificity, immediate | Not reusable, clutters HTML |
| Internal | Single-page styles | Page-specific, no external files | Not reusable across pages |
| External | Multi-page websites | Reusable, cacheable, organized | Requires additional HTTP request |
Conclusion
External stylesheets using the <link> element are the preferred method for most projects as they promote code reusability and maintainability. Use inline and internal styles only for specific cases or quick testing.
609 Views
