CSS চিটশিট

CSS হলো HTML এলিমেন্টের Design এবং Layout নিয়ন্ত্রণ করার জন্য ব্যবহৃত একটি স্টাইলিং ভাষা। এই চিটশিটে CSS-এর গুরুত্বপূর্ণ প্রোপার্টি এবং তাদের ব্যবহার ব্যাখ্যা করা হয়েছে।

১. CSS-এর মৌলিক গঠন

CSS তিনভাবে যোগ করা যায়:

ইনলাইন: HTML ট্যাগে style অ্যাট্রিবিউট ব্যবহার করে।
ইন্টারনাল: <style> ট্যাগে HTML ফাইলের মধ্যে।
এক্সটারনাল: আলাদা .css ফাইলে।

উদাহরণ:

ইনলাইন

<p style="color: blue;">এটি নীল টেক্সট</p>

ইন্টারনাল

<style>
    p {
        color: green;
    }
</style>

এক্সটারনাল

<link rel="stylesheet" href="styles.css">

/* styles.css */
p {
    color: red;
}

২. CSS সিলেক্টর

CSS প্রোপার্টি প্রয়োগ করতে সিলেক্টর ব্যবহার করা হয়।

সিলেক্টর	বর্ণনা	উদাহরণ
এলিমেন্ট	নির্দিষ্ট ট্যাগ সিলেক্ট করে।	`p { color: blue; }`
`#id`	আইডি দিয়ে সিলেক্ট করে।	`#header { font-size: 20px; }`
`.class`	ক্লাস দিয়ে সিলেক্ট করে।	`.intro { margin: 10px; }`
`*`	সব এলিমেন্ট সিলেক্ট করে।	`* { margin: 0; }`
`tag.class`	নির্দিষ্ট ক্লাসের ট্যাগ।	`p.intro { color: red; }`
`tag, tag`	একাধিক এলিমেন্ট।	`h1, h2 { font-weight: bold; }`
`tag tag`	নেস্টেড এলিমেন্ট।	`div p { font-size: 16px; }`
`>`	সরাসরি চাইল্ড।	`div > p { color: green; }`
`+`	পাশের ভাই।	`h1 + p { margin-top: 10px; }`
`~`	পরবর্তী সব ভাই।	`h1 ~ p { color: gray; }`

৩. CSS প্রোপার্টি (বিভাগ অনুযায়ী)

৩.১ রঙ এবং ব্যাকগ্রাউন্ড

প্রোপার্টি	বর্ণনা	উদাহরণ
`color`	টেক্সটের রঙ।	`color: red;`
`background`	ব্যাকগ্রাউন্ড (রঙ, ছবি, ইত্যাদি)।	`background: blue url('bg.jpg');`
`background-color`	ব্যাকগ্রাউন্ডের রঙ।	`background-color: #f0f0f0;`
`background-image`	ব্যাকগ্রাউন্ড ছবি।	`background-image: url('img.jpg');`
`background-repeat`	ছবির পুনরাবৃত্তি।	`background-repeat: no-repeat;`
`background-position`	ছবির অবস্থান।	`background-position: center;`
`background-size`	ছবির আকার।	`background-size: cover;`
`opacity`	স্বচ্ছতা (০-১)।	`opacity: 0.5;`

৩.২ টেক্সট এবং ফন্ট

প্রোপার্টি	বর্ণনা	উদাহরণ
`font-family`	ফন্টের ধরন।	`font-family: Arial, sans-serif;`
`font-size`	ফন্টের আকার।	`font-size: 16px;`
`font-weight`	ফন্টের গাঢ়তা।	`font-weight: bold;`
`font-style`	ফন্টের স্টাইল।	`font-style: italic;`
`text-align`	টেক্সটের অ্যালাইনমেন্ট।	`text-align: center;`
`text-decoration`	টেক্সটের সজ্জা।	`text-decoration: underline;`
`line-height`	লাইনের উচ্চতা।	`line-height: 1.5;`
`letter-spacing`	অক্ষরের মধ্যে ফাঁক।	`letter-spacing: 2px;`
`word-spacing`	শব্দের মধ্যে ফাঁক।	`word-spacing: 5px;`
`text-transform`	টেক্সটের কেস।	`text-transform: uppercase;`

৩.৩ বক্স মডেল

প্রোপার্টি	বর্ণনা	উদাহরণ
`width`	প্রস্থ।	`width: 200px;`
`height`	উচ্চতা।	`height: 100px;`
`margin`	বাইরের ফাঁক।	`margin: 10px;`
`padding`	ভিতরের ফাঁক।	`padding: 15px;`
`border`	সীমানা।	`border: 1px solid black;`
`border-radius`	সীমানার বক্রতা।	`border-radius: 5px;`
`box-sizing`	বক্সের আকার গণনা।	`box-sizing: border-box;`

শর্টহ্যান্ড:

margin: 10px 20px 30px 40px; (উপর, ডান, নিচ, বাম)
padding: 5px 10px; (উপর-নিচ, ডান-বাম)

৩.৪ লেআউট এবং পজিশন

প্রোপার্টি	বর্ণনা	উদাহরণ
`display`	প্রদর্শনের ধরন।	`display: block;`
`position`	অবস্থানের ধরন।	`position: absolute;`
`top`	উপর থেকে দূরত্ব।	`top: 10px;`
`right`	ডান থেকে দূরত্ব।	`right: 20px;`
`bottom`	নিচ থেকে দূরত্ব।	`bottom: 10px;`
`left`	বাম থেকে দূরত্ব।	`left: 15px;`
`float`	এলিমেন্ট ভাসানো।	`float: left;`
`clear`	ফ্লোট পরিষ্কার।	`clear: both;`
`z-index`	স্তরের ক্রম।	`z-index: 10;`

display মান:

block, inline, inline-block, none, flex, grid

৩.৫ ফ্লেক্সবক্স

প্রোপার্টি	বর্ণনা	উদাহরণ
`display: flex`	ফ্লেক্স কনটেইনার।	`display: flex;`
`flex-direction`	আইটেমের দিক।	`flex-direction: row;`
`justify-content`	আইটেমের অনুভূমিক অ্যালাইনমেন্ট।	`justify-content: center;`
`align-items`	আইটেমের উল্লম্ব অ্যালাইনমেন্ট।	`align-items: center;`
`flex-wrap`	আইটেম মোড়ানো।	`flex-wrap: wrap;`

উদাহরণ:

.container {
    display: flex;
    justify-content: space-between;
}

৩.৬ গ্রিড

প্রোপার্টি	বর্ণনা	উদাহরণ
`display: grid`	গ্রিড কনটেইনার।	`display: grid;`
`grid-template-columns`	কলামের সংজ্ঞা।	`grid-template-columns: 1fr 1fr;`
`grid-gap`	গ্রিডের ফাঁক।	`grid-gap: 10px;`
`grid-column`	আইটেমের কলাম স্প্যান।	`grid-column: 1 / 3;`

উদাহরণ:

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

৩.৭ ট্রানজিশন এবং অ্যানিমেশন

প্রোপার্টি	বর্ণনা	উদাহরণ
`transition`	পরিবর্তনের সময়।	`transition: all 0.3s ease;`
`transform`	রূপান্তর (ঘোরানো, স্কেল)।	`transform: rotate(45deg);`
`animation`	অ্যানিমেশন।	`animation: spin 2s infinite;`

উদাহরণ:

.box {
    transition: background-color 0.5s;
}
.box:hover {
    background-color: yellow;
}

৩.৮ অন্যান্য

প্রোপার্টি	বর্ণনা	উদাহরণ
`cursor`	মাউস কার্সর।	`cursor: pointer;`
`overflow`	কনটেন্ট ওভারফ্লো।	`overflow: scroll;`
`box-shadow`	বক্সের ছায়া।	`box-shadow: 2px 2px 5px gray;`
`filter`	ভিজ্যুয়াল ফিল্টার।	`filter: blur(5px);`

৪. CSS ইউনিট

ইউনিট	বর্ণনা
`px`	পিক্সেল (নির্দিষ্ট)।
`%`	শতাংশ (প্যারেন্টের তুলনায়)।
`em`	প্যারেন্ট ফন্টের আকারের তুলনায়।
`rem`	রুট ফন্টের আকারের তুলনায়।
`vw`	ভিউপোর্ট প্রস্থের শতাংশ।
`vh`	ভিউপোর্ট উচ্চতার শতাংশ।

৫. উদাহরণ: একটি সম্পূর্ণ স্টাইল

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f0f0;
}
 
h1 {
    color: #333;
    text-align: center;
}
 
.container {
    display: flex;
    justify-content: center;
    gap: 10px;
}
 
.box {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 10px;
    transition: transform 0.3s;
}
 
.box:hover {
    transform: scale(1.1);
}

On this page