Inline CSS
When you write styles directly inside the style tag and place it within the <head> section of your HTML document, those styles apply to elements on that specific page only.
Example:
<p style="color:red; font-size:18px;">Inline CSS style</p>Output:
- Text: Inline CSS style
- Color: red
- Font Size: 18px
Visual Example:
Inline CSS style
Internal CSS
When you write your styling rules inside a <style> tag then place them in the <head> section of the HTML file.
It lets you control the design of the whole page directly from the same file—no need for a separate CSS file.
Syntax:
.highlight {
color: blue;
font-size: 20px;
}Example:
Internal CSS style 1
Internal CSS style 2
Output:
- Text 1: Internal CSS style 1
- Text 2: Internal CSS style 2
- Color: blue
- Font Size: 20px
Visual Example:
Internal CSS style 1
Internal CSS style 2
Internal CSS style 2
External CSS
When you write all the styles in a separate file that ends with a .css extension, such as style.css, then this file is linked to your HTML document.
Example:
index.html (HTML File)
...
style.css (CSS File)
.heading { color: blue; font-size: 32px; text-align: center; }
.paragraph { color: green; font-size: 18px; background-color: #f0f0f0; padding: 10px; border-radius: 5px; }Output:
- Heading: Welcome to www.edutation.com (blue, 32px, centered)
- Paragraph: This is styled using external CSS (green, 18px, light grey background, 10px padding)
Visual Example:
Welcome to www.edutation.com
This is styled using external CSS