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

লেখাটি আপনার পছন্দ হয়েছে?

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

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

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

FavoriteLoadingলেখাটি পছন্দের তালিকায় যুক্ত করুন ☼

পরবর্তী আপডেট পেতে চাইলে আর.এস.এস ফীড অথবা ই-মেইল এর মাধ্যমে সাবস্ক্রাইব করুন

বিজ্ঞান প্রযুক্তি ডট কম এর ফেইসবুক পেইজ বা গ্রুপ অথবা টুইটার প্রোফাইলে যোগ দিন

নতুন লেখা সরাসরি ই-মেইলের মাধ্যমে পেতে নিচের বক্সে আপনার ই-মেইল ঠিকানা লিখুন

লেখকঃ মিঠু সম্পর্কে কিছু কথা...
মিঠু বিজ্ঞান প্রযুক্তি ডট কম এর একজন অতিথি লেখক। তিনি রাজশাহী প্রকৌশল ও প্রযূক্তি বিশ্ববিদ্যালয়ের পুরকৌশল বিভাগের একজন ছাত্র। প্রোগ্রামিং এবং গ্রাফিক্স ডিজাইনিং এ তার আগ্রহ বেশি। গেইমিং তার নেশা।

মতামত সমূহ

4 টি মতামত “সিএসএস সিম্ফোনীঃ পর্ব ৩”
  1. সাব্বির says:

    এমন লেখা আরো চাই,আশা করি রেগুলার লিখবেন।

  2. tomal says:

    খুব সুন্দর হয়েছে, পরবর্তী লেখার প্রাত্যাশায় রইলাম।

আপনার মতামত দিন

দয়া করে বাংলায় মতামত দিন। ইংরেজীতে দেয়া মতামত মুছে ফেলা হতে পারে

মতামত এর সাথে আপনার ছবি যোগ করতে চাইলে এখানে যান gravatar!