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 to use internal CSS (Style Sheet) in HTML?
Internal CSS is a method of applying styles to HTML elements by placing CSS rules inside a <style> tag within the <head> section of an HTML document. This approach allows you to define styles for a single HTML page without using external CSS files.
Internal CSS is particularly useful when you want to apply unique styles to a specific page that differ from your site's global styles, or when creating standalone HTML documents that need their own styling.
Syntax
Following is the syntax for internal CSS −
<head>
<style>
selector {
property: value;
property: value;
}
</style>
</head>
The <style> tag must be placed inside the <head> section of the HTML document. Inside the style tag, you write CSS rules using selectors, properties, and values.
Basic Internal CSS Example
Following example demonstrates basic internal CSS styling for headings and paragraphs −
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
background-color: tan;
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
color: whitesmoke;
font-family: cursive;
text-align: center;
}
p {
color: whitesmoke;
background-color: dimgrey;
font-family: monospace;
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>HTML - HyperText Markup Language</h1>
<p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</body>
</html>
The output displays a tan background with a cursive heading and a monospaced paragraph with grey background −
HTML - HyperText Markup Language (centered, cursive, white text) The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. (white text on grey background, monospace font, padded)
Styling Lists with Internal CSS
Internal CSS can be used to customize list styles, including changing bullet types and formatting −
<!DOCTYPE html>
<html>
<head>
<title>List Styling with Internal CSS</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h2 {
color: #333;
border-bottom: 2px solid #007acc;
padding-bottom: 5px;
}
ol.roman {
list-style-type: upper-roman;
font-size: 18px;
color: #444;
}
ol.roman li {
margin: 8px 0;
padding: 5px;
background-color: #f0f8ff;
border-left: 4px solid #007acc;
}
</style>
</head>
<body>
<h2>Popular TV Series</h2>
<ol class="roman">
<li>Game of Thrones</li>
<li>House of the Dragon</li>
<li>Breaking Bad</li>
</ol>
</body>
</html>
The output shows an ordered list with Roman numerals and styled list items −
Popular TV Series I. Game of Thrones (light blue background, blue left border) II. House of the Dragon (light blue background, blue left border) III. Breaking Bad (light blue background, blue left border)
Styling Tables with Internal CSS
Tables can be enhanced with internal CSS to improve readability and visual appeal −
<!DOCTYPE html>
<html>
<head>
<title>Table Styling with Internal CSS</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
th, td {
border: 2px solid #007acc;
padding: 12px;
text-align: left;
}
th {
background-color: #007acc;
color: white;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f8ff;
}
tr:hover {
background-color: #e6f3ff;
}
</style>
</head>
<body>
<h2>Director Information</h2>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Famous Movie</th>
</tr>
<tr>
<td>S.S.</td>
<td>Rajamouli</td>
<td>Baahubali</td>
</tr>
<tr>
<td>Prashant</td>
<td>Neel</td>
<td>KGF</td>
</tr>
</table>
</body>
</html>
The output displays a well-formatted table with blue headers, alternating row colors, and hover effects −
Director Information First Name | Last Name | Famous Movie S.S. | Rajamouli | Baahubali (light blue background) Prashant | Neel | KGF (white background)
Internal CSS with Classes and IDs
Internal CSS supports all CSS selectors including classes, IDs, and pseudo-selectors −
<!DOCTYPE html>
<html>
<head>
<title>Classes and IDs with Internal CSS</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f5f5f5;
}
#main-title {
color: #007acc;
text-align: center;
border-bottom: 3px solid #007acc;
padding-bottom: 10px;
}
.highlight {
background-color: #fff3cd;
border: 1px solid #ffeaa7;
padding: 10px;
margin: 10px 0;
border-radius: 4px;
}
.button {
background-color: #007acc;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1 id="main-title">Learning Internal CSS</h1>
<div class="highlight">
<p>This paragraph uses a class selector for styling.</p>
</div>
<button class="button">Click Me</button>
</body>
</html>
The example demonstrates ID selector (#main-title), class selectors (.highlight, .button), and pseudo-selector (:hover) within internal CSS.
Advantages and Disadvantages
| Advantages | Disadvantages |
|---|---|
| No need for external files | Styles apply to only one HTML page |
| Faster loading (no additional HTTP requests) | Code duplication if used on multiple pages |
| Good for single-page applications | HTML file size increases |
| Easier testing and prototyping | Harder to maintain large projects |
| Higher priority than external CSS | No browser caching benefits |
When to Use Internal CSS
Internal CSS is most appropriate in the following scenarios −
Single-page websites − When you have a standalone HTML page that doesn't need to share styles with other pages.
Prototyping − During development phase when you want to quickly test styles without creating separate CSS files.
Page-specific styles − When certain pages need unique styles that won't be used elsewhere.
Email templates − Many email clients have limited CSS support, making internal CSS a safer choice.
Conclusion
Internal CSS provides a convenient way to style HTML elements within a single document using the <style> tag in the <head> section. While it's ideal for single-page applications and prototyping, external CSS is generally preferred for larger projects due to better maintainability and reusability.
5K+ Views
