Dreamweaver_ part6_Style Sheet ও Tag Selector
Style Sheet
Style
শীট Dreamweaver এর গুরুত্বপূর্ণ বিষয়। Style শীট ছাড়া Dreamweaver এ তেমন কোন ডিজাইন
ভালভাবে করা যায় না। আমরা বিভিন্ন ধরণের Style
তৈরী করে রাখতে
পারি যেমন একটি লেখা বা টেক্সট এর Font
Change করে দিলাম, Font এর কালার Change করে দিলাম, Bold নতুবা Italic করে দিলাম ইত্যাদি হল এক
একটি Style এবং সবকয়টি Style
মিলে একটি Style Sheet. আমরা Style Sheet
তৈরী করে তা
বিভিন্ন এলিমেন্টের উপর প্রয়োগ করতে পাড়ি। মনে করুন একটি হেডারর উপর একটি Style তৈরী করে তা বিভিন্ন এলিমেন্টর উপর প্রয়োগ করতে পারি। মনে করুন একটি
হেডারের উপর একটি Style তৈরী করি তাহলে সেই Style টি সব কয়টি হোডারের উপর প্রয়োগ হয়ে যাবে। মনে করুন একটি পেজ যদি অনেকগুলো heading 1 আছে। যে কোন একটি heading
1 দিয়ে যদি একটি Style শীট তৈরি
করি তাহলে সবকয়টি হেডারের উপর Style
টি পরে যাবে আবার
একটি পেজে অনেকগুলো Paragraph থাকে যে কোন একটি Paragraph এর উপর ও তা পরে যাবে। একই ভাবে পেজটাকে ও Style ফ্লাটে ভাগ করা যায়, টেক্সকেও Style
প্রয়োগ করা যায়।
Tag Selector
CSS
Style এ চার ধরনের Style রয়েছে। এর মধ্যে Tag Selector একটি। Tag বলতে HTML এ যত গুলো Tag ব্যবহার হয় এই Tag এর উপরে বিভিন্ন Style তৈরী করা যায়। Code View তে গিয়ে আমরা দেখতে পাই
যেমন <body> <div id>,
<h1>, <p> ইত্যাদি এক একটি Tag আমরা যদি <h1> এর উপর Style তৈরী করি তাহলে সব Heading 1 তে এ Style পরাবে।
চলুন শুরু করি-
১. ডানদিকের প্যানেলগ্রূপে CSS Style প্যানেল থেকে New
CSS Rule অপশনে ক্লিক
করুন।
২. New CSS Rule ডায়ালগ বক্স আসবে। Selector Type অপশন থেকে Tag
(redefines an HTML Elements) অপশন সিলেক্ট করুন।
৩. Selector Name
ঘরের তীরে ক্লিক
করুন। HTML এর অনেক Tag
অপশন দেখতে
পাবেন। আমরা Body র উপর একটি Style তৈরী করব। বিভিন্ন Tag অপশন থেকে Body সিলেক্ট করে দিন।
৪. নিচে Rule
Definition অংশে This document only সিলেক্ট করে দিন। OK
করুন।
৫. CSS Rule
definition for body ডায়ালগ বক্স থেকে Type অপশনে Font-size 100, পাশের বক্সে % সাইন সিলেক্ট করে দিন। Color অপশন থেকে সাদাটে কালার সিলেক্ট করুন।
৬. Apply করে OK করুন। দেখুন Body ট্যাগের মধ্যে যে
এলিমেন্টগুলো রয়েছে সবগুলোর ঐ রকম কালার হয়ে গেছে।
Code
View তে গিয়ে যদি দেখি
body নামে একটি Style তৈরী হয়েছে। এখানে Font Size এবং Color
Changes করা হয়েছে। এবং
ডানদিকে CSS Style প্যানেলে body নামে Style তৈরী হয়েছে।
এখন আমরা h1 এর উপর অর্থাৎ Header 1 এর উপর একটি Style
sheet তৈরী করব।
৭. CSS Style প্যানেল থেকে New CSS Rule অপশনে ক্লিক করুন।
New CSS Rule ডায়ালগ বক্স আসলে Selector Type অপশন থেকে Tag এবং Selector Name ঘরের নিমণমুখী তীরে ক্লিক করে h1সিলেক্ট করুন এবং This Document
only রেখে OK করুন।
৮. CSS Rule
definition for h1 ডায়ালগ বক্স আসলে Type ক্যাটাগরি সিলেক্ট করে Font-Size 1.2 এবং পাশের ঘরে একক em
সিলেক্ট করুন এবং
কালো কালার সিলেক্ট করে দিন।
Header
1 এর Color Changes হয়ে কালো হয়ে যাবে । আমরা একে নানাভাবে এডিট করতে পারি।
৯. CSS Style প্যানেল থেকে যে
Style টিকে সিলেক্ট করতে চান
সেটিকে ডাবল ক্লিক করুন অথবা Style সিলেক্ট করে প্যানেলের
নিচে Edit অপশনে ক্লিক করুন।
১০. CSS Rule
definition for h1 ডায়ালগ বক্স আসবে। Font- Size পরিবর্তন করে 2.4em করুন এবং কালার পরিবর্তন করে লাল করুন। Apply করে OK করুন।
Header
1 এর Size ও Color পরিবর্তন হবে।
এবার Paragraph এর উপর একটি Style Sheet তৈরী করব।
১১. একই ভাবে CSS
Style প্যানেল হতে New CSS Rule অপশনে ক্লিক করুন। New
CSS Rule ডায়ালগ বক্স আসলে
Selector Type অপশন থেকে Tag এবং Selector Name ঘরের নিমণমূখী তীরে
ক্লিক করে অনেক Tag অপশনের মধ্য থেকে P সিলেক্ট করুন।
১২. This
Document Only ঠিক রেখে Apply দিয়ে OK করুন।
১৩. CSS Rule definition
for P ডায়ালগ বক্স আসলে
Type অপশনে Font
Family অপশন থেকে Georgia, Time New Roman, Serif সিলেক্ট করুন।
নীলচে কালার বক্স থেকে সিলেক্ট করুন। Apply করে OK করুন।
দেখুন এখানে যতগুলো Paragraph রয়েছে সবগুলোর উপরে এ Style টি প্রয়োগ হয়েছে।
Class
Selector: এই সিলেক্টরটি
দিয়ে আমরা একটি Style তৈরী করে সেই Style টিকে যে কোন জায়গায় Apply
করতে পারি। Tag Selector এর ক্ষেত্রে যে Tag এর উপর Style শীট তৈরী করা হয় Document এর ঐ সকল Tag গুলোতে Style টি Apply হয়ে যায়। কিন্তু Class Selector এর ক্ষেত্রে Style টিকে তৈরী করে রেখে ইচ্ছামত যে কোন জায়গায় Apply করা যায়।
চলুন শুরু করি
১. CSS Style প্যানেল থেকে New CSS Rule বাটনে ক্লিক করুন। New
CSS Rule ডায়ালগ বক্স আসলে
Selector Type অপশন থেকে Class (Can apply to any HTML element ) অপশন সিলেক্ট করুন।
তবে এক্ষেত্রে শুধুমাত্র HTML এলিমেন্টের উপরই Apply করা যাবে।
২. Selector Name
ঘওে নাম দিন। .Green text ডট দেয়ায় CSS
Style প্যানেলে কোনটি Tag Selector আর কোনটি Class Selector
তার পার্থক্য
বোঝা যাবে। OK করুন।
৩. CSS Rule
definition for .Green text নামক ডায়ালগ বক্সে Type অপশন থেকে Font Style – Italic কওে দিন এবং Color
বক্স থেকে Green কালার সিলেক্ট করুন। এছাড়াও আপনার ইচ্ছেমত Style দিতে পারেন। Apply করে OK করুন।
লক্ষ্য করুন, Style
টি কোন কিছুর
উপরই Apply হয়নি। CSS
Style প্যানেলে দেয়া
যাচ্ছে।
৪. এবার Properties
Inspector থেকে HTML অপশন সিলেক্ট করুন। যে টেক্সট এর
উপর Style টি Apply করতে চান সেই টেক্সট
সিলেক্ট করে Properties Inspector এর Class অপশন থেকে .Green text সিলেক্ট করুন।
সুতরাং আমরা Class
Selector দ্বারা Style তৈরী করলে আমরা যে কোন কিছুর উপর তার প্রয়োগ ঘটাতে পারি।
আরও একটি Class Style তৈরী করব।
৫. একইভাবে CSS
Style প্যানেল থেকে New CSS Rule বাটনে ক্লিক করে Selector Type অপশনে Class এবং Selector Name অপশনে .Highlight
লিখে দেই। আমরা
কোন কিছু Highlight করার জন্য Style তৈরী করব।
৬. OK করুন। CSS Rule definition for .Highlight ডায়ালগ বক্স থেকে Type ঘরে Font Style থেকে Italic, Background ঘরে Background
Color হলুদ (#ff0) করে দিন। Box ঘরে Padding অপশনে Same of
all টিক বক্স উঠিয়ে Top- Right, Bottom- Left এ 2,5,2,5 লিখে দেই এবং Apply
দিয়ে OK করি।
দেখুন CSS Style প্যানেলে .Highlight নামে একটি Style তৈরী হয়েছে।
৭. কিছু টেক্সট সিলেক্ট করে নিয়ে Properties Inspector এর Class অপশন থেকে .Highlight সিলেক্ট করুন।
সিলেক্টকৃত অংশ হলুদ রঙ দ্বারা হাইলাইটেড হবে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
part1_Dreamweaver, Properties Inspector ও Panel বন্ধ করা
part2-Panel আনা, Panel গ্রুপে Panel টিকে রাখা ও Panel গ্রুপকে Collapse করা
part3-নতুন Site তৈরী করা
part4_Import Siteও Logout তৈরী
part5_হেডার যুক্ত করা
part6_Style Sheet ও Tag Selector
part7_ Div Tag
part8_Box Properties ও Floating করা
part9_ID selector ও Image type
part10_Image Properties ও Animation সংযুক্ত
part11_টেবিল সংযোজন, টেবিলে ডাটা ইমপোট করা, Table ফরমেটিং ও টেবিলে Image সেট করা
part12_Form তৈরী করা, Form এর ভিতর ফিল্ড সেট করা, Form এর মধ্যে Text ফিল্ড যোগ করা, From এ রেডিও বাটন যোগ করা, Form এ Text area যোগ করা, Form এ বাটন যোগ করা, ও Form Design
