সহজ বাংলায়ঃ CSS ( Cascading Style Sheets) শিখুন { পর্ব-২ }

20
487

 

“বিসমিল্লাহির রাহমানির রাহিম”

আজ আমি আপনাদের সামনে নিয়ে আসলাম সি এস এস এর ২য় পার্ট । আমার মনে হয় সি এস এস  সম্পর্কে সকলেরেই ধারনা আছে আর যাদের ধারনা নেই তারা আমার প্রথম পার্ট থেকে ঘুরে আসতে পারেন ।প্রথম পার্ট হচ্ছে এই যে এই খানে ——

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

সহজ বাংলায়ঃ CSS ( Cascading Style Sheets) শিখুন { পর্ব-২ }এখানে

আসুন এই বার আমাদের ২য় পার্ট শুরু করা যাক । ২য় পর্ব শুরু করার আগে আপনাদের কাছে আমার একটি ছোট অনুরোধ যদি রাখেন তাহলে খুশি হব ” আপনাদের কারো যদি সি এস এস বুজতে সমস্যা হয় তবে একটু খুলে বলেবেন “…………তাহলে শুরু করা যাক

:):)ক্লাস সিলেক্টর (CLASS SELECTOR)  :) :)

ক্লাস সিলেক্টরের মাধ্যমে আপনি একই ধরনের HTML  এলিমেন্টগুলোর  জন্য বিভিন্ন স্টাইল সমূহ নির্ধারণ করে নিতে দিতে পারেন। ধরুন আপনি চাচ্ছেন আপনার ডকুমেন্টে দুই ধরনের প্যারাগ্রাফ থাকবে  ।যাদের একটি RIGHT প্যারাগ্রাফ এবং অন্যটি CENTER  প্যারাগ্রাফ ।

p.right( text-align:right)

p.center(text-align:center)

আপনার HTML ডকুমেন্টে ক্লাস (CLASS) অ্যাট্রিবিউট ব্যবহার করতে হবে ।

<p class=”right”>tuner page </p>

<p class=”center”>tuner page</p>

প্রদান কৃত প্রতিটি এলিমেন্ট একাধিক ক্লাস প্রয়োগ করার সিনট্যাক্সটি হলঃ

<p class=”center bold “> tuner page </p>

আপনারা ইচ্ছা করলে center bold স্টাইল চেঞ্জ করে অন্য কোন স্টাইল ব্যবহার করতে পারেন …………………।

[বিঃদ্রঃঅবশ্যই মনে রাখবেন ক্লাসের নাম কখনও সংখ্যা দ্বারা শুরু করবেন না ।এটি মজিলা ফায়ারফক্স ব্রাউজারে কাজ করবে না ]

:):) আই ডি সিলেক্টর (ID SELECTOR) :) :)

 

আই ডি সিলেক্টরের সাথে HTML এলিমেন্ট গুলোর জন্য আপনি  স্টাইল সমূহ নির্ধারণ  করতে পারেন। আই ডি সিলেক্টরটি # এর মাধ্যমে নির্ধারণ করতে পারেন ।নিচের স্টাইল রুলটি ঐ সমস্ত এলিমেন্টের সাথে মিলবে যেগুলোর “green” ভ্যালুসহ একটি আইডি  অ্যাট্রিবিউট রয়েছে ।

#green{color:green}

নিচের স্টাইল রুলটি p এলিমেন্টের সাথে মিলবে যার “paral” ভ্যালুসহ একটি আই ডি রয়েছে ।

p#paral

{

text-aliagn: center;

color:red

}

[বিঃদ্রঃ আই ডির নাম কখন সংখ্যা দ্বারা শুরু করবেন না । তাহলে মজিলা ফায়ারফক্স সাপোর্ট করবে না ]

:) :) সি এস এস কমেন্ট( CSS COMMENTS) :) :)

 

কোড ব্যাখ্যা করার কাজে কমেন্ট ব্যবহার হয় ।সোর্স কোড এডিট করার সময় কমেন্ট আপনাকে পূর্ণ সাপোর্ট দিবে ।কমেন্ট সমূহ ব্রাউজার থেকে আগ্রহ্য থাকে । আমার মনে হ্য আপনার জানেন যে কমেন্ট ব্রাউজারে প্রদর্শিত হয় না ।সিএসএস এর কমেন্ট শুরু হয় (“/*”)দিয়ে।

/*this is comment*/

p

{

text-align:center;

/* this is another comment*/

color:block;

front-family: ariay

}

সহজ বাংলায়ঃ CSS ( Cascading Style Sheets) শিখুন { পর্ব-২ }

:) :) এইচটিএমএল ডকুমেন্টে স্টাইল শিট যোগ করা :) :)

 

ব্রাউজার স্টাইল শিট অনুযায়ী ডকুমেন্ট কে সাজিয়ে নেয় ।ডকুমেন্টে স্টাইল শিট সংযোজনের জন্য তিনটি উপায় আছে :)

                   :) ১/ :) এক্সটারনাল স্টাইল শিট ( EXTARNAL STYLE SHEET)

                    :)২/:) ইন্টারনাল স্টাইল শিট (INTERNAL STYLE SHEET)

                     :)৩/:)ইনলাইন স্টাইলস ( INLAINE STYLES)

                                                                                                       :) এক্সটারনাল স্টাইল শীট ( EXTARNAL STYLE SHEET):)

