سی ایس ایس کوڈ کیسے لکھا جائے؟

کسی بھی ویب پیج کا بنیادی ڈھانچہ HTML پر ہوتا ہے، جبکہ HTML ایلیمنٹس کو منظم اور خوبصورت بنانے کے لیے CSS کوڈ استعمال کیا جاتا ہے۔ مثلاً‌ ویب پیج میں پیراگراف کی لکھائی کا رنگ کیا ہو، اس کے لیے کونسا فونٹ استعمال کیا جائے، فونٹ کا سائز کیا رکھا جائے، اور ایک پیرا گراف سے دوسرے پیرا گراف کا فاصلہ کتنا ہونا چاہیے، یہ سب کچھ CSS کی مدد سے طے کیا جاتا ہے۔ اس کے علاوہ ویب پیج میں HTML ایلیمنٹس کی پوزیشن بھی CSS کی مدد سے سیٹ کی جاتی ہے- مثلاً‌ کونسا کالم صفحہ کے دائیں طرف، کونسا کالم درمیان میں، اور کونسا کالم صفحہ کے بائیں جانب ہونا چاہیے وغیرہ۔

CSS مخفف ہے Cascading Style Sheets کا۔ اگر آپ نئے سیکھنے والے ہیں تو اس ٹٹوریل کا مقصد یہ ہے کہ آپ کے ذہن میں CSS کا عمومی تصور واضح ہو جائے۔ اور اگر آپ پہلے سے CSS کے ساتھ کچھ واقفیت رکھتے ہیں تو اس ٹٹوریل کا مقصد یہ ہے کہ CSS کے متعلق جو چیز پہلے آپ کی نظر سے نہیں گزری وہ آپ کے علم میں آجائے۔

اس ٹٹوریل میں پہلے یہ بتایا گیا ہے کہ CSS کے ساتھ اور اس کے بغیر ایک ویب پیج کیسے نظر آتا ہے۔ پھر CSS لکھنے کا طریقہ (Syntax) بتایا گیا ہے۔ پھر یہ بتایا گیا ہے کہ HTML ایلیمنٹس یا ویب پیج کے ساتھ CSS کوڈ کیسے منسلک کیا جاتا ہے۔ اس کے بعد مختلف طریقوں سے HTML ایلیمنٹس پر CSS کوڈ استعمال کرنے کا طریقہ بتایا گیا ہے۔

1. HTML page with & without CSS
2. Syntax of CSS code
3. Applying CSS to HTML
   1. In-line styles
   2. Embedding styles in head section
   3. Linking to a separate style sheet file
   4. Importing a CSS file from within CSS
4. Styling by element tag name
5. Styling by element id
6. Styling by element class
7. Styling by descendant selectors
8. Styling by element tag name with id / class
9. Grouping selectors
10. Styling by pseudo-class
11. Styling for media

HTML page with & without CSS

اگر کسی HTML پیج سے CSS کوڈ بالکل ہٹا دیا جائے تب بھی براؤزر میں اس ویب پیج کے تمام اجزاء مثلاً‌ تصاویر، عنوانات، پیرا گرافس اور لنکس وغیرہ دیکھے جا سکتے ہیں۔ لیکن بغیر CSS کے یہ ویب پیج غیر منظم اور بہت سادہ ہوگا۔ مثال کے طور پر درج ذیل تصویر دیکھیں۔ دائیں طرف والے اسکرین شاٹ میں یاہو کا ہوم پیج بالکل سادہ ہے۔ جبکہ بائیں طرف والے اسکرین شاٹ میں آپ دیکھ سکتے ہیں کہ CSS کی مدد سے ویب پیج کے تمام ایلی منٹس کو بہت خوبصورتی کے ساتھ سیٹ کیا گیا ہے۔

Syntax of CSS code

CSS کوڈ کیسے لکھا جاتا ہے، اس کے لیے درج ذیل مثال دیکھیں۔ اس میں:

