Saturday, March 4, 2017

সিএসএস আইডি বনাম ক্লাস (CSS ID Vs Class)

সিএসএস আইডি বনাম ক্লাস (CSS ID Vs Class)

css id tutorialএটা প্রায়ই সন্দেহের সৃষ্টি করে যে কখন আমরা সিএসএস ID ব্যবহার করব আর কখন আমরা সিএসএস Classes ব্যবহার করব।এই অধ্যায়ে এ বিষয়ে পরিস্কার আলোচনা করা হবে।
আইডি নির্বাচক (id  Selector)
একটা এইচটিএমএল এলিমেন্ট এর স্টাইল কেমন হবে এটা ঠিক করার জন্য সিএসএস আপনাকে নিজস্ব সিলেক্টর ব্যাবহারের সুবিধা দেয় এদেরকে বলে "id" এবং "selector"
ID সিলেক্টর একটা (অনন্য) এলিমেন্টের স্টাইল দিতে ব্যাবহৃত হয়। id হল এলিমেন্ট  এর unique identifier সিএসএস ID প্রায়ই  সিএসএস classes কাছাকাছি।কিন্তূ তারা এলিমেন্ট এর special case নির্দেশ করে ।w3bay.com
p#exampleID1 { background-color: orange; }
p#exampleID2 { text-transform: uppercase; }
<p id="ExampleID1">This paragraph has an ID name of
"exampleID1" and has a orange CSS defined background</p>
<p id="ExampleID2">This paragraph has an ID name ofw3bay.com
"exampleID2" and has had its text transformed to uppercase letters. </p>
**id নাম সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা মজিলা ফায়ারফক্সে কাজ করবেনা।
ক্লাস নির্বাচক (class Selector)
একদল এলিমেন্টের স্টাইল দেয়ার জন্য class selector ব্যাবহৃত হয়।class selector এইচটিএমএল এর class attribute ব্যাবহার করে এবং এটা "." দিয়ে লেখা (সংঙ্গায়িত) হয়।নিচের উদাহরনে  যেসব এইচটিএমএল এলিমেন্টs class="center" এটা থাকবে তাদের সকলের Align মাঝখানে হয়ে যাবে।
.center {text-align:center;}
আপনি ইচ্ছে করলে এইচটিএমএল এর যেকোন একটা এলিমেন্ট ঠিক করে দিতে পারেন যেটা একটা class দ্বারা প্রভাবিত হবে।যেম:
p.center {text-align:center;}
**class নাম সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা ইন্টারনেট এক্সপ্লোরার এ কাজ করবেনা।
ID =  একজনের Identification (ID) একজন ব্যক্তির জন্য unique
Class = অনেক জনগণ   একটি class এ পড়ে ।

