ڪيسڪيڊنگ اسٽائل شيٽون (CSS)

This article is about مارڪ اپ جي اندازبندي واري ٻولي بابت. For other uses, see ڪيسڪيڊنگ اسٽائل شيٽون (CSS) (disambiguation).

Cascading Style Sheets (CSS)

سرڪاري لوگو کان وٺي ڊسمبر 2024[[Category:اهي مضمون جن ۾ ممڪن طور پراڻا بيان شامل آهن from ]]
CSS ذريعو ڪوڊ جو مثال
فائل نالو جو واڌارو	.css
انٽرنيٽ ميڊيا ٽائيپ	text/css
يو ٽي آء (UTI)	public.css
تيار ڪندڙ	World Wide Web Consortium (W3C)
پھريون ڀيرو جاري ٿيو	سانچو:Release date and age
سافٽويئر جي تازي صورتحال	CSS 3 ڪيترن الڳ ماڊيولن جي صورت ۾ تيار ٿي رهيو آهي۔ Regular snapshots انهن جي حالت جو خلاصو ڏين ٿا۔ (سانچو:Release date and age)
فارميٽ جو قسم	اسٽائل شيٽ ٻولي
ڊجيٽل ڪنٽينر فارميٽ	HTML عنصرن لاءِ اندازبندي جا قاعدا
شامل	HTML دستاويز

ڪيسڪيڊنگ اسٽائل شيٽون (CSS)
اسٽائيل شيٽ سي ايس ايس زين گارڊن
خيالئ
اينيميشن سي ايس ايس ماڊل خانو لچڪدار خانو سي ايس ايس لڪيرن جو ڄار تصويري تبديلي
فلاسافي
جدول بغير موٽ ڏيندڙ ھالي گرائل
اوزار
ساسئ) ليس اسٽائلس (اسٽائيل شيٽ) اسٽائلس
ڀيٽون
اسٽائيل شيٽ ٻوليون
Cascading Style Sheets

ايڇ ٽي ايم ايل
ايڇ ٽي ايم ايل ۽ ان جا قسم
ڊائنامڪ ايڇ ٽي ايم ايل ايڇ ٽي ايم ايل 5 ايڪس ايڇ ٽي ايم ايل بنيادي موبائل پروفائيل
ايڇ ٽي ايم ايل عنصر ۽ خاصيتون
ايڇ ٽي ايم ايل عنصر آرٽيڪل عنصر آڊيو بلنڪ عنصر ڪينواس عنصر div and span مارڪي عنصر ميٽا عنصر وڊيو ايڇ ٽي ايم ايل خاصيت alt attribute ايڇ ٽي ايم ايل فريم
ايڊيٽنگ
ايڇ ٽي ايم ايل ايڊيٽر ٽيڪسٽ ايڊيٽر
ڪردار انڪوڊنگ ۽ ٻولي
ڪردار انڪوڊنگ ڪردار اينٽيٽي حوالا (نالا وارا ڪردار) يونيڪوڊ ٻولي ڪوڊ
دستاويز ۽ برائوزر ماڊل
ڊاڪيومينٽ آبجڪٽ ماڊل برائوزر آبجڪٽ ماڊل اسٽائل شيٽون CSS فونٽ فيملي ويب رنگ
ڪلائنٽ-سائيڊ اسڪرپٽنگ ۽ API
جاوا اسڪرپٽ WebCL ايڇ ٽي ايم ايڪس
گرافڪس ۽ Web3D ٽيڪنالاجي
Web3D WebGL WebGPU WebXR ورلڊ وائڊ ويب ڪنسرشيم ويليڊيٽر WHATWG ڪِرڪس موڊ ويب اسٽوريج رينڊرنگ انجڻ
ڀيٽون
دستاويزي مارڪ اپ ٻولين جي ڀيٽ برائوزر انجڻن جي ڀيٽ

Cascading Style Sheets (CSS) هڪ اسٽائل شيٽ ٻولي آهي جيڪا ڪنهن مارڪ اپ ٻولي ۾ لکيل دستاويز جي پيشڪش ۽ اندازبندي کي بيان ڪرڻ لاءِ استعمال ٿيندي آهي، جهڙوڪ HTML يا XML (جنهن ۾ XML جا مختلف لهجا جهڙوڪ SVG، MathML يا XHTML شامل آهن). CSS، HTML ۽ JavaScript سان گڏ، World Wide Web جي بنيادي ٽيڪنالاجين مان هڪ آهي.

CSS جو مقصد مواد ۽ ان جي پيشڪش کي الڳ ڪرڻ آهي، جنهن ۾ لي آئوٽ، رنگ ۽ فونٽ شامل آهن. هي الڳ ٿيڻ ڪيترن فائدن جو سبب بڻجي ٿو، جهڙوڪ مواد جي accessibility ۾ واڌارو، پيشڪش تي وڌيڪ ڪنٽرول، ڪيترن ويب صفحن تي هڪجهڙو انداز، ۽ .css فائل کي ڪيش ڪرڻ جي ڪري صفحن جي تيز لوڊنگ.

مواد ۽ فارميٽنگ کي الڳ ڪرڻ سان ساڳئي مارڪ اپ صفحي کي مختلف اندازن سان ڏيکارڻ ممڪن ٿي وڃي ٿو، جهڙوڪ اسڪرين تي، ڇپائي ۾، آواز ذريعي (اسپيچ برائوزر يا screen reader) يا بريل ڊوائيس تي. CSS موبائل ڊوائيسن لاءِ به متبادل انداز مهيا ڪري سگهي ٿو.

"Cascading" نالو ان ترجيحي نظام مان آيو آهي جيڪو اهو طئي ڪري ٿو ته جيڪڏهن هڪ ئي عنصر لاءِ ڪيترائي اعلان موجود هجن ته ڪهڙو لاڳو ٿيندو. هي ترجيحي نظام اڳڪٿي لائق هوندو آهي.

CSS جون وضاحتون World Wide Web Consortium (W3C) سنڀاليندو آهي. انٽرنيٽ ميڊيا ٽائيپ text/css کي RFC 2318 (مارچ 1998) ۾ CSS لاءِ رجسٽر ڪيو ويو. W3C CSS دستاويزن لاءِ مفت CSS validation service پڻ مهيا ڪري ٿو.

HTML کان علاوه ٻيون مارڪ اپ ٻوليون به CSS کي سپورٽ ڪن ٿيون، جهڙوڪ XHTML، XML، SVG ۽ XUL.

نحو

CSS جو نحو سادو هوندو آهي ۽ مختلف اندازي خاصيتن جا نالا بيان ڪرڻ لاءِ ڪيترائي انگريزي لفظ استعمال ڪندو آهي۔

اسٽائيل شيٽ

اصل مضمون جي لاءِ ڏسو Style sheet (web development)

هڪ اسٽائيل شيٽ قاعدن جي فهرست تي مشتمل هوندي آهي۔ هر قاعدو يا rule-set هڪ يا وڌيڪ سيليڪٽرن ۽ هڪ ڊڪليئريشن بلاڪ تي مشتمل هوندو آهي۔

سيليڪٽر

"CSS class" ھتي ريڊائريڪٽ ٿئي ٿو. For HTML ۾ عنصرن جي ڪلاس جي غير-CSS استعمال لاءِ, see class attribute (HTML).

CSS ۾ سيليڪٽر اهو ظاهر ڪن ٿا ته انداز مارڪ اپ جي ڪهڙي حصي تي لاڳو ٿيندو، يعني اهي خود مارڪ اپ ۾ موجود ٽيگن ۽ خاصيتن سان ميل کائي لاڳو ٿيندا آهن۔

سيليڪٽر جا قسم

سيليڪٽر هيٺين شين تي لاڳو ٿي سگهن ٿا:

• ڪنهن مخصوص قسم جا سڀ عنصر، مثال طور ٻئي درجي جا سرناما h2
• اهي عنصر جيڪي خاصيت ذريعي مقرر ڪيا ويا هجن، خاص طور:
  • id: دستاويز اندر هڪ منفرد سڃاڻپ ڪندڙ، جيڪو سيليڪٽر جي ٻولي ۾ هيش اڳياڙي سان ظاهر ڪيو ويندو آهي، مثال: #id
  • class: اهڙو سڃاڻپ ڪندڙ جيڪو دستاويز ۾ گهڻن عنصرن کي نشان لڳائي سگهي، ۽ ڊاٽ اڳياڙي سان ظاهر ڪيو ويندو آهي، مثال: .classname (جيتوڻيڪ "CSS class" وارو اصطلاح ڪڏهن ڪڏهن استعمال ٿيندو آهي، پر اهو صحيح اصطلاح نه آهي، ڇاڪاڻ⁠تہ element classes — جيڪي HTML class attribute سان مقرر ٿين ٿيون — مارڪ اپ جي هڪ خاصيت آهن، جيڪي برائوزرن جي CSS subsystems کان جدا آهن؛ "class" نظام جي اصليت لاءِ RDF ۽ microformats ڏسو)
• اهي عنصر جيڪي document tree ۾ ٻين عنصرن جي نسبت سان پنهنجي جڳهه جي بنياد تي چونڊيا وڃن۔

Classes ۽ IDs case-sensitive هوندا آهن، اکرن سان شروع ٿيندا آهن، ۽ انهن ۾ اکرن سان گڏ انگ، hyphen ۽ underscore شامل ٿي سگهن ٿا۔ هڪ class ڪنهن به عنصر جي ڪيترين ئي مثالن تي لاڳو ٿي سگهي ٿي، جڏهن⁠تہ هڪ ID صرف هڪ ئي عنصر تي لاڳو ٿي سگهي ٿي۔

پسيڊو-ڪلاسز

"Pseudo-element" ھتي ريڊائريڪٽ ٿئي ٿو. For ڪيميا ۾ pseudoelement نشانين لاءِ, see Skeletal formula § Pseudoelement symbols.

Pseudo-classes CSS سيليڪٽرن ۾ ان مقصد لاءِ استعمال ٿيندا آهن ته formatting اهڙي معلومات جي بنياد تي به ٿي سگهي جيڪا document tree ۾ موجود نه هجي۔

هڪ گهڻو استعمال ٿيندڙ pseudo-class جو مثال :hover آهي، جيڪو مواد کي تڏهن سڃاڻي ٿو جڏهن استعمال ڪندڙ ڏسڻ لائق عنصر ڏانهن "اشارو" ڪري، عام طور ماؤس جو ڪرسر ان تي رکي۔ اهو سيليڪٽر سان هن نموني ڳنڍيو ويندو آهي: a:hover يا #elementid:hover۔

