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 CSS in HTML Documents
Adding CSS to an HTML document enhances the appearance of the web page. Various styles for images, borders, margins, and colors can be easily added. To include CSS in HTML documents, we can either include them internally, inline, or link an external file.
Syntax
/* Inline CSS */
<element style="property: value;"></element>
/* Internal CSS */
<style>
selector {
property: value;
}
</style>
/* External CSS */
<link rel="stylesheet" href="filename.css">
Method 1: Inline CSS
With inline CSS, use the style attribute directly on HTML elements. This method is useful for applying unique styles to specific elements −
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<p style="color: blue; font-size: 20px;">This is blue text</p>
<p style="background-color: lightgreen; padding: 10px;">This has a green background</p>
<div style="border: 2px solid red; width: 200px; height: 100px;">Red border box</div>
</body>
</html>
Blue text appears at 20px font size, followed by text with a light green background and 10px padding, and a red-bordered box measuring 200x100 pixels.
Method 2: Internal CSS
For internal CSS, use the <style> element inside the <head> section. This method allows you to style multiple elements with the same rules −
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h2 {
color: purple;
text-align: center;
}
.highlight {
background-color: yellow;
padding: 15px;
border-radius: 10px;
}
#main-content {
width: 80%;
margin: 0 auto;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="main-content">
<h2>Welcome to Our Website</h2>
<p class="highlight">This paragraph is highlighted with yellow background.</p>
<p>This is normal text content.</p>
</div>
</body>
</html>
A centered purple heading "Welcome to Our Website" appears, followed by a yellow highlighted paragraph with rounded corners and padding, and normal text below. All content is centered within 80% page width using Arial font.
Method 3: External CSS
External CSS involves creating a separate .css file and linking it to your HTML document using the <link> element. This method is ideal for styling multiple pages consistently −
Note: For this example to work properly, you would need to create a separate CSS file. In an online environment, the external file reference may not load.
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<style>
/* Simulating external CSS content */
body {
font-family: 'Times New Roman', serif;
line-height: 1.6;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h3 {
color: #333;
border-bottom: 2px solid #007acc;
}
</style>
</head>
<body>
<div class="container">
<h3>External CSS Demo</h3>
<p>This content is styled using external CSS methods.</p>
<p>Multiple HTML files can reference the same CSS file for consistent styling.</p>
</div>
</body>
</html>
A centered white container with shadow appears on a light gray background. The heading "External CSS Demo" has a blue underline, and the text uses Times New Roman font with proper line spacing.
The external CSS file syntax would look like this −
/* styles.css */
body {
font-family: 'Times New Roman', serif;
line-height: 1.6;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
Comparison
| Method | Best For | Advantages | Disadvantages |
|---|---|---|---|
| Inline | Quick styling of single elements | Immediate, specific | Hard to maintain, repetitive |
| Internal | Single-page styling | Centralized for one page | Cannot reuse across pages |
| External | Multi-page websites | Reusable, maintainable | Requires separate file |
Conclusion
CSS can be included in HTML using inline styles, internal stylesheets, or external files. External CSS is generally preferred for larger projects due to better maintainability and reusability across multiple pages.
263 Views
