{
    "id": "css",
    "title": "সিএসএস",
    "slug": "css",
    "description": "সিএসএস এর মাধ্যমে ওয়েব পেইজের লেআউট ডিজাইন ও ওয়েব ব্রাউজারে ডকুমেন্ট কিভাবে প্রদর্শন হবে তা নির্ধারন করা হয়।",
    "colorPref": "#264DE4",
    "contents": [
        {
            "title": "প্রাথমিক ধারণা",
            "items": [
                {
                    "definition": "সিনট্যাক্স সিলেক্টর",
                    "code": "selector{ property: value;}"
                },
                {
                    "definition": "External CSS ফাইল যুক্ত করুতে",
                    "code": "<link rel='stylesheet' href='style.css'>"
                },
                {
                    "definition": "Internal CSS ফাইল যুক্ত করুতে",
                    "code": "<style> body {background: blue;}</style>"
                },
                {
                    "definition": "Inline CSS লিখতে",
                    "code": "<h1 style='color:blue;'>A Blue Heading</h1>"
                },
                {
                    "definition": "সকল ইলিমেন্ট সিলেক্ট করতে",
                    "code": "* {property: value;}"
                },
                {
                    "definition": "সকল আইডি সিলেক্ট করতে",
                    "code": "#id {property: value;}"
                },
                {
                    "definition": "সকল ক্লাস সিলেক্ট করতে",
                    "code": ".class {property: value;}"
                }
            ]
        },
        {
            "title": "সিলেক্টর ট্রিক্স",
            "items": [
                {
                    "definition": "HTML ইলিমেন্টস গুলোকে CSS এর সাহায্যে সিলেক্ট করার পদ্ধতি কে বলে সিলেক্টর এবং প্রতিটা কোনো ইলিমেন্টসের জন্য লিখিত CSS কে CSS rule বলা হয়",
                    "code": "selector{ property: value;}"
                },
                {
                    "definition": "টাইপ সিলেক্টর\n কোনো Html tag বা elements দিয়ে সিলেক্ট করাকেই টাইপ সিলেক্টর বলা হয়। এটাকে অনেকে ট্যাগ সিলেক্টর ও বলা হয়ে থাকে",
                    "code": "span {\n background-color: yellow;\n} \nh1 {\ncolor: rebeccapurple;\n}"
                },
                {
                    "definition": "Id সিলেক্টর\n কোনো ইলিমেন্ট কে id দিয়ে সিলেক্ট করাই id সিলেক্টর এর কাজ । # দিয়ে এই সিনট্যাক্স ব্যাবহার করতে হয় ",
                    "code": "<h1 id='heading'>ID selector</h1>\n\n#heading {\n color: red;\n}"
                },
                {
                    "definition": "class সিলেক্টর \n কোনো ইলিমেন্ট কে class দিয়ে সিলেক্ট করাই class সিলেক্টর এর কাজ । . দিয়ে এই সিনট্যাক্স ব্যাবহার করতে হয় ",
                    "code": "<h1 class='heading'>class selector</h1>\n<h2 class='heading'> class selector 2 </h2>\n.heading {\n color: red;\n}"
                },
                {
                    "definition": "universal Selector \n সকল ইলিমেন্ট সিলেক্ট করতে * ব্যাবহার করা হয়। এটা অনেকে স্টার সিলেক্টর ও বলা হয়ে থাকে।",
                    "code": " * {\n color: red;\n}"
                },
                {
                    "definition": "Attribute Selector \n কোনো ইলিমেন্ট এর কোনো এট্রিবিউট এর উপর ভিত্তি করে সিলেক্ট করাকে এট্রিবিউট সিলেক্টর বলা হয়। কয়েক ধরনের এট্রিবিউট সিলেক্টর আছে।",
                    "code": "<a href='https://www.example.com' title='Example Link 1'>Link 1</a>\n\t a[title] {\ncolor: blue;\ntext-decoration: underline;\n}"
                },
                {
                    "definition": "এট্রিবিউট ভ্যালুর উপর নির্ভর করে সিলেক্ট করা",
                    "code": "  <a href='https://example.com'>Visit Example</a>\na[href='https://example.com'] {\ncolor: green;\nfont-weight:bold;\n}"
                },
                {
                    "definition": "এট্রিবিউট ভ্যালু স্পেস সেপারেটেড বা লিস্ট আকারে থাকলে তার উপর ভিত্তি করে সিলেক্ট করা",
                    "code": "  <p class='important special'>This is an important and special paragraph.</p>\np[class~='special'] {\ncolor: red;\n}"
                },
                {
                    "definition": "এট্রিবিউট ভ্যালু আংশিক এর উপর নির্ভর সিলেক্ট করা ",
                    "code": "    <div lang='zh'>This is content in Chinese (zh).</div>\n<div lang='zh-HK'>This is content in Chinese (zh-HK).</div>\n<div lang='en-US'>This is content in English (en-US).</div>\np[class।='zh'] {\ncolor: red;\n}\nএখানে শুধু প্রথম ২ টা div সিলেক্ট হবে।"
                },
                {
                    "definition": "এট্রিবিউট এর যেকোনো ভ্যালুর জন্য *",
                    "code": "   <p class='important special'>This is an important and special paragraph.</p>\np[class*='sp'] {\ncolor: red;\n}\n এটা এখনো p element কে সিলেক্ট করবে "
                },
                {
                    "definition": "এট্রিবিউট ভ্যালুর প্রথম অংশের সাহায্যে সিলেক্ট করা ",
                    "code": "   <p class='important special'>This is an important and special paragraph.</p>\np[class^='important'] {\ncolor: red;\n}\n  "
                },
                {
                    "definition": "এট্রিবিউট ভ্যালুর শেষ অংশের সাহায্যে সিলেক্ট করা ",
                    "code": "   <p class='important special'>This is an important and special paragraph.</p>\np[class$='special'] {\ncolor: red;\n}\n  "
                },
                {
                    "definition": "কেইস ইনসেনসেটিভ করে সিলেক্ট করা",
                    "code": "   <p class='important Special'>This is an important and special paragraph.</p>\np[class$='special ' i] {\ncolor: red;\n}\n  "
                }
            ]
        },
        {
            "title": "গুগলে CSS প্রপারটিজ কিভাবে সার্চ করবো? (How to Google CSS properties?)",
            "items": [
                {
                    "definition": "আমরা নিয়মিত Google ব্যবহার করি CSS বৈশিষ্ট্য অনুসন্ধান করতে যা আমরা জানি না বা মনে নেই। Google ব্যবহার করার সময়, আপনি যা করার চেষ্টা করছেন তা অনুসন্ধান করুন। উদাহরণ: ",
                    "code": "'css rounded corners'\n,'css text italic',\n'css adjust space between lines'"
                }
            ]
        },
        {
            "title": "ব্যাকগ্রাউন্ড",
            "items": [
                {
                    "definition": "ব্যাকগ্রাউন্ড প্রপার্টিস",
                    "code": "background | background-color | background-image | background-position | background-size | background-attachment | background-repeat |  background-clip | background-origin"
                },
                {
                    "definition": "ব্যাকগ্রাউন্ড কালার ভ্যালু",
                    "code": "Color Code - #fffff, #000000 | transparent | Color Name - White, Red, etc"
                },
                {
                    "definition": "ব্যাকগ্রাউন্ড ইমেজ ভ্যালু",
                    "code": "url | gradient | none"
                },
                {
                    "definition": "ব্যাকগ্রাউন্ড পজিশন",
                    "code": "top | left | center | bottom | right | top center | top left | top right | bottom left | bottom right | bottom center | center left | center center | center right"
                },
                {
                    "definition": "ব্যাকগ্রাউন্ড সাইজ",
                    "code": "auto | length | percentage | cover | contain | initial | inherit"
                },
                {
                    "definition": "ব্যাকগ্রাউন্ড এটাচমেন্ট",
                    "code": "scroll | fixed | local | initial | inherit "
                },
                {
                    "definition": "ব্যাকগ্রাউন্ড রিপিট ভ্যালু",
                    "code": "repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit"
                },
                {
                    "definition": "ব্যাকগ্রাউন্ড ক্লিপ ভ্যালু - ব্যবহার কালার ও ইমেজ",
                    "code": "border-box | padding-box | content-box | initial | inherit"
                },
                {
                    "definition": "ব্যাকগ্রাউন্ড অরিজিন ভ্যালু - ব্যবহার ব্যাকগ্রাউন্ড ইমেজ",
                    "code": "padding-box | border-box | content-box | initial | inherit "
                }
            ]
        },
        {
            "title": "ফন্ট বা টাইপোগ্রাফি",
            "items": [
                {
                    "definition": "ফন্ট প্রপার্টি",
                    "code": "font-style | font-variant | font-weight | font-size | line-height | font-family | font-stretch"
                },
                {
                    "definition": "ফন্ট স্টাইল ভ্যালু",
                    "code": "normal | italic | oblique  | initial | inherit"
                },
                {
                    "definition": "ফন্ট ভ্যারিয়ান্ট ভ্যালু",
                    "code": "normal | small-caps | initial | inherit"
                },
                {
                    "definition": "ফন্ট ওয়েট ভ্যালু",
                    "code": "normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit"
                },
                {
                    "definition": "ফন্ট সাইজ ভ্যালু",
                    "code": "medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit | percentage"
                },
                {
                    "definition": "লাইন হাইট ভ্যালু",
                    "code": "normal | number | length | initial | inherit"
                },
                {
                    "definition": "ফন্ট ফ্যামিলি",
                    "code": "font-family: Arial, Helvetica, sans-serif;"
                },
                {
                    "definition": "ফন্ট স্ট্রেচ",
                    "code": "ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit"
                }
            ]
        },
        {
            "title": "ট্রানজিশন এবং ট্রান্সফর্ম",
            "items": [
                {
                    "definition": "ট্রানজিশন প্রপার্টি",
                    "code": "transition | transition-delay | transition-duration | transition-property | transition-timing-function"
                },
                {
                    "definition": "ট্রানজিশন ডিলে ভ্যালু",
                    "code": "time (1s, 1ms etc) - কত সময় পর ট্রানজিশন ইফেক্ট শুরু হবে।"
                },
                {
                    "definition": "ট্রানজিশন ডিউরেশন ভ্যালু",
                    "code": "time (2s, 2ms etc) - কত সময় পর্যন্ত ট্রানজিশন ইফেক্ট চলবে।"
                },
                {
                    "definition": "ট্রানজিশন প্রপার্টি ভ্যালু",
                    "code": "none | all - অল এর মাধ্যমে সকল ট্রানজিশন ইফেক্ট কাজ করবে।"
                },
                {
                    "definition": "ট্রানজিশন-টাইমিং-ফাংশন ভ্যালু",
                    "code": "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"
                },
                {
                    "definition": "ট্রান্সফর্ম থ্রিডি",
                    "code": "transform: translate3d(0, -350px, 0);"
                },
                {
                    "definition": "ট্রান্সফর্ম স্কেল",
                    "code": "transform: scale(1, 1);"
                }
            ]
        },
        {
            "title": "কম্বিনেটরস ",
            "items": [
                {
                    "definition": "body article p{\ncolor:red\n}\n\t এখানে সর্বশেষ অর্থাৎ p ইলিমেন্ট কে সিলেক্ট করা হয়েছে যার parent 'artice' এবং তার parent 'body' ।"
                },
                {
                    "definition": "চাইল্ড কম্বিনেটর",
                    "code": "ul > li {\nborder-top: 5px solid red;\n}\n} এখানে শুধুমাত্র ul এর চাইল্ড li গুলোকে সিলেক্ট করা হয়েছে।"
                },
                {
                    "definition": "ইমিডিয়েট সিব্লিং কম্বিনেটর",
                    "code": "h1 + p {\ncolor: red;\n}\nএখানে শুধুমাত্র h1 এর ইমিডিয়েট সিবলিং p কে সিলেক্ট করা হয়েছে।"
                },
                {
                    "definition": "পরবর্তী সিব্লিং সিলেক্টর",
                    "code": " h1 ~ p {\ncolor: red;\n}\nএখানে h1 এর পরবর্তী সিবলিং p গুলোকে সিলেক্ট করা হয়েছে। এখানে শুধু ইমিডীয়েট সিব্লিং কেই সিলেক্ট করবে না বরং পরবর্তী সিবলিং গুলোকেও সিলেক্ট করবে।"
                }
            ]
        }
    ]
}