Asia Bangladesh Dhaka: 01/22/13

Tuesday, January 22, 2013

সিএসএস সিম্ফোনীঃ পর্ব ৬

ওয়েব ডিজাইনিং এর জগতে সি এস এস এক অনন্য নাম। এর অসাধারণ ভিজ্যুয়াল স্টাইল খুব সহজেই একটি ওয়েব পেইজকে আকর্ষণীয় রূপ দিতে ভূমিকা রাখে। তাই যে কোনো ওয়েব ডিজাইনারের কাছে এর প্রয়োজনীয়তা অপরিসীম। এ প্রয়োজনীয়তার প্রেক্ষিতে এই টিউটোরিয়াল সি এস এস সিম্ফোনী।

গতপর্বে আমরা আলোচনা করেছিলাম, ক্লাস নিয়ে। আজ আমরা আলোচনা করব এক্সটারনাল,ইন্টারনাল এবং ইনলাইন স্টাইলশীট নিয়ে, কিভাবে এদের ডিক্লেয়ার করতে হয় ইত্যাদি নিয়ে।
এক্সটারনাল স্টাইল শীট মূলত html ডকুমেন্টের বাইরে ডিক্লেয়ার করা হয় যে কোনো টেক্সট এডিটরে(যেমন, নোটপ্যাড)। এই শীট .css এক্সটেনশান দিয়ে সেভ করতে হয়। এই ফাইলে সাধারণত কোনো html ইলিমেণ্ট থাকে না।
নিচে একটি এক্সটারনাল স্টাইলশীটের উদাহরন দেয়া হল।
h1{align:center; color:blue}
p{color:red}
#pr{align:right;color:pink}
এ কোডটুকু একটি টেক্সট এডিটরে লিখে sample.css নামে সেভ করা হলে sample নামে একটি এক্সটারনাল স্টাইলশীট তৈরি হয়ে যাবে।
এখন একটি html ডকুমেন্ট খুলে তাতে <head> ট্যাগের মধ্যে নিচের মত sample স্টাইলশীটটিকে লিঙ্ক করে দেয়া যায়।
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css” />
</head>
আমি নিচের html ডকুমেন্টকে এভাবেই sample.css স্টাইলশীটের সাথে লিঙ্ক করলাম
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”sample.css” />
</head>
<body>
<h1 class=”cn”> HELLO EVERYBODY </h1>
<p> this is a center align paragraph</p>
<p> this is normal</p>
<p id=”pr”> this is another thing </p>
</body>
<html>
ফলে নিচের মত রেজাল্ট পাওয়া গেল

লক্ষ্য করুন, শেষের লাইনটা সবুজ হয়েছে। কেন? কারণ, sample নামের এক্সটারনাল স্টাইলশীটে আমি #pr{align:right;color:pink} লেখার মাধ্যমে pr id বিশিষ্ট সকল html ইলিমেন্টেকে সবুজ রঙে দেখানোর ইন্সট্রাকশন দিয়েছি। এর ফলে শেষের লাইনটা সবুজ, কারণ এর <p> ট্যাগের id হল pr.
ইন্টারনাল এবং ইনলাইন স্টাইলশীট সম্পর্কেতো আগের পর্বেই জেনেছেন।
এখন একএকটি পেইজে যদি ইন্টারনাল স্টাইল, ইনলাইন স্টাইল এবং এক্সটারনাল স্টাইল শীট একই সাথে ডিফাইন করা থাকে, তাহলে কি হবে ? নিচের কোডটি দেখলেই বুঝতে পারবেন।
১)       <html>
২)       <head>
৩)      <link rel=”stylesheet” type=”text/css” href=”sample.css” />
৪)      <style type=”text/css”>
৫)      p{color:yellow}
৬)      </style>
৭)       </head>
৮)       <body>
৯)       <h1> HELLO EVERYBODY </h1>
১০)        <p>this is the new day<p>
১১)        <p id=”pr”> this is a center align paragraph</p>
১২)         <p id=”pr”> this is normal</p>
১৩)          <p id=”pr” style=”color:grey”> this is another thing </p>
১৪)          </body>
১৫)          <html>
এই কোডে এক্সটারনাল sample.css শীটকে লিঙ্ক করে দেয়া হয়েছে ৩নং লাইনে।
৪,৫,৬ নং লাইনে ইন্টারনাল স্টাইল ডিক্লেয়ার করা হয়েছে। ৫নং লাইনে p{color:yellow} এর মাধ্যমে সকল প্যারাগ্রাফকে হলুদ রঙ বিশিষ্ট করতে বলা হয়েছে।
১৩ নং লাইনে pr id বিশিষ্ট <p> ট্যাগের লেখাকে ধূসর রঙের লেখা প্রদর্শন করতে বলা হয়েছে।
Sample.css এক্সটারনাল শীটের কোড
h1{align:center; color:blue}
p{color:red}
#pr{align:right;color:green}
নিচের মত রেজাল্ট পাবেন।