সিএসএস ক্লাস টিউটোরিয়াল (CSS Class)
সিএসএস এর মাধ্যমে এইচটিএমএল এলিমেন্ট এর অসংখ্য স্টাইল দেয়া যায়। একটা উদাহরন দিয়ে বিষয়টি পরিস্কার করা যাক । ধরুন আপনি কখনও চাচ্ছেন আপনার লেখাটির ফন্ট বড় এবং সাদা হোক।  আবার চাচ্ছেন ছোট এবং কাল হোক। আপনি ভাগ্যবান এই অর্থে যে  সিএসএস classes ব্যবহার করার  মাধ্যমে আপনি আপনার ইচ্ছা পুরন করতে পারেন।
Class এর Formatw3bay.com
Class  ব্যবহার করা খুব সাধারন। সাধারন  সিএসএস কোড এর  অংশকে বর্ধিত (extension) করতে হবে। আর এই বর্ধিত অংশকে অবশ্যই এইচটিএমএল ট্যাগ এ Class এর মান হিসাবে বসাতে হবে। নিচে উদাহরন দেয়া হলো:w3bay.com
p.first{ color: blue; }
p.second{ color: red; }
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
</body></html>w3bay.com
আপ নি যেকোন এইচটিএমএল এলিমেন্ট এর সাথে সিএসএস class  ব্যবহার করতে পারেন।ধরুন আপনি <p> ট্যাগ ব্যবহার করে স্টাইল দিয়েছেন এবং সিএসএস class ব্যবহার করে অন্য একটি স্টাইল নিদিষ্ট করে দিয়েছেনে ফলে আগের  default স্টাইল টি আর নিদিষ্ট লেখার ঊপর কাজ করবে না।
p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }
<html>w3bay.com
<body>
<p>This is a normal paragraph.</p>
<p class="test1">This is a paragraph that uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>
সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল (CSS Background)
আপনার সাইটের background অনেক বেশি গুরুত্ত্বপুর্ন তাই এই টিউটোরিয়াল টি আপনাদের মনোযোগ সহকারে দেখা উচিত। আপনি যদি professional website তৈরী করতে চান তাহলে  light background এর মধ্যে dark টেক্স ব্যবহার করা উচিত। আর যদি শুধু শখের জন্য তৈরী করতে চান তাহলে যেকোন কালারের সমন্নয় গ্রহনযোগ্য।w3bay.com
সিএসএস এর মাধ্যমে আপনি যেকোন সিএসএস এলিমেন্ট এর background color or image  সেট করতে পারেন। তাছাড়া  background image কিভাবে প্রর্দশিত হবে সে বিষয়টি আপনি নিয়ন্ত্রন করতে পারবেন। আপনি পছন্দমত এটিকে horizontally, vertically repeat করতে পারেন।তাছাড়া আপনি  background কে fixed position এ রাখতে পারেন বা scroll করতে পারেন।
নিচে সিএসএস background এর ঊদাহরন দেয়া হলো।
h4 { background-color: white; }w3bay.com
p  { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }w3bay.com