একই স্টাইল অনেক গুলো পেজে প্রয়োগ করার জন্য এক্সটারনাল স্টাইল শিট একটি আদর্শ । এক্সটারনাল স্টাইল শিটের একটি মাত্র ফাইলের পরিবর্তনের মাধ্যমে পুরো ওয়েব সাইডের চেহারার পরিবর্তন করা সম্ভব । প্রতিটি পেজকে অবশ্যই <link> ট্যাগ ব্যবহার করে স্টাইল শিটের সাথে লিংক করতে হবে । <link> ট্যাগ টি বসাতে হয় অবশ্যই head সেকশনে ।

<head>

<link rel=”stylesheet” type “text/css” href=”tunerpage”>

</head>

এখানে “tunerpage”আর বদলে আপনার স্টাইল শিটের নাম বসাতে হবে । চলুন এই বার স্টাইল শিটের ব্যবহার দেখি ।এর জন্য ক্যাসকেডিং শিটের ফাইল তৈরি করে নিতে হবে । আসুন ফাইল তৈরি করি ঃ

:) নোটপ্যাড খুলুন

:) তাতে নিচের মত করে প্রোগ্রাম কোড লিখুন ।

body {baceground-color: yellow}

h1 {font-size:36pt}

h2 {color:blue}

p {margin-left:50px}

:) এই বার ফাইলটি style.css নামে সেভ করুন ।

:) পুনরায় নোটপ্যাড টি খুলুন ।

:) এতে নিচের মত করে কোড গুলো লিখুন ।

<html>

<head>

<link rel=”stylesheet”type=”text/css” href=”style.css”/>

</head>

<body>

<h1>tuner page 36 pt</h1>

<h2>tuner page blue</h2>

<p>tuner page 50px </p>

</body>

</html>

:)ফাইলটি test-style ernal.html নামে সেভ করুন একটু আগের ফাইল টি যেখানে সেভ করেছিলেন সেখানেই সেভ করুন ।

:) যে কোন ব্রাউজারে সেভ করা test-style external.html ফাইল টি খুলুন ।নিচের মত ফলাফল দেখতে পারবেন । পেজের ব্যাকগ্রাউড সবুজ রং এবং প্রথম হেডিং ৩৬ পয়েন্ট ফন্ট সাইজে বাই ডিফল্ট কাল রঙের । দ্বিতীয় হেডিং নীল রঙয়ে প্রদর্শিত হচ্ছে । এছাড়া প্যারাগ্রাফটি বাম মার্জিন থেকে ৫০ পিক্সেল দূরে সরে পেজে প্রদর্শিত হচ্ছে ।

সহজ বাংলায়ঃ CSS ( Cascading Style Sheets) শিখুন { পর্ব-২ }

                                :) একটি উদাহরনে কি নাকি আরেকটি লাগবে ? যান দিয়েই দিলাম আরেকটি উদাহরণ :)

:) নোটপ্যাড টি খুলুন ।

:) নিচের কোড লিখুন

body {background-color:  tan}

h1 {color:maroon;font-size:20pt}

hr {color:navy}

p {font-size:11pt;margin-left: 15px }

a:link {color:green}

a:visited {color:yellow}

a:hover {color:black}

a: active {color:blue}

:)ফাইল টি style1css দিয়ে সেভ করুন

:) নোটপ্যাড টি খুলুন ।

:)এতে নিচের মত করে কোড গুলো লিখুন ।

<html>

<head>

<link rel=”stylesheet”type=”text/css” href=”style1.css”/>

</head>

<h1>tuner page 1</h1>

<hr/>

<p>tunerpage</p>

<p><a href=”http://www.tunerpage.com” target=”_blank”>this is a link</a><p/>

</body>

</html>

:)ফাইলটি test-style ernal1.html নামে সেভ করুন একটু আগের ফাইল টি যেখানে সেভ করেছিলেন সেখানেই সেভ করুন ।

:) যে কোন ব্রাউজারে সেভ করা test-style external1.html ফাইল টি খুলুন ।নিচের মত ফলাফল দেখতে পারবেন

     সহজ বাংলায়ঃ CSS ( Cascading Style Sheets) শিখুন { পর্ব-২ }

:P :P :P ;):) আজ আর বিরক্ত নাইবা করি ।আগামীতে আবার দেখা হবে অন্য একটি টিউনে ।ততদিন আপনারা শান্তিতে থাকুন এবং নিজে শিখুন এবং অন্য কে শিখতে সহায়তা করুন :) :( :(:) :) :)

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

20 মন্তব্য

  1. সিপাহি ভাই ……আমরা যখন HTML ট্যাগ লিখি তখন আমাদের কে যেমন . দিয়ে শুরু করতে হয় আবার . দিয়ে শেষ করতে হয় CSS এর বেলায় কি এমন কোন নিয়ম আছে ?

  2. সিপাহি ভাই ……আমরা যখন HTML ট্যাগ লিখি তখন আমাদের কে যেমন দিয়ে শুরু করতে হয় আবার দিয়ে শেষ করতে হয় CSS এর বেলায় কি এমন কোন নিয়ম আছে ?

  3. এতো সুন্দর পোস্ট আমার পড়া ই হয়নি । পিছনে পড়ে গেলাম ।

  4. ফাটাফাটি হচ্ছে। চরম বস!!! চালিয়ে যান। আশা করি নিয়মিত পাব। আমি CSS পারি না। এখন আপনার থেকে শিখতেছি। :)

  5. ভাইয়া আপনারা অনক বই ON Lina দিয়েছেন তা ভাল .কিন্তু ভাইয়া নামায শিক্ষা and নামাযের বিশ্লেষন করে করলে আমাদের জন্য ভাল হয় আশা কির ভাইয়া আপনি আমার comment পড়িবেন?

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

nine − five =