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

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

প্রথমেই আসি এক্সটারনাল সিএসএস
এক্সটারনাল সিএসএস লেখার জন্য আমাদের রুট ফোল্ডারে(কম্পিউটারের যে ফোল্ডারে আমরা html  পেজ সেভ করেছি) আমাদের একটি টেক্সট ডকুমেন্ট নিতে হবে। তারপর টেক্সট ডকুমেন্টটির নাম পরিবর্তন করে লিখতে হবে style.css(অন্য কিছুও লিখতে পারেন। ভিন্ন নাম দিলে অবশ্যই সেই নামটিই ব্যবহার করতে হবে)। এরপর রুট ফোল্ডারে থাকা HTML ফাইল এবং CSS  ফাইল দুটিকে Notepad++ দিয়ে ওপেন করতে হবে। ওপেন হয়ে গেলে head ট্যাগের ভিতরে নিচের মত করে কোড লিখতে হবে।

বিঃদ্রঃ এখন আর আমরা style ট্যাগ ব্যবহার করব না। কারণ আমরা এখন দুইটি ফাইল তৈরি করেছি এবং এই দুই ফাইল আলাদা কিন্তু আমরা head ট্যাগের ভিতরে নিচের মত কোড ব্যবহার করে HTML এর সাথে CSS এর একটি সম্পর্ক তৈরি করব।

Code for External CSS (must write inside head tag)

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

এখানে প্রথমেই <link   />  নামে একটি ট্যাগ ব্যবহার করা হয়েছে। এরপর link ট্যাগের ভিতরে  href=”” দিয়ে তারপর মধ্যে style.css লেখা হয়েছে কারণ এর মাধ্যমে HTML ফাইলকে বলা দেওয়া হচ্ছে যে পেজের  স্টাইল আসবে style.css থেকে। এখন গুরুত্বপূর্ণ একটি বিষয় হল আমরা যদি  এই style.css ফাইলটিকে রুট ফোল্ডারের ভিতরে অন্য একটি ফোল্ডার তৈরি করে তার ভিতর রাখতাম তাহলে আমাদের লিখতে হত rel=”Mixedbd/style.css” ( এখানে যেকোন ফোল্ডারের নাম থাকতে পারেন।  অর্থ্যাত আপনি যে ফোল্ডার তৈরি করবেন)। এরপর লেখা হয়েছে rel=”stylesheet” যার অর্থ হল HTML এর সাথে ওই ফাইলের stylesheet সম্পর্ক যেমন রিয়েল লাইফে মামা-ভাগ্নে,চাচা-ভাতিজা,বন্ধু-বান্ধব ইত্যাদি। এরপর লেখা হয়েছে type=”text/css” যার অর্থ হল HTML ফাইলকে বলে দেওয়া হচ্ছে এর ধরণ হতে পারে Text অথবা CSS  ।  এখন আমাদের Notepad++ দিয়ে ওপেন করা style.css ফাইলে গিয়ে আমরা যদি CSS কোড লিখে ব্রাউজারে রান করাই তাহলেই দেখব ওয়েবপেজের গঠন পরিবর্তন হচ্ছে।

এবার আলোচনা করব ইনলাইন সিএসএস নিয়ে
ইনলাইন সিএসএস বলতে বোঝানো হয় <body> ট্যাগসহ <body> ট্যাগের ভিতরে যতগুলো ট্যাগ থাকে সব গুলোকে স্টাইল দেওয়া। এর মাধ্যেম বডি,প্যারাগ্রাফ, অংশ বিশেষকে(div,section) আলাদা আলাদাভাবে পরিবর্তন করা সম্ভব। নিচের কোডটি দেখা যাক যা HTML এ প্যারাগ্রাফে ব্যবহার করা হয়েছে।

           <p style=”padding: 5px; margin: 0px; color: white; fontfamily: Arial;”> 

ঠিক একইভাবে HTML এর অন্যান্য ট্যাগের সাথে একইভাবে ইনলাইন স্টাইল

ব্যবহার করা হয়ে থাকে। নিচের স্ক্রিনশটটি লক্ষ্য করা যাক……

html comment in notepad++ code-mixedbdblog.wordpress.com

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

Advertisements

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

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