Internal CSS
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 >w3wiki</ 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 w3wiki 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 >w3wiki</ 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.