Internal CSS is used to apply styles within an HTML document using the <style> tag inside the <head> section. It is useful for adding page-specific styles that affect only a single webpage.
- Styles are written inside the <style> tag in the <head> section of the HTML document.
- Best suited for single-page websites or page-specific styling requirements.
- Keeps styles local to the page and separate from the HTML content structure.
Syntax:
<style>
/* Internal CSS starts here */
</style>Examples of Internal CSS
Here are some examples of using Internal CSS:
Example 1: Basic example of using internal CSS.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<!--Driver Code Ends-->
<head>
<title>Internal CSS</title>
<style>
h1 {
color: green;
font-size: 50px;
text-align: center;
}
p {
color: blue;
font-size: 25px;
line-height: 1.5;
text-align: center;
}
</style>
</head>
<!--Driver Code Starts-->
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal..!</p>
</body>
</html>
<!--Driver Code Ends-->
Example 2: Using internal CSS to style a page with a green heading, a blue paragraph, and a centered red button that changes color on hover. The button also includes a link to the GeeksforGeeks website.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<!--Driver Code Ends-->
<head>
<title>Internal CSS</title>
<style>
h1 {
color: green;
text-align: center;
font-size: 50px;
}
p {
font-size: 25px;
color: blue;
text-align: center;
}
.container {
text-align: center;
}
.btn {
background-color: red;
color: white;
border-radius: 5px;
padding: 10px 20px;
text-decoration: none;
}
.btn:hover {
background-color: #0056b3;
}
</style>
</head>
<!--Driver Code Starts-->
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal..!</p>
<div class="container">
<a href="https://www.geeksforgeeks.org/"
class="btn">Click Me</a>
</div>
</body>
</html>
<!--Driver Code Ends-->
Advantages
Internal CSS provides page-specific styling within the HTML file itself, offering several benefits:
- Localized Styling: Keeps styles within the same HTML file, making them easy to manage and page-specific.
- Higher Specificity: Can override external CSS styles more easily within the same webpage.
- Performance: Reduces HTTP requests, potentially enhancing performance as no additional CSS files need to be loaded.
- Ease of Implementation: Simple to use and implement, making it easy to quickly apply styles to a single page.
Disadvantages
While internal CSS has benefits, it also comes with some drawbacks:
- Repetition: Styles must be repeated in multiple HTML files if the same styles are needed across different pages.
- Increased File Size: Embedding CSS in HTML increases the file size of the HTML document.
- Reduced Reusability: Limited code reusability across different web pages.
- Limited Management: Managing styles across multiple pages can become difficult without a centralized stylesheet.