সিএসএস

সিনট্যাক্স সিলেক্টর

selector{ property: value;}

External CSS ফাইল যুক্ত করুতে

<link rel='stylesheet' href='style.css'>

Internal CSS ফাইল যুক্ত করুতে

<style> body {background: blue;}</style>

Inline CSS লিখতে

<h1 style='color:blue;'>A Blue Heading</h1>

সকল ইলিমেন্ট সিলেক্ট করতে

* {property: value;}

সকল আইডি সিলেক্ট করতে

#id {property: value;}

সকল ক্লাস সিলেক্ট করতে

.class {property: value;}

আমরা নিয়মিত Google ব্যবহার করি CSS বৈশিষ্ট্য অনুসন্ধান করতে যা আমরা জানি না বা মনে নেই। Google ব্যবহার করার সময়, আপনি যা করার চেষ্টা করছেন তা অনুসন্ধান করুন। উদাহরণ:

'css rounded corners'
,'css text italic',
'css adjust space between lines'

ফন্ট প্রপার্টি

font-style | font-variant | font-weight | font-size | line-height | font-family | font-stretch

ফন্ট স্টাইল ভ্যালু

normal | italic | oblique  | initial | inherit

ফন্ট ভ্যারিয়ান্ট ভ্যালু

normal | small-caps | initial | inherit

ফন্ট ওয়েট ভ্যালু

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit

ফন্ট সাইজ ভ্যালু

medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit | percentage

লাইন হাইট ভ্যালু

normal | number | length | initial | inherit

ফন্ট ফ্যামিলি

font-family: Arial, Helvetica, sans-serif;

ফন্ট স্ট্রেচ

ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit

body article p{ color:red } এখানে সর্বশেষ অর্থাৎ p ইলিমেন্ট কে সিলেক্ট করা হয়েছে যার parent 'artice' এবং তার parent 'body' ।

চাইল্ড কম্বিনেটর

ul > li {
border-top: 5px solid red;
}
} এখানে শুধুমাত্র ul এর চাইল্ড li গুলোকে সিলেক্ট করা হয়েছে।

ইমিডিয়েট সিব্লিং কম্বিনেটর

h1 + p {
color: red;
}
এখানে শুধুমাত্র h1 এর ইমিডিয়েট সিবলিং p কে সিলেক্ট করা হয়েছে।

পরবর্তী সিব্লিং সিলেক্টর

 h1 ~ p {
color: red;
}
এখানে h1 এর পরবর্তী সিবলিং p গুলোকে সিলেক্ট করা হয়েছে। এখানে শুধু ইমিডীয়েট সিব্লিং কেই সিলেক্ট করবে না বরং পরবর্তী সিবলিং গুলোকেও সিলেক্ট করবে।

HTML ইলিমেন্টস গুলোকে CSS এর সাহায্যে সিলেক্ট করার পদ্ধতি কে বলে সিলেক্টর এবং প্রতিটা কোনো ইলিমেন্টসের জন্য লিখিত CSS কে CSS rule বলা হয়

selector{ property: value;}

টাইপ সিলেক্টর কোনো Html tag বা elements দিয়ে সিলেক্ট করাকেই টাইপ সিলেক্টর বলা হয়। এটাকে অনেকে ট্যাগ সিলেক্টর ও বলা হয়ে থাকে

span {
 background-color: yellow;
} 
h1 {
color: rebeccapurple;
}

Id সিলেক্টর কোনো ইলিমেন্ট কে id দিয়ে সিলেক্ট করাই id সিলেক্টর এর কাজ । # দিয়ে এই সিনট্যাক্স ব্যাবহার করতে হয়

<h1 id='heading'>ID selector</h1>

#heading {
 color: red;
}

class সিলেক্টর কোনো ইলিমেন্ট কে class দিয়ে সিলেক্ট করাই class সিলেক্টর এর কাজ । . দিয়ে এই সিনট্যাক্স ব্যাবহার করতে হয়

<h1 class='heading'>class selector</h1>
<h2 class='heading'> class selector 2 </h2>
.heading {
 color: red;
}

universal Selector সকল ইলিমেন্ট সিলেক্ট করতে * ব্যাবহার করা হয়। এটা অনেকে স্টার সিলেক্টর ও বলা হয়ে থাকে।

 * {
 color: red;
}