هڪ pseudo-class دستاويز جي عنصرن کي درجا بندي ڪري ٿو، جهڙوڪ :link يا :visited، جڏهن⁠تہ هڪ pseudo-element اهڙي چونڊ ڪري ٿو جيڪا جزوي عنصرن تي به مشتمل ٿي سگهي، جهڙوڪ ::first-line يا ::first-letter. نوٽ ڪريو ته pseudo-elements لاءِ ٻٽي-colon notation ۽ pseudo-classes لاءِ اڪيلي-colon notation استعمال ٿيندي آهي۔

گڏيندڙ (Combinators)

ڪيترائي سادا سيليڪٽر combinators استعمال ڪري ڳنڍي سگهجن ٿا ته جيئن عنصرن کي جڳهه، عنصر جي قسم، id، class، يا انهن جي ڪنهن به ميلاپ جي بنياد تي مقرر ڪري سگهجي. سيليڪٽرن جي ترتيب اهم هوندي آهي۔ مثال طور، div .myClass {color: red;} انهن سڀني عنصرن تي لاڳو ٿيندو جيڪي myClass ڪلاس وارا هجن ۽ div عنصرن جي اندر هجن، جڏهن⁠تہ .myClass div {color: red;} انهن سڀني div عنصرن تي لاڳو ٿيندو جيڪي myClass ڪلاس وارن عنصرن جي اندر هجن۔ هن کي اهڙن ڳنڍيل سڃاڻپ ڪندڙن سان نه گڏي ڏسڻ گهرجي جهڙوڪ div.myClass {color: red;} جيڪو myClass ڪلاس وارن div عنصرن تي لاڳو ٿيندو آهي۔

سيليڪٽر نحو جو خلاصو

هيٺ ڏنل جدول سيليڪٽر نحو جو خلاصو ڏئي ٿو، جنهن ۾ استعمال ۽ CSS جي اها سطح ڏيکاريل آهي جنهن ۾ اهو پهريون ڀيرو متعارف ٿيو.

CSS سيليڪٽر

Pattern	ڪهڙي شيءِ سان ملي ٿو	پهريون ڀيرو CSS سطح ۾ مقرر ٿيو
E	قسم E جو هڪ عنصر	1
E:link	قسم E جو اهڙو عنصر جيڪو hyperlink جو source anchor هجي، جنهن جو حدف يا ته اڃا نه ڏٺو ويو هجي (:link) يا اڳ ۾ ڏٺو ويو هجي (:visited)	1
E:visited
E:active	استعمال ڪندڙ جي ڪجهه عملن دوران قسم E جو هڪ عنصر	1
E:hover		2
E:focus
E::first-line	قسم E جي عنصر جي پهرين فارميٽ ٿيل سٽ	1
E::first-letter	قسم E جي عنصر جو پهريون فارميٽ ٿيل اکر	1
.c	اهي سڀ عنصر جن ۾ class="c" هجي	1
#myid	اهو عنصر جنهن ۾ id="myid" هجي	1
E.warning	قسم E جو اهڙو عنصر جنهن جي class "warning" هجي (دستاويز جي ٻولي طئي ڪري ٿي ته class ڪيئن مقرر ٿيندي)	1
E#myid	قسم E جو اهڙو عنصر جنهن جي ID "myid" هجي	1
.c#myid	اهو عنصر جنهن ۾ class="c" ۽ ID "myid" هجي	1
E F	قسم F جو اهڙو عنصر جيڪو قسم E جي عنصر جو descendant هجي	1
*	ڪو به عنصر	2
E[foo]	قسم E جو اهڙو عنصر جنهن ۾ "foo" خاصيت هجي	2
E[foo="bar"]	قسم E جو اهڙو عنصر جنهن جي "foo" خاصيت جي قيمت بلڪل "bar" جي برابر هجي	2
E[foo~="bar"]	قسم E جو اهڙو عنصر جنهن جي "foo" خاصيت جي قيمت whitespace سان جدا ٿيل قدرن جي فهرست هجي، ۽ انهن مان هڪ بلڪل "bar" جي برابر هجي	2
E[foo|="en"]	قسم E جو اهڙو عنصر جنهن جي "foo" خاصيت hyphen سان جدا ٿيل قدرن جي فهرست هجي ۽ جيڪا کاٻي پاسي کان "en" سان شروع ٿئي	2
E:first-child	قسم E جو هڪ عنصر، جيڪو پنهنجي parent جو پهريون ٻار هجي	2
E:lang(fr)	قسم E جو هڪ عنصر، زبان "fr" ۾ (دستاويز جي ٻولي طئي ڪري ٿي ته زبان ڪيئن مقرر ٿيندي)	2
E::before	قسم E جي عنصر جي مواد کان اڳ generated content	2
E::after	قسم E جي عنصر جي مواد کان پوءِ generated content	2
E > F	قسم F جو اهڙو عنصر جيڪو قسم E جي عنصر جو child هجي	2
E + F	قسم F جو اهڙو عنصر جيڪو قسم E جي عنصر کان بلڪل پوءِ اچي	2
E[foo^="bar"]	قسم E جو اهڙو عنصر جنهن جي "foo" خاصيت جي قيمت بلڪل "bar" سان شروع ٿئي	3
E[foo$="bar"]	قسم E جو اهڙو عنصر جنهن جي "foo" خاصيت جي قيمت بلڪل "bar" تي ختم ٿئي	3
E[foo*="bar"]	قسم E جو اهڙو عنصر جنهن جي "foo" خاصيت جي قيمت ۾ "bar" ذيلي-رشتو موجود هجي	3
E:root	قسم E جو هڪ عنصر، جيڪو دستاويز جي root هجي	3
E:nth-child(n)	قسم E جو هڪ عنصر، جيڪو پنهنجي parent جو n-هون ٻار هجي	3
E:nth-last-child(n)	قسم E جو هڪ عنصر، جيڪو پنهنجي parent جو n-هون ٻار هجي، پڇاڙيءَ کان ڳڻپ ڪندي	3
E:nth-of-type(n)	قسم E جو هڪ عنصر، جيڪو پنهنجي قسم جو n-هون ڀاءُ-ڀيڻ عنصر هجي	3
E:nth-last-of-type(n)	قسم E جو هڪ عنصر، جيڪو پنهنجي قسم جو n-هون ڀاءُ-ڀيڻ عنصر هجي، پڇاڙيءَ کان ڳڻپ ڪندي	3
E:last-child	قسم E جو هڪ عنصر، جيڪو پنهنجي parent جو آخري ٻار هجي	3
E:first-of-type	قسم E جو هڪ عنصر، جيڪو پنهنجي قسم جو پهريون ڀاءُ-ڀيڻ عنصر هجي	3
E:last-of-type	قسم E جو هڪ عنصر، جيڪو پنهنجي قسم جو آخري ڀاءُ-ڀيڻ عنصر هجي	3
E:only-child	قسم E جو هڪ عنصر، جيڪو پنهنجي parent جو اڪيلو ٻار هجي	3
E:only-of-type	قسم E جو هڪ عنصر، جيڪو پنهنجي قسم جو اڪيلو ڀاءُ-ڀيڻ عنصر هجي	3
E:empty	قسم E جو اهڙو عنصر جنهن جا ڪو به ٻار نه هجن (text nodes سميت)	3
E:target	قسم E جو اهو عنصر جيڪو referring URI جو حدف هجي	3
E:enabled	user interface جو قسم E وارو عنصر جيڪو enabled هجي	3
E:disabled	user interface جو قسم E وارو عنصر جيڪو disabled هجي	3
E:checked	user interface جو قسم E وارو عنصر جيڪو checked هجي (مثال طور radio button يا checkbox)	3
E:not(s)	قسم E جو اهڙو عنصر جيڪو simple selector s سان نه ملي	3
E ~ F	قسم F جو اهڙو عنصر جيڪو قسم E جي عنصر کان اڳ ۾ اچي	3
E:has(s)	قسم E جو اهڙو عنصر جنهن جي اندر simple selector s سان ملندڙ عنصر موجود هجي	4

ڊڪليئريشن بلاڪ

هڪ declaration block قوسين جي هڪ جوڙي ({}) تي مشتمل هوندو آهي، جنهن جي اندر semicolon سان جدا ٿيل declarations جي فهرست هوندي آهي.

ڊڪليئريشن

هر declaration پاڻ ۾ هڪ property، هڪ colon (:) ۽ هڪ value تي مشتمل هوندي آهي۔ پڙهڻ ۾ سهولت لاءِ declaration block، declarations، colons ۽ semi-colons جي چوڌاري اختياري white-space ٿي سگهي ٿي.

خاصيتون

Properties CSS معيار ۾ مقرر ٿيل هونديون آهن۔ هر property لاءِ ممڪن قدرن جو هڪ مجموعو هوندو آهي۔ ڪجهه properties هر قسم جي عنصر تي اثرانداز ٿي سگهن ٿيون، جڏهن⁠تہ ٻيون صرف مخصوص گروهن جي عنصرن تي لاڳو ٿين ٿيون.

قدر

Values لفظي ٿي سگهن ٿا، جهڙوڪ "center" يا "inherit"، يا عددي قدر ٿي سگهن ٿا، جهڙوڪ 200px (200 pixels)، 50vw (viewport جي ويڪر جو 50 سيڪڙو) يا 80% (parent عنصر جي ويڪر جو 80 سيڪڙو)۔

