ডেভসংকেত

সিএসএস

সিএসএস এর মাধ্যমে ওয়েব পেইজের লেআউট ডিজাইন ও ওয়েব ব্রাউজারে ডকুমেন্ট কিভাবে প্রদর্শন হবে তা নির্ধারন করা হয়।

কন্ট্রিবিউটর

  • BahauddinChishte
  • HridoyHazard
  • iamraufu
  • tanjinamumu
  • sabbirshawon
  • asifadib

শেয়ার করুন

প্রাথমিক ধারণা

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

    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;}

ব্যাকগ্রাউন্ড

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

    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);

গুগলে CSS প্রপারটিজ কিভাবে সার্চ করবো? (How to Google CSS properties?)

  • আমরা নিয়মিত 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

ডেভসংকেত সম্পর্কে

ডেভসংকেত এর লক্ষ্য হচ্ছে বাংলাতে একটা বড় চিটশিটের ভান্ডার গড়ে তোলা। এটা সম্পূর্ণ স্বাধীন এবং ওপেন সোর্স গিটহাব অর্গানাইজেশন।

স্পন্সর