Attribute Selector কোনো ইলিমেন্ট এর কোনো এট্রিবিউট এর উপর ভিত্তি করে সিলেক্ট করাকে এট্রিবিউট সিলেক্টর বলা হয়। কয়েক ধরনের এট্রিবিউট সিলেক্টর আছে।

<a href='https://www.example.com' title='Example Link 1'>Link 1</a>
	 a[title] {
color: blue;
text-decoration: underline;
}

এট্রিবিউট ভ্যালুর উপর নির্ভর করে সিলেক্ট করা

  <a href='https://example.com'>Visit Example</a>
a[href='https://example.com'] {
color: green;
font-weight:bold;
}

এট্রিবিউট ভ্যালু স্পেস সেপারেটেড বা লিস্ট আকারে থাকলে তার উপর ভিত্তি করে সিলেক্ট করা

  <p class='important special'>This is an important and special paragraph.</p>
p[class~='special'] {
color: red;
}

এট্রিবিউট ভ্যালু আংশিক এর উপর নির্ভর সিলেক্ট করা

    <div lang='zh'>This is content in Chinese (zh).</div>
<div lang='zh-HK'>This is content in Chinese (zh-HK).</div>
<div lang='en-US'>This is content in English (en-US).</div>
p[class।='zh'] {
color: red;
}
এখানে শুধু প্রথম ২ টা div সিলেক্ট হবে।

এট্রিবিউট এর যেকোনো ভ্যালুর জন্য *

   <p class='important special'>This is an important and special paragraph.</p>
p[class*='sp'] {
color: red;
}
 এটা এখনো p element কে সিলেক্ট করবে 

এট্রিবিউট ভ্যালুর প্রথম অংশের সাহায্যে সিলেক্ট করা

   <p class='important special'>This is an important and special paragraph.</p>
p[class^='important'] {
color: red;
}
  

এট্রিবিউট ভ্যালুর শেষ অংশের সাহায্যে সিলেক্ট করা

   <p class='important special'>This is an important and special paragraph.</p>
p[class$='special'] {
color: red;
}
  

কেইস ইনসেনসেটিভ করে সিলেক্ট করা

   <p class='important Special'>This is an important and special paragraph.</p>
p[class$='special ' i] {
color: red;
}
  

ব্যাকগ্রাউন্ড প্রপার্টিস

background | background-color | background-image | background-position | background-size | background-attachment | background-repeat |  background-clip | background-origin

ব্যাকগ্রাউন্ড কালার ভ্যালু

Color Code - #fffff, #000000 | transparent | Color Name - White, Red, etc

ব্যাকগ্রাউন্ড ইমেজ ভ্যালু

url | gradient | none

ব্যাকগ্রাউন্ড পজিশন

top | left | center | bottom | right | top center | top left | top right | bottom left | bottom right | bottom center | center left | center center | center right

ব্যাকগ্রাউন্ড সাইজ

auto | length | percentage | cover | contain | initial | inherit

ব্যাকগ্রাউন্ড এটাচমেন্ট

scroll | fixed | local | initial | inherit 

ব্যাকগ্রাউন্ড রিপিট ভ্যালু

repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit

ব্যাকগ্রাউন্ড ক্লিপ ভ্যালু - ব্যবহার কালার ও ইমেজ

border-box | padding-box | content-box | initial | inherit

ব্যাকগ্রাউন্ড অরিজিন ভ্যালু - ব্যবহার ব্যাকগ্রাউন্ড ইমেজ

padding-box | border-box | content-box | initial | inherit 

ট্রানজিশন প্রপার্টি

transition | transition-delay | transition-duration | transition-property | transition-timing-function

ট্রানজিশন ডিলে ভ্যালু

time (1s, 1ms etc) - কত সময় পর ট্রানজিশন ইফেক্ট শুরু হবে।

ট্রানজিশন ডিউরেশন ভ্যালু

time (2s, 2ms etc) - কত সময় পর্যন্ত ট্রানজিশন ইফেক্ট চলবে।

ট্রানজিশন প্রপার্টি ভ্যালু

none | all - অল এর মাধ্যমে সকল ট্রানজিশন ইফেক্ট কাজ করবে।

ট্রানজিশন-টাইমিং-ফাংশন ভ্যালু

linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit

ট্রান্সফর্ম থ্রিডি

transform: translate3d(0, -350px, 0);

ট্রান্সফর্ম স্কেল

transform: scale(1, 1);