Monday, August 29, 2016

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 বলে দিতে হয়নি।

Previous Post                                                                                           Next Post

  বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft  Word
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... 

 cd

RELATED POST LINKS BELOW ********************************************
Next_
         Part011 Part012 Part013 Part014 Part015   Part016 Part017 Part018 Part019   Part020
         Part031 Part032 Part033 Part034 Part035   Part036 Part037 Part038 Part039   Part040
        Part041 Part042



Part- 02:  Inline Style
Part- 13: CSS দ্বারা Text Style, Text Color   Text Alignment প্রোপার্টিজ
Part- 14: Text Decoration করা
Part- 15: Text Transformation Indentation
Part- 16: Character, Line Word Spacing
Part- 17: Text Direction Vertical Alignment
Part- 18: CSS দ্বারা Font Style, Weight Variant তৈরী করা
Part- 19: Properly কে শর্ট করা link Style করা
Part- 20: একাধিক Style প্রয়োগ list এর Style তৈরী করা
Part- 21: Unordered list-এর ব্যবহার (list-style-type)
Part- 22: List এ ইমেজের ব্যবহার, Position ঠিক করা একাধিক value ব্যবহার
Part- 23: CSS Float এর ব্যবহার, Float এ ইমেজ, Border, margin Text  সংযোজন
Part- 24: Horizantal Menu তৈরী করা এবং কিছু কোডিং এর ব্যবহার 
Part- 25: CSS Border ব্যবহার Customize  করা   
Part- 26:  একসাথে সব প্রোপার্টিজ CSS Outline এর ব্যবহার
Part- 27: একাধিক Properties CSS Margin এর ব্যবহার
Part- 28: আলাদা আলাদা মার্জিন সেটিং CSS Padding  এর ব্যবহার
Part- 29: CSS Box, Border Radius, Image Shadow এর ব্যবহার
Part- 30: CSS Table , Single Border তৈরী করা,
Part- 31: Nesting Selector, CSS Nevigation Bar এর ব্যবহার
Part-32: CSS Height Width এর ব্যবহার,
Part- 33: CSS Positioning ঠিক করা
Part- 34: Overlapping Clipping element Overflow নিয়ন্ত্রন করা
Part- 35: হরেক রকম কার্সর , CSS-এ এলিমেন্টকে Hide করা 
Part- 36: CSS Align এর ব্যবহার  সকল ব্রাউজারে প্রর্দশন উপোযোগী করা
Part- 37: সকল ব্রাউজারে প্রর্দশন উপোযোগী করা   ইমেজ গ্যলারি তৈরী করা
Part- 38: ইমেজের অপাসিটি নিয়ন্ত্রন  Navigation list তৈরী
Part- 39: Hover দেওয়া , ২ টি element একসাথে ব্যবহার
Part- 40: Focus–pseudo-code,  সুডো এলিমেন্টের ব্যবহার
Part- 41 : Professional Project Final (Special Project)
Part- 42: About Us.html  page তৈরী করা, Text Effect    Multiple Column