1. selector کا مطلب یہ ہے کہ HTML کے کونسے ایلیمنٹ پر آپ اسٹائلز لگانا چاہتے ہیں۔ یہ سلیکٹر کسی ایلیمنٹ کا Tag name بھی ہو سکتا ہے، id بھی اور class بھی۔
2. property کا مطلب ہے کہ اس ایلیمنٹ کی کونسی پراپرٹی مثلاً‌ رنگ، بارڈر، پیڈنگ وغیرہ پر اسٹائلز لگانا چاہتے ہیں۔
3. value کا مطلب یہ ہے کہ اس پراپرٹی کی ویلیو کیا ہو، مثلاً‌ اگر یہ color پراپرٹی ہے تو اس کا رنگ کیا ہونا چاہیے۔
4. آپ دیکھ رہے ہیں کہ ایلیمنٹ کے متعلق تمام اسٹائل رولز {} یعنی Curly braces کے اندر لکھے جاتے ہیں۔ پراپرٹی اور ویلیو کے درمیان : یعنی Colon استعمال کیا جاتا ہے۔ اور ایک اسٹائل رول ختم ہونے پر ; یعنی Semi-colon استعمال کیا جاتا ہے۔

CSS میں کامنٹس درج ذیل طریقے سے لکھے جا سکتے ہیں۔ کسی بھی کوڈ کی وضاحت میں کامنٹس بہت اہم کردار ادا کرتے ہیں۔ انہیں استعمال کرنے کا فائدہ یہ ہے کہ جب آپ بہت عرصے کے بعد اپنا لکھا ہوا کوڈ دوبارہ دیکھتے ہیں، یا پھر آپ کا لکھا ہوا کوڈ کوئی دوسرا ڈیویلپر دیکھتا ہے تو اسے کوڈ سمجھنے میں اضافی مدد مل جاتی ہے۔

/* This is how we write comments in CSS code */

Applying CSS to HTML

HTML کے ساتھ CSS کوڈ چار مختلف طریقوں سے منسلک کیا جا سکتا ہے۔

In-line styles

HTML ٹیگ کے اندر CSS اسٹائل رولز لکھے جا سکتے ہیں۔ جیسا کہ درج ذیل مثال میں پیرا گراف ٹیگ کی لکھائی کے لیے رنگ اور فونٹ مقرر کیا جا رہا ہے۔ عام طور پر ماہرین ویب پیج کے ٹیگز میں اس طرح سے اسٹائل رولز لکھنے سے منع کرتے ہیں۔ اس لیے کہ اگر آپ کئی ویب پیجز پر اس طرح سے اسٹائلز استعمال کریں گے تو بعد میں ضرورت پڑنے پر ان سب ویب پیجز میں تبدیلی کرنا ہوگی۔ لیکن ڈیویلپمنٹ کے دوران اس طرح سے اسٹائلز لکھنے سے کافی سہولت مل جاتی ہے، اور ڈیویلپمنٹ مکمل ہونے پر ان اسٹائل رولز کو ویب پیج کے ساتھ منسلک اسٹائل شیٹ فائل میں منتقل کر دیا جاتا ہے۔

<p style="color:green;font-family:arial;">Some text in this paragraph.</p>

Embedding styles in head section

درج ذیل مثال میں آپ دیکھ رہے ہیں کہ ویب پیج کے head سیکشن میں styles ٹیگ کے اندر CSS رولز لکھے گئے ہیں۔ اس میں screen کا مطلب واضح ہے کہ جن ایلیمنٹس پر اسٹائلز لگائے گئے ہیں وہ کمپیوٹر اسکرین پر کیسے نظر آنے چاہئیں۔ اگر اس کی جگہ آپ print لکھیں گے تو اس کا مطلب یہ ہوگا کہ جب صارف یہ ویب پیج پرنٹر کے ذریعے پرنٹ کرے گا تب یہ ایلیمنٹس کیسے نظر آئیں۔ اور اگر اس کی جگہ پر all لکھا جائے تب یہ اسٹائلز اسکرین اور پرنٹر دونوں کے لیے استعمال کیے جائیں گے۔

