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

বন্ধুরা, গত পর্বে আমরা দেখেছিলাম একটি সাধারণ কোড যা দিয়ে আমরা সি এস এস এর সাথে মোটামুটি পরিচিত হওয়ার চেষ্টা করেছি। আজ আমরা আমদের জানাটাকে আরেকটু ঝালাই করে নেব এ বিষয়ে আরো কিছুটা আলোচনার মাধ্যমে। আপনাদের কি মনে আছে গতকাল লেখা কোডটির কথা যা আমি পোষ্টের শেষে উল্লেখ করেছিলাম। মনে না থাকলে সমস্যা নেই, আপনাদের সুবিধার্থে আবারও উল্লেখ করে দিচ্ছি।

<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)।

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

15 Comments

  1. সাব্বির 24/06/2011 Reply
    • মিঠু 24/06/2011 Reply
  2. tomal 24/06/2011 Reply
    • মিঠু 24/06/2011 Reply
  3. kbddxhxpbt 07/05/2014 Reply
  4. Rolex replica 24/06/2014 Reply
  5. coach factory 22/09/2014 Reply

Add a Comment

Your email address will not be published. Required fields are marked *


three × = 27