Internal CSS
Internal CSS, also known as embedded CSS, involves adding CSS rules directly within the <style> element in the <head> section of an HTML document. It allows styling specific to that document.
Internal CSS Syntax:
<style>
// CSS Properties
</style>
Internal CSS Example:
Here i s the basic implementation of internal CSS.
HTML
<!DOCTYPE html> < html > < head > < title > Internal CSS </ title > < style > h1 { color: blue; font-size: 24px; font-weight: bold; } p { color: green; font-size: 16px; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < p >w3wiki</ p > </ body > </ html > |
Output:
Internal CSS Example Explanation:
Here is the explannation of the above-code example.
- CSS rules are enclosed within the <style> element.
- CSS rules target the <h1> and <p> elements, styling them with specific colors, font sizes, and weights.
- Internal CSS applies only to this HTML file and cannot be reused elsewhere.
Difference between Inline, Internal and External CSS
CSS is used to add styles on web pages that contain HTML elements. There are three methods to add styles on web pages, these are – Inline, Internal, and External. In this article, we will see the differences between Inline, Internal, and External CSS styles.
Table of Content
- Inline CSS
- Internal CSS
- External CSS
- Inline, Internal and External CSS Use Cases