কিভাবে অল্টারনেট CSS ব্যবহার করবেন (ডেমো সহ)

সবাইকে স্বাগতম জানিয়ে শুরু করছি একটি ওয়েব ডিজাইন সম্পর্কিত টিউন। এই টিউনে আমরা দেখব, কিভাবে একটি HTML ফাইলে অল্টারনেট CSS ব্যবহার করা যায়।

অল্টারনেট CSS টা এরকম যে, ভিজিটর ওয়েবসাইটের জন্য অন্য একটি অল্টারনেট স্টাইল স্টাইল শিট বেছে নিতে পারবে। যেমনঃ আপনি আপনার ওয়েবসাইটে এমন একটি অপশন রাখতে চান যাতে ভিজিটর রা ওয়েবসাইট এর কালার পরিবর্তন করতে পারবে। ভিজিটর যদি রেড বাটনে ক্লিক দেয় তাহলে ওয়েবসাইটের রঙ লাল হয়ে যাবে, আর সবুজ বাটনে ক্লিক করলে হয়ে যাবে সবুজ।

ডেমোঃ

https://dl.dropboxusercontent.com/u/170123488/demo/altcss/index.html

এখন দেখা যাক এটি ব্যবহার করবেন কিভাবেঃ

  • শুরুতেই এই জাভাস্ক্রিপ্ট ফাইলটি ডাউনলোড করে নিন। ডাউনলোড
  • এখন আপনার সাইটের CSS ফাইলের তিনটি বা যতখুশি কপি তৈরি করুন এবং কাস্টমাইজ করুন।
  • আপনার সাইটের বা টেমপ্লেটের index.html বা যেটাতে <head> সেকশন রয়েছে সেটা ওপেন করুন।
  • আপনার স্টাইল শিট গুলি কল করুন এভাবেঃ

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

<link rel="alternate stylesheet" type="text/css" href="stylealt1.css" title="alternate 1" />

<link rel="alternate stylesheet" type="text/css" href="stylealt2.css" title="alternate 2" />

  • জাভাস্ক্রিপ্ট ফাইলটা কল করতে ভুলবেন না।

<script type="text/javascript" src="styleswitcher.js"></script>

  • এখন লিঙ্ক তৈরি করার পালা। স্টাইল শিট পছন্দ করার জন্য আপনার সাইটে লিঙ্ক তৈরি করুন ঠিক এভাবে (এটা <body> ট্যাগ এর ভিতরে দিবেন)

<a href="#" onclick="setActiveStyleSheet('default'); return false;">Style 1</a>

<a href="#" onclick="setActiveStyleSheet('alternate 1'); return false;">Style 2</a>

<a href="#" onclick="setActiveStyleSheet('alternate 2'); return false;">Style 3</a>

  • তৈরি হয়ে গেলো আপনার অল্টারনেট স্টাইল-শিট। মনে রাখবেন, যেই অংশগুলি স্টাইল-শিট ভেদে পরিবর্তন করতে চান শুধু-মাত্র সেই CSS সিলেক্টরগুলি ই আল্টারনেট CSS এ দিবেন। অন্যথায়, সাইটের লডিং স্পিড কমে যাবে।

ধন্যবাদ সবাইকে।

Arrows Technology

Develop Bangladesh

Arrows Technology বাংলাদেশের একটি ওয়েব ডিজাইন এবং ওয়েব ডেভেলপিং কোম্পানি। আমরা বিজনেস সাইট, পার্সোনাল সাইট, ই-কমার্স সাইট, ব্লগ সাইট সহ যেকোনো ধরনের সাইট তৈরি এবং যেকোনো সমস্যা সমাধানে সর্বদা প্রস্তুত।
যোগাযোগঃ ০১৭৫৯-৫৫০৫৪৭
Connect With us via Facebook

Level 0

আমি অবুঝ বাঙালী। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 35 টি টিউন ও 161 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

অনেক ধন্যবাদ ভাইয়া । দারুণ একটা জিনিস জানালেন 😀
এমন টিপস আরও চাই