1 Minutes Read
Listen to the Blog
Introduction to CSS - Inline, Internal & External Styles
1:01
Style your HTML with CSS using different methods to control colors, fonts, layouts, and more.
What Is CSS?
CSS (Cascading Style Sheets) separates content (HTML) from presentation (styles).
- Control color, font, spacing, layout, and responsiveness
- Apply styles globally or to specific elements
Inline CSS
Applied directly to the HTML elementdirectly to the HTML element using the style attribute
This is a blue paragraph.
Internal CSS
Added inside the <head> using the <style> tag
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Internal CSS Example</title> <style> p { color: green; font-size: 16px; } </style> </head> <body> <p>This paragraph is styled with internal CSS.</p> </body> </html>
- Good for single-page projects
- Not reusable across multiple pages
External CSS
Stored in a separate .css file and linked with <link>
styles.css
p { color: red; font-size: 20px; }
index.html
<head> <link rel="stylesheet" href="styles.css"> </head> <body> <p>This paragraph is styled with external CSS.</p> </body>
- Best practice for larger websites
- Makes maintenance easier and reusable across multiple pages
Comparison Table
| Method | Syntax Location | Pros | Cons |
|---|---|---|---|
|
Inline |
Inside HTML element |
Quick, overrides other styles |
Hard to maintain, not reusable |
|
Internal |
<style> in <head> |
Good for single-page styling |
Not reusable across pages |
|
External |
Separate .css file |
Reusable, maintainable |
Extra HTTP request |
%201.png?width=1016&height=912&name=image%20(54)%201.png)
