MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Now that you know how CSS rules work, the big question is: Where do we actually write our CSS code? 🤔
In web development, there are 3 standard ways to connect CSS styling to your HTML document:
<style> block inside the <head> section).css file and linked with <link>)Let us explore each method using a fun school analogy!
Imagine your school principal and teachers need to give instructions to students. There are 3 different ways they communicate:
+-------------------------------------------------------------------------+
| THE 3 WAYS OF GIVING INSTRUCTIONS |
+-------------------------------------------------------------------------+
| 1. INLINE CSS --> Teacher whispers to ONE student directly |
| ("Rahul, tie your shoelace right now!") |
| |
| 2. INTERNAL CSS --> Teacher writes on the classroom BLACKBOARD |
| (Applies to all students in that single classroom) |
| |
| 3. EXTERNAL CSS --> Principal puts a circular notice on the MAIN GATE |
| (All classes across the entire school follow it) |
+-------------------------------------------------------------------------+Let us inspect each method in detail.
Inline CSS is applied directly to an individual HTML element using the style attribute inside its opening tag.
style="..." on every single paragraph.<head> Tag)Internal CSS (also called Embedded CSS) is placed inside a <style> element within the <head> section of your HTML document.
about.html and contact.html, they cannot reuse these styles unless you duplicate the <style> block.In External CSS, you write all your styling rules in a completely separate file with a .css extension (for example, style.css). Then, you connect that file to any HTML page using the <link> tag placed inside the <head> section.
style.css)index.html)<link> Tag Attributes:rel="stylesheet": Tells the browser that the linked document is a stylesheet.href="style.css": Specifies the path/location of your CSS file.| Feature | Inline CSS | Internal CSS | External CSS (Best) |
|---|---|---|---|
| Location | Inside HTML tag (style="...") | Inside <style> in <head> | Separate .css file |
| Scope | Single HTML element only | Single HTML document | Unlimited HTML documents |
| Reusability | None (0%) | Limited to 1 page | High (100% across all pages) |
| Code Cleanliness | Cluttered & messy | Moderately organized | Cleanest & professional |
| Page Load Speed | Slower (bloated HTML) | Moderate | Fastest (cached by browser) |
| Recommendation | Avoid for websites | Good for single-page tests | Always Recommended |
What happens if you style the same heading using all 3 methods at the same time? Which color will the browser display?
Let us see a contest:
h1 { color: blue; }h1 { color: green; }<h1 style="color: red;">+-------------------------------------------------------------+ | CASCADING PRIORITY ORDER | +-------------------------------------------------------------+ | HIGHEST PRIORITY: 1. Inline CSS (style="..." attribute) | | 2. Internal CSS / External CSS | | (Whichever comes LAST in <head>) | | LOWEST PRIORITY: 3. Browser Default Styles | +-------------------------------------------------------------+
Because inline styling is attached directly to the element itself, it has the highest specificity and overrides both internal and external stylesheets.
<head> section) wins, because CSS cascades downwards!| What Beginners Do (Don't ❌) | What You Should Do Instead (Do ✅) |
|---|---|
Putting <style> tags inside the <body> section. | Always put <style> tags inside the <head> section. |
Forgetting rel="stylesheet" when using <link>. | Always write <link rel="stylesheet" href="style.css">. Without rel, the browser will ignore your file! |
Writing HTML tags like <style> inside a .css file. | A .css file contains only CSS rules, never HTML tags. |
| Relying on inline styles for page layout. | Use external CSS classes and IDs for consistent design. |
style attribute.<style> tags inside the <head> element..css file and linked using <link rel="stylesheet" href="filename.css">.Test your understanding with these multiple-choice questions:
color: blue in External CSS, color: green in Internal CSS, and color: crimson via Inline CSS, what color will it display?Build a mini 2-page school website using External CSS:
my-school-site.style.css:index.html (Home Page):about.html (About Page):style.css! Change background-color in style.css to see both pages update at once! 🚀In the next lesson, we will continue your web styling journey with CSS Syntax, Comments, and Code Structure (CSS Syntax & Selectors Basics).
👉 Continue to Next Lesson: CSS Syntax, Comments, and Code Structure →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| How CSS Works with HTML | CSS Syntax, Comments, and Code Structure |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.