css_part1- CSS সিনট্যাক্স , Syntax এর ফরম্যাট ও CSS এর প্রকারভেদ
ওয়েব পেজের ভিজুয়াল প্রেজেন্টেসন এর জন্য W3C Standard সহ CSS কে ব্যবহার করা হয়। HTML হচ্ছে মার্কআপ ল্যাগুয়েজ কিন্তু এই মার্কআপ ল্যাগুয়েজ কে ইউজার বা
ডিজাইনাররা CSS দিয়ে আরো
মনোমুগ্ধকর করে থাকেন। HTML যেখানে ওয়েব পেজ প্রদর্শন করে অপর দিকে CSS কোন ওয়েব পেজকে প্রদর্শন করতে পারেনা।
CSS বিভিন্ন ধরণের কনটেন্টকে ধারণ করে এবং HTML এর মাধ্যমে প্রদর্শন করে। CSS আসার কারণে ডিজাইনারদের অনেক পরিশ্রম কম হচ্ছে
এবং একই কাজ বার বার করার একঘেয়েমি থেকে মুক্ত হয়েছেন ডিজাইনাররা। CSS দ্বারা এক্সটারনাল ফাইলে একবার Style তৈরী করে
রেখে বিভিন্ন HTML ফাইলে বার বার ব্যবহার করা যায়। CSS এর সম্পূর্ন রুপ হচ্ছে Cascading Style Sheets.
সুতরাং Style Sheets এর মধ্যে বিভিন্ন ধরণের Style সংরক্ষণ করে রাখা যাবে। এই Style মোট তিন ভাবে সংরক্ষণ করে রাখা যাবে। আমরা উদাহরণের মাধ্যমে বিষয়গুলি
জানবো। Style Sheets জানতে হলে প্রথমে
আপনাকে অবশ্যই HTML/XHTML জানতে হবে।
HTML/XHTML সম্বন্ধে আরও বিস্তারিত জানতে বাপ্পি আশরাফের প্রকাশিতব্য HTML,
XML, CSS ও PSD to
HTML এর বইটি সংগ্রহ করে নিন।
CSS সিনট্যাক্স
CSS সিনট্যাক্স মোট
৩টি অংশে গঠিত
১. Selector ২.
Property (Declaration) ৩. Value (Declaration)
সিনট্যাক্স দেখানোর আগে আমরা আমাদের HTML কোডিং মনে করি। আমরা জানি h1 দ্বারা হেডিং
নির্ধারণ করা হয়। HTML কোডিং এ h1
ব্যবহার করলে Text কে একটি নিদিষ্ট সাইজে প্রদর্শন করা যাবে।
যেমন <h1>This
is heading1</h1>
এটির দ্বারা নিম্নলিখিত
ভাবে Heading প্রদর্শিত হবে
যেমন
লক্ষ্য করুন এখানে Font
এর কোন style ( Family) বা Color উল্লেখ নাই। আমরা CSS দ্বারা সেটিই
নির্ধারণ করে দিতে পারি। যেমন
h1{style=”font-family:arial;color:red;”}
এখন যদি আমরা h1 দিয়ে কোডিং করি যেমন <h1>
This is heading1 </h1>
তবে আগের মতই Heading প্রদর্শিত হবে
কিন্ত Font দেখাবে Arial Fontএ এবং red কালারে প্রদর্শিত হবে। এভাবে নির্দিষ্ট ফোল্ডারের মধ্যে যতগুলি HTML ফাইল তৈরী হবে সবগুলির একই বৈশিষ্ট হবে ।
অর্থ্যাৎ বার বার h1 এর Font Family ও Color বলে দিতে হবে না।
Syntax এর ফরম্যাট
Syntax এর ফরম্যাট হবে নিম্নরুপ:
1.
Selector হলো HTML এলিমেন্ট/ট্যাগ যার মধ্যে CSS নির্ধারণ করা হয় । যেমন
<body>, <h1> বা <p> ইত্যাদি
2.
Property হলো HTML ট্যাগের সাথে
ব্যবহৃত Attributes যেমন
font-
family, color, text-align ইত্যাদি
Selector ও
Property একসাথে দিলে ফরম্যাট হবে
body
{ color:value ; text-align: value;} বা
h1
{ color : value ; text-align: value;} ইত্যাদি
3.
Value হলো HTML
ট্যাগে ব্যবহৃত Attributes এর একটি মান । যেমন Color : red,
Size: 20px, text- align: center ইত্যাদি। কাজেই পরিপূর্ণ ফরম্যাট হচ্ছে
css_part1_image3
লক্ষ্য করুন এখানে প্রথমে Selector দিতে হয়। পরে একটি ডিলিমিটার বা সেকেন্ড ব্রাকেট ({}) দিয়ে শুরু করতে হয় । এর পর Property দিতে হয় এবং একটি কোলন চিহ্ন (:) দিয়ে Value
নির্ধারণ করে দিতে হয় এরপর একটি সেমিকোলন চিহ্ন (;) দিতে হয় । শেষে আবার
একটি ডিলিমিটার বা সেকেন্ড ব্রাকেট দিয়ে শেষ করতে হয়- আবার Syntax লক্ষ্য করুন ।
body{color:red;}
যদি একাধিক Property দিতে হয় তবে একটি সেমিকোলন চিহ্ন দিয়ে পৃথক করে
দিতে হয় । যেমন
P{font-family:arial;color:red;} বা
h1{font-family:arial;color:green;} বা
h2{font-family:arial;color:blue;}ইত্যাদি
তবে কোডিং করার সময় আলাদা আলাদা লাইন ব্যবহার করুন, এতে কোড বুঝতে সুবিধা
হবে। যেমন-
h1
{
font-family:arial;
color:red;
}
CSS এর প্রকারভেদ
আগেই বলেছি মোট ৩টি
উপায়ে CSS লেখা সম্ভব-
1.
ইনলাইন স্টাইল (Inline
Style) – এটি HTML এলিমেন্ট/ ট্যাগের মধ্যে লিখতে হয় এবং style নামে একটি Keyword ব্যবহার করতে
হয়।
<body>
<p
style ="color:
red;">
text </p>
একটু পরেই আমরা বাস্তব
উদাহরণে চলে যাব।
2.
ইন্টারন্যাল
স্টাইল ( Internal Style ) এটি HTML ফাইলের <head> সেকশনের মধ্যে লিখে দিতে হয় এবং <style> নামের একটি ট্যাগ ব্যবহার করতে হয় যেমন
<head>
<style
type = "text/css">
p{
color: red;>
</style>
</head>
3.
এক্সটারন্যাল
স্টাইল ( External Style ) এটি আলাদা একটি
ফাইল লিখে .css নামে সেভ করতে হয়
এবং পরে কোডিং দিয়ে HTML ফাইলের মধ্যে কল
করতে হয় । মনে করুন MyStyle.css নামে একটি ফাইলের মধ্যে p{color:red;} নামে কোডিং করেছেন। এটিকে HTML ফাইলের মধ্যে আনার জন্য href বা hyper Reference কোড ব্যবহার করতে
হবে এবং Head সেকশনে কোডিং হবে
নিম্নরুপ
<head>
<link
rel ="style
sheet"
type= "text/css"
href = "MyStyle.css"
>
</head>
<p>
Text </p>
<body>
চলুন আমরা এখন style ব্যবহার করে কয়েকটি
ফাইল তৈরী করে ফেলি। আমরা অবশ্য না জেনেই
আমাদের HTML প্রোগ্রামগুলিতে বিভিন্ন
style sheet ইতিমধ্যেই ব্যবহার করেছি
। তবে এগুলি সব Inline style, এখন সম্পূর্ণ
প্রক্রিয়াটি জানবো।
এটি Style বাদে একটি
প্রোগ্রাম। Notepad ++ বা Dreamweaverএ নিচের মত কোডিংসহ একটি HTML ফাইল তৈরী করুন:
<!DOCTYPE html>
<html>
<head>
<title> example of CSS</title>
</head>
<body>
This is Normal body text.
<p> This is my CSS code </p>
<h1>Word Processor</h1>
Microsoft Word is a word processing
program.
It is use to Write application, News
Letter,
Writting Pad, etc.
<h1>Spread Sheet</h1>
Microsoft Excel is a Spread Sheet program.
Its devided by Row and Column. You can make
chart using Excel.
<h1>Database</h1>
Microsoft Access is a Spread Database
Managementprogram. It is use to create and
analise table and database.
</body>
</html>
Editor এ নিচের মত দেখাবেঃ
ব্রাউজার দিয়ে খুললে
নিম্নোক্ত ফলাফল পাওয়া যাবে।
এই প্রোগ্রামে আমরা কোন
css কোড ব্যবহার করি নাই এজন্য p বা h1 বা body এর মধ্যে বার বার
Value বলে দিতে হয়নি।
Book Name: Mastering Microsoft Word
RELATED POST LINKS BELOW ********************************************
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
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...
Next_
