Internal CSS
Last Updated :
18 Sep, 2023
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.
HTML
<!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.
HTML
<!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.
Share your thoughts in the comments
Please Login to comment...