এখানে দেখা যাচ্ছে এক্সটারনাল শীটে p{color:red} এর মাধ্যমে প্যারাগ্রাফের লাইনকে লাল রঙ এ দেখাতে বলা হলেও এইচটিএমএল ডকুমেন্টের <head> ট্যাগে ডিক্লেয়ার করা ইন্টারনাল স্টাইলে p{color:yellow} লেখার ফলে প্রথম প্যারাটি হলুদ দেখাচ্ছে।
২য় ও ৩য় প্যারার “pr” id বিশিষ্ট প্যারার জন্য ইন্টারনাল স্টাইল শীটে কোনো নির্দেশনা নেই,নির্দেশনা আছে এক্সটারনাল sample.css শীটের #pr{align:right;color:green} লাইনে,যেখানে এদের কালার সবুজ করতে বলা হয়েছে। তাই এদের রঙ সবুজ। যদি এক্সটারনাল শীটে এদের জন্য কোনো নির্দেশনা না থাকত,তবে এরা ইন্টারনাল শীটের {color:yellow} অনুসারে হলুদ রঙ প্রদর্শন করত।
১৩ নং লাইনে <p id=”pr” style=”color:grey”> অংশের মাধ্যমে <p> ট্যাগের মধ্যেই ধূসর রঙ নির্ধারন করা হয়েছে,তাই pr id বিশিষ্ট হওয়া সত্বেও এর sample.css এক্সটারনাল শীটের নির্দেশনা অনুসরন না করে প্রথমে লাইনের ভেতরের এই স্টাইল অনুসরন করল।
উপরের এই উদাহরন থেকে আমরা বলতে পারি, প্রায়োরিটি অনুসারে উপর থেকে নিচের দিকে সাজালে আমরা পাই,
১) ইনলাইন স্টাইল
২) ইন্টারনাল স্টাইল
৩) এক্সটারনাল স্টাইল
৪) ব্রাউজার ডিফল্ট
অর্থাৎ, যদি লাইনেই স্টাইল ডিফাইন করা থাকে তবে তার কাজ আগে হবে, এরপর যথাক্রমে ইন্টারনাল স্টাইল,এক্সটারনাল স্টাইল এবং সব শেষে ব্রাউজার ডিফল্ট স্টাইল প্রাধান্য পাবে যদি কোনো স্টাইলই ডিফাইন করা না থাকে।
আজ এ পর্যন্তই,কেমন লাগলো জানাবেন। ধন্যবাদ।

সিএসএস সিম্ফোনীঃ পর্ব ৫

সি এস এস সিম্ফোনীর ৫ম পর্বে আপনাদের সবাইকে স্বাগতম। গতপর্বে আমরা জেনেছিলাম,কিভাবে id এর মাধ্যমে কোনো নির্দিষ্ট এইচটিএমএল ইলিমেন্টে সিএসএস স্টাইল প্রয়োগ করা যায় সে সম্পর্কে। আজ আমরা আরেকটি বিষয় সম্পর্কে জানব, আর তা হল class.
আসলে এটি অনেকটা id এর মতই কাজ করে, তবে পার্থক্য হল লেখার পদ্ধতিতে। নিচের কোড দেখলেই তা বুঝতে পারবেন।
১)               <html>
২)             <head>
৩)             <style type=”text/css”>
৪)            .cn {text-align:center;color:blue;}
৫)             </style>
৬)             </head>
৭)             <body>
৮)             <h1 class=”cn”> HELLO EVERYBODY </h1>
৯)            <p class=”cn”> this is a center align paragraph</p>
১০)            <p> this is normal</p>
১১)             <p> this is another thing </p>
১২)              </body>
১৩)                 </html>

৩ নং লাইনে সাধারণভাবেই সিএসএস ডিক্লেয়ার করা হয়েছে।
৪ নং লাইনে সিলেক্টর হিসেবে নির্ধারন করা হয়েছে “.cn”। এখানে cn কে <h1> এবং একটি <p> ট্যাগের class এট্রিবিউটের মান হিসেবে নির্ধারন করা হয়েছে। বাকি দুটি <p> ট্যাগ অপরিবর্তিত অবস্থায় আছে। cn class বিশিষ্ট সকল html ট্যাগের মান পরিবর্তন করার জন্যই <head> ট্যাগের মধ্যে সিএসএস অংশে .cn {text-align:center;color:blue;} লিখে তা ডিক্লেয়ার করা হয়েছে। উল্লেখ্য যেকোনো class এট্রিবিউটের মান সিএসএস এর মাধ্যমে পরিবর্তন করার জন্য সিলেক্টরের জায়গায় class এর নাম লিখে তার আগে “.” দিতে হয়। <h1> এবং প্রথম <p> ট্যাগের class এর নাম cn । এই ট্যাগকে সিএসএস এর মাধ্যমে পরিবর্তন করার জন্য তাই সিএসএস অংশে এদের class অর্থাৎ cn লিখে তার আগে “.” দেয়া হয়েছে এবং এর পরে প্রপার্টি ঠিক করে দেয়া হয়েছে।
সবশেষে নিচের মত পাবেন

বন্ধুরা, আজ এ পর্যন্তই। পরবর্তী পর্বে এক্সটারনাল স্টাইল শীট ডিক্লেয়ার করে তা কি ভাবে ব্যবহার করতে হয় তা নিয়ে আলোচনা করা হবে। সবাইকে ধন্যবাদ।

সিএসএস সিম্ফোনীঃ পর্ব ৪

সিএসএস সিম্ফোনীর ৪র্থ পর্বে সবাইকে স্বাগতম। গত পর্বে আমরা জেনেছিলাম, CSS এর ডিক্লেয়ার করার পদ্ধতি সম্পর্কে, এবং CSS নিয়ে আলোচনা এবং ধারণাকে আরো ঝালাই বা পরিষ্কার করে নিয়েছি। আজ আমরা আরেকটি নতুন বিষয় নিয়ে জানব। কি সেই বিষয়? নাহ, এখন বলব না, তার আগে গত পর্বের কোডের মত আরেকটি কোড একবার দেখে নিই।
<html>
<head>
</head>
<body>
<p> Hi friends, how are you all ? </p><br>
<p> Once upon a time there lived a king called miron </p><br>
<p> Do you know how to swim ? </p><br>
<p> When do you have your meal ? </p>
</body>
</html>
এখানে চারটি লাইনকে <p> ট্যাগের মাধ্যমে প্যারাগ্রাফের আকারে লেখা হয়েছে। <p> হল HTML ট্যাগ যা যেকোনো লেখাকে প্যারাগ্রাফ হিসেবে ডিফাইন করে। এখন এই লাইন তথা প্যারা চারটিকে যদি আপনি লাল রঙের করতে চান এবং ফন্ট সাইজও চেঞ্জ করতে চান তাহলে কি করা যায় বলতে পারেন ?
নিচে দেখুন।
<head>
<style type=”text/css”>
p {color:blue;text-align:center;font:12}
</style>

</head>
<head> ট্যাগের মধ্যে সি এস এস এর এই অংশটুকু লিখলেই হয়ে যাবে। এর ফলে নিচের মত রেজাল্ট পাবেন।

এর কারণ হল, সি এস এস এর কোডে আপনি ডিক্লেয়ার করে দিয়েছেন, সকল <p> ট্যাগবিশিষ্ট লেখাকে যেনো নীল রঙের ১২ ফন্টের মাঝ সারিবিশিষ্ট লেখা হিসেবে মডিফাই করা হয়।
কিন্তু এমন যদি হয় যে, আপনি এই লেখাটুকুর মধ্যে শুধুমাত্র প্রথম ও শেষ লাইনটাকেই নীল রঙের এবং মাঝ সারি বিশিষ্ট লেখা হিসেবে সেট করতে চান,অন্য লাইনগুলো যেন সাধারণভাবেই থাকে সেক্ষেত্রে কি করবেন ? নিচে দেখুন।
<html>
<head>
<style type=”text/css”>
#sam {color:blue;text-align:center;font:12}
</style>

</head>
<body>
<p id=”sam”> Hi friends, how are you all ? </p><br>
<p> Once upon a time there lived a king called miron </p><br>
<p> Do you know how to swim ? </p><br>
<p id=”sam”> When do you have your meal ? </p>

</body>
</html>

উপরের কোডে দেখতে পাচ্ছেন, <body> ট্যাগের মধ্যে যে সকল লেখা রয়েছে তার মধ্যে প্রথম ও চতুর্থ লাইনে <p> ট্যাগের id এট্রিবিউটের মান “sam ” নির্ধারণ করা হয়েছে। এট্রিবিউট হল ট্যাগের নিজস্ব কিছু বৈশিষ্ট্য। প্রতিটি মানুষের যেমন নাম,বয়স, উচ্চতা ইত্যাদি বৈশিষ্ট্য আছে প্রতিটি ট্যাগেরও তেমনি কিছু বৈশিষ্ট্য আছে। এসকল বৈশিষ্ট্যকে এট্রিবিউট বলা হয়। এমনই একটি এট্রিবিউট হল “id” যার মাধ্যমে ঐ ট্যাগের নিজস্ব নাম বা পরিচয় নির্ধারণ করা হয় যে নামের মাধ্যমে ব্রাউজার ঐ ট্যাগকে চিনতে পারে। প্রথম ও চতুর্থ <p> ট্যাগে “id” এট্রিবিউটের মান “sam” নির্ধারণ করার মাধ্যমে এই দুটি ট্যাগের নাম দেয়া হয়েছে “sam” ।
এবার নিচের কোডটি দেখি।
<style type=”text/css”>
#sam {color:blue;text-align:center;font:12}
</style>
এখানে স্টাইল অর্থাৎ #sam {color:blue;text-align:center;font:12} অংশে #sam এর মাধ্যমে জানানো হয়েছে সি এস এস কোডের মাধ্যমে “sam” idবিশিষ্ট সকল ট্যাগের পরিবর্তন ঘটানো হবে। আর
{ color:blue;text-align:center;font:12} এই অংশের মাধ্যমে এই পরিবর্তন ঘটানো হয়েছে, এর ফলে সকল “sam” নামবিশিষ্ট ট্যাগের মধ্যবর্তী লেখাগুলো রঙ নীল,ফন্ট ১২ এবং সারি মাঝসারি বিশিষ্ট হয়েছে।
<body> অংশে প্রথম ও চতুর্থ <p> ট্যাগ ছাড়া বাকি দুটি <P> ট্যাগের নাম “sam” নির্ধারণ করা হয়নি। তাই এদের মধ্যবর্তী লেখাকে ব্রাউজারে সাধারণভাবেই দেখাবে ঠিক নিচের মত।

বন্ধুরা,আজ এ পর্যন্তই। ভালো থাকবেন সবাই। ধন্যবাদ।

সিএসএস সিম্ফোনীঃ পর্ব ৩

বন্ধুরা, গত পর্বে আমরা দেখেছিলাম একটি সাধারণ কোড যা দিয়ে আমরা সি এস এস এর সাথে মোটামুটি পরিচিত হওয়ার চেষ্টা করেছি। আজ আমরা আমদের জানাটাকে আরেকটু ঝালাই করে নেব এ বিষয়ে আরো কিছুটা আলোচনার মাধ্যমে। আপনাদের কি মনে আছে গতকাল লেখা কোডটির কথা যা আমি পোষ্টের শেষে উল্লেখ করেছিলাম। মনে না থাকলে সমস্যা নেই, আপনাদের সুবিধার্থে আবারও উল্লেখ করে দিচ্ছি।
<html>
<head>
<style type=”text/css”>
h1 {color:blue;text-align:center}
</style>
</head>
<body>
<h1>   WELCOME   </h1>
<br>
<h1>   HOW ARE YOU ? </h1>
<br>
<h1> WELL DONE   </h1>

</body>
</html>

এই কোডের আউটপুট কেমন হবে জানেন ? নিচের মত।

এমনটি হওয়ার কারণ, <h1>   WELCOME   </h1>
এর মাধ্যমে আমি WELCOME লেখাটিকে শিরোনাম আকারে দেখাচ্ছি। এরপরে <br> ট্যাগ ব্যবহার করেছি যার অর্থ নতুন লাইন শুরু করা।
এরপর <h1>   HOW ARE YOU ? </h1> এবং <h1> WELL DONE   </h1> এই দুইটি অংশের মাধ্যমে যথাক্রমে HOW ARE YOU এবং WELL DONE লেখা দুইটিকে শিরোনাম আকারে নির্ধারণ করেছি।
এখন হয়ত ভাবছেন, আমিতো শুধু শিরোনাম আকারে লেখা নির্ধারণ করলাম,কিন্তু এই লেখাগুলোকে তো পেইজের মাঝখানে বসাইনি বা নীল রঙও দিইনি,তাহলে এগুলো কি করে হল ? ঐ যে,<head> ট্যাগের মাঝে কয়েকটা সি এস এস এর লাইন লিখেছিলাম, মনে আছে ?
h1 {color:blue;text-align:center}
এই অংশের মাধ্যমেই ডিফাইন করে দেয়া হয়েছে যে, সকল <h1> ট্যাগ বিশিষ্ট লেখার রঙ হবে নীল (color:blue এই অংশের মাধ্যমে রঙ নির্ধারিত হয়েছে) এবং লেখাগুলোর অবস্থান হবে পেইজের মাঝখানে (text-align:center অংশের মাধ্যমে নির্ধারিত হয়েছে)।
মূলত এভাবেই সি এস এস কাজ করে।
কি হাঁপিয়ে উঠেছেন ? তাহলে একটু বিশ্রাম করে নিন। এরপর পরবর্তী ধাপে যাব।
চলুন এবার তাহলে শুরু করা যাক।
আমি এখন কথা বলব <head> ট্যাগের মধ্যে অবস্থিত সি এস এস লাইন গুলো নিয়ে।
সি এস এস স্ক্রিপ্ট বা সিএসএস এর লেখা শুরু করতে হয় একে ডিক্লেয়ার করে। <head> ট্যাগের পরে <style type=”text/css”> লিখে তা ডিক্লেয়ার করা হয়েছে, একথা আমি আগের পর্বেই বলেছি। সিএসএস স্ক্রিপ্ট শেষ করতে হয় </style> ট্যাগের মাধ্যমে যা <head> ট্যাগ শেষ হওয়ার আগে শেষ হয়েছে।
সিএসএস স্ক্রিপ্টের মাঝে লেখা h1 {color:blue;text-align:center} অংশটিই মূলত সিএসএস কন্টেন্ট। লক্ষ্য করলে দেখতে পাবেন সিএসএস এর মূলত দুটি অংশ আছে।
সিলেক্টর>এটি হল ট্যাগের নাম যে ট্যাগের বৈশিষ্ট্য বা প্রপার্টি অর্থাৎ রঙ,ফন্ট,সাইজ,ইমেজ ইত্যাদি মডিফাই করা হবে। যেমন, h1 {color:blue;text-align:center} এই অংশে h1 হল সিলেক্টর।
ডিক্লেয়ারেশন>এটি হল সিলেক্টরের প্রপার্টি এবং প্রপার্টির মান। যেমন, h1 {color:blue;text-align:center} এই অংশে {color:blue;text-align:center} হল ডিক্লেয়ারেশন পার্ট। এখানে color এবং text-align হল প্রপার্টি এবং blue ও center হল এই প্রপার্টিগুলোর মান বা ভ্যালু।
তবে সিএসএস যে শুধু <head> এর মধ্যেই ডিক্লেয়ার করতে হয় তা নয়, আপনি ইচ্ছা করলে নিচের মত করেও ডিক্লেয়ার করতে পারেন।