رنگن جا قدر keywords سان به بيان ڪري سگهجن ٿا (مثال: "red")، hexadecimal قدرن سان به (مثال: #FF0000، جنهن کي مختصر ڪري #F00 به لکي سگهجي ٿو)، RGB قدرن سان به 0 کان 255 جي ماپ تي (مثال: rgb(255, 0, 0))، RGBA قدرن سان به جيڪي رنگ ۽ alpha transparency ٻئي ظاهر ڪن ٿا (مثال: rgba(255, 0, 0, 0.8))، يا HSL ۽ HSLA قدرن سان به (مثال: hsl(0 100% 50%)، hsl(0 100% 50% / 0.8)).

اهي غير-صفر عددي قدر جيڪي لڪيري ماپن کي ظاهر ڪن ٿا، انهن سان هڪ length unit جو هجڻ ضروري آهي، جيڪا يا ته حرفي ڪوڊ يا مخفف هوندي آهي، جيئن 200px يا 50vw؛ يا سيڪڙو جو نشان، جيئن 80%۔ ڪجهه units — cm (centimetre)؛ in (inch)؛ mm (millimetre)؛ pc (pica)؛ ۽ pt (point) — absolute آهن، جنهن جو مطلب آهي ته rendered dimension صفحي جي جوڙجڪ تي دارومدار نٿي رکي؛ جڏهن⁠تہ ٻيون — em (em)؛ ex (ex) ۽ px (pixel) — relative آهن، جنهن جو مطلب آهي ته parent عنصر جي font size جهڙا عنصر rendered ماپ تي اثر وجهي سگهن ٿا۔ اهي اٺ units CSS 1 جي هڪ خاصيت هئا ۽ پوءِ ايندڙ سڀني ترميمن ۾ برقرار رکيا ويا۔ تجويز ڪيل CSS Values and Units Module Level 3، جيڪڏهن W3C Recommendation طور منظور ڪيو ويو، ته ست وڌيڪ length units مهيا ڪندو: ch؛ Q؛ rem؛ vh؛ vmax؛ vmin؛ ۽ vw.

استعمال

CSS کان اڳ، HTML دستاويزن جون تقريباً سڀئي presentational attributes خود HTML markup ۾ موجود هونديون هيون۔ يعني سڀ font colors، background styles، element alignments، borders، ۽ sizes سڌي طرح (اڪثر بار بار) HTML اندر لکڻا پوندا هئا۔ CSS ليکڪن کي اجازت ڏئي ٿو ته هن مان گهڻي معلومات ٻئي فائل، يعني style sheet، ۾ منتقل ڪن، جنهن سان HTML گهڻو سادو ٿي وڃي ٿو۔ ان کان علاوه، جيئن جيئن وڌيڪ ڊوائيس responsive web pages تائين رسائي حاصل ڪرڻ لڳا، مختلف اسڪرين سائيزون ۽ layout ظاهر ٿيڻ لڳا۔ هر ڊوائيس سائيز لاءِ جدا ويب سائيٽ ترتيب ڏيڻ مهانگو ۽ ڏينهون ڏينهن وڌيڪ ڏکيو بڻجي ويو۔ CSS جي modular نوعيت جو مطلب اهو آهي ته styles کي سائيٽ جي مختلف حصن ۾ يا مختلف سائيٽن تي ٻيهر استعمال ڪري سگهجي ٿو، جنهن سان يڪسانيت ۽ ڪارڪردگي وڌي ٿي۔

مثال طور، headings (h1 عناصر)، sub-headings (h2)، sub-sub-headings (h3) وغيره ساختي طور HTML جي ذريعي مقرر ڪيا ويندا آهن۔ ڇپائي ۽ اسڪرين تي انهن عنصرن لاءِ font، size، color ۽ emphasis جو انتخاب presentational هوندو آهي۔

CSS کان اڳ، جيڪي دستاويز لکندڙ سڀني h2 headings کي هڪجهڙا typographic خاصيتون ڏيڻ چاهيندا هئا، تن کي هر heading جي هر استعمال لاءِ HTML presentational markup کي ٻيهر لکڻو پوندو هو۔ ان سان دستاويز وڌيڪ پيچيده، وڏا، ۽ وڌيڪ غلطيءَ جو شڪار ۽ سنڀالڻ ۾ ڏکيا ٿي ويندا هئا۔ CSS presentation کي structure کان جدا ڪرڻ جي اجازت ڏئي ٿو۔ CSS رنگ، فونٽ، text alignment، size، borders، spacing، layout ۽ ٻيون ڪيتريون typographic خاصيتون مقرر ڪري سگهي ٿو، ۽ اهو ڪم اسڪرين ۽ ڇپيل ٻنهي صورتن لاءِ الڳ الڳ به ڪري سگهي ٿو۔ CSS غير-بصري styles به بيان ڪري سگهي ٿو، جهڙوڪ آواز ذريعي پڙهندڙن لاءِ reading speed ۽ emphasis۔ W3C هاڻي سڀ presentational HTML markup جي استعمال کي deprecated قرار ڏئي چڪو آهي.

مثال طور، pre-CSS HTML ۾ هڪ heading عنصر کي ڳاڙهي متن سان هن طرح لکيو ويندو هو:

<h1><font color="red">Chapter 1.</font></h1>

CSS استعمال ڪندي ساڳيو عنصر HTML جي presentational attributes بدران style properties سان هن طرح لکجي سگهي ٿو:

<h1 style="color: red;">Chapter 1.</h1>

هن جا فائدا فوراً ظاهر نه ٿيندا، پر CSS جي اصل قوت تڏهن واضح ٿئي ٿي جڏهن style properties کي ڪنهن اندروني style element ۾ رکيو وڃي يا، ان کان به بهتر، ڪنهن ٻاهرين CSS فائل ۾ رکيو وڃي۔ مثال طور، فرض ڪريو دستاويز ۾ هي style element موجود هجي:

<style>
    h1 {
        color: red;
    }
</style>

ته پوءِ دستاويز جا سڀئي h1 عنصر پاڻمرادو ڳاڙها ٿي ويندا، بغير ڪنهن اضافي ڪوڊ جي۔ جيڪڏهن ليکڪ بعد ۾ چاهي ته h1 عنصرن کي نيرو ڪري، ته اهو صرف style element کي هن طرح تبديل ڪري ڪري سگهجي ٿو:

<style>
    h1 {
        color: blue;
    }
</style>

يعني ان بدران جو هر هڪ h1 عنصر کي الڳ الڳ تبديل ڪيو وڃي۔

Styles کي هيٺ بيان ڪيل نموني ڪنهن ٻاهرين CSS فائل ۾ به رکي سگهجي ٿو، ۽ پوءِ هن جهڙي نحو سان لوڊ ڪيو وڃي:

<link href="path/to/file.css" rel="stylesheet" type="text/css">

ان سان styling کي HTML دستاويز کان وڌيڪ جدا ڪيو وڃي ٿو ۽ صرف هڪ shared external CSS file کي ترميم ڪري ڪيترن ئي دستاويزن جي styling تبديل ڪرڻ ممڪن ٿي وڃي ٿو۔

ذريعا

CSS، يعني Cascading Style Sheets، ويب مواد کي انداز ڏيڻ جو هڪ لچڪدار طريقو مهيا ڪري ٿو، جتي styles جا ذريعا برائوزر جا default انداز، استعمال ڪندڙ جون ترجيحات، يا ويب ڊزائنرن جا انداز ٿي سگهن ٿا۔ اهي styles inline، HTML دستاويز جي اندر، يا وڌيڪ يڪسانيت لاءِ ٻاهرين .css فائلن ذريعي لاڳو ٿي سگهن ٿا۔ اهو نه رڳو ٻيهر استعمال ۽ آسان سنڀال ذريعي ويب ڊولپمينٽ کي سادو بڻائي ٿو، پر سائيٽ جي ڪارڪردگي پڻ بهتر ڪري ٿو، ڇاڪاڻ⁠تہ styles کي الڳ .css فائلن ۾ منتقل ڪري سگهجي ٿو جن کي برائوزر cache ڪري سگهن ٿا۔ ان کان علاوه، جيڪڏهن styles لوڊ نه ٿين يا غيرفعال ڪيا وڃن، تڏهن به هي الڳ ٿيڻ مواد جي accessibility ۽ readability برقرار رکي ٿو، جنهن سان سائيٽ سڀني استعمال ڪندڙن لاءِ، جن ۾ معذور ماڻهو به شامل آهن، قابل استعمال رهي ٿي۔ selector specificity، rule order، ۽ media types جهڙن گهڻ-رخن عنصرن جي ڪري CSS اها پڪ ڪري ٿو ته ويب سائيٽون بصري طور مربوط ۽ مختلف ڊوائيسن ۽ صارفين جي ضرورتن سان موافق رهن، ۽ ڊزائن جي ارادي ۽ user accessibility جي وچ ۾ توازن قائم رهي۔

گهڻيون اسٽائيل شيٽون

گھڻيون اسٽائيل شيٽون import ڪري سگهجن ٿيون۔ استعمال ٿيندڙ output device جي لحاظ سان مختلف styles لاڳو ڪري سگهجن ٿا؛ مثال طور، اسڪرين واري صورت ڇپيل صورت کان بلڪل مختلف ٿي سگهي ٿي، تنهنڪري ليکڪ هر medium لاءِ پيشڪش کي مناسب نموني ترتيب ڏئي سگهن ٿا۔

ڪاسڪيڊنگ (Cascading)

جنهن اسٽائل شيٽ کي سڀ کان وڌيڪ ترجيح هوندي آهي، اهو مواد جي ڏيک کي ڪنٽرول ڪندو آهي. جيڪي اعلان (Declarations) اعليٰ ترجيح واري ماخذ ۾ مقرر نه ڪيا ويا هجن، اهي گهٽ ترجيح واري ماخذ ڏانهن منتقل ٿي وڃن ٿا، جهڙوڪ يوزر ايجنٽ اسٽائل. هن عمل کي ڪاسڪيڊنگ چيو ويندو آهي۔

CSS جو هڪ مقصد اهو به آهي ته استعمال ڪندڙن کي پريزينٽيشن تي وڌيڪ ڪنٽرول مهيا ڪيو وڃي. مثال طور جيڪڏهن ڪنهن کي ڳاڙهي رنگ جي ترچين سرخين کي پڙهڻ ۾ ڏکيائي ٿئي، ته هو مختلف اسٽائل شيٽ لاڳو ڪري سگهي ٿو. برائوزر ۽ ويب سائيٽ تي دارومدار رکندي، استعمال ڪندڙ ڊيزائنرن طرفان مهيا ڪيل مختلف اسٽائل شيٽن مان چونڊ ڪري سگهي ٿو، يا سڀ اضافي اسٽائل هٽائي صرف برائوزر جي ڊيفالٽ اسٽائل سان سائيٽ ڏسي سگهي ٿو، يا صرف ڳاڙهي ترچين سرخين جي اسٽائل کي تبديل ڪري سگهي ٿو بغير ٻين خاصيتن کي تبديل ڪرڻ جي.

برائوزر ايڪسٽينشن جهڙوڪ Stylish ۽ Stylus اهڙن يوزر اسٽائل شيٽن جي انتظام لاءِ تيار ڪيا ويا آهن. وڏن منصوبن ۾ ڪاسڪيڊنگ ان ڳالهه کي طئي ڪرڻ ۾ مدد ڪندي آهي ته جڏهن ڊولپرز ٽئين ڌر جون اسٽائلون شامل ڪن ٿا ۽ انهن ۾ ترجيحن جو ٽڪراءُ پيدا ٿئي، ته ڪهڙي اسٽائل کي وڌيڪ ترجيح ڏني وڃي. ان کان علاوه ڪاسڪيڊنگ ٿيمڊ ڊيزائن ٺاهڻ ۾ پڻ مدد ڪندي آهي، جنهن سان ڊيزائنر مجموعي ترتيب کي خراب ڪرڻ کانسواءِ ڊيزائن جي مختلف پاسن کي ترتيب ڏئي سگهن ٿا.

CSS ترجيحي اسڪيم

CSS ترجيحي اسڪيم (وڏي کان ننڍي ترجيح تائين)

ترجيح	CSS ماخذ جو قسم	وضاحت
1	اهميت	"!important" نشان اڳين سڀني ترجيحن کي مٽائي ڇڏيندو آهي
2	Inline	HTML عنصر تي سڌي طرح HTML جي "style" خاصيت ذريعي لاڳو ڪيل اسٽائل
3	ميڊيا جو قسم	خاصيت سڀني ميڊيا قسمن تي لاڳو ٿيندي آهي جيستائين ميڊيا لاءِ خاص CSS مقرر نه ڪئي وڃي
4	يوزر طرفان مقرر	گهڻن برائوزرن ۾ رسائي جي سهولت طور يوزر طرفان مقرر ڪيل CSS موجود هوندي آهي
5	سليڪٽر جي خاصيت	وڌيڪ مخصوص سليڪٽر (#heading p) عام تعريف کي مٽائي ڇڏيندو آهي
6	قاعدي جي ترتيب	آخري اعلان ڪيل قاعدي کي وڌيڪ ترجيح هوندي آهي
7	والدين کان وراثت	جيڪڏهن خاصيت مقرر نه هجي ته اها والدين عنصر کان وراثت ۾ ملي ٿي
8	HTML دستاويز ۾ CSS تعريف	CSS قاعدو يا Inline اسٽائل برائوزر جي ڊيفالٽ قدر کي مٽائي ڇڏيندو آهي
9	برائوزر ڊيفالٽ	سڀ کان گهٽ ترجيح: برائوزر جي ڊيفالٽ قدر W3C جي شروعاتي وضاحتن موجب طئي ٿيندي آهي

خصوصيت (Specificity)

خصوصيت مختلف قاعدن جي نسبتاً وزن کي ظاهر ڪري ٿي. اهو طئي ڪري ٿو ته جڏهن هڪ عنصر تي ڪيترائي قاعدا لاڳو ٿي سگهن ٿا ته ڪهڙو اسٽائل استعمال ٿيندو. وضاحت موجب، سادو سليڪٽر (مثلاً H1) جي خصوصيت 1 هوندي آهي، ڪلاس سليڪٽر جي خصوصيت 1,0 هوندي آهي، ۽ ID سليڪٽر جي خصوصيت 1,0,0 هوندي آهي. ڇو ته خصوصيت جا قدر ڏهائي نظام وانگر گڏ ناهن ٿيندا، تنهن ڪري "عددن" کي ڌار ڪرڻ لاءِ ڪاما استعمال ٿيندي آهي. (مثال طور جيڪڏهن CSS قاعدي ۾ 11 عنصر ۽ 11 ڪلاس هجن ته ان جي خصوصيت 11,11 هوندي، نه ته 121).

هيٺين قاعدن جا سليڪٽر هيٺ ڏنل خصوصيت پيدا ڪن ٿا:

سليڪٽر	خصوصيت
h1 {color: white;}	0, 0, 0, 1
p em {color: green;}	0, 0, 0, 2
.grape {color: red;}	0, 0, 1, 0
p.bright {color: blue;}	0, 0, 1, 1
p.bright em.dark {color: yellow;}	0, 0, 2, 2
#id218 {color: brown;}	0, 1, 0, 0
style=" "	1, 0, 0, 0

مثال

هيٺ ڏنل HTML ٽڪرو ڏسو:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #xyz { color: blue; }
        </style>
    </head>
    <body>
        <p id="xyz" style="color: green;">خصوصيت کي ڏيکارڻ لاءِ</p>
    </body>
</html>

مٿي ڏنل مثال ۾ style خاصيت اندر ڏنل اعلان <style> عنصر جي اعلان کان وڌيڪ ترجيح رکي ٿو، ڇو ته ان جي خصوصيت وڌيڪ آهي، تنهن ڪري پيراگراف جو رنگ سائو نظر ايندو:

خصوصيت کي ڏيکارڻ لاءِ

وراثت (Inheritance)

وراثت CSS جي هڪ اهم خاصيت آهي؛ اها ابن ڏاڏن ۽ اولاد جي لاڳاپي تي ٻڌل هوندي آهي. وراثت اهو طريقو آهي جنهن ذريعي خاصيتون صرف هڪ عنصر تي نه پر ان جي اولادي عنصرن تي به لاڳو ٿينديون آهن. وراثت دستاويزي وڻ (Document tree) تي دارومدار رکي ٿي، جيڪو صفحي ۾ XHTML عنصرن جي ترتيب کي ظاهر ڪري ٿو.

عام طور تي اولادي عنصر متن سان لاڳاپيل خاصيتون وراثت ۾ حاصل ڪندا آهن، پر باڪس سان لاڳاپيل خاصيتون وراثت ۾ منتقل ناهن ٿينديون. جيڪي خاصيتون وراثت ۾ منتقل ٿي سگهن ٿيون انهن ۾ رنگ، فونٽ، حرفن جي وچ ۾ فاصلو، لائن اوچائي، لسٽ اسٽائل، متن جي ترتيب، متن جي شروعاتي خالي جاءِ، متن جي تبديلي، ڏيک (visibility)، وائيٽ اسپيس، ۽ لفظن جي وچ ۾ فاصلو شامل آهن. جڏهن ته پس منظر، بارڊر، ڊسپلي، فلوٽ ۽ ڪليئر، اوچائي ۽ ويڪر، مارجن، گهٽ ۽ وڌ اوچائي يا ويڪر، آئوٽ لائين، اوور فلو، پيڊنگ، پوزيشن، ٽيڪسٽ ڊيڪوريشن، عمودي ترتيب، ۽ z-index وراثت ۾ منتقل ناهن ٿيندا.

وراثت جي مدد سان هڪ ئي خاصيت کي بار بار لکڻ کان بچي سگهجي ٿو، جنهن سان CSS مختصر ۽ سادي ٿي وڃي ٿي.

CSS ۾ وراثت، ڪلاس بنياد واري پروگرامنگ ٻولين واري وراثت جهڙي ناهي، جتي ڪلاس B کي "ڪلاس A جهڙو، پر ڪجهه تبديلين سان" بيان ڪري سگهجي ٿو. CSS ۾ عنصر کي "ڪلاس A سان، پر تبديلي سان" اسٽائل ڪري سگهجي ٿو، پر اهڙو نئون ڪلاس B ٺاهي نٿو سگهجي جيڪو ڪيترن عنصرن تي استعمال ڪري سگهجي بغير تبديليون ٻيهر لکڻ جي.

مثال

هيٺ ڏنل اسٽائل شيٽ ڏسو:

p {
   color: pink;
}

فرض ڪريو هڪ p عنصر اندر زور ڏيڻ وارو عنصر (<em>) موجود آهي:

<p>
   هي مثال <em>وراثت</em> کي ظاهر ڪري ٿو
</p>

جيڪڏهن em عنصر لاءِ رنگ مقرر نه ڪيو ويو هجي ته "وراثت" لفظ p عنصر جو رنگ وراثت ۾ حاصل ڪندو. ڇاڪاڻ ته p جو رنگ گلابي آهي، تنهن ڪري em جو رنگ پڻ گلابي ٿيندو:

هي مثال وراثت کي ظاهر ڪري ٿو

خالي جڳهه (Whitespace)

خاصيتن ۽ سليڪٽرن جي وچ ۾ خالي جڳهه کي نظرانداز ڪيو ويندو آهي. هي ڪوڊ:

body{overflow:hidden;background:#000000;background-image:url(images/bg.gif);background-repeat:no-repeat;background-position:left top;}

هن ڪوڊ جي برابر آهي:

body {
   overflow: hidden;
   background-color: #000000;
   background-image: url(images/bg.gif);
   background-repeat: no-repeat;
   background-position: left top;
}

انڊينٽيشن

اصل مضمون جي لاءِ ڏسو Indentation style

CSS کي پڙهڻ ۾ آسان بڻائڻ لاءِ عام طريقو اهو آهي ته هر خاصيت کي نئين قطار تي لکيو وڃي. پڙهڻ جي سهولت کان علاوه شارٽ هينڊ خاصيتون استعمال ڪري ڪوڊ کي مختصر ۽ تيز بڻائي سگهجي ٿو.

body {
   overflow: hidden;
   background: #000 url(images/bg.gif) no-repeat left top;
}

ڪڏهن ڪڏهن هڪ خاصيت جا ڪيترائي قدر الڳ قطارن ۾ لکيا ويندا آهن:

@font-face {
   font-family: 'Comic Sans';
   font-size: 20px;
   src: url('first.example.com'),
        url('second.example.com'),
        url('third.example.com'),
        url('fourth.example.com');
}

پوزيشننگ (Positioning)

CSS 2.1 ٽن پوزيشننگ اسڪيمز کي بيان ڪري ٿو:

عام وهڪرو (Normal flow)

Inline عنصر متن جي حرفن وانگر هڪ قطار ۾ ترتيب ڏنا ويندا آهن جيستائين جڳهه ختم نه ٿئي، پوءِ نئين قطار شروع ٿيندي. Block عنصر عمودي ترتيب ۾ رکيا ويندا آهن، جهڙوڪ پيراگراف يا بلٽ لسٽ جا عنصر.

فلوٽ (Floats)

فلوٽ ٿيل عنصر کي عام وهڪري مان ڪڍي کاٻي يا ساڄي پاسي وڌ ۾ وڌ جڳهه تائين منتقل ڪيو ويندو آهي. پوءِ ٻيو مواد ان جي چوڌاري وهندو آهي.

مطلق پوزيشننگ

اهڙو عنصر عام وهڪري جو حصو نه هوندو آهي ۽ ٻين عنصرن تي اثر نه ڪندو آهي. اهو پنهنجي ڪنٽينر اندر مقرر ڪيل جڳهه تي آزادانه طور رکيو ويندو آهي.

پوزيشن يا خاصيت

position خاصيت جا پنج ممڪن قدر آهن. جيڪڏهن عنصر جي پوزيشن static کان مختلف هجي ته پوءِ top، bottom، left ۽ right خاصيتون ان جي جڳهه طئي ڪرڻ لاءِ استعمال ٿينديون آهن. جيڪڏهن پوزيشن static هجي ته اهي خاصيتون اثرانداز نه ٿينديون.

اسٽيٽڪ

هي ڊيفالٽ قدر آهي، جنهن ۾ عنصر عام وهڪري ۾ رکيو ويندو آهي.

لاڳاپيل

عنصر کي عام وهڪري ۾ رکيو وڃي ٿو، پوءِ ان کي ان جڳهه کان ٿورو منتقل ڪيو وڃي ٿو. ٻيا عنصر اهڙي طرح ترتيب ڏنا ويندا آهن ڄڻ اهو منتقل نه ٿيو هجي.

مطلق

هي مطلق پوزيشننگ بيان ڪري ٿو. عنصر پنهنجي ويجهي غير-static ابن ڏاڏي عنصر جي حوالي سان رکيو ويندو آهي.

مقرر

عنصر اسڪرين تي مقرر جڳهه تي رکيو ويندو آهي، ۽ صفحي جي اسڪرول ٿيڻ سان به پنهنجي جڳهه تبديل نه ڪندو.

فلوٽ ۽ صاف

float خاصيت جا ٽي قدر ٿي سگهن ٿا. جيڪي عنصر absolute يا fixed هجن، اهي فلوٽ نٿا ٿي سگهن. ٻيا عنصر عام طور تي فلوٽ ٿيل عنصرن جي چوڌاري وهندا آهن، جيستائين clear خاصيت انهن کي روڪي نه.

left

عنصر کاٻي پاسي فلوٽ ڪندو آهي، ٻيا عنصر ان جي ساڄي پاسي وهندا آهن.

right

عنصر ساڄي پاسي فلوٽ ڪندو آهي، ٻيا عنصر ان جي کاٻي پاسي وهندا آهن.

clear

عنصر کي فلوٽ ٿيل عنصرن جي هيٺان آڻڻ لاءِ استعمال ٿيندو آهي (clear:left، clear:right يا clear:both).

تاريخ

هاڪون ويئم لي، اوپيرا سافٽويئر ڪمپني جو چيف ٽيڪنيڪل آفيسر ۽ CSS ويب معيارن جو گڏيل خالق

CSS پهريون ڀيرو هاڪون ويئم لي طرفان 10 آڪٽوبر 1994ع تي تجويز ڪيو ويو. ان وقت لي، ٽم برنرز لي سان گڏ CERN ۾ ڪم ڪري رهيو هو. ساڳئي وقت ويب لاءِ ٻيون به ڪيتريون ئي اسٽائل شيٽ ٻوليون تجويز ڪيون ويون، ۽ عوامي ميلنگ لسٽن توڙي ورلڊ وائڊ ويب ڪنسورشيم جي اندر ٿيندڙ بحثن جي نتيجي ۾ 1996ع ۾ پهرين W3C CSS Recommendation (CSS1) جاري ڪئي وئي. خاص طور تي برٽ بوس جي هڪ تجويز گهڻي اثرائتي ثابت ٿي؛ هو CSS1 جو گڏيل مصنف بڻيو ۽ CSS جو گڏيل خالق پڻ سمجهيو وڃي ٿو.

اسٽائل شيٽون ڪنهن نه ڪنهن صورت ۾ 1980ع واري ڏهاڪي کان وٺي، جڏهن معياري عام مارڪ اپ ٻولي (SGML) وجود ۾ آئي، استعمال ٿينديون رهيون آهن، ۽ CSS کي ويب لاءِ اسٽائل شيٽون مهيا ڪرڻ جي مقصد سان تيار ڪيو ويو. ويب اسٽائل شيٽ ٻولي لاءِ هڪ گهرج اها هئي ته اسٽائل شيٽون ويب تي مختلف ماخذن مان اچي سگهن. انهيءَ ڪري موجوده اسٽائل شيٽ ٻوليون جهڙوڪ DSSSL ۽ FOSI مناسب نه هيون. ان جي ابتڙ CSS هڪ ئي دستاويز جي ڏيک کي ڪيترين ئي اسٽائل شيٽن جي ذريعي "ڪاسڪيڊنگ" انداز سان متاثر ڪرڻ جي اجازت ڏني.

جيئن جيئن HTML وڌندو ويو، اهو ويب ڊولپرن جي گهرجن کي پورو ڪرڻ لاءِ وڌيڪ اندازياتي صلاحيتون پاڻ ۾ شامل ڪندو ويو. هن ارتقا ڊزائنر کي سائيٽ جي ڏيک تي وڌيڪ ڪنٽرول ڏنو، پر ان جي قيمت طور HTML وڌيڪ پيچيده ٿي ويو. ويب برائوزر جي عملدرآمد ۾ فرق، جهڙوڪ ViolaWWW ۽ WorldWideWeb، هڪجهڙي سائيٽ ڏيک کي ڏکيو بڻايو، ۽ استعمال ڪندڙن وٽ به ويب مواد جي ڏيک بابت گهٽ ڪنٽرول رهيو. ٽم برنرز لي پاران تيار ڪيل برائوزر/ايڊيٽر ۾ اسٽائل شيٽون پروگرام اندر ئي hard-coded هيون. تنهن ڪري اهي اسٽائل شيٽون ويب تي موجود دستاويزن سان ڳنڍي نه ٿيون سگهجن. رابرٽ ڪيليائو، جيڪو پڻ CERN سان لاڳاپيل هو، ساخت کي ڏيک کان الڳ ڪرڻ چاهيو ٿي ته جيئن مختلف اسٽائل شيٽون ڇپائي، اسڪرين تي ڏيک، ۽ ايڊيٽرن لاءِ مختلف پريزينٽيشن بيان ڪري سگهن.

ويب جي پريزينٽيشن صلاحيتن کي بهتر بنائڻ ويب برادري جي ڪيترن ماڻهن جي دلچسپي جو موضوع هو ۽ www-style ميلنگ لسٽ تي نون مختلف اسٽائل شيٽ ٻولين جون تجويزون ڏنيون ويون. انهن نون تجويزن مان ٻه خاص طور تي ان شيءِ تي اثرانداز ٿيون جيڪا پوءِ CSS بڻجي: Cascading HTML Style Sheets ۽ Stream-based Style Sheet Proposal (SSP). ٻه برائوزر شروعاتي تجويزن لاءِ آزمائشي ميدان طور ڪم آيا؛ لي يو لا فون سان گڏجي ڊيو ريگٽ جي Arena برائوزر ۾ CSS لاڳو ڪئي. برٽ بوس پنهنجي SSP تجويز کي Argo برائوزر ۾ لاڳو ڪيو. ان کان پوءِ لي ۽ بوس گڏجي CSS معيار تي ڪم ڪيو (نالي مان 'H' هٽايو ويو، ڇو ته اهي اسٽائل شيٽون HTML کان سواءِ ٻين مارڪ اپ ٻولين تي به لاڳو ٿي سگهيون ٿيون).

لي جي تجويز 1994ع ۾ شڪاگو، ايليناءِ ۾ ٿيل "Mosaic and the Web" ڪانفرنس (جيڪا پوءِ WWW2 سڏجڻ لڳي) ۾ پيش ڪئي وئي، ۽ 1995ع ۾ ٻيهر برٽ بوس سان گڏ پيش ڪئي وئي. ان وقت تائين W3C اڳ ئي قائم ٿي چڪي هئي ۽ هن CSS جي ترقي ۾ دلچسپي ورتي. هن مقصد لاءِ اسٽيون پيمبرٽن جي صدارت هيٺ هڪ ورڪشاپ منعقد ڪئي وئي. نتيجي طور W3C، HTML editorial review board (ERB) جي deliverables ۾ CSS تي ڪم شامل ڪيو. لي ۽ بوس هن منصوبي جي هن پهلوءَ تي بنيادي ٽيڪنيڪل عملي طور ڪم ڪيو، جڏهن ته ٻين ميمبرن، جن ۾ Microsoft جو ٿامس ريئرڊن به شامل هو، پڻ حصو ورتو. آگسٽ 1996ع ۾ Netscape Communication Corporation هڪ متبادل اسٽائل شيٽ ٻولي JavaScript Style Sheets (JSSS) جي نالي سان پيش ڪئي. اها specification ڪڏهن مڪمل نه ٿي ۽ هاڻي متروڪ سمجهي وڃي ٿي. 1996ع جي آخر تائين CSS سرڪاري ٿيڻ لاءِ تيار ٿي چڪي هئي، ۽ CSS level 1 Recommendation ڊسمبر ۾ شايع ڪئي وئي.

HTML، CSS، ۽ DOM جي ترقي هڪ ئي گروهه، HTML Editorial Review Board (ERB)، اندر ٿي رهي هئي. 1997ع جي شروعات ۾ ERB کي ٽن ورڪنگ گروپن ۾ ورهايو ويو: HTML Working Group، جنهن جي صدارت W3C جي ڊين ڪنولي ڪئي؛ DOM Working Group، جنهن جي صدارت SoftQuad جي Lauren Wood ڪئي؛ ۽ CSS Working Group، جنهن جي صدارت W3C جي ڪرس للي ڪئي.

CSS Working Group انهن مسئلن تي ڪم شروع ڪيو جيڪي CSS level 1 ۾ حل نه ٿيا هئا، جنهن جي نتيجي ۾ 4 نومبر 1997ع تي CSS level 2 وجود ۾ آئي. اها 12 مئي 1998ع تي W3C Recommendation طور شايع ٿي. CSS level 3، جيڪا 1998ع ۾ شروع ڪئي وئي، بمطابق

2014

اڃا ترقي هيٺ آهي.

2005ع ۾ CSS Working Groups فيصلو ڪيو ته معيارن جي گهرجن کي وڌيڪ سختيءَ سان لاڳو ڪيو وڃي. ان جو مطلب اهو ٿيو ته اڳ ئي شايع ٿيل معيار جهڙوڪ CSS 2.1، CSS 3 Selectors، ۽ CSS 3 Text کي Candidate Recommendation مان واپس Working Draft جي سطح تي آندو ويو.

اختيار ڪرڻ ۾ ڏکيائي

CSS 1 specification 1996ع ۾ مڪمل ٿي. Microsoft جو Internet Explorer 3 انهيءَ ئي سال جاري ٿيو، جنهن ۾ CSS لاءِ محدود سهڪار موجود هو. IE 4 ۽ Netscape 4.x وڌيڪ سهڪار شامل ڪيو، پر اهو عام طور نامڪمل ۽ ڪيترن ئي بگز سان ڀريل هو، جنهن CSS کي عملي طور تي اپنائڻ ڏکيو بڻايو. ڪنهن به ويب برائوزر کي specification جي لڳ ڀڳ مڪمل implementation حاصل ڪرڻ ۾ ٽن سالن کان وڌيڪ لڳي ويا. Internet Explorer 5.0 for the Macintosh، جيڪو مارچ 2000ع ۾ جاري ٿيو، پهريون برائوزر هو جنهن ۾ CSS 1 لاءِ مڪمل (99 سيڪڙو کان به وڌيڪ) سهڪار موجود هو، ۽ اهڙي طرح هن اوپيرا کي به پوئتي ڇڏيو، جيڪا ان کان پندرهين مهيني اڳ CSS سهڪار متعارف ڪرائڻ کان وٺي اڳواڻ هئي. ان کان پوءِ ٻيا برائوزر به جلدي شامل ٿيا، ۽ انهن مان ڪيترن CSS 2 جا به ڪجهه حصا لاڳو ڪيا.

تنهن هوندي، جڏهن پوءِ جا "version 5" ويب برائوزر به CSS جو ڪافي مڪمل implementation پيش ڪرڻ لڳا، تڏهن به اهي ڪجهه پهلوئن ۾ غلط هئا. اهي بيقاعدگين، بگز، ۽ ٻين quirks سان ڀرپور هئا. Microsoft Internet Explorer 5.x for Windows، جيڪو IE for Macintosh کان بلڪل مختلف هو، CSS box model کي CSS معيارن جي مقابلي ۾ غلط نموني لاڳو ڪيو هو. اهڙين بيقاعدگين ۽ فيچر سهڪار ۾ فرقن جي ڪري ڊزائنرن لاءِ مختلف برائوزرن ۽ پليٽفارمن تي هڪجهڙو ڏيک حاصل ڪرڻ ڏکيو ٿي ويو، جيستائين هو workarounds، جن کي CSS hacks ۽ filters چيو ويو، استعمال نه ڪن. IE Windows جو box model bug ايترو سنجيده هو جو جڏهن Internet Explorer 6 جاري ٿيو، Microsoft CSS جي تشريح لاءِ هڪ backward-compatible mode ("quirks mode") پڻ متعارف ڪرايو، جنهن سان گڏ هڪ متبادل، درست "standards mode" به ڏنو ويو. ٻين غير-Microsoft برائوزرن به اهڙيون mode-switch صلاحيتون مهيا ڪيون. نتيجي طور، HTML فائلن جي مصنفن لاءِ ضروري ٿي پيو ته هو يقيني بڻائن ته سندن فائلن ۾ هڪ خاص نمايان "معيارن مطابق CSS جو ارادو ڪيل" نشان موجود هجي، جنهن سان ظاهر ٿئي ته مصنفن CSS کي معيارن مطابق صحيح طرح سمجهائڻ جو ارادو رکيو آهي، نه ته هاڻي گهڻو پراڻي ٿي ويل IE5/Windows واري انداز مطابق. هن نشان کان سواءِ، اهي ويب برائوزر جيڪي "quirks mode" switching جي صلاحيت رکن ٿا، ويب صفحن تي شين جي ماپ ائين طئي ڪندا جيئن IE 5 on Windows ڪندو هو، بجاءِ CSS معيارن جي پيروي ڪرڻ جي.

CSS جي اڻبرابر اپنائي ۽ اصل specification ۾ موجود errata سبب W3C، CSS 2 معيارن کي نظرثاني ڪري CSS 2.1 تيار ڪيو، جيڪو HTML برائوزرن ۾ موجود CSS سهڪار جي ڪم ڪندڙ تصوير جي وڌيڪ ويجهو هو. CSS 2 جون ڪجهه خاصيتون، جيڪي ڪنهن به برائوزر ڪاميابيءَ سان لاڳو نه ڪيون هيون، خارج ڪيون ويون، ۽ ڪجهه حالتن ۾، معياري روين کي بدلائي انهن کي اڳ ۾ موجود عام implementations سان هم آهنگ ڪيو ويو. CSS 2.1 25 فيبروري 2004ع تي Candidate Recommendation بڻيو، پر 13 جون 2005ع تي ان کي ٻيهر Working Draft جي حيثيت ڏني وئي، ۽ پوءِ 19 جولاءِ 2007ع تي ٻيهر Candidate Recommendation جي حيثيت بحال ٿي.

انهن مسئلن کان علاوه، .css extension هڪ اهڙي سافٽويئر پراڊڪٽ ۾ به استعمال ٿيندي هئي جيڪا PowerPoint فائلن کي Compact Slide Show فائلن ۾ تبديل ڪندي هئي، تنهن ڪري ڪجهه ويب سرور سڀئي .css فائلون MIME type application/x-pointplus طور موڪليندا هئا، نه ڪي text/css طور.

وڪڻندڙ اڳياڙيون (Vendor prefixes)

انفرادي برائوزر ٺاهيندڙ ڪڏهن ڪڏهن معياري بڻجڻ ۽ عام ٿيڻ کان اڳ نوان parameter متعارف ڪرائيندا هئا. مستقبل جي implementation سان ٽڪراءُ کان بچڻ لاءِ، وڪڻندڙ انهن parameterن جي اڳيان پنهنجا منفرد نالا لڳائيندا هئا، جهڙوڪ Mozilla Firefox لاءِ -moz-، Apple Safari جي برائوزنگ انجڻ جي نالي تي -webkit-، Opera Browser لاءِ -o-، ۽ Microsoft Internet Explorer توڙي Microsoft Edge جي شروعاتي EdgeHTML نسخن لاءِ -ms-.

ڪڏهن ڪڏهن vendor prefix وارا parameter، جيئن -moz-radial-gradient ۽ -webkit-linear-gradient، پنهنجي بي-پريفڪس هم منصبن جي مقابلي ۾ ٿوري مختلف syntax رکندا هئا.

معياري بڻجڻ کان پوءِ prefix وارا properties متروڪ ٿي ويندا آهن. اهڙا پروگرام موجود آهن جيڪي پراڻن برائوزرن لاءِ پاڻمرادو prefixes شامل ڪندا آهن ۽ prefixed parameterن جا معياري نسخا پڻ ظاهر ڪندا آهن. ڇاڪاڻ ته prefixes صرف محدود برائوزرن تائين محدود هوندا آهن، prefix هٽائڻ سان ٻيا برائوزر به انهيءَ functionality کي ڏسي سگهندا آهن. هڪ استثنا ڪجهه پراڻا -webkit- prefixed properties آهن، جيڪي ويب تي ايترا عام ۽ مستقل ٿي ويا آهن جو ٻين برائوزر خاندانن به compatibility خاطر انهن جي سهڪار جو فيصلو ڪيو.

CSS Snapshot 2021

CSS جون مختلف سطحون ۽ profiles آهن. CSS جي هر سطح اڳئين سطح تي ٻڌل هوندي آهي، عام طور نيون خاصيتون شامل ڪندي آهي، ۽ عام طرح CSS 1، CSS 2، CSS 3، ۽ CSS 4 طور سڃاتي ويندي آهي. Profiles عام طور هڪ يا وڌيڪ CSS سطحن جو ڪو حصو هونديون آهن، جيڪي ڪنهن خاص ڊوائيس يا يوزر انٽرفيس لاءِ ٺاهيون وينديون آهن. هن وقت موبائل ڊوائيسن، پرنٽرن، ۽ ٽيليويزن سيٽن لاءِ profiles موجود آهن. Profiles کي media types سان نه ملائڻ گهرجي، جيڪي CSS 2 ۾ شامل ڪيا ويا.

CSS 1

پهرين CSS specification جيڪا سرڪاري W3C Recommendation بڻي، اها CSS level 1 هئي، جيڪا 17 ڊسمبر 1996ع تي شايع ٿي. هاڪون ويئم لي ۽ برٽ بوس کي ان جا اصل ترقي ڪندڙ قرار ڏنو وڃي ٿو. ان جي صلاحيتن ۾ هي سهڪار شامل هو:

• فونٽ خاصيتون، جيئن typeface ۽ emphasis
• متن، پس منظرن ۽ ٻين عنصرن جا رنگ
• متن جون خاصيتون، جيئن لفظن، اکرن ۽ متن جي سٽن جي وچ ۾ فاصلو
• متن، تصويرن، جدولن ۽ ٻين عنصرن جي سڌائي
• گهڻن عنصرن لاءِ margin، border، padding ۽ positioning
• صفتن جي گروهن جي منفرد سڃاڻپ ۽ عام درجي بندي

W3C هاڻي CSS 1 Recommendation کي برقرار نٿي رکي.

CSS 2

CSS level 2 specification، W3C طرفان تيار ڪئي وئي ۽ مئي 1998ع ۾ recommendation طور شايع ڪئي وئي. CSS 1 کان وڌيڪ جامع هجڻ جي ناتي، CSS 2 ۾ ڪيتريون ئي نيون صلاحيتون شامل هيون، جهڙوڪ عنصرن جي absolute، relative ۽ fixed positioning ۽ z-index، media types جو تصور، aural style sheets لاءِ سهڪار (جن کي بعد ۾ CSS 3 speech modules سان تبديل ڪيو ويو)، ٻطرفي متن، ۽ نيون فونٽ خاصيتون جيئن shadows.

W3C هاڻي CSS 2 recommendation کي به برقرار نٿي رکي.

CSS 2.1

CSS سطح 2 جي نظرثاني 1، جنهن کي گهڻو ڪري "CSS 2.1" چيو ويندو آهي، CSS 2 ۾ موجود غلطيون درست ڪري ٿي، گهٽ سهڪار مليل يا مڪمل طور هڪجهڙي نموني ڪم نه ڪندڙ خاصيتون هٽائي ٿي، ۽ اڳ ۾ ئي برائوزرن ۾ لاڳو ٿيل واڌارن کي specification ۾ شامل ڪري ٿي. ٽيڪنيڪل specification کي معياري بڻائڻ لاءِ W3C Process سان مطابقت رکڻ خاطر، CSS 2.1 ڪيترن سالن تائين Working Draft ۽ Candidate Recommendation جي حيثيتن وچ ۾ ايندي ويندي رهي. CSS 2.1 پهريون ڀيرو 25 فيبروري 2004ع تي Candidate Recommendation بڻي، پر وڌيڪ جائزي لاءِ 13 جون 2005ع تي ان کي ٻيهر Working Draft بڻايو ويو. 19 جولاءِ 2007ع تي اها ٻيهر Candidate Recommendation بڻجي، ۽ پوءِ 2009ع ۾ ٻه ڀيرا ان ۾ تازه ڪاري ڪئي وئي. تنهن هوندي به، تبديليون ۽ وضاحتون شامل ٿيڻ سبب، 7 ڊسمبر 2010ع تي اها ٻيهر Last Call Working Draft ڏانهن موٽي وئي.

CSS 2.1، 12 اپريل 2011ع تي Proposed Recommendation بڻجي وئي. W3C Advisory Committee جي جائزي کان پوءِ، آخرڪار اها 7 جون 2011ع تي W3C Recommendation طور شايع ڪئي وئي.

CSS 2.1 کي سطح 2 جي پهرين ۽ آخري نظرثاني طور رٿيو ويو هو—پر گهٽ ترجيح واري ڪم طور CSS 2.2 تي 2015ع ۾ ڪم شروع ٿيو.

CSS 3

"CSS3" ھتي ريڊائريڪٽ ٿئي ٿو. For other uses, see CSS3 (disambiguation).

CSS 2 جي ابتڙ، جيڪا هڪ وڏي اڪيلي specification آهي ۽ مختلف خاصيتن جي وضاحت ڪري ٿي، CSS 3 کي ڪيترن الڳ دستاويزن ۾ ورهايو ويو آهي، جن کي "modules" چيو وڃي ٿو. هر module نيون صلاحيتون شامل ڪري ٿو يا CSS 2 ۾ بيان ڪيل خاصيتن کي وڌائي ٿو، جڏهن ته پٺتي موافقت (backward compatibility) برقرار رکي ٿو. CSS سطح 3 تي ڪم اصل CSS 2 recommendation جي اشاعت جي لڳ ڀڳ ئي شروع ٿيو. CSS 3 جا سڀ کان شروعاتي مسودا جون 1999ع ۾ شايع ٿيا.

ماڊيولر بڻائڻ جي ڪري، مختلف moduleن جون استحڪام واريون حالتون ۽ سرڪاري حيثيتون به مختلف آهن.

ڪجهه moduleن کي Candidate Recommendation (CR) جي حيثيت حاصل آهي ۽ انهن کي مناسب حد تائين مستحڪم سمجهيو وڃي ٿو. CR مرحلي تي implementation ڪندڙن کي صلاح ڏني ويندي آهي ته vendor prefixes ختم ڪري ڇڏين.

مکيه module-specifications جو خلاصو

Module	Specification title	Status	Date
css3-background	CSS Backgrounds and Borders Module Level 3	Candidate Rec.
css-box-3	CSS Box Model Module Level 3	Recommendation
css-cascade-3	CSS Cascading and Inheritance Level 3	Recommendation
css-color-3	CSS Color Module Level 3	Recommendation
css3-content	CSS Generated Content Module Level 3	Working Draft
css-fonts-3	CSS Fonts Module Level 3	Recommendation
css3-gcpm	CSS Generated Content for Paged Media Module	Working Draft	000000002014-05-01-0000May 2014
css3-layout	CSS Template Layout Module	Note
css3-mediaqueries	Media Queries	Recommendation
mediaqueries-4	Media Queries Level 4	Candidate Rec.
css3-multicol	Multi-column Layout Module Level 1	Candidate Rec.
css3-page	CSS Paged Media Module Level 3	Working Draft, and part migrated to css3-break
css3-break	CSS Fragmentation Module Level 3	Candidate Rec.
selectors-3	Selectors Level 3	Recommendation
selectors-4	Selectors Level 4	Working Draft
css3-ui	CSS Basic User Interface Module Level 3 (CSS3 UI)	Recommendation

CSS 4

"CSS4" ھتي ريڊائريڪٽ ٿئي ٿو. For other uses, see CSS4 (disambiguation).

Jen Simmons، 2019ع ۾ CSS جي حالت تي ڳالهائيندي، جڏهن ڪيترن CSS 4 moduleن کي اڳتي وڌايو پئي ويو

CSS4 نالي ڪا اڪيلي specification موجود ناهي، ڇاڪاڻ ته CSS کي ڪيترن الڳ moduleن ۾ ورهايو ويو آهي، جيڪي پاڻمرادو پنهنجن سطحن مطابق ترقي ڪن ٿا.

اهي module جيڪي CSS Level 2 جي شين تي ٺهيل هئا، Level 3 کان شروع ٿيا. انهن مان ڪجهه اڳ ئي Level 4 تائين پهچي چڪا آهن يا Level 5 جي ويجهو آهن. ٻيا module جيڪي مڪمل طور نئين functionality بيان ڪن ٿا، جهڙوڪ Flexbox، انهن کي Level 1 قرار ڏنو ويو آهي ۽ انهن مان ڪجهه Level 2 جي ويجهو پهچي رهيا آهن.

CSS Working Group ڪڏهن ڪڏهن "Snapshots" شايع ڪندي آهي، جيڪي مڪمل moduleن ۽ ٻين drafts جي ڪجهه حصن جو مجموعو هوندا آهن، ۽ انهن کي ايترو مستحڪم سمجهيو ويندو آهي جو برائوزر ڊولپر انهن کي لاڳو ڪري سگهن. هن وقت تائين اهڙا پنج "best current practices" دستاويز Notes طور 2007ع، 2010ع، 2015ع، 2017ع، ۽ 2018ع ۾ شايع ڪيا ويا آهن.

ڇاڪاڻ ته اهي specification snapshot بنيادي طور ڊولپرن لاءِ تيار ڪيا ويندا آهن، تنهن ڪري اهڙي ئي هڪ ورزن وار حواله دستاويز جي گهرج وڌي رهي آهي، جيڪو مصنفن لاءِ هجي ۽ جيڪو هڪجهڙي نموني ڪم ڪندڙ implementations جي حالت پيش ڪري، جيئن هاڻي Can I Use... ۽ MDN Web Docs. جهڙيون سائيٽون بيان ڪن ٿيون. اهڙي وسيلي تي بحث ڪرڻ ۽ ان جي تعريف طئي ڪرڻ لاءِ 2020ع جي شروعات ۾ هڪ W3C Community Group قائم ڪئي وئي. ورزننگ جي اصل قسم تي پڻ بحث جاري آهي، جنهن جو مطلب اهو آهي ته جڏهن اهو دستاويز تيار ٿيندو، تڏهن به شايد ان کي "CSS4" نه سڏيو وڃي.

برائوزر سهڪار

هر ويب برائوزر ويب صفحن کي ڏيکارڻ لاءِ هڪ لي آئوٽ انجڻ استعمال ڪري ٿو، ۽ CSS جي ڪارڪردگي لاءِ سهڪار انهن سڀني ۾ هڪجهڙو ناهي. ڇاڪاڻ ته برائوزر CSS کي مڪمل درستگي سان parse نٿا ڪن، تنهن ڪري مخصوص برائوزرن کي workaround ذريعي هدف بڻائڻ لاءِ گهڻيون coding ٽيڪنيڪون تيار ڪيون ويون آهن (جن کي عام طور CSS hacks يا CSS filters چيو ويندو آهي). CSS ۾ نئين ڪارڪردگيءَ جي اختيار کي وڏن برائوزرن ۾ سهڪار جي کوٽ سبب سست ڪري سگهجي ٿو. مثال طور، Internet Explorer ڪيترين CSS 3 خاصيتن لاءِ سهڪار شامل ڪرڻ ۾ آهستي رهيو، جنهن انهن خاصيتن جي اختيار کي سست ڪيو ۽ ڊولپرن ۾ برائوزر جي شهرت کي نقصان پهچايو. ان کان علاوه، ڪجهه نسخن ۾ غير-vendor-prefixed filter خاصيت لاءِ هڪ proprietary syntax پڻ استعمال ڪئي وئي هئي. پنهنجن استعمال ڪندڙن لاءِ هڪجهڙو تجربو يقيني بڻائڻ لاءِ، ويب ڊولپر اڪثر پنهنجين سائيٽن کي ڪيترن آپريٽنگ سسٽمن، برائوزرن، ۽ برائوزر نسخن تي آزمائيندا آهن، جنهن سان ترقي جو وقت ۽ پيچيدگي وڌي ويندي آهي. BrowserStack جهڙا اوزار هنن ماحولن کي برقرار رکڻ جي پيچيدگي گهٽائڻ لاءِ تيار ڪيا ويا آهن.

انهن جاچ اوزارن کان علاوه، ڪيتريون ئي سائيٽون مخصوص CSS خاصيتن لاءِ برائوزر سهڪار جون فهرستون به برقرار رکن ٿيون، جن ۾ CanIUse ۽ MDN Web Docs شامل آهن. ان کان سواءِ، CSS 3 ۾ feature queries جي وضاحت ڪئي وئي آهي، جيڪي @supports هدايت مهيا ڪن ٿيون، جنهن سان ڊولپر پنهنجي CSS جي اندر سڌي طرح انهن برائوزرن کي هدف بڻائي سگهن ٿا جيڪي ڪنهن خاص ڪارڪردگي لاءِ سهڪار رکن ٿا. پراڻن برائوزرن ۾ جيڪو CSS سهڪار هيٺ نه هوندو آهي، ان کي ڪڏهن ڪڏهن JavaScript polyfills ذريعي به درست يا شامل ڪيو ويندو آهي؛ اهي JavaScript ڪوڊ جا ٽڪرا هوندا آهن جيڪي برائوزرن کي هڪجهڙي نموني ڪم ڪرڻ لاءِ ٺاهيا ويندا آهن. اهي workaround ۽ fallback ڪارڪردگي جي سهڪار جي ضرورت ترقياتي منصوبن ۾ وڌيڪ پيچيدگي شامل ڪري سگهن ٿا، ۽ انهيءَ ڪري ڪمپنيون گهڻو ڪري برائوزر نسخن جي هڪ فهرست مقرر ڪنديون آهن ته ڪهڙا نسخا هو سهڪار ڏينديون ۽ ڪهڙا نه.

جيئن ويب سائيٽون اهڙا نوان ڪوڊ معيار اختيار ڪنديون وڃن ٿيون جيڪي پراڻن برائوزرن سان مطابقت نٿا رکن، تيئن اهي پراڻا برائوزر ويب تي موجود ڪيترن ئي وسيلن تائين رسائي کان محروم ٿي سگهن ٿا (ڪڏهن ڪڏهن ڄاڻي واڻي به). تنهن هوندي به، انٽرنيٽ تي گهڻيون مشهور سائيٽون رڳو ڪمزور CSS سهڪار سبب پراڻن برائوزرن ۾ بصري طور گهٽ معيار واريون ناهن ٿينديون، پر گهڻين حالتن ۾ بلڪل ڪم ئي ناهن ڪنديون، خاص طور JavaScript ۽ ٻين ويب ٽيڪنالاجين جي ارتقا سبب.

حدون

CSS جي موجوده صلاحيتن بابت ڪجھه ڄاتل حدون هيٺ ڏجن ٿيون:

پوزيشن کان آزاد نئون اسڪوپ واضح نموني سان مقرر نٿو ڪري سگهجي

z-index جهڙين خاصيتن لاءِ اسڪوپنگ جا قاعدا ويجهي والدين عنصر کي ڳوليندا آهن جنهن وٽ position: absolute يا position: relative خاصيت هجي. هي عجيب قسم جي ڳانڍاپي سبب غير گهربل اثر پيدا ٿيندا آهن. مثال طور، جڏهن ڪنهن عنصر جي پوزيشن کي ترتيب ڏيڻ لازمي ٿي وڃي ته نئون اسڪوپ ٺاهڻ کان بچڻ ناممڪن ٿي ويندو آهي، جنهن ڪري والدين عنصر جي گهربل اسڪوپ کي استعمال ڪرڻ ممڪن نه رهندو آهي.

پسيڊو-ڪلاس جي متحرڪ رويي تي ڪنٽرول نٿو ڪري سگهجي

CSS پسيڊو-ڪلاس مهيا ڪري ٿو جيڪي متبادل اسٽائلن جي مشروط لاڳو ٿيڻ ذريعي استعمال ڪندڙ جي ڪجهه حد تائين موٽ (feedback) جي اجازت ڏين ٿا. CSS جو هڪ پسيڊو-ڪلاس ":hover" متحرڪ آهي (JavaScript جي "onmouseover" جي برابر) ۽ ان جي غلط استعمال جو امڪان به آهي (مثال طور ڪرسر جي ويجهو اچڻ تي ظاهر ٿيندڙ popups ٺاهڻ). پر CSS ۾ اهڙي صلاحيت موجود ناهي جو ڪو ڪلائنٽ ان کي غيرفعال ڪري سگهي (ڪو "disable" جهڙو خاصيت ناهي) يا ان جي اثرن کي محدود ڪري سگهي (هر خاصيت لاءِ "nochange" جهڙا قدر موجود ناهن).

قاعدن کي نالو ڏيڻ ممڪن ناهي

CSS ۾ ڪنهن قاعدي کي نالو ڏيڻ جو ڪو طريقو ناهي، جنهن سان مثال طور ڪلائنٽ-پاسي اسڪرپٽ انهي قاعدي ڏانهن اشارو ڪري سگهي، ڀلي ان جو selector تبديل ٿي وڃي.

هڪ قاعدي جا اسٽائل ٻئي قاعدي ۾ شامل نٿا ڪري سگهجن

CSS ۾ گهڻا دفعا مطلوبه اثر حاصل ڪرڻ لاءِ ساڳيا اسٽائل ڪيترن قاعدن ۾ ورجائڻا پوندا آهن، جنهن ڪري سنڀال (maintenance) وڌي ويندي آهي ۽ وڌيڪ جامع جاچ جي ضرورت پوندي آهي. هن مسئلي کي حل ڪرڻ لاءِ ڪجهه نيون CSS خاصيتون تجويز ڪيون ويون هيون، پر پوءِ انهن کي ڇڏي ڏنو ويو. ان جي بدران، ليکڪ وڌيڪ ترقي يافته stylesheet ٻوليون استعمال ڪري سگهن ٿا جيڪي CSS ۾ compile ٿين ٿيون، جهڙوڪ Sass، Less، يا Stylus.

مارڪ اپ تبديل ڪرڻ کانسواءِ مخصوص متن کي هدف بڻائي نٿو سگهجي

::first-letter پسيڊو-عنصر کان سواءِ، ڪنهن به مخصوص متن جي حصي کي هدف بڻائڻ ممڪن ناهي جيستائين placeholder عنصر استعمال نه ڪيا وڃن.

فائدا

مواد کي پيشڪش کان الڳ ڪرڻ

اصل مضمون جي لاءِ ڏسو Separation of content and presentation

CSS مختلف پيشڪشي فارميٽن ۾ مواد جي اشاعت کي آسان بڻائي ٿي، ڇاڪاڻ⁠تہ اها مختلف نامياري پيرا ميٽرن جي بنياد تي اسٽائلن کي ترتيب ڏئي ٿي. انهن پيرا ميٽرن ۾ استعمال ڪندڙ جون واضح ترجيحات (جهڙوڪ ٿيم يا فونٽ سائيز)، مختلف ويب برائوزرن سان مطابقت، مواد ڏسڻ لاءِ استعمال ٿيندڙ اوزار جو قسم (مثال طور ڊيسڪ ٽاپ، ٽيبليٽ يا موبائل ڊيوائس)، اسڪرين ريزوليوشن، استعمال ڪندڙ جو جاگرافيائي هنڌ ۽ ٻيا ڪيترائي عنصر شامل آهن. CSS responsive design کي پڻ ممڪن بڻائي ٿي، جنهن سان مواد مختلف اسڪرين سائيزن ۽ رخن مطابق پاڻمرادو ترتيب وٺي ٿو، جنهن سان رسائي (accessibility) ۽ استعمال ڪندڙ جو تجربو مختلف ماحولن ۾ بهتر ٿئي ٿو.

سڄي سائيٽ ۾ هڪجهڙائي

اصل مضمون جي لاءِ ڏسو Style sheet (web development)

جڏهن CSS کي صحيح نموني استعمال ڪيو وڃي، خاص طور inheritance ۽ "cascading" جي اصولن مطابق، تڏهن هڪ عالمي style sheet استعمال ڪري سڄي سائيٽ تي عنصرن کي هڪجهڙي انداز ۾ ترتيب ڏئي سگهجي ٿو. جيڪڏهن ڪنهن موقعي تي عنصرن جي اسٽائل کي تبديل ڪرڻ يا ترتيب ڏيڻ جي ضرورت پوي، ته اهي تبديليون عالمي style sheet ۾ قاعدن کي تبديل ڪري آساني سان ڪيون وڃن ٿيون. CSS کان اڳ اهڙي قسم جي سار سنڀال وڌيڪ ڏکي، مهانگي ۽ وقت وٺندڙ هوندي هئي.

بينڊوڊٿ

هڪ style sheet، اندروني هجي يا خارجي، HTML عنصرن جي هڪ حد لاءِ اسٽائل صرف هڪ ڀيرو بيان ڪري ٿي جيڪي class، قسم يا ٻين عنصرن سان لاڳاپي جي بنياد تي چونڊيا وڃن ٿا. هي طريقو هر عنصر لاءِ inline اسٽائل ورجائڻ کان گهڻو وڌيڪ ڪارآمد آهي. خارجي style sheet عام طور browser cache ۾ محفوظ ٿي ويندي آهي، تنهنڪري ان کي ڪيترن ئي صفحن تي ٻيهر لوڊ ڪرڻ کانسواءِ استعمال ڪري سگهجي ٿو، جنهن سان نيٽ ورڪ تي ڊيٽا جي منتقلي به گهٽجي ٿي.

صفحي جي ٻيهر ترتيب

اصل مضمون جي لاءِ ڏسو Progressive enhancement

صرف هڪ لائين جي تبديلي سان ساڳئي صفحي لاءِ مختلف style sheet استعمال ڪري سگهجي ٿي. هي خاصيت رسائي جي لحاظ کان به فائديمند آهي، ۽ انهي سان گڏ مختلف اوزارن لاءِ صفحي يا سائيٽ کي ترتيب ڏيڻ جي صلاحيت پڻ مهيا ڪري ٿي. ان کان علاوه، اهي اوزار جيڪي اسٽائلنگ کي سمجهي نٿا سگهن (جهڙوڪ پراڻا برائوزر) اڃا به مواد ڏيکاري سگهن ٿا.

رسائي

اصل مضمون جي لاءِ ڏسو Tableless web design#Accessibility

CSS کان سواءِ، ويب ڊيزائنر عام طور پنهنجي صفحن جي ترتيب لاءِ HTML ٽيبل جهڙيون ٽيڪنيڪون استعمال ڪندا هئا، جيڪي نظر جي ڪمزوري رکندڙ استعمال ڪندڙن لاءِ رسائي ۾ رڪاوٽ پيدا ڪنديون هيون (ڏسو Tableless web design § Accessibility).

معياري بڻائڻ

فريم ورڪ

اصل مضمون جي لاءِ ڏسو CSS framework

CSS framework اڳواٽ تيار ڪيل لائبريريون آهن جيڪي Cascading Style Sheets ٻولي استعمال ڪندي ويب صفحن جي وڌيڪ آسان ۽ معياري نموني سان اسٽائلنگ ڪرڻ لاءِ ٺهيل هونديون آهن. CSS فريم ورڪن ۾ Blueprint، Bootstrap، Foundation ۽ Materialize شامل آهن. پروگرامنگ ۽ اسڪرپٽنگ ٻولين جي لائبريرين وانگر، CSS فريم ورڪ پڻ عام طور خارجي .css فائلن طور HTML جي <head> حصي ۾ شامل ڪيا ويندا آهن. اهي ويب صفحن جي ڊيزائن ۽ ترتيب لاءِ ڪيترائي تيار اختيار فراهم ڪن ٿا. جيتوڻيڪ اهڙا ڪيترائي فريم ورڪ شايع ٿيا آهن، ڪجهه ليکڪ انهن کي گهڻو ڪري تيزيءَ سان prototyping ڪرڻ يا سکڻ لاءِ استعمال ڪن ٿا، ۽ پوءِ هر سائيٽ لاءِ مناسب CSS پاڻ ٺاهڻ کي ترجيح ڏين ٿا ته جيئن غير استعمال ٿيل خاصيتن جي ڪري ڊيزائن، سنڀال ۽ ڊائون لوڊ جي اضافي بوجھ کان بچي سگهجي.

ڊيزائن جا طريقا

جڏهن ڪنهن منصوبي ۾ استعمال ٿيندڙ CSS وسيلن جو قد وڌي وڃي ٿو، ته ترقياتي ٽيم اڪثر انهن کي منظم رکڻ لاءِ ڪنهن گڏيل ڊيزائن طريقي تي متفق ٿيندي آهي. ان جو مقصد ترقي کي آسان بڻائڻ، گڏيل ڪم کي بهتر ڪرڻ، ۽ برائوزر ۾ style sheet جي ڪارڪردگي کي بهتر رکڻ هوندو آهي. مشهور طريقن ۾ OOCSS (object-oriented CSS)، ACSS (atomic CSS)، CSS (organic Cascade Style Sheet)، SMACSS (scalable and modular architecture for CSS)، ۽ BEM (block, element, modifier) شامل آهن.

پڻ ڏسو

• Flash of unstyled content
• CSS-in-JS

وڌيڪ پڙهڻ لاءِ

• Meyer, Eric A.; Weyl, Estelle (2023). Cascading Style Sheets: The Definitive Guide, Fifth Edition. O'Reilly Media, Inc. ISBN 978-1-09-811761-0. https://www.oreilly.com/library/view/css-the-definitive/9781098117603/. 
• Grant, Keith J. (2018). CSS in Depth. Manning Publications Co. ISBN 978-1-61729-345-0. https://learning.oreilly.com/library/view/css-in-depth/9781617293450/. 
• MDN CSS reference
• MDN Getting Started with CSS

ٻاهريان ڳنڍڻا

• Official website