What is Internal CSS ?
The Internal CSS stylesheet is a set of styles created as part of an HTML document. Internal CSS is a method for defining CSS styles within an HTML document’s <style> element, it is used to provide a unique style for a single HTML document in the <head> section. This means that the CSS is embedded within the <style> tag inside the <head> section of the HTML file.
How to Use Internal CSS ?
To use internal CSS, include CSS rules within a <style> tag inside the HTML document’s <head>. Define styles by selecting HTML elements or classes, and applying styling rules within the tag. All the changes done by the internal CSS can be applied only to a single web page.
Syntax:
<style>
/* Internal CSS starts here */
</style>
Example: Here is the basic example of using internal CSS.
<!DOCTYPE html> <html>
<head>
<title>Internal CSS</title>
<style>
/* Internal CSS */
h1 {
color: green;
font-size: 50px;
text-align: center;
}
p {
color: blue;
font-size: 25px;
line-height: 1.5;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal..!</p>
</body>
</html>
|
Output:
Example 2: In this example, we are 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.
<!DOCTYPE html> <html>
<head>
<title>Internal CSS</title>
<style>
/* Internal CSS starts here */
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>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal..!</p>
<div class="container">
class="btn">Click Me</a>
</div>
</body>
</html>
|
Output:
Advantages of Internal CSS
- Internal CSS retains styles in the HTML file, avoiding conflicts with other pages and making easier management of styles at the local level.
- Internal CSS has higher specificity than external CSS, which allows you to override external styles more easily within the same HTML file.
- Internal CSS reduces HTTP requests, enhancing performance.
- Internal CSS is relatively easy to implement, we can use class and ID selectors in this style sheet.
Disadvantages of Internal CSS
- Repetition in HTML files.
- Increased file size.
- Reduced code reusability.
- Limited style management across pages.