English: The color property sets the color of the text within an element. This can be defined using color names like red, green, blue, or hexadecimal values like #ff0000.
Bangla: color প্রপার্টি একটি উপাদানের মধ্যে লেখার রঙ নির্ধারণ করে। এটি রঙের নাম যেমন লাল, সবুজ, নীল, অথবা হেক্সাডেসিমাল মান যেমন #ff0000 ব্যবহার করে সেট করা যেতে পারে।
Why Use It (English): The color property is important because it makes text visible and readable. By adjusting text color, you can improve the design and emphasize certain parts of the content.
Why Use It (Bangla): color প্রপার্টি গুরুত্বপূর্ণ কারণ এটি লেখাকে দৃশ্যমান এবং পাঠযোগ্য করে তোলে। লেখার রঙ সমন্বয় করে, আপনি ডিজাইন উন্নত করতে পারেন এবং কনটেন্টের কিছু অংশে গুরুত্ব আরোপ করতে পারেন।
Example: color: red;
English: The font-size property defines the size of the text in an element. It can be specified in units like pixels (px), em (em), percentage (%), or rem (rem).
Bangla: font-size প্রপার্টি একটি উপাদানের মধ্যে লেখার আকার নির্ধারণ করে। এটি পিক্সেল (px), ইএম (em), শতাংশ (%), অথবা রেম (rem) এর মতো এককে নির্ধারণ করা যেতে পারে।
Why Use It (English): This property allows you to make text readable by adjusting its size. Too small or too large text can affect the readability and appearance of a website.
Why Use It (Bangla): এই প্রপার্টি আপনাকে লেখা পড়ার যোগ্য করতে সাহায্য করে তার আকার সমন্বয় করে। খুব ছোট বা খুব বড় লেখা ওয়েবসাইটের পড়ার যোগ্যতা এবং নান্দনিকতা প্রভাবিত করতে পারে।
Example: font-size: 20px;
English: The font-weight property specifies the thickness of the text. Values can be normal, bold, or a numeric value like 700 (bold).
Bangla: font-weight প্রপার্টি লেখার পুরুত্ব নির্ধারণ করে। এর মান হতে পারে normal, bold, অথবা সংখ্যা 700 (বোল্ড)।
Why Use It (English): This property is used to make the text bold or normal. Bold text is often used to highlight important information like headings or keywords.
Why Use It (Bangla): এই প্রপার্টি লেখা বোল্ড বা সাধারণ করার জন্য ব্যবহৃত হয়। বোল্ড লেখা সাধারণত গুরুত্বপূর্ণ তথ্য যেমন শিরোনাম বা মূল শব্দ হাইলাইট করতে ব্যবহৃত হয়।
Example: font-weight: bold;
English: The font-family property defines the font used for the text. Common examples include Arial, Times New Roman, Helvetica, and other web fonts.
Bangla: font-family প্রপার্টি লেখার জন্য ব্যবহৃত ফন্ট নির্ধারণ করে। সাধারণ উদাহরণগুলো হলো Arial, Times New Roman, Helvetica, এবং অন্যান্য ওয়েব ফন্ট।
Why Use It (English): The font-family property defines the style and appearance of text. It is important for the design and aesthetics of a website and can affect readability.
Why Use It (Bangla): font-family প্রপার্টি লেখার স্টাইল এবং চেহারা নির্ধারণ করে। এটি একটি ওয়েবসাইটের ডিজাইন এবং নান্দনিকতা জন্য গুরুত্বপূর্ণ এবং পড়ার যোগ্যতাকে প্রভাবিত করতে পারে।
Example: font-family: Arial, sans-serif;
English: The text-align property aligns text horizontally within an element. It can be set to values like left, right, center, or justify.
Bangla: text-align প্রপার্টি একটি উপাদানের মধ্যে লেখা অনুভূমিকভাবে সজ্জিত করে। এর মান হতে পারে left, right, center, বা justify।
Why Use It (English): The text-align property is used to position text in a container. It’s especially useful for titles or headings to create focus or structure in a webpage design.
Why Use It (Bangla): text-align প্রপার্টি লেখা একটি কন্টেইনারের মধ্যে সঠিকভাবে অবস্থান করার জন্য ব্যবহৃত হয়। এটি বিশেষভাবে শিরোনাম বা হেডিংসের জন্য উপকারী, যাতে একটি ওয়েবপেজ ডিজাইনে ফোকাস বা কাঠামো তৈরি করা যায়।
Example: text-align: center;
English: The line-height property controls the vertical spacing between lines of text. Increasing this value will give more space between lines, improving readability.
Bangla: line-height প্রপার্টি লেখার লাইনগুলির মধ্যে উল্লম্ব স্থান নিয়ন্ত্রণ করে। এই মানটি বাড়ালে লাইনের মধ্যে আরও স্থান তৈরি হয়, যা পড়ার যোগ্যতা উন্নত করে।
Why Use It (English): The line-height property is crucial for improving readability, especially for longer text or paragraphs. It prevents text from appearing too cramped and makes it easier to follow.
Why Use It (Bangla): line-height প্রপার্টি পড়ার যোগ্যতা উন্নত করতে অপরিহার্য, বিশেষ করে দীর্ঘ লেখার জন্য বা প্যারাগ্রাফে। এটি লেখাকে খুব সঙ্কুচিত হতে বাধা দেয় এবং পড়তে সহজ করে তোলে।
Example: line-height: 1.5;
English: The text-transform property is used to control the case of the text. It can be set to uppercase, lowercase, or capitalize.
Bangla: text-transform প্রপার্টি লেখার কেস নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি uppercase, lowercase, বা capitalize এ সেট করা যেতে পারে।
Why Use It (English): This property allows you to standardize the case of text, such as making all letters uppercase in headings, or capitalizing the first letter of each word.
Why Use It (Bangla): এই প্রপার্টি আপনাকে লেখার কেস মানকীকরণ করতে সাহায্য করে, যেমন শিরোনামে সমস্ত অক্ষর বড় করে দেওয়া, অথবা প্রতিটি শব্দের প্রথম অক্ষর বড় করা।
Example: text-transform: uppercase;
English: The text-decoration property adds decoration to text, like underlines, overlines, or strike-throughs.
Bangla: text-decoration প্রপার্টি লেখায় সজ্জা যোগ করে, যেমন আন্ডারলাইন, ওভারলাইন, বা স্ট্রাইক-থ্রু।
Why Use It (English): It is used to emphasize certain text or create links, such as underlining hyperlinks, making text look more interactive or noticeable.
Why Use It (Bangla): এটি কিছু লেখাকে গুরুত্ব দিতে বা লিঙ্ক তৈরি করতে ব্যবহৃত হয়, যেমন হাইপারলিঙ্কের আন্ডারলাইন করা, লেখাকে আরো ইন্টারঅ্যাকটিভ বা লক্ষ্যযোগ্য করতে।
Example: text-decoration: underline;
English: The letter-spacing property adjusts the space between characters in a text. You can increase or decrease the spacing for better visual effects.
Bangla: letter-spacing প্রপার্টি লেখার অক্ষরের মধ্যে স্থান সমন্বয় করে। আপনি এটি বাড়িয়ে বা কমিয়ে ভিজ্যুয়াল প্রভাব উন্নত করতে পারেন।
Why Use It (English): It is used to improve text legibility or to create a more stylized effect by adjusting the spacing between letters.
Why Use It (Bangla): এটি লেখার পড়ার যোগ্যতা উন্নত করতে বা অক্ষরের মধ্যে স্থান সমন্বয় করে আরও শৈল্পিক প্রভাব তৈরি করতে ব্যবহৃত হয়।
Example: letter-spacing: 1px;
English: The width property defines the width of an element. It can be specified in pixels (px), percentages (%), or auto.
Bangla: width প্রপার্টি একটি উপাদানের প্রস্থ নির্ধারণ করে। এটি পিক্সেল (px), শতাংশ (%), অথবা auto দিয়ে নির্ধারণ করা যেতে পারে।
Why Use It (English): The width property is important for controlling the layout and design of a page. It helps define how wide elements should be, allowing for a consistent, structured layout.
Why Use It (Bangla): width প্রপার্টি পৃষ্ঠার লেআউট এবং ডিজাইন নিয়ন্ত্রণ করতে গুরুত্বপূর্ণ। এটি উপাদানের প্রস্থ নির্ধারণ করতে সাহায্য করে, যাতে একটি সঙ্গতিপূর্ণ এবং সুশৃঙ্খল লেআউট তৈরি করা যায়।
Example: width: 100%;
English: The height property sets the height of an element. You can use units like px, em, %, or auto for this.
Bangla: height প্রপার্টি একটি উপাদানের উচ্চতা নির্ধারণ করে। এটি পিক্সেল (px), ইএম (em), শতাংশ (%), অথবা auto দিয়ে নির্ধারণ করা যেতে পারে।
Why Use It (English): The height property is used to control how tall an element is, allowing for better page structure and design. It ensures that elements have enough space and align correctly within the layout.
Why Use It (Bangla): height প্রপার্টি একটি উপাদানের উচ্চতা নিয়ন্ত্রণ করতে ব্যবহৃত হয়, যা আরও ভাল পৃষ্ঠার গঠন এবং ডিজাইন তৈরি করতে সাহায্য করে। এটি নিশ্চিত করে যে উপাদানগুলির যথেষ্ট স্থান রয়েছে এবং সঠিকভাবে লেআউটে সজ্জিত হয়।
Example: height: 200px;
English: The margin property sets the space outside an element, creating distance between the element and its surrounding elements. It can be set individually for each side (top, right, bottom, left) or as a shorthand for all sides.
Bangla: margin প্রপার্টি একটি উপাদানের বাইরের স্থান নির্ধারণ করে, যা উপাদান এবং এর চারপাশের উপাদানগুলোর মধ্যে ফাঁকা স্থান তৈরি করে। এটি প্রতিটি পাশ (উপর, ডান, নিচে, বাম) আলাদাভাবে অথবা সব পাশের জন্য শর্টহ্যান্ড হিসেবে সেট করা যেতে পারে।
Why Use It (English): The margin property is essential for creating spacing between elements. It is commonly used to prevent elements from overlapping and to ensure proper alignment on a webpage.
Why Use It (Bangla): margin প্রপার্টি উপাদানগুলির মধ্যে স্থান তৈরি করতে অপরিহার্য। এটি সাধারণত উপাদানগুলি একে অপরের সাথে ওভারল্যাপ না করার জন্য এবং সঠিকভাবে সজ্জিত হওয়ার জন্য ব্যবহৃত হয়।
Example: margin: 10px;
English: The padding property defines the space between the content of an element and its border. You can control the space inside the element with padding.
Bangla: padding প্রপার্টি একটি উপাদানের কন্টেন্ট এবং তার সীমানার মধ্যে স্থান নির্ধারণ করে। আপনি প্যাডিং দিয়ে উপাদানের ভিতরের স্থান নিয়ন্ত্রণ করতে পারেন।
Why Use It (English): The padding property is used to control the internal spacing inside an element. This ensures that the content does not touch the border, providing better readability and design.
Why Use It (Bangla): padding প্রপার্টি একটি উপাদানের ভিতরের স্থান নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি নিশ্চিত করে যে কন্টেন্ট সীমানার সাথে লাগবে না, যা আরও ভাল পড়ার যোগ্যতা এবং ডিজাইন প্রদান করে।
Example: padding: 10px;
English: The border property adds a border around an element. You can define its width, style (e.g., solid, dashed), and color.
Bangla: border প্রপার্টি একটি উপাদানের চারপাশে সীমানা যোগ করে। আপনি এর প্রস্থ, স্টাইল (যেমন, solid, dashed), এবং রঙ নির্ধারণ করতে পারেন।
Why Use It (English): The border property is important for defining the boundaries of an element. It can be used for decoration, separating sections, or to emphasize specific elements.
Why Use It (Bangla): border প্রপার্টি একটি উপাদানের সীমানা নির্ধারণ করতে গুরুত্বপূর্ণ। এটি সজ্জার জন্য, সেকশনগুলি আলাদা করার জন্য, বা নির্দিষ্ট উপাদানগুলিকে গুরুত্ব দিতে ব্যবহৃত হতে পারে।
Example: border: 1px solid black;
English: The border-radius property defines the roundness of the corners of an element. You can set the radius value to create rounded corners.
Bangla: border-radius প্রপার্টি একটি উপাদানের কোণাগুলির গোলাকারত্ব নির্ধারণ করে। আপনি রেডিয়াস মান সেট করে গোলাকার কোণ তৈরি করতে পারেন।
Why Use It (English): This property is used to create rounded corners, giving the element a softer and more modern appearance.
Why Use It (Bangla): এই প্রপার্টি গোলাকার কোণ তৈরি করতে ব্যবহৃত হয়, যা উপাদানটিকে নরম এবং আরও আধুনিক চেহারা দেয়।
Example: border-radius: 10px;
English: The box-sizing property defines how the width and height of an element are calculated. The default is content-box, where padding and borders are not included in the width and height. If set to border-box, padding and borders are included in the total width and height.
Bangla: box-sizing প্রপার্টি নির্ধারণ করে কিভাবে একটি উপাদানের প্রস্থ এবং উচ্চতা গণনা করা হবে। ডিফল্ট হচ্ছে content-box, যেখানে প্যাডিং এবং সীমানাগুলি প্রস্থ এবং উচ্চতায় অন্তর্ভুক্ত হয় না। যদি border-box সেট করা হয়, তবে প্যাডিং এবং সীমানাগুলি মোট প্রস্থ এবং উচ্চতায় অন্তর্ভুক্ত হয়।
Why Use It (English): The box-sizing property is useful for controlling element dimensions when using padding and borders. It simplifies layout calculations by including padding and borders in the element's overall size.
Why Use It (Bangla): box-sizing প্রপার্টি প্যাডিং এবং সীমানা ব্যবহার করার সময় উপাদানের আকার নিয়ন্ত্রণ করতে সাহায্য করে। এটি প্যাডিং এবং সীমানাগুলি উপাদানের মোট আকারে অন্তর্ভুক্ত করে লেআউট গণনা সহজ করে তোলে।
Example: box-sizing: border-box;
English: The background-color property sets the background color of an element. You can use color names like red, blue, or hex values like #ff0000.
Bangla: background-color প্রপার্টি একটি উপাদানের পটভূমি রঙ নির্ধারণ করে। আপনি রঙের নাম যেমন লাল, নীল, অথবা হেক্সাডেসিমাল মান যেমন #ff0000 ব্যবহার করতে পারেন।
Why Use It (English): The background-color property is important for creating a visually appealing design. It allows you to control the appearance of an element by setting a solid color in the background.
Why Use It (Bangla): background-color প্রপার্টি দৃশ্যমান ডিজাইন তৈরি করতে গুরুত্বপূর্ণ। এটি আপনাকে একটি উপাদানের পটভূমিতে একটি নির্দিষ্ট রঙ সেট করতে সাহায্য করে, যা ডিজাইনকে আকর্ষণীয় করে তোলে।
Example: background-color: yellow;
English: The background-image property sets an image as the background of an element. You can use a URL to specify the image.
Bangla: background-image প্রপার্টি একটি চিত্রকে উপাদানের পটভূমি হিসেবে নির্ধারণ করে। আপনি চিত্রের URL ব্যবহার করে চিত্রটি নির্দিষ্ট করতে পারেন।
Why Use It (English): The background-image property allows you to add a decorative image to an element. It's commonly used for backgrounds, banners, and visual elements on webpages.
Why Use It (Bangla): background-image প্রপার্টি একটি সজ্জাসংক্রান্ত চিত্র উপাদানে যোগ করতে সাহায্য করে। এটি সাধারণত পটভূমি, ব্যানার, এবং ওয়েবপেজের দৃশ্যমান উপাদানগুলিতে ব্যবহার করা হয়।
Example: background-image: url('image.jpg');
English: The background-size property defines the size of the background image. You can use values like cover or contain, or specify a width and height.
Bangla: background-size প্রপার্টি পটভূমি চিত্রের আকার নির্ধারণ করে। আপনি cover বা contain এর মতো মান ব্যবহার করতে পারেন অথবা প্রস্থ এবং উচ্চতা নির্দিষ্ট করতে পারেন।
Why Use It (English): The background-size property is used to adjust the size of the background image to cover the entire element or fit within it while maintaining the aspect ratio.
Why Use It (Bangla): background-size প্রপার্টি পটভূমি চিত্রের আকার সামঞ্জস্য করতে ব্যবহৃত হয় যাতে এটি পুরো উপাদানটি ঢেকে দেয় অথবা সঠিক অনুপাত বজায় রেখে এর মধ্যে ফিট হয়।
Example: background-size: cover;
English: The background-repeat property controls whether the background image should repeat or not. You can set it to repeat, no-repeat, or other variations.
Bangla: background-repeat প্রপার্টি নিয়ন্ত্রণ করে পটভূমি চিত্রটি পুনরাবৃত্তি হবে কি না। এটি repeat, no-repeat, বা অন্যান্য বিভিন্ন মানে সেট করা যেতে পারে।
Why Use It (English): The background-repeat property helps you manage the tiling of background images. It’s useful when you want the image to repeat across the entire background or when you don’t want it to repeat at all.
Why Use It (Bangla): background-repeat প্রপার্টি পটভূমি চিত্রের টাইলিং পরিচালনা করতে সাহায্য করে। এটি তখন উপকারী যখন আপনি চান চিত্রটি পুরো পটভূমি জুড়ে পুনরাবৃত্তি হোক অথবা আপনি চান না এটি পুনরাবৃত্তি হোক।
Example: background-repeat: no-repeat;
English: The background-position property defines the position of the background image within the element. You can specify values like center, top right, or use pixel values.
Bangla: background-position প্রপার্টি পটভূমি চিত্রের অবস্থান উপাদানের মধ্যে নির্ধারণ করে। আপনি center, top right অথবা পিক্সেল মান ব্যবহার করে অবস্থান নির্দিষ্ট করতে পারেন।
Why Use It (English): This property is used to position the background image exactly where you want it within the element. It allows precise control over the image placement.
Why Use It (Bangla): এই প্রপার্টি আপনাকে পটভূমি চিত্রটিকে উপাদানের মধ্যে সঠিকভাবে অবস্থান করতে সাহায্য করে। এটি চিত্রের সঠিক অবস্থান নির্ধারণের জন্য নির্ভুল নিয়ন্ত্রণ প্রদান করে।
Example: background-position: center;
English: The display property specifies how an element should be displayed on the page. Common values include block, inline, inline-block, and flex.
Bangla: display প্রপার্টি একটি উপাদান কিভাবে পৃষ্ঠায় প্রদর্শিত হবে তা নির্ধারণ করে। সাধারণ মানগুলির মধ্যে block, inline, inline-block, এবং flex অন্তর্ভুক্ত।
Why Use It (English): The display property is used to control the layout and positioning of elements. It defines whether an element behaves like a block-level element, inline element, or flex container.
Why Use It (Bangla): display প্রপার্টি উপাদানগুলির লেআউট এবং অবস্থান নিয়ন্ত্রণ করতে ব্যবহৃত হয়। এটি নির্ধারণ করে যে একটি উপাদান ব্লক-লেভেল উপাদান, ইনলাইন উপাদান, বা ফ্লেক্স কন্টেইনারের মতো আচরণ করবে কি না।
Example: display: flex;
English: The position property specifies the positioning method of an element. Possible values include static, relative, absolute, and fixed.
Bangla: position প্রপার্টি একটি উপাদানের অবস্থান পদ্ধতি নির্ধারণ করে। সম্ভব মানগুলির মধ্যে static, relative, absolute, এবং fixed অন্তর্ভুক্ত।
Why Use It (English): The position property is essential for controlling the placement of elements in a webpage layout. It is particularly useful when creating dynamic layouts or positioning elements relative to other elements.
Why Use It (Bangla): position প্রপার্টি একটি উপাদানের অবস্থান সঠিকভাবে নিয়ন্ত্রণ করতে অপরিহার্য। এটি ডায়নামিক লেআউট তৈরি করতে বা অন্যান্য উপাদানের তুলনায় উপাদানগুলিকে অবস্থান করতে বিশেষভাবে উপকারী।
Example: position: relative;
English: The top, left, right, and bottom properties define the position of an element relative to its containing element when the position property is set to relative, absolute, or fixed.
Bangla: top, left, right, এবং bottom প্রপার্টি একটি উপাদানের অবস্থান নির্ধারণ করে তার ধারণকারী উপাদানের তুলনায়, যখন position প্রপার্টি relative, absolute, বা fixed সেট করা হয়।
Why Use It (English): These properties are useful for fine-tuning the position of an element once its position property has been set to a specific value, giving you more control over its placement.
Why Use It (Bangla): এই প্রপার্টিগুলি উপাদানের অবস্থান নির্ধারণ করতে উপকারী যখন তার position প্রপার্টি একটি নির্দিষ্ট মানে সেট করা হয়, যা এর অবস্থান আরও নির্ভুলভাবে নিয়ন্ত্রণ করতে সাহায্য করে।
Example: top: 10px;
English: The overflow property controls what happens if content overflows an element’s box. It can be set to visible (default), hidden, scroll, or auto.
Bangla: overflow প্রপার্টি নির্ধারণ করে যদি কন্টেন্ট একটি উপাদানের বাক্সের বাইরে চলে যায় তবে কী হবে। এটি visible (ডিফল্ট), hidden, scroll, বা auto এ সেট করা যেতে পারে।
Why Use It (English): The overflow property helps manage the visibility of content when it exceeds the size of its container. For example, overflow: hidden can hide content that doesn't fit, while overflow: scroll adds scrollbars.
Why Use It (Bangla): overflow প্রপার্টি উপাদানের সীমানার বাইরে কন্টেন্ট চলে গেলে তার দৃশ্যমানতা পরিচালনা করতে সাহায্য করে। উদাহরণস্বরূপ, overflow: hidden ব্যবহৃত হলে সীমানার বাইরে যাওয়া কন্টেন্ট লুকিয়ে যায়, আর overflow: scroll ব্যবহৃত হলে স্ক্রলবার যোগ হয়।
Example: overflow: hidden;
English: The z-index property controls the stacking order of elements that overlap. Elements with higher z-index values are stacked in front of those with lower values.
Bangla: z-index প্রপার্টি উপাদানগুলির স্ত্যাকিং অর্ডার নিয়ন্ত্রণ করে যখন তারা একে অপরের উপর থাকে। বেশি z-index মানযুক্ত উপাদানগুলি কম মানযুক্ত উপাদানগুলির উপরে প্রদর্শিত হয়।
Why Use It (English): The z-index property is useful when you have overlapping elements (e.g., in modals, dropdowns, or images). It lets you control which element should appear on top.
Why Use It (Bangla): z-index প্রপার্টি তখন ব্যবহৃত হয় যখন উপাদানগুলি একে অপরের উপর থাকে (যেমন মডাল, ড্রপডাউন, বা চিত্রের ক্ষেত্রে)। এটি আপনাকে নিয়ন্ত্রণ করতে দেয় যে কোন উপাদানটি উপরে দেখাবে।
Example: z-index: 10;
English: In Flexbox, the display property is used to define how elements behave in a flex container. Set it to flex to create a flexible container.
Bangla: ফ্লেক্সবক্সে, display প্রপার্টি ব্যবহার করা হয় উপাদানগুলি ফ্লেক্স কন্টেইনারে কিভাবে আচরণ করবে তা নির্ধারণ করতে। এটি flex সেট করলে একটি ফ্লেক্স কন্টেইনার তৈরি হয়।
Why Use It (English): This property is essential for creating flexible layouts where elements can grow or shrink based on available space.
Why Use It (Bangla): এই প্রপার্টি ফ্লেক্সিবল লেআউট তৈরি করতে অপরিহার্য যেখানে উপাদানগুলি উপলব্ধ স্থান অনুযায়ী বৃদ্ধি বা সঙ্কুচিত হতে পারে।
Example: display: flex;
English: The justify-content property aligns items along the main axis of the flex container (horizontal by default). You can align items to the left, right, or center, or distribute them evenly.
Bangla: justify-content প্রপার্টি ফ্লেক্স কন্টেইনারের প্রধান অক্ষ বরাবর আইটেমগুলো সাজায় (ডিফল্টভাবে অনুভূমিক)। আপনি আইটেমগুলো বাম, ডান, অথবা কেন্দ্রস্থলে সাজাতে পারেন, অথবা সমানভাবে বিতরণ করতে পারেন।
Why Use It (English): This property is used to control the alignment of items along the flex container’s main axis, which helps in creating responsive designs.
Why Use It (Bangla): এই প্রপার্টি ফ্লেক্স কন্টেইনারের প্রধান অক্ষে আইটেমগুলির সঠিক সাজানো নিয়ন্ত্রণ করতে ব্যবহৃত হয়, যা প্রতিক্রিয়াশীল ডিজাইন তৈরি করতে সাহায্য করে।
Example: justify-content: center;
English: The align-items property aligns items along the cross axis (vertical by default) of the flex container. You can align them to the top, bottom, or center.
Bangla: align-items প্রপার্টি ফ্লেক্স কন্টেইনারের ক্রস অক্ষ বরাবর আইটেমগুলো সাজায় (ডিফল্টভাবে উল্লম্ব)। আপনি আইটেমগুলো উপরে, নিচে, অথবা কেন্দ্রস্থলে সাজাতে পারেন।
Why Use It (English): This property helps align the items vertically, which is crucial for proper layout alignment in flexible containers.
Why Use It (Bangla): এই প্রপার্টি আইটেমগুলোকে উল্লম্বভাবে সাজাতে সাহায্য করে, যা ফ্লেক্স কন্টেইনারে সঠিক লেআউট সমন্বয় জন্য অপরিহার্য।
Example: align-items: center;
English: The flex-direction property defines the direction of the flex items within a flex container. Possible values are row, row-reverse, column, or column-reverse.
Bangla: flex-direction প্রপার্টি ফ্লেক্স কন্টেইনারের মধ্যে ফ্লেক্স আইটেমগুলির দিক নির্ধারণ করে। সম্ভব মানগুলি হলো row, row-reverse, column, অথবা column-reverse।
Why Use It (English): The flex-direction property is used to arrange the items in either a horizontal or vertical layout, or in reverse order. It's essential for creating both row-based and column-based layouts in Flexbox.
Why Use It (Bangla): flex-direction প্রপার্টি আইটেমগুলিকে অনুভূমিক বা উল্লম্ব লেআউটে বা বিপরীত অর্ডারে সাজাতে ব্যবহৃত হয়। এটি ফ্লেক্সবক্সে রো-বেসড এবং কলাম-বেসড লেআউট তৈরি করার জন্য অপরিহার্য।
Example: flex-direction: column;
English: The gap property defines the space between flex items in a flex container. It is similar to margin, but works specifically for flex and grid layouts.
Bangla: gap প্রপার্টি একটি ফ্লেক্স কন্টেইনারে ফ্লেক্স আইটেমগুলির মধ্যে স্থান নির্ধারণ করে। এটি margin এর মতো, তবে বিশেষভাবে ফ্লেক্স এবং গ্রিড লেআউটের জন্য কাজ করে।
Why Use It (English): The gap property makes it easier to create consistent spacing between flex items without needing to manually add margin to each item.
Why Use It (Bangla): gap প্রপার্টি ফ্লেক্স আইটেমগুলির মধ্যে ধারাবাহিক স্থান তৈরি করা সহজ করে, প্রতিটি আইটেমে মার্জিন manually যোগ করার দরকার পড়ে না।
Example: gap: 10px;
English: The opacity property controls the transparency level of an element. It can be set to a value between 0 (completely transparent) and 1 (completely opaque).
Bangla: opacity প্রপার্টি একটি উপাদানের স্বচ্ছতার স্তর নিয়ন্ত্রণ করে। এটি 0 (পুরোপুরি স্বচ্ছ) থেকে 1 (পুরোপুরি অপাক) এর মধ্যে একটি মানে সেট করা যেতে পারে।
Why Use It (English): The opacity property is useful for creating fading effects, hover states, or to make elements semi-transparent.
Why Use It (Bangla): opacity প্রপার্টি ফেডিং এফেক্ট, হোভার স্টেট বা উপাদানগুলি অর্ধ-স্বচ্ছ করার জন্য উপকারী।
Example: opacity: 0.5;
English: The cursor property specifies the type of cursor to be displayed when hovering over an element. Common values are pointer (for links) or default (for normal use).
Bangla: cursor প্রপার্টি নির্ধারণ করে কুর্সরের ধরন যা একটি উপাদানের উপর মাউস নিয়ে গেলে প্রদর্শিত হবে। সাধারণ মানগুলির মধ্যে pointer (লিঙ্কের জন্য) বা default (সাধারণ ব্যবহারের জন্য) অন্তর্ভুক্ত।
Why Use It (English): The cursor property enhances user interaction by providing visual feedback when hovering over clickable elements, such as links or buttons.
Why Use It (Bangla): cursor প্রপার্টি ব্যবহারকারী ইন্টারঅ্যাকশন উন্নত করে, ক্লিকযোগ্য উপাদানগুলির উপর মাউস নিয়ে গেলে ভিজ্যুয়াল ফিডব্যাক প্রদান করে, যেমন লিঙ্ক বা বাটন।
Example: cursor: pointer;
English: The box-shadow property adds shadow effects around an element’s box. It accepts values for horizontal and vertical offsets, blur radius, and color.
Bangla: box-shadow প্রপার্টি একটি উপাদানের বাক্সের চারপাশে ছায়া প্রভাব যোগ করে। এটি অনুভূমিক এবং উল্লম্ব স্থানান্তর, ব্লার রেডিয়াস এবং রঙের মান নেয়।
Why Use It (English): The box-shadow property is often used to create depth or emphasis by adding shadow effects, enhancing the visual appearance of elements like cards, buttons, and boxes.
Why Use It (Bangla): box-shadow প্রপার্টি প্রায়ই গভীরতা বা গুরুত্ব সৃষ্টি করতে ব্যবহৃত হয়, ছায়া প্রভাব যোগ করে, যেমন কার্ড, বাটন, এবং বাক্সের দৃশ্যমানতা উন্নত করতে।
Example: box-shadow: 0 4px 8px gray;
English: The text-shadow property adds a shadow effect to the text. It accepts values for horizontal and vertical offsets, blur radius, and color.
Bangla: text-shadow প্রপার্টি লেখার ছায়া প্রভাব যোগ করে। এটি অনুভূমিক এবং উল্লম্ব স্থানান্তর, ব্লার রেডিয়াস এবং রঙের মান নেয়।
Why Use It (English): The text-shadow property is useful for enhancing text visibility or creating stylish effects, such as glowing or embossed text.
Why Use It (Bangla): text-shadow প্রপার্টি লেখার দৃশ্যমানতা উন্নত করতে বা শৈলীর প্রভাব তৈরি করতে ব্যবহৃত হয়, যেমন ঝলকানো বা এমবসড লেখা।
Example: text-shadow: 1px 1px gray;
English: The transition property allows you to create smooth changes from one state to another (e.g., on hover, click, or focus). You can control the duration, delay, and type of transition.
Bangla: transition প্রপার্টি আপনাকে একটি অবস্থান থেকে অন্য অবস্থানে মসৃণ পরিবর্তন তৈরি করতে দেয় (যেমন, হোভার, ক্লিক বা ফোকাস করার সময়)। আপনি পরিবর্তনের সময়কাল, বিলম্ব এবং প্রকার নিয়ন্ত্রণ করতে পারেন।
Why Use It (English): The transition property is essential for adding dynamic effects and improving user experience by smoothly transitioning between different styles.
Why Use It (Bangla): transition প্রপার্টি ডায়নামিক প্রভাব যোগ করার জন্য এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে অপরিহার্য, বিভিন্ন শৈলীর মধ্যে মসৃণ পরিবর্তন করতে।
Example: transition: 0.3s;
English: The transform property allows you to apply transformations to an element, such as scaling, rotating, translating, or skewing.
Bangla: transform প্রপার্টি একটি উপাদানে রূপান্তর প্রয়োগ করতে দেয়, যেমন স্কেল করা, ঘোরানো, স্থানান্তরিত করা বা স্কিউ করা।
Why Use It (English): The transform property is used for adding visual effects like zoom, rotation, or movement without affecting the layout of other elements.
Why Use It (Bangla): transform প্রপার্টি ভিজ্যুয়াল প্রভাব যোগ করতে ব্যবহৃত হয় যেমন জুম, রোটেশন বা গতি, যা অন্যান্য উপাদানগুলির লেআউট প্রভাবিত না করে।
Example: transform: scale(1.2);