সিএসএস এর মাধ্যমে ওয়েব পেইজের লেআউট ডিজাইন ও ওয়েব ব্রাউজারে ডকুমেন্ট কিভাবে প্রদর্শন হবে তা নির্ধারন করা হয়।
সিনট্যাক্স সিলেক্টর
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;}
ফন্ট প্রপার্টি
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
ব্যাকগ্রাউন্ড প্রপার্টিস
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);