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
How do I write CSS within HTML?
CSS (Cascading Style Sheets) can be written directly within HTML documents to style and format web pages. There are three primary methods to include CSS within HTML: inline CSS, internal CSS, and a combination of both methods.
Syntax
/* Inline CSS */
<element style="property: value;">
/* Internal CSS */
<style>
selector {
property: value;
}
</style>
Method 1: Inline CSS
Inline CSS uses the style attribute directly within HTML elements. This method has the highest specificity and will override other CSS styles.
Example
<!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>
<p style="color: red; font-size: 18px; background-color: yellow;">
This paragraph is styled using inline CSS.
</p>
<h2 style="color: blue; text-align: center;">Centered Blue Heading</h2>
</body>
</html>
A red paragraph with yellow background and 18px font size appears, followed by a centered blue heading.
Method 2: Internal CSS
Internal CSS is written within the <style> tag in the <head> section of the HTML document. This method allows you to style multiple elements with the same rules.
Example
<!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>
h1 {
color: green;
font-size: 2em;
text-align: center;
}
p {
color: navy;
font-family: Arial, sans-serif;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome to Internal CSS</h1>
<p>This paragraph is styled using internal CSS rules defined in the head section.</p>
<p>All paragraphs will have the same styling automatically.</p>
</body>
</html>
A centered green heading appears at 2em size, followed by two navy-colored paragraphs with Arial font and 1.6 line spacing.
Method 3: Combined Approach
You can combine both internal and inline CSS methods. Internal CSS provides general styling, while inline CSS adds specific customizations to individual elements.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combined CSS Example</title>
<style>
h1 {
color: purple;
text-align: center;
}
p {
color: gray;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Combined CSS Methods</h1>
<p>This paragraph uses internal CSS styling.</p>
<p style="color: orange; font-weight: bold;">
This paragraph combines internal CSS with inline styling for emphasis.
</p>
</body>
</html>
A centered purple heading appears, followed by a gray paragraph, and then an orange bold paragraph that overrides the internal CSS color.
Key Points
| Method | Specificity | Best For |
|---|---|---|
| Inline CSS | Highest | Quick, specific styling |
| Internal CSS | Medium | Single-page styling |
| Combined | Both | General + specific styling |
Conclusion
Writing CSS within HTML offers flexibility for styling web pages. Use inline CSS for specific elements, internal CSS for page-wide styling, or combine both methods for optimal control and organization.
235 Views
