সিএসএস টিউটোরিয়াল | ভূমিকা
আপনারা নিজের web
designing এর দক্ষতা উপরের ধাপে উন্নিত করতে চাইলে Cascading
Style Sheets (CSS) এর কোন বিকল্প নেই। এখানে ধারাবাহিকভাবে সিএসএস
টিউটোরিয়াল গুলো আলোচনা করা হবে। সিএসএস এর মাধ্যমে ওয়েব সাইটের শ্রী বৃদ্ধি করা
যায়।w3bay.com
সিএসএস এর মাধ্যমে যেসব বিষয় করা যায় ---
১ সিএসএস এর মাধ্যমে
এইচটিএমএল এ তৈরীকৃত পেজটি আরও দৃষ্টিনন্দন
করা যায়।
২ কিছু সিএসএস কোড
পরিবর্তন করে সম্পুর্নভাবে সাইট এর restyle
করা যায়।w3bay.com
আপনার stylesheet (যেখানে আপনি কোডগুলো লিখবেন) টি সম্পুর্নভাবে এইচটিএমএল documents হতে
পৃথক হবে যখন আপনি সিএসএস এবং এইচটিএমএল এ
দক্ষতা অর্জন করতে পারবেন। আর একটি কথা না বললেই নয় সিএসএস শেখার আগে অবশ্যই
এইচটিএমএল সম্বন্ধে ভাল জানতে হবে।
**একটা এইচটিএমএল পেজে <head> ট্যাগের ভিতর <style> ট্যাগ দিয়ে সিএসএস কোড
যোগ করে পেজ স্টাইলিং করা যায়।এটা হচ্ছে ইন্টারনাল সিএসএস আর যদি সিএসএস কোড বেশি হয়ে যায় তখন সিএসএস কোড
আলাদা ফাইলে লেখা হয় এবং <head> ট্যাগের ভিতর <link>
ট্যাগ দিয়ে সিএসএস ফাইলটি ঢুকিয়ে দেয়া হয়।এই পদ্ধতি হচ্ছে
এক্সটার্নাল সিএসএস।অধিকাংশ টিউটোরিয়ালের উদাহরনগুলিতে এক্সটার্নাল সিএসএস ব্যবহার
করে দেখানো হয়েছে এবং এইচটিএমএল ফাইলগুলিতে এক্সটার্নাল সিএসএস ফাইলটি কিভাবে
সংযোগ করতে হয় তা বারবার দেখানো হয়নি।তাই
প্রাকটিস করার সময় এইচটিএমএল ফাইলে এটা আপনাকে করে নিতে হবে।
সিএসএস সিলেক্টর টিউটোরিয়াল
সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়।বিভিন্ন
ধরনের সিলেক্টর আছে,এসব
দিয়ে এইচটিএমএল পেজের এলিমেন্ট সিলেক্ট করা যায় এবং সিলেক্ট করার পর নিজের ইচ্ছেমত
স্টাইলিং করা যায়।সিএসএস সিলেক্টর এর ব্যাপারে খুব গভীর এবং স্বচ্ছ ধারনা থাকতে
হবে।সিলেক্টর নিয়ে কাজ করার আগে কিছু টার্ম জানতে হবে যেমন:এইচটিএমএল এলিমেন্ট,
এট্রিবিউট, রুল সেট বা রুল ইত্যাদি..
css selector tutorial
h4 { background-color:white; font-size:12px; }
p { color:red; }w3bay.com
এখানে h4, p এসব হচ্ছে সিলেক্টর,h4 এর দ্বারা এইচটিএমএল পেজের <h4></h4>
এর ভিতরে যা আছে তা সিলেক্ট করবে বা বলা যায় h4 এলিমেন্ট সিলেক্ট করবে।w3bay.com
h4 এর পর সেকেন্ড ব্রাকেট যেখান থেকে শুরু
হয়েছে এবং p এর আগে যেখানে সেকেন্ড ব্রাকেট শেষ হয়েছে এইটুকু
ডিক্লেয়ারেশন ব্লক।w3bay.com
সেকেন্ড ব্রাকেটের ভিতরে সবটুকু হচ্ছে ডিক্লেয়ারেশন। background-color হচ্ছে প্রোপার্টি এবং white
হচ্ছে এর ভ্যালু। আর পুরোটা অর্থ্যাৎ h4 থেকে
শুরু করে এর সেকেন্ড ব্রাকেট যেখানে শেষ হয়েছে এইটুকু রুল বা রুল সেট। উপরের কোডে
দুটি রুল আছে h4 এবং p নিচে বিভিন্ন
সিলেক্টর এর নাম এবং এরা কিভাবে কাজ করে তা দেয়া হল:w3bay.com
* (ইউনিভার্সাল সিলেক্টর)
ইউনিভার্সাল সিলেক্টর এইচটিএমএল পেজের প্রতিটি এলিমেন্ট কে সিলেক্ট
করে।যেমন নিচের কোডটি সব এইচটিএমএল এলিমেন্ট এর রং লাল করে দেবে।
* {color:red;}w3bay.com
অনেকে padding,
margin এখানে 0 করে দেন যেমন
* {margin:0; padding:0; }w3bay.com
এই কাজটি করা অপ্রোয়জনীয়,এতে ব্রাউজারের উপর চাপ বেশি পরে তাই অনেকে এটা করতে নিষেধ
করেন।w3bay.com
আইডি সিলেক্টর #p {color:red;}
ক্লাস সিলেক্টর .p {color:red;}
টাইপ সিলেক্টরw3bay.com
P { background-color:orange; }
A { color:maroon; }w3bay.com
p, a হচ্ছে এখানে টাইপ সিলেক্টর।p সিলেক্টর এইচটিএমএল পেজের সব <p> এলিমেন্ট কে
সিলেক্ট করবে এবং এদের ব্যাকগ্রাউন্ড রং কমলা করে দেবে আর a সিলেক্টর
এইচটিএমএল সব লিংক কে সিলেক্ট করে রং খয়েরি করে দেবে।w3bay.com
ডিসেনডেন্ট সিলেক্টর
li a { text-decoration: none; color:red; }w3bay.com
এইচটিএমএল ফাইল
<div id="menu">
<ul>w3bay.com
<li><a href="#" title="">সি এস এস</a></li>
<li><a href="#" title="">এইচটিএমএল</a>
<ul>w3bay.com
<li> Child </li>
</ul>
</li>w3bay.com
<li><a href="#" title="">জাভাস্ত্রিপ্ট</a></li>
<li><a href="#" title="">পি এইচ পি</a></li>w3bay.com
<li><a href="#" title="">মাই এস কিউ এল</a></li></ul></div>
ধরুন আপনি li
এলিমেন্ট এর অধীনস্থ a এলিমেন্ট কে টার্গেট
করতে চাচ্ছেন তখন সিএসএস রুল লিখতে হবে উপরের মত।এই কোডের প্রভাব আপনার এইচটিএমএল
পেজের শুধু li এর
অধীনস্থ a তে গিয়ে পরবে।
সিডো ক্লাস (pseudo class)
a:link {color:blue;}w3bay.com
a:visited { color: blue; }
a:hover{color:red;}
a:active { color: red; }w3bay.com
:link, :visited, :hover, :active এসব হচ্ছে
সিডো ক্লাস।ধরুন উপরের এইচটিএমএল ফাইলটির জন্য যদি এই রুলটি প্রয়োগ করেন তাহলে সব
লিংক এবং ভিজিটেড লিংক এর রং হবে নীল।আর হোভার এবং সক্রিয় লিংক এর রং হবে
লাল।সিএসএস কোডটি ইচ্ছে করলে এভাবে লিখতে পারতেন।
a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }w3bay.com
এডজেইসেন্ট সিলেক্টর (Adjacent Selector)
h2+h3 { color:lime;}w3bay.com
ধরুন আপনি <h3>
এলিমেন্টকে টার্গেট করতে চাচ্ছেন,শুধুমাত্র ঐ <h3>
কে যেটা <h2> এর ইমিডিয়েট পরে আছে।উপরের
কোড দ্বারা আপনার এইচটিএমএল পেজের হেডিং ৩ এর রং lime হবে
যদি সেটা হেডিং ২ এর পরে থাকে।w3bay.com
*<h2> এরপর যদি অন্য কোন এলিমেন্ট থাকে
এবং এরপর <h3> থাকে তাহলে এই <h3> এর রং lime হবেনা কারন এটা <h2> এর ইমিডিয়েট পরে নেই।w3bay.com
*h2+h3 দেখে এটা মনে করা যাবেনা যে দুটোরই রং
lime হবে,শুধু <h3> পরিবর্তন হবে।
direct children সিলেক্টর
div#menu> ul { border: 1px solid black; }
এই রুলটি যদি উপরের এইচটিএমএল পেজে প্রয়োগ করেন তাহলে ul
এলিমেন্ট এর উপর একটা বর্ডার হবে তবে Children লেখাটির উপর বর্ডার আসবেনা যদিও এটা আরেকটা ul এর
মধ্যে আছে।কারন Children লেখাটি যে ul এর
মধ্যে আছে সেটা menu আইডির direct children নয়।
এট্রিবিউট সিলেক্টরw3bay.com
Img [src="/css selector.jpg"] { border: 5px
solid #000000; }w3bay.com
আপনার এইচটিএমএল ফাইলে যদি নিচের মত লাইন থাকে তাহলে উপরের
কোডটি দিয়ে <img> এলিমেন্টের
এট্রিবিউট সিলেক্ট করে এর বর্ডার ৫ পিক্সেল এবং বর্ডার রং কালো করে দেবে।
<img src="/css selector.jpg"
width="510" height="205">w3bay.com
গ্রুপিং সিলেক্টর
যদি একাধিক এলিমেন্টের একই স্টাইল করতে চান তখন গ্রুপিং
সিলেক্টর ব্যবহার করবেন।ধরুন আপনি চাচ্ছেন আপনার পেজের সব হেডিং এবং লিংক এর রং
একই হবে তখন নিচের মত করে লিখতে পারেন।
h1,h2,h3,h4,a { color:red; }w3bay.com
ধরুন আপনার পেজের একটা ডিভের (div)এর আইডি হচ্ছে menu
(id="menu") আার এই ডিভের ভিতরে সব লিংক এবং হেডিং এর রং
লাল করতে চাচ্ছেন তখন এভাবে
#menu a, #menu h1,#menu h2, #menu h3 { color:red; }
*আপনি যদি #menu a,h1,h2... এভাবে লেখেন তাহলে ভুল
হবে।w3bay.com
0 comments:
Post a Comment