<html>
<head>
</head>
<body>
<h1 style=”color:blue;text-align:center”>   WELCOME   </h1>
</body>
</html>
দেখুন,উপরের কোডটিতে আমি <head> ট্যাগের মধ্যে স্টাইল ডিক্লেয়ার না করে সরাসরি <body> ট্যাগের মধ্যে যেখানে <h1> ট্যাগ বিশিষ্ট লেখা রয়েছে সেখানেই h1 ট্যাগ শুরু করার সাথে সাথে ওপেনিং ট্যাগের মধ্যেই স্টাইল নির্ধারণ করে দিয়েছি <h1 style=”color:blue;text-align:center”> অংশের মাধ্যমে।
এখানে যে আমি <body> অংশে এইচটিএমএল ট্যাগের মধ্যেই স্টাইল নির্ধারণ করে দিয়েছি একেই বলা হয় ইন লাইন সিএসএস (Inline CSS)। আর এর আগে যে আমি, <head> ও </head> ট্যাগের মধ্যে সিএসএস স্ক্রিপ্ট লিখেছিলাম তাকে বলে ইন্টারনাল সিএসএস স্টাইলশিট(Internal CSS Styles heet)।
বন্ধুরা, আজ তাহলে এ পর্যন্তই। কেমন লাগলো,জানাবেন। সবাইকে ধন্যবাদ।

সিএসএস সিম্ফোনীঃ পর্ব-২

ওয়েব ডিজাইনিং এর জগতে সি এস এস এক অনন্য নাম, এর রয়েছে বহুবিধ সুবিধা যার কারণে বর্তমানকালের প্রায় সব সাইটগুলোতেই সি এস এস ব্যবহার করা হয়। বন্ধুরা, সি এস এস সিম্ফোনীর ২য় পর্বে সবাইকে স্বাগত জানাচ্ছি। আজ এ পর্বে আমরা সিএসএস লেখার নিয়ম নিয়ে আলোচনা করব।

প্রথমেই বলে রাখা ভালো, সি এস এস স্টাইল শিট এক্সটারনাল অর্থাৎ এইচ টি এম এল ডকুমেন্ট বা মূল ওয়েব পেইজের বাইরে আলাদা একটি ফাইল হিসেবে থাকতে পারে,আবার মূল এইচ টি এম এল ফাইল বা ওয়েব পেইজেও ডিক্লেয়ার করা যেতে পারে। আবার আপনি চাইলে এইচ টি এম এল ট্যাগের মধ্যেও এটি ডিক্লেয়ার করতে পারেন। সুতরাং, বলা যায় সি এস এস তিনভাবে ডিক্লেয়ার করা যায়।
১) এক্সটার্নাল শিট বা বাহ্যিকভাবে আলাদা ফাইল হিসেবে- এক্ষেত্রে আলাদা একটি ফাইল যা css এক্সটেনশানবিশিষ্ট, এমন একটি ফাইলে স্টাইলগুলো ডিক্লেয়ার করা হয়। ডিক্লেয়ার করা স্টাইলগুলো ওয়েব পেইজ বা এইচ টি এম এল ডকুমেন্টে এইচ টি এম এল ট্যাগে প্রযুক্ত হয়।
২) ইন্টার্নাল সি এস এস- এক্ষেত্রে সি এস এস স্টাইল ডিক্লেয়ার করা হয় এইচ টি এম এল ফাইলের শুরুতে <head> ট্যাগের মধ্যে।
৩) ইনলাইন সি এস এস- এক্ষেত্রে প্রতিটি ট্যাগের মধ্যে শুধুমাত্রে ঐ ট্যাগের জন্য সি এস এস ডিক্লেয়ার করা হয়।
আপনারা হয়তো ভাবছেন, স্টাইল জিনিসটা কিরকম? আসলে সি এস এস এ স্টাইল বলতে মূলত প্রতিটি ট্যাগের মান কেমন হবে তা নির্ধারণ করাকে বোঝায়। যেমন, <h1> একটি এইচ টি এম এল ট্যাগ যার মাধ্যমে শিরোনাম বা হেডিং বোঝানো হয়। অর্থাৎ <h1> এবং </h1> এর মাঝে যা লেখা হবে তা পেইজের শিরোনাম হিসেবে থাকবে।
যেমন
<html>
<head>
</head>
<body>
<h1> WELCOME </h1>
</body>
</html>
এ লেখাটি রান করলে নিচের মত পাওয়া যাবে।

সি এস এস এর কাজ হল এই শিরোনামটি যা এইচ টি এম এল ট্যাগের মাধ্যমে নির্ধারন করা হল, একে পেইজের কোথায় বসাতে হবে,এর রঙ কি হবে, ফন্ট বা সাইজ কত হবে, এগুলো নির্ধারন করা। শুধু তাই নয়, পেইজের ব্যাকগ্রাউন্ড কালার কি হবে, ব্যাকগ্রাউন্ডে কোনো ছবি থাকবে কিনা, বা পেইজে যত লেখা আছে তার দেখতে কেমন হবে ইত্যাদি নির্ধারন করা। অর্থাৎ, একটি পেইজের Outlook বিষয়ক যাবতীয় বৈশিষ্ট্য সি এস এস এর মাধ্যমে নির্ধারন করা হয়। আসুন তাহলে দেখি, আমরা যে শিরোনামটি নির্ধারন করলাম এটিতে কিভাবে সি এস এস এর মাধ্যমে পরিবর্তন ঘটানো যায়।
যে নোটপ্যাডে উপরের কোডটি লিখেছেন তা আবার খুলুন। এবারে এই কোডটিতে নিচের মত আরো কিছু কোড লিখুন <head> ও </head> ট্যাগের মধ্যে।
<html>
<head>
<style type=”text/css”>
h1 {color:blue;text-align:center}
</style>
</head>
<body>
<h1> WELCOME </h1>
</body>
</html>
এখন সেভ করে রান করে দেখুন তো কি হয়?

আসুন, কোডটি বিশ্লেষন করে দেখি।
প্রথমে দেখুন, <head > ও </head> ট্যাগের মধ্যে <style type=”text/css”> লেখা হয়েছে। এর মাধ্যমে ঘোষনা দেয়া হয়েছে যে এই ফাইলে সি এস এস ব্যবহার করা হচ্ছে এবং তা এখানেই ডিক্লেয়ার করা হচ্ছে। এর পরে h1 {color:blue;text-align:center} লেখা হয়েছে,যার মাধ্যমে বোঝানো হয়েছে, এই ফাইলের <body> ট্যাগের মধ্যে যত কন্টেন্ট আছে তাতে যদি কোনো <h1> ট্যাগ বিশিষ্ট কোনো লেখা অর্থাৎ কোনো শিরোনাম থাকে তবে তার color হবে blue,শিরোনামটির text align হবে center অর্থাৎ শিরোনামটি পেইজের মাঝে অবস্থান করবে। উল্লেখ্য এখানে color,text-align হল h1 এর প্রপার্টি বা বৈশিষ্ট্য যাদের মান যথাক্রমে blue এবং center নির্ধারন করা হয়েছে {color:blue;text-align:center} অংশের মাধ্যমে। এখন আপনি <h1> ট্যাগবিশিষ্ট যত লেখাই লিখুন না কেন, সবগুলোই এই বৈশিষ্ট্যপ্রাপ্ত হবে, কারন, সি এস এস এ আমরা তা ডিক্লেয়ার করে দিয়েছি <h1> ট্যাগের জন্য। যেমন,নিচের কোডটি দেখুন,
<html>
<head>
<style type=”text/css”>
h1 {color:blue;text-align:center}
</style>
</head>
<body>
<h1> WELCOME </h1>
<br>
<h1> HOW ARE YOU ? </h1>
<br>
<h1> WELL DONE </h1>
</body>
</html>
ভাবুনতো, এর রেজাল্ট আপনার ব্রাউজারে কেমন আসতে পারে। সবাইকে ধন্যবাদ।

সিএসএস টিউটোরিয়ালঃ ১ম পর্ব

CSS এর পূর্ন নাম বা রূপ হচ্ছে Cascading Style Sheets. সহজ ভাষায় একটি ওয়েবসাইটের বিভিন্ন কনটেন্ট (এইচটিএমএল ইলিমেন্ট) যেমনঃ সাইটের গঠন, আকার(দৈর্ঘ্য, প্রস্থ এবং উচ্চতা), কনটেন্ট এর অবস্থান, ছবি, রং, ভিডিও, এ্যানিমেশন, বাটন কিভাবে ওয়েব ব্রাউজারে প্রদর্শন করবে এটার নির্দেশনা দান করাই হচ্ছে CSS এর কাজ। এইচটিএমএল কে যদি একটি ওয়েবসাইটের মেরুদণ্ড (Structure) বলেন তাহলে সিএসএস হল প্রান।

CSS কিভাবে কাজ করে?

CSS নিয়ে কাজ করতে হলে আপনাকে প্রথমে এইচটিএমএল এ ভাল দক্ষতা থাকতেই হবে। তা নাহলে শুধু সিএসএস দিয়ে আপনি কিছুই করতে পারবেন না। তাই, সিএসএস শিখার আগে অবশ্যই এইচটিএমএল শিখে নিতে হবে। সিএসএস মূলত এইচটিএমএল সাথে জয়েন ভেঞ্চারে/কম্বিনেশনে কাজ করে। সাপোজ মনে করেন, এইচটিএমএল ফাইল এ একটি পারাগ্রাফ লিখেছেন। এখন আপনি চাইছেন সেই পারাগ্রাফ লিখার কালার লাল রঙের করবেন। তাহলে আপনাকে যা করতে হবে সেটা নিচের উদাহরনে লক্ষ করুনঃ

<html>
 <head>
   <style type=”text/css”>
      p{
        color: red;
       }
   </style>
 </head>

<body>
    <p>This is a paragraph. Which color is RED!</p>
</body>
</html>

Note: উপরের কোড গুলো ফলো করুন… হেড((<head> </head>)সেকশনে internal style sheet (বিভিন্ন টাইপ এর স্টাইল সীট নিয়ে পরের অধ্যায়ে জানবো) এর style ট্যাগের ভিতরে আমরা পারাগ্রাফ জন্য লাল কালার ডিক্লেয়ার করেছি। আর বডি(<body> </body >) সেকশনে প্যারাগ্রাফ ট্যাগ (<p></p>) এর ভিতরে প্যারাগ্রাফ টেক্সট ডিক্লেয়ার করেছি। উপরের কোড টুকুর আউটপুট ব্রাউজার এ প্রদর্শনের জন্য উইন্ডোজের Notepad অথবা Notepad++ সফটওয়্যারটি ওপেন করে কোডটুকু নিজ হাতে লিখুন, ভুলেও কপি-পেস্ট করবেন না। ফাইলের নাম দিন index বা আপনার পছন্দ মতো এবং Save as type নির্বাচন করুন .html। এবার Save করুন। এবার ডাবল ক্লিক করে ব্রাউজারে ওপেন করুন। সব কিছু ঠিক থাকলে নিচের মত প্রদর্শন করবে…

পরবর্তি পর্বে আসছে সিনট্যাক্স পরিচিতি। সেই পর্যন্ত সবাই ভাল থাকুন সুস্থ থাকুন!