<!DOCTYPE html>
<html>
<head>
    <style media="screen" type="text/css">
        h1 {
            color:chocolate;
        }
        p {
            color:green;
            font-family:arial;
        }
    </style>
</head>
 
<body>
    <h1>Heading</h1>
    <p>Some text in this paragraph.</p>
</body>

Linking to a separate style sheet file

CSS استعمال کرنے کا سب سے بہتر طریقہ یہ ہے کہ انہیں ایک الگ اسٹائل شیٹ فائل میں لکھا جائے، اور پھر اس فائل کو HTML پیج کے ساتھ منسلک کر دیا جائے۔ فرض کریں کہ آپ نے ویب سائیٹ کے پچاس ویب پیجز کے ساتھ یہ اسٹائل شیٹ فائل منسلک کی ہے۔ مستقبل میں جب بھی ان پچاس پیجز کے اسٹائلز تبدیل کرنے کی ضرورت پیش آئے گی، آپ کو صرف اسٹائل شیٹ فائل میں تبدیلی کرنا ہوگی۔ یہ تبدیلی ان تمام ویب پیجز میں مؤثر ہوگی جن کے ساتھ اسٹائل شیٹ فائل منسلک کی گئی ہے۔

درج ذیل مثال میں آپ ایک link ٹیگ دیکھ رہے ہیں، اس ٹیگ کی مدد سے CSS فائل ویب پیج کے ساتھ منسلک کی جاتی ہے۔ یہ ٹیگ ویب پیج کے head سیکشن کے اندر موجود ہونا چاہیے۔ اس ٹیگ میں دو چیزیں اہم ہیں، ایک styles.css یعنی اسٹائل شیٹ فائل کا نام، دوسرا screen یعنی یہ اسٹائل رولز اسکرین کے لیے لکھے گئے ہیں۔

<!DOCTYPE html>
<html>
<head>
    <title>External Style Sheet File</title>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen">
</head>
 
<body>
    <h1>External Style Sheet File</h1>
    <p >An example of linking an external CSS file to an HTML page.</p>
</body>

درج بالا HTML پیج کے ساتھ جو styles.css فائل منسلک کی گئی ہے اس میں CSS کوڈ اس طرح سے لکھا جائے گا۔

h1 {
    color:chocolate;
}
p {
    color:green;
    font-family:arial;
}

Importing a CSS file from within CSS

فرض کریں آپ نے ایک اسٹائل شیٹ فائل پہلے سے ویب پیجز کے ساتھ منسلک کی ہوئی ہے۔ اب آپ مزید اسٹائل رولز ان ویب پیجز کے ساتھ منسلک کرنا چاہتے ہیں۔ اس کا آسان طریقہ تو یہ ہے کہ اسی اسٹائل شیٹ فائل میں مزید اسٹائل رولز لکھ دیے جائیں جو پہلے سے ویب پیجز کے ساتھ منسلک ہے۔ لیکن اگر آپ سمجھتے ہیں کہ اس طرح کرنے سے ایک فائل میں بہت زیادہ اسٹائل رولز اکٹھے ہو جائیں گے اور آپ کے لیے اس فائل کو سنبھالنا مشکل ہو جائے گا، تو اس صورت میں آپ یہ کر سکتے ہیں کہ ایک الگ اسٹائل شیٹ فائل میں نئے اسٹائل رولز لکھیں، اور پھر ویب پیجز کے ساتھ منسلک کی گئی اسٹائل شیٹ کے ساتھ یہ نئی اسٹائل شیٹ فائل منسلک کر لیں۔ چونکہ یہ نئی اسٹائل شیٹ پہلے سے موجود اسٹائل شیٹ کے ساتھ منسلک کی جا رہی ہے، اس لیے نتیجے کے طور پر یہ تمام اسٹائل رولز مجموعی طور پر ویب پیجز پر لاگو ہو جائیں گے۔

اس کا طریقہ یہ ہے کہ پہلے سے ویب پیجز کے ساتھ منسلک فائل میں نئی اسٹائل شیٹ فائل امپورٹ کر لیں، جیسا کہ درج ذیل مثال کے شروع میں آپ دیکھ سکتے ہیں کہ styles.css فائل کے اندر more-styles.css فائل امپورٹ کی گئی ہے۔

@import "more-styles.css";
 
h1 {
    color:chocolate;
}
p {
    color:green;
    font-family:arial;
}

Styling by element tag name

CSS میں مختلف طریقوں سے HTML ایلیمنٹس پر اسٹائلز لگائے جا سکتے ہیں۔ ایک طریقہ یہ ہے کہ جس ایلیمنٹ پر اسٹائلز لگانا مقصود ہو، اس کے ٹیگ کا نام استعمال کر کے اسٹائل رولز لکھے جائیں۔ درج ذیل HTML کوڈ دیکھیں:

<h2>Styling by Element Name</h2>
<p>An example of styling by HTML element names.</p>
<a href="link-of-page">Read more</a>

درج بالا ایلیمنٹس پر درج ذیل اسٹائلز لگائے گئے ہیں۔ آپ دیکھ رہے ہیں کہ h2 ٹیگ کے نیچے لائن لگائی گئی ہے، p ٹیگ کے نیچے کچھ فاصلہ مقرر کیا گیا ہے، اور a ٹیگ کی لکھائی کو موٹا کیا گیا ہے۔

h2 {
    border-bottom-width:1px;
    border-bottom-style:dotted;
    border-bottom-color:gray;
}
 
p {
    margin-bottom:8px;
}
 
a {
    font-weight:bold;
}

Styling by element id

دوسرا طریقہ یہ ہے کہ کسی بھی HTML ایلیمنٹ کو ایک منفرد id مہیا کیا جا سکتا ہے، اور پھر اس id کو استعمال کرتے ہوئے اس پر اسٹائلز لگائے جا سکتے ہیں۔ کسی ایلیمنٹ کا id رکھنے کا مقصد یہ ہوتا ہے کہ وہ ایلیمنٹ پورے ویب پیج میں منفرد (Unique) ہو۔ ایسا کرنے کا فائدہ یہ ہوتا ہے کہ اس ایلیمنٹ پر جو اسٹائلز لگائے جائیں، ان اسٹائلز سے اس جیسے دوسرے HTML ایلیمنٹس متاثر نہیں ہوتے۔ درج ذیل کوڈ دیکھیں جس میں تین div ایلیمنٹس بنائے گئے ہیں اور ان تینوں کو مختلف IDs دی گئی ہیں۔

<div id="left-column">Left column</div>
<div id="middle-column">Middle column</div>
<div id="right-column">Right column</div>

اوپر دیے گئے div ٹیگز پر ان کی id کی مدد سے درج ذیل اسٹائلز لگائے گئے ہیں۔ ان اسٹائلز کی مدد سے ہم نے تینوں div ٹیگز کو دائیں کالم، درمیانی کالم، اور بائیں کالم کی شکل دی ہے۔ CSS میں # نشان کے ساتھ HTML ایلیمنٹ کی id لکھ کر اسے سلیکٹ کیا جاتا ہے۔

#left-column {
    width:150px;
    background-color:Pink;
    float:left;
}
 
#middle-column {
    width:580px;
    background-color:Khaki;
    float:left;
}
 
#right-column {
    width:150px;
    background-color:Lavender;
    float:left;
}

Styling by element class

Class ایک سے زیادہ HTML ایلیمنٹس کے لیے استعمال کی جا سکتی ہے۔ مثلاً‌ یہ کیا جا سکتا ہے کہ ایلیمنٹس کے ارگرد بارڈر لگانے کے لیے ایک class تیار کر لی جائے۔ اب یہ class جس ایلیمنٹ پر بھی استعمال کی جائے گی، اس کے گرد بارڈر لگ جائے گا۔ یہ ایلیمنٹ تصویر بھی ہو سکتی ہے، ٹیبل بھی ہو سکتا ہے، عنوان بھی ہو سکتا ہے، اور پیرا گراف بھی۔ اسی طرح کسی ایک HTML ایلیمنٹ پر ایک سے زیادہ classes بھی استعمال کی جا سکتی ہیں۔ درج ذیل کوڈ دیکھیں، اس میں ہر p یعنی پیراگراف ایلیمنٹ کا ایک class نام رکھا گیا ہے، جبکہ آخری پیراگراف ایلیمنٹ کے تین class نام رکھے گئے ہیں۔

<p class="good">Good text.</p>
<p class="better">Better text.</p>
<p class="nice">Nice text.</p>
<p class="good better nice">Good, better and nice text.</p>

اوپر دیے گئے پیراگراف ایلیمنٹس پر درج ذیل اسٹائلز لگائے گئے ہیں۔ پہلے پیراگراف کو underline کیا گیا ہے، دوسرے پیراگراف کو bold کیا گیا ہے، اور تیسرے پیراگراف کو italic کیا گیا ہے۔ جبکہ آخری پیراگراف پر تینوں اسٹائلز لگائے گئے ہیں۔ CSS میں . یعنی Dot نشان کے ساتھ HTML ایلیمنٹ کی class لکھ کر اسے سلیکٹ کیا جاتا ہے۔

.good {
    text-decoration:underline;
}
 
.better {
    font-weight:bold;
}
 
.nice {
    font-style:italic;
}

Styling by descendant selectors

اس کا معنیٰ یہ ہے کہ کسی HTML ایلیمنٹ کے اندر موجود ایلیمنٹس پر کیسے اسٹائلز لگائے جا سکتے ہیں۔ CSS کی مدد سے آپ ویب پیج میں کسی بھی لیول پر موجود HTML ایلیمنٹس پر اسٹائلز لگا سکتے ہیں۔ درج ذیل کوڈ آپ دیکھ سکتے ہیں کہ ویب پیج کے مختلف سیکشنز میں a ٹیگز موجود ہیں۔ CSS کی مدد سے ہم ان ٹیگز کے لیے مختلف اسٹائلز سیٹ کریں گے۔

<div id="header">
    <a href="home-link">Home</a> 
    <a href="about-us">About Us</a> 
    <a href="services">Services</a> 
</div>
 
<div id="main">
    <p>Some text some text some text. 
        Some text some text some text. 
        Some text some text some text.
    </p>
    <a href="article-link">Read more<br>
</div>
 
<div id="footer">
    <a href="terms-conditions">Terms & Conditions</a> - 
    <a href="privacy-policy">Privacy Policy</a>
</div>

درج ذیل CSS کوڈ میں سب سے پہلے a ایلیمنٹ کا نام استعمال کرتے ہوئے پورے ویب پیج کے لنکس کے نیچے سے underline ختم کی گئی ہے اور ان کے لیے Arial فونٹ مقرر کیا گیا ہے۔ HTML ایلیمنٹ کا نام استعمال کرتے ہوئے جو اسٹائلز لگائے جاتے ہیں وہ پورے ویب پیج کے لیے مؤثر ہوتے ہیں۔ لیکن ویب پیج کے مخصوص حصوں میں ان اسٹائلز کو Override کیا جا سکتا ہے، یعنی ان کی جگہ پر نئے اسٹائلز لگائے جا سکتے ہیں۔ چنانچہ آپ دیکھ رہے ہیں کہ اس کے بعد ویب پیج کے header سیکشن، main سیکشن اور footer سیکشن کے اندر موجود a ایلیمنٹس کے لیے مزید اسٹائلز مقرر کیے گئے ہیں۔ جب کسی ایلیمنٹ کے اندر موجود ایلیمنٹ پر اسٹائلز لگانا مقصود ہوں تو پہلے بیرونی ایلیمنٹ کا selector نام لکھا جاتا ہے، پھر ایک Space کے فاصلہ پر اندرونی ایلیمنٹ کا selector نام لکھا جاتا ہے۔

a {
    text-decoration:none;
    font-family:Arial;
}
 
#header a {
    background:Green;
    color:White;
    border-radius:8px;
    padding-left:5px;
    padding-right:5px;
    font-size:12px;
}
 
#main a {
    font-size:11px;
    font-weight:bold;
    color:Red;
}
 
#footer a {
    font-size:10px;
    color:Gray;
}

Styling by element tag name with id / class

یوں بھی کیا جا سکتا ہے کہ HTML ایلیمنٹ کے نام کے ساتھ اس کی id یا پھر class کا نام استعمال کرتے ہوئے اسٹائل رولز لکھے جائیں۔ درج ذیل HTML کوڈ دیکھیں:

<h1 id="title">Big Heading of the Page</h1>
<img class="feature-banner" src="image-path">

اب درج ذیل اسٹائل رولز دیکھیں جس میں h1 کے ساتھ اس کا id لکھ کر اسٹائل رولز لکھے گئے ہیں۔ اس میں یہ احتیاط ضروری کہ ٹیگ نام اور id کے درمیان فاصلہ نہ دیا جائے۔ ورنہ id والا ایلیمنٹ h1 کا ذیلی یعنی Descendant ایلیمنٹ تصور کیا جائے گا۔ اور کوشش کریں کہ ایسے اسٹائل رولز نہ لکھیں جو کنفیوژن پیدا کریں۔

h1#title {
    font-size:22px;
    color:Chocolate;
}
img.feature-banner {
    border-radius:5px;
}

Grouping selectors

مختلف HTML ایلیمنٹس پر ایک ہی جیسے اسٹائلز لگانا مقصود ہوں تو ان کے selectorsکومہ استعمال کرتے ہوئے ایک ساتھ لکھے جا سکتے ہیں۔

#main a, #footer a {
    font-size:11px;
    font-weight:bold;
    color:Red;
}

Styling by pseudo-class

یہ ذرا تفصیل طلب موضوع ہے، یہاں Pseudo classes کے عام استعمالات کا ذکر کیا جا رہا ہے۔ بعض اوقات آپ یہ چاہتے ہیں کہ کسی HTML ایلیمنٹ کے اوپر ماؤس کا پوائنٹر آئے تو اس ایلیمنٹ کو ایک خاص انداز میں نظر آنا چاہیے۔ مثلاً‌ کسی لنک کے اوپر ماؤس کا کرسر آئے تو اس کا رنگ تبدیل ہونا چاہیے، یا کسی تصویر کے اوپر آئے تو اس کے گرد بارڈر نظر آنا چاہیے وغیرہ۔ درج ذیل HTML کوڈ دیکھیں۔

<img src="flower.jpg"><br>
<a href="link-to-page">A Flower</a>

درج بالا کوڈ پر لگائے گئے درج ذیل اسٹائلز دیکھیں۔ یہ pseudo-classes اسی ترتیب سے لکھی جانی ضروری ہیں۔

1. link: جو ہے یہ a ٹیگ کی default سیٹنگ کے طور پر کام کرتا ہے، اس لیے اگر آپ صرف a لکھ دیں تو بھی ٹھیک ہے۔ یہاں یہ بتایا گیا ہے کہ تمام a ٹیگز سرخ رنگ میں نظر آنے چاہئیں اور ان کے نیچے underline نہیں ہونی چاہیے۔
2. visited: کا مطلب یہ ہے کہ جو ویب پیجز دیکھے جا چکے ہیں یا جن لنکس پر صارف پہلے کلک کر چکا ہے وہ سرمئی یعنی گرے رنگ میں نظر آنے چاہئیں۔
3. hover: کا مطلب یہ ہے کہ جب ماؤس کا پوائنٹر کسی a ٹیگ کے اوپر آئے تو وہ لنک سبز رنگ میں نظر آنا چاہیے۔
4. focus: کا مطلب یہ ہے کہ جو a ٹیگ فوکس میں ہو اس کی لکھائی موٹی ہونی چاہیے۔
5. active: کا مطلب یہ ہے کہ جب کسی a ٹیگ پر کلک کیا جائے تو اس کی لکھائی کا رنگ گہرا نیلا ہوجانا چاہیے۔
6. سب سے آخر میں آپ img سلیکٹر کے ساتھ بھی hover: دیکھ رہے ہیں، اس کا مطلب یہ ہے کہ جب کسی تصویر کے اوپر ماؤس کا پوائنٹر آئے تو اس تصویر کے کنارے گول ہو جانے چاہئیں۔

a:link {
    text-decoration:none;
    color:Red;
}
 
a:visited {
    color:Gray;
}
 
a:hover {
    color:Green;
}
 
a:focus {
    font-weight:bold;
}
 
a:active {
    color:Navy;
}
 
img:hover {
    border-radius:12px;
}

Styling for Media

کبھی کسی ویب پیج کو پرنٹ کرنے کا اتفاق ہوا ہو تو آپ نے دیکھا ہوگا کہ بہت سی اضافی چیزیں مثلاً‌ اشتہارات اور لنکس وغیرہ بھی ساتھ پرنٹ ہو جاتے ہیں۔ بلکہ ان اضافی چیزوں کی وجہ سے ویب پیج کا اصل مضمون بھی ٹھیک طرح سے پرنٹ نہیں ہو پاتا۔ اگر آپ چاہتے ہیں کہ آپ کی ویب سائیٹ کے صفحات ٹھیک طرح سے پرنٹ ہوں تو اس کے لیے CSS استعمال کریں۔ پرنٹ کے لیے اسٹائلز لکھتے وقت عام طور پر یہ کیا جاتا ہے کہ ویب پیج کے دونوں سائیڈوں پر موجود کالم، ہیڈر اور فوٹر وغیرہ کے سیکشنز چھپا دیے جاتے ہیں۔ اس طرح کرنے کا فائدہ یہ ہوتا ہے کہ صرف اصل مضمون یا پوسٹ والا حصہ پرنٹر کے ذریعے پرنٹ ہوتا ہے۔

درج ذیل HTML کوڈ میں آپ دیکھ رہے ہیں کہ اسٹائل شیٹ کو ویب پیج کے ساتھ منسلک کرنے والے link ٹیگ میں media کی ویلیو all ہے۔ اس کی ویلیو اگر screen ہوگی تو پھر اسٹائل شیٹ میں لکھے گئے پرنٹ کے اسٹائلز مؤثر نہیں ہوں گے۔

<!DOCTYPE html>
<html>
<head>
    <title>Styling for Media</title>
    <link rel="stylesheet" type="text/css" href="styling-for-media.css" media="all">
</head>
 
<body>
    <div id="left-column">Content in left column.</div>
    <div id="middle-column">Article / Post.</div>
    <div id="right-column">Content in right column.</div>
</body>
</html>

درج ذیل CSS رولز میں آپ دیکھ رہے ہیں کہ {}media@ کے اندر دائیں اور بائیں کالمز کے selectors استعمال کرتے ہوئے ان کے لیے اسٹائلز لکھے گئے ہیں۔ اسکرین کے لیے اسٹائلز میں {}media@ کے اندر بھی لکھے جا سکتے ہیں، لیکن اگر اس کے بغیر بھی لکھ دیں تو ٹھیک ہے۔

یوں بھی کیا جا سکتا ہے کہ اسکرین اور پرنٹ کے اسٹائل رولز الگ الگ اسٹائل شیٹ فائلوں میں لکھے جائیں، اور پھر ان دونوں فائلوں کو HTML پیج کے ساتھ منسلک کر دیا جائے۔ ایسا کرتے ہوئے اسکرین کی اسٹائل شیٹ کا "media="screen مقرر کرنا ہوگا، جبکہ پرنٹ کی اسٹائل شیٹ کا "media="print مقرر کرنا ہوگا۔

@media print {
 
    #left-column, #right-column {
        display:none;
    }    
}
 
/* --- Styles for screen --- */