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
Including an external stylesheet file in your HTML document
The <link> element can be used to include an external style sheet file in your HTML document.
An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file and then you can include this file in any HTML document using <link> element.
Creating an External CSS File
Consider a simple style sheet file with a name new.css having the following rules:
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Linking the External CSS File
Now you can include this file new.css in any HTML document as follows:
<head>
<link rel="stylesheet" type="text/css" href="new.css" media="all" />
</head>
Complete Example
Here's a complete HTML document demonstrating how to use external CSS:
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="new.css" media="all" />
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<p>This paragraph will use default styling.</p>
</body>
</html>
Key Attributes
The <link> element uses several important attributes:
- rel="stylesheet" - Specifies the relationship between the current document and the linked resource
- type="text/css" - Defines the MIME type of the linked content (optional in HTML5)
- href="new.css" - Specifies the path to the external CSS file
- media="all" - Defines which media the CSS applies to (screen, print, all, etc.)
Advantages of External CSS
- Reusability across multiple HTML pages
- Better organization and maintainability
- Faster page loading due to caching
- Separation of content and presentation
Conclusion
External CSS files provide an efficient way to style multiple web pages consistently. Use the <link> element in the <head> section to connect your HTML documents with external stylesheets.
640 Views
