সিএসএস লিংকিং এবং সিএসএস লেখার পদ্ধতি পার্ট-১

আগের পোস্টে আমি সিএসএস নিয়ে একটি বেসিক আলোচনা করেছিলাম। সিএসএসের পরিচিতি যেহেতু আমরা জেনেছি তো আমরা এখন জানব কিভাবে সিএসএসকে এইচটিএমএলের মধ্যে কিংবা বাইরে লিখতে হয়। এইচটিএমএলে সিএসএস লেখার জন্য তিনটি পদ্ধতি রয়েছে। এগুলো হলঃ

১। ইন্টারনাল সিএসএস(Internal CSS)

২।এক্সটার্নাল সিএসএস(External CSS)

৩। ইনলাইন সিএসএস(Inline CSS)

এখন আমরা দেখব কিভাবে এই তিন পদ্ধতিতে সিএসএস কোডকে লিখতে হয়।

ইন্টারনাল সিএসএস(Internal CSS)

ইন্টারনাল সিএসএস লেখার জন্য আমাদের HTML সম্পর্কে অবশ্যই ধারণা থাকা প্রয়োজন। ইন্টারনাল সিএসএস লেখার জন্য আমাদের প্রথমেই HTML কোডের head ট্যাগের আন্ডারে style ট্যাগের ভিতরে লিখতে হয়। তাহলে আমরা নিচের সাধারণ HTML কোড এবং ইন্টারনাল সিএসএস লেখার পর কোড দেখতে কেমন হয় তা দেখিঃ

সাধারণ HTML কোডঃ

<!DOCTYPE html>
<html>
<head>

</head>

<body>

</body>

</html>
উপরের কোডগুলো সাধারণ HTML কোডকে নির্দেশ করে থাকে।

HTML কোড সিএসএসের সাথেঃ
<!DOCTYPE html>
<html>
<head>
<style>
body{
background: lightblue;
padding: 0px;
margin: 0px auto;
font-size: 16px;
font-family: Times New Roman;

.navigation{
ul{backgrounnd:  #d1e0e0; list-style:none;}
ul li{backgrounnd:  #4dff4d; float:left; border: 1px solid black; padding: 5px 35px; }
ul li:hover{backgrounnd:  #008000; font-size: 19px;}
ul li a{textdecoration:none;}
ul li a{}
}
}
</style>

</head>

<body>

</body>

</html>

উপরের কোডগুলো আমরা যদি ভালভাবে লক্ষ্য করি তাহলেই দেখতে পাব যে সিএসএসের কোডগুলো <style></style> ট্যাগের ভিতরেই লেখা হয়েছে।

নোটঃ সিএসএস লেখার সময় মনে রাখতে হবে যে <style> ট্যাগের ভিতরেই লিখতে হবে । তা না হলে সিএসএস কাজ করবে না। তাছাড়া এটাও মনে রাখা জরুরি যে সিএসএস লেখার জন্য প্রথমে full stop দিতে হবে(হ্যাশ # ও দেওয়া যায়। হ্যাশ ট্যাগ সম্পর্কে আমরা সিএসএসের class এবং id আলোচনা করার সময় জানব। ) তারপর {} সেকেন্ড ব্র্যাকেট দিতে হবে এবং সেকেন্ড ব্র্যাকেটের ভিতরেই মূল কোডগূলো লিখতে হবে। প্রতিটি ভেলুর নাম লেখার পর কোলন(:) চিহ্ন দিতে হবে এবং প্রতিটির মান বসানোর পর অবশ্যই সেমিকোলন চিহ্ন(;) দিয়ে তা শেষ করতে হবে।

আশা করি আপনারা সবাই ইন্টারনাল সিএসএস সম্পর্কে ধারণা পেয়েছেন। পার্ট-২ তে আমরা এক্সটার্নাল এবং ইনলাইন সিএসএস নিয়ে আলোচনা করব। ধন্যবাদ।

বিস্তারিত জানতে নিচের ভিডিওটি দেখুন

Advertisements

2 thoughts on “সিএসএস লিংকিং এবং সিএসএস লেখার পদ্ধতি পার্ট-১

  1. সিএসএস লেআউট নিয়ে টিউটোরিয়াল কত দিনের মধ্যে প্রকাশিত হবে?। আমি মোটামুটি সিএসএসের প্রাথমিক পর্যায়ে রয়েছি। আশা করি পরবর্তী টিউটোরিয়াল এ লেআউট সম্পর্কে ধারণা পাব

    Like

    • আপনাকে ধন্যবাদ প্রশ্নের জন্য। আমরা সিএসএস লেআউট নিয়ে একটি পূর্নাঙ্গ টিউটোরিয়াল খুব শীঘ্রই আমাদের ওয়েবসাইটে প্রকাশ করব। আমরা এখনো আমাদের ওয়েবসাইটটির ফাইনাল ভার্সন এখনো উন্মক্ত করিনি। আশা করি আমরা তা আগামী চার থেকে পাচ মাসের মধ্যে তা করব। সাথেই থাকুন

      Like

আপনার মতামত জানান

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s