INLINE CSS (Web Development Course Class 22 )
هتي Inline CSS، Internal CSS ۽ External CSS بابت سادي، وضاحتي ۽ سمجھاڻيءَ واريون تعريفون ڏنيون ويون آهن ـ خاص طور تي نون ۽ وچ درجي جي شاگردن لاءِ، ٻه ٻولين (سنڌي ۽ انگريزي) ۾:
—
✅ *Inline CSS* Web Development Course Class 22
*English Definition:*
Inline CSS is used to apply style directly inside the HTML tag. The `style` attribute is written within the opening tag, and it only affects that specific element.
*Example:*
“`html
<p style=”color: red;”>This is red text</p>
“`
*Sindhi Definition:*
Inline CSS اھو style آھي جيڪو HTML جي ٽئگ جي اندر ئي سڌو لکو ويندو آھي. ھن ۾ `style` نالي attribute استعمال ڪيو ويندو آھي. ھن style جو اثر رڳو اُن ئي ٽئگ تي ٿيندو جنھن ۾ استعمال ڪيو ويو آھي.
—
✅ *Internal CSS* Web Development Course Class 22
*English Definition:*
Internal CSS is written inside a `<style>` tag within the `<head>` section of the HTML document. It can be used to style multiple elements on a single page.
*Example:*
“`html
<head>
<style>
p { color: blue; }
</style>
</head>
“`
*Sindhi Definition:* Web Development Course Class 22
Internal CSS اھو style آھي جيڪو HTML جي صفحي جي `<head>` سيڪشن اندر `<style>` ٽئگ ۾ لکو ويندو آھي. ھن style سان اوھان ھڪ ئي صفحي تي ڪيترن ئي ٽئگن کي style ڏئي سگھو ٿا.
—
✅ *External CSS*
*English Definition:*✨
External CSS is written in a separate `.css` file and is linked to the HTML file using the `<link>` tag. It is best for large websites because it can style multiple pages at once.
*Example:*
“`html
<link rel=”stylesheet” href=”style.css”>
“`
*Sindhi Definition:* Web Development Course Class 22
External CSS اھو style آھي جيڪو الڳ فائيل (example.css) ۾ لکو ويندو آھي، پوءِ ان کي HTML جي صفحي سان `<link>` ٽئگ ذريعي ڳنڍيو ويندو آھي. ھي وڏين ويب سائيٽن لاءِ بھتر آھي ڇاڪاڻتہ ھن سان ڪيترن ئي صفحن کي style ڏئي سگھجي ٿو.
—
🔄 *Difference Between Inline, Internal & External CSS* Web Development Course Class 22
| Type | Scope/Use | Reusability | Location |
|————–|—————————————|——————-|———————————-|
| Inline CSS | One single element only | ❌ Not reusable | Inside the HTML tag |
| Internal CSS | Styles the current page | ❌ Not reusable | Inside `<style>` in `<head>` |
| External CSS | Styles across multiple pages | ✅ Reusable | Linked with `<link>` tag |
*Sindhi Translation of Table:*
| قسم | استعمال ۽ دائرو | ٻيهر استعمال | جاءِ |
|——————|————————————|————————|——————————|
| Inline CSS | رڳو ھڪ ٽئگ لاءِ | ❌ ٻيهر استعمال نٿو ٿي | HTML ٽئگ جي اندر |
| Internal CSS | ھڪ ئي صفحي جي سڀني ٽئگن لاءِ | ❌ ٻيهر استعمال نٿو ٿي | `<head>` سيڪشن ۾ |
| External CSS | گھڻن صفحن کي style ڏيڻ لاءِ | ✅ ٻيهر استعمال ٿي سگھي ٿو | الڳ `.css` فائيل سان ڳنڍيل |
—
🎓 *Tips for Students:* Web Development Course Class 22
– Use *inline* only for quick changes or testing.
– Use *internal* when creating small single-page projects.
– Use *external* for professional, reusable, and clean website design.
—