সিএসএস Background Image:
gradient background এর মত image কে left-to-right  করা যায়। অথবা যখন ইউজার স্ক্রল করবে তখন আপনি image কে fixed  অবস্থায় রাখতে পারেন ।w3bay.com
p { background-image: url(smallPic.jpg); }w3bay.com
h4{ background-image: url(http://www.ypdesign.tk/pics/cssT/example.jpg); }
This <p> has a background image using a local path to the picture.
This <h4> has a background image using the complete url path.
p { background-image: url(smallPic.jpg); background-repeat: repeat; }
h4 {background-image: url(smallPic.jpg); background-repeat: repeat-y;}
ol { background-image: url(smallPic.jpg); background-repeat: repeat-x;}
ul {background-image: url(smallPic.jpg); background-repeat: no-repeat;}

সিএসএস Background Image এর অবস্থান:
আপনি যদি নির্দিষ্ট করতে চান যে এইচটিএমএল এলিমেন্ট এর মধ্যে কোথায় image টি প্রদর্শিত হবে তাহলে সেটা CSS's background-position এর মাধ্যমে করা যায়।নিচে তিন (length, percentages, keywords) প্রকারের নির্দিষ্ট করার ঊপায় দেখানো হলো।w3bay.com
p {background-image: url(smallPic.jpg); background-position: 20px 10px;}
h4 {background-image: url(smallPic.jpg); background-position: 30% 30%;}
প্রদর্শন:w3bay.com
যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।
যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।

সিএসএস Gradient Background:
যদি gradient background  তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।
Image: Background Imagew3bay.com
ঊপরের image টি খুব সাধারন । আমরা এটাকে horizontal ভাবে রেখেছি । এই image টি 1 pixel এর। repeat attribute এর মাধ্যমে এর value       repeat-x   সেট করেছি  যার ফলে image টি নির্দিষ্ট এর বাম হতে ডান দিকে বিস্তৃতি লাভ করবে। নিচে উদাহরনে paragraph এলিমেন্ট এ gradient background যোগ হয়েছে
p {background-image: url(http://www.ypdesigner.tk/images/stories/back_image.jpg); background-repeat: repeat-x;}w3bay.com
সিএসএস ফন্ট (CSS Font)
টেক্স কিভাবে প্রদর্শিত হবে তার নিয়ন্ত্রন ভার সিএসএস আপনাকে দিয়েছে। আপনি টেক্সের size, color, style ইত্যাদি পরিবর্তন করতে পারেন। আপনি জেনেছেন কিভাবে টেক্স bold  বা underline করতে হয় কিন্তু আপনি কি জানেন percentage  ব্যবহার কিভাবে ফন্ট resize  করা যায়। এই বিষয়ে আলোচনা  নিচে করা হয়েছে ।w3bay.com
সিএসএস ফন্ট রং: যদিও টেক্সের কালারকে সিএসএস ফন্ট অংশ মনে হয় কিন্তু প্রকৃতপক্ষে এটা স্বাধীন  সিএসএস attributeনিচে ফন্ট এর কালার পরিবর্তনের উদাহরন দেয়া হলো।
h4 { color: red; }w3bay.com
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
প্রদর্শন:w3bay.com
This is a red h4 header.
This is a hexadecimal #9000A1 h5 header.
This is an rgb(0, 220, 98) h6 header.
উপরের উদাহরনে কালার নির্দেশ করতে আমরা কালারের তিন প্রকারের ফরমেট ব্যবহার করেছি।

সিএসএস ফন্ট Family:
ফন্ট family দুইটি  group  এ বিভক্ত যেমন: serif and sans-serif গবেষনায় দেখা গিয়েছে serif fonts হতে sans-serif fonts যা  computer monitor এ খুব সহজে পড়া যায় ।
h4 { font-family: sans-serif; }
h5 { font-family: serif; }w3bay.com
h6 { font-family: arial; }

প্রদর্শন:w3bay.com
This is a header with sans-serif font
This is a header with a serif font
This is a header with an arial fontw3bay.com

সিএসএস ফন্ট আকার:
আপনি values, percentages বা key terms ব্যবহার করে ফন্ট আকার ঠিক করতে পারেন। যখন আপনি default ফন্ট পরিবর্তন করতে চাবেন তখন Percentages ব্যবহার করা ভাল কিন্তু static value সেট করা উচিত নয়।
p { font-size: 120%; }
ol{ font-size: 10px; }
ul{ font-size: x-large; }
ফন্ট-weight এর অন্যান্য key terms গুলো হল: bold, bolder, and normal.

সিএসএস ফন্ট Variant:
সিএসএস ফন্ট Variant এর সাহায্যে আপনি ফন্ট কে  small caps এ পরিবর্তিত করতে পারেন। Note: কিন্তু সকল ফন্টসিএসএস ফন্ট Variant কে সাপোর্ট করে না তাই প্রকাশ করা আগে নিশ্চিত হয়ে নেয়া উচিত।w3bay.com
p { font-variant: small-caps; }

সিএসএস টেক্সক্ট টিউটোরিয়াল (CSS Text)
সিএসএস টেক্সট এর মাধ্যমে আপনি  টেক্সট এর spacing, decoration,  এবং alignment নিয়ন্ত্রন করতে পারেন।w3bay.com
টেক্সট Decoration:
টেক্সট Decoration এর মাধ্যমে আমরা লিংক এর underline দুর করতে পারি।  তাছাড়া line-through,
overline এবং underline  ইত্যাদি টেক্সট এ ব্যব্হার করতে পারি।
h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }
টেক্সট Indent:w3bay.com
সিএসএস text-indent কে আমরা এইচটিএমএল (<pre>)  ট্যাগ পরিবর্তে ব্যবহার করতে পারি। values
or percentages ব্যবহার করে আমরা text-indent নির্দিষ্ট করি।text indent মানে লেখাটি বাম দিকে থেকে কতটুকু ছাড় দিয়ে শুরু হবে।
p { text-indent: 20px; }w3bay.com
h5 { text-indent: 30%; }
টেক্সট Align:
সাধারনত  website default হিসাবে টেক্সট Align: left নিবার্চিত থাকে। টেক্সট Align attribute এর সাহায্যেw3bay.com
টেক্সট  এর বিভিন্ন Alignment দেয়া যায়।
p { text-align: right; }
h5{ text-align: justify; }
টেক্সট Transform:w3bay.com
টেক্সট Transform এর মাধ্যমে টেক্সট এর দ্রুত capitalize করা যায়।
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }
সিএসএস White Space:w3bay.com
white-space attribute এর মাধ্যমে লেখাটি এক লাইনে চলতে থাকবে যতক্ষন না আপনি break <br />
ট্যাগ না দিবেন।w3bay.com
p { white-space: nowrap; }
</br> ট্যাগ দিলে তারপর থেকে নিচে লাইন যাবে।
সিএসএস Word Spacing:w3bay.com
সিএসএস Word Spacing attribute এর মাধ্যমে পাশাপাশি শব্দগলোর মধ্যে gap এর পরিমান নির্ধারন করে দেয়া যায়।w3bay.com
p { word-spacing: 10px; }
সিএসএস Letter Spacing:
সিএসএস letter-spacing attribute এর মাধ্যমে শব্দের মধ্যে বর্ণ গুলোর মধ্যে gap এর পরিমান নির্ধারন করে
দেয়া যায়।w3bay.com
p { letter-spacing: 3px; }

সিএসএস প্যাডিং টিউটোরিয়াল (CSS Padding)
সিএসএস প্যাডিং ব্যবহার করে আপনি এইচটিএমএল এলিমেন্ট (paragraphs, tables ইত্যাদি ) এর  default প্যাডিং  পরিবর্তন করতে পারেন। আর  প্যাডিং বলতে বোঝায় এলিমেন্ট এর  border এবং তার content  এর মধ্যের অংশকে।w3bay.com
p {padding: 15px; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
সিএসএস প্যাডিং: 1 Valuew3bay.com
1 Value বিশিষ্ট প্যাডিং সকল (top, right, bottom, left.) পাশে uniform padding  তৈরী করে।
p {padding: 2%; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
সিএসএস প্যাডিং: padding-(direction):w3bay.com
প্রত্যেক  এইচটিএমএল এলিমেন্ট এর প্রকৃতপক্ষে চারটি ভিন্ন প্যাডিং থাকে যেমন top, right, bottom, এবং left প্যাডিং direction  attribute এর মাধ্যমে পৃথক পৃথক প্যাডিং নির্দেশ করা যায়। এক direction (যেমন -left) এ নির্দেশ করলে অন্যগুলো অপরিবর্তিত থাকে।
p {padding-left: 5px; border: 1px solid black; }
h5{padding-top: 0px; padding-right: 2px; padding-bottom: 13px; padding-left: 21px; border: 1px solid red;}
সিএসএস প্যাডিং: 2 & 4 Values
যখন আমরা দুইটি প্যাডিং Value ব্যবহার করবো তখন প্রথম Value টি top এবং bottom প্যাডিং Value নির্দেশ করবে এবং দ্বিতীয়  Value টি  left and right প্যাডিং Value নির্দেশ করবে। মনে রাখতে হবে সাধারনত প্যাডিং Value টি  top দিয়ে শুরু হয় এবং clockwise ভাবে এটি left  এ শেষ হয়। প্যাডিং Value  এর ধারাবাহিকতা হল top, right, bottom এবং left
p {padding: 5px 15px; border: 1px solid black;}
h5{padding: 0px 5px 10px 3px; border: 1px solid red;}
সিএসএস Margin:w3bay.com
সিএসএস Margins  প্রায় সিএসএস প্যাডিং attribute এর মত। শুধু একটা গুরুত্বপূর্ন পাথর্ক্য হচ্ছে:Margin বলতে এইচটিএমএল এলিমেন্ট এর border এর  চারপাশের অংশকে বোঝায় আর প্যাডিং  বলতে border এর ভিতরের অংশকে বোঝায়। প্যাডিং এর মত Margin এর Value সেট করা যায়।
p {margin: 5px; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
সিএসএস Margin: 1 Value
এটা সিএসএস প্যাডিং: 1 Value এর মত
<b> </b>w3bay.com
p {margin: 2%; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
সিএসএস Margin: margin-(direction):
এটা সিএসএস প্যাডিং: padding-(direction) এর মত ।
p {margin-left: 5px; border: 1px solid black; }
h5{margin-top: 0px; margin-right: 2px; margin-bottom: 13px; margin-left: 21px; border: 1px solid red; }w3bay.com
সিএসএস Margin: 4 Values
এটা সিএসএস প্যাডিং: 2 & 4 Values এর মত
p {margin: 5px 15px; border: 1px solid black;}
h5{margin: 0px 5px 10px 3px; border: 1px solid red;}

সিএসএস বর্ডার টিউটোরিয়াল (CSS Border)
এইচটিএমএল এলিমেন্টs এর চারপাশে যে বর্ডার দেখা যায় তা সিএসএস বর্ডার এর মাধ্যমে সম্পুর্নভাবে customize করা যায়। সিএসএস বর্ডার এর মাধ্যমে বর্ডার এর স্টাইল পরিবর্তন করা যায়।
বর্ডার Style Types: অসংখ্য প্রকারের বর্ডার Style রয়েছে যা আপনি আপনার পছন্দমত বিভিন্ন ধরনের বর্ডার তৈরী করতে পারেন।w3bay.com
এই টিউটোরিয়ালে সিএসএস ক্লাস ব্যবহার করেছি,ক্লাস সমন্ধে জনা না থাকলে আগে আমাদের সিএসএস ক্লাস টিউটোরিয়ালটি পরে আসুন।
p.solid {border-style: solid; }w3bay.com
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }w3bay.com
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }
বর্ডার Width:w3bay.com
বর্ডার-width attribute এর সাহায্যে বর্ডার এর পুরুত্ব পরিবর্তন করা যায়। বিভিন্ন key terms বা ভেলু দিয়ে বর্ডার-width নির্দিষ্ট করা যায়। বিভিন্ন term ব্যবহার করা যেতে পারে যেমন thin, medium, thick ইত্যাদি।w3bay.com
table { border-width: 7px; border-style: outset; }
td { border-width: medium; border-style: outset; }
p { border-width: thick; border-style: solid; }
বর্ডার Color:w3bay.com
border-color attribute এর মাধ্যমে আপনি পছন্দমত color combination করে বর্ডারকে দৃষ্টি নন্দন করে তুলতে পারেন।w3bay.com
table { border-color: rgb( 100, 100, 255); border-style: dashed; }
 td { border-color: #FFBD32; border-style: ridge; }
 p { border-color: blue; border-style: solid; }


সিএসএস লিস্ট টিউটোরিয়াল (CSS List)
লিস্টমুলত দুই প্রকার যথা:  unordered এবং  ordered সিএসএস দিয়ে লিস্ট কে এইচটিএমএল হতে অনেক বেশি customize করা যায়। এমনকি image  কে bullet points হিসাবে unordered লিস্ট এর জন্য ব্যবহার করা যায়।w3bay.com
সিএসএস লিস্ট Style Type:
আপনি যদি default number এর ordered লিস্ট বা unordered লিস্ট এর  bullets/discs হতে ভিন্ন স্টাইল ব্যবহার  করতে চান তাহলে আপনি লিস্ট এর জন্য  বিভিন্ন ধরনের স্টাইল ব্যবহার করতে  পারেন। নিচে বিভিন্ন স্টাইল দেয়া হলো:w3bay.com
১. Unordered list styles: square, circle, disc (default), এবং none
২.  Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), এবং  none w3bay.com
ol { list-style-type: upper-roman; }
ul { list-style-type: circle; }w3bay.com

সিএসএস লিস্ট ইমেজের সাথে:
আমরা আগেই বলেছি  normal bullet এর পরিবর্তে image  কে  ব্যবহার করা যায়।
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }
সবচেয়ে ভাল হয় Unordered লিস্ট  এর ক্ষেত্রে  image  কে ব্যবহার করা।
সিএসএস লিস্ট Position:w3bay.com
list-style-position এর ভেলু  inside দিলে তখন লিস্টগুলো মার্জিন হতে ভিতরের দিকে থাকবে আর Outside দিলে normal লিস্ট Position এ থাকবে। Outside ভেলুটি একটি default setting
ul { list-style-position: inside; }
ol { list-style-position: outside; }
লিস্ট:সব একটাতেw3bay.com
এই  list-style-type এর মাধ্যমে এমন একটা ব্যবস্থা করা যায় যখন আপনার list-style image লোড নিবে না তখন অন্য list-style দেখাবে।w3bay.com

ul { list-style: upper-roman inside url("http://www.example.com/notHere.gif");}

0 comments:

Post a Comment

All Time Most Readable Post

Featured Post

Basic SEO Tutorial for Beginners, Basic SEO Tutorial. শিক্ষানবিশদের জন্য বেসিক এসইও টিউটোরিয়াল?

Basic SEO Tutorial for Beginners Though some try to categorise  SEO  as a science, the reality is that SEO is as much art as it is sc...

onpage seo