Skill Development
On This Page

সিএসএস ব্যাসিক(CSS Basic)


CSS

সিএসএস টিউটোরিয়াল


 

সিএসএস একটি প্রোগ্রামিং ভাষা যা এইচটিএমএল ডকুমেন্টকে সুদর্শনীয় করে তোলার জন্য ব্যবহৃত হয়।

একটি এইচটিএমএল এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা সিএসএসের মাধ্যমে নির্ধারণ করে দেওয়া হয়।

আমাদের এই চিএসএস টিউটোরিয়ালটি আপনাকে সিএসএস এর প্রাথমিক থেকে এডভান্স পর্যন্ত শিখতে সাহায্য করবে।


আমাদের প্রতিটি পরিচ্ছেদে রয়েছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copyকরার একটি অপশন দেখতে পাবেন। copyঅপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।

আপনি আপনার এডিটর ওপেন করে copyকরা কোড pasteকরতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।

kt_satt_skill_example_id=1285


সিএসএস কি?

  • CSS এর পূর্ণরূপ হলো Cascading Style Sheets
  • স্ক্রিন, পেপার বা অন্যান্য মিডিয়ায় এইচটিএমএল এলিমেন্টকে আকর্ষনীয়ভাবে উপস্থাপন করার জন্য সিএসএস ব্যবহার করা হয়
  • এইচটিএমএলে এক্সটার্নাল সিএসএস ব্যবহার করলে অনেক সময় সাশ্রয় হয়। কেননা, ইহা একই সঙ্গে একাধিক ওয়েব পেজের লেআউট(layout) নিয়ন্ত্রন করতে পারে
  • বাহ্যিকভাবে স্টাইল শীট ব্যবহারের জন্য সিএসএস ফাইলের নামের শেষে .css এক্সটেনশন দিতে হয়

সিএসএস রেফারেন্স

স্যাট একাডেমির সিএসএস রেফারেন্সসেকশনে সব ধরনের সিলেক্টর এবং প্রোপার্টি গুলোর ব্যাখ্যা, উদাহরণ, ব্রাউজারে সাপোর্ট এবং আরো অনেক তথ্য খুব সহজভাবে তুলে ধরা হয়েছে।


সিএসএস প্রোগ্রামিং টিউটোরিয়াল লিস্ট


সিএসএস বেসিক টিউটোরিয়াল

সিএসএস হোম-HOME সিএসএস পরিচিতি-Introduction সিএসএস গঠনপ্রণালী-Syntax সিএসএস ব্যবহার পদ্ধতি-Use সিএসএস কালার-Color সিএসএস ব্যাকগ্রাউন্ড-Background সিএসএস বর্ডার-Border সিএসএস মার্জিন-Margin সিএসএস প্যাডিং-Padding সিএসএস উচ্চতা/প্রস্থ-Height/Width সিএসএস বক্সমডেল-BoxModel সিএসএস আউটলাইন-Outline সিএসএস টেক্সট-Text সিএসএস লিংক-Link সিএসএস লিস্ট-List সিএসএস টেবিল-Table সিএসএস প্রদর্শনী-Display সিএসএস সর্বোচ্চ উচ্চতা-Maxwidth সিএসএস পজিশন-Position সিএসএস ওভারফ্লো-Overflow সিএসএস ফ্লট-Float সিএসএস ইনলাইন-ব্লক-Inlineblock সিএসএস এলাইন-Align সিএসএস কম্বিন্যাটর-Combinator সিএসএস সুডো-ক্লাস-PseudoClass সিএসএস সুডো-এলিমেন্ট-PseudoElement সিএসএস প্রোপার্টি-Opacity সিএসএস ন্যাভিগেশনবার-NavigationBar সিএসএস ড্রপডাউন-Dropdown সিএসএস টুলটিপ-Tooltip সিএসএস ইমেজ গ্যালারী-ImageGallery সিএসএস ইমেজ স্প্রাইট-ImageSprite সিএসএস এট্রিবিউট সিলেক্টর-AttrSelector সিএসএস ফর্ম-Form কাউন্টার-Counter টিউটোরিয়াল

সিএসএস-৩ টিউটোরিয়াল

সিএসএস ভূমিকা-Introduction সিএসএস রাউন্ডেড কর্নার-RoundedCorner সিএসএস বর্ডারইমেজ-Border Image সিএসএস ব্যাকগ্রাউন্ড-Background সিএসএস কালার-Color সিএসএস গ্র্যাডিয়েন্ট-Gradient সিএসএস স্যাডো-Shadow সিএসএস টেক্সট-Text সিএসএস 3ফন্ট-Font সিএসএস 2D ট্রান্সফর্ম-Transform সিএসএস 3D ট্রান্সফর্ম-Transform সিএসএস ট্রানজিশন-Transition সিএসএস এনিমেশন-Animation সিএসএস ইমেজ-Image সিএসএস বাটন-Button সিএসএস পেজিনেশন-Pagination সিএসএস মাল্টি-কলাম-MultColumn সিএসএস ইউজার ইন্টারফেস-UserInterface সিএসএস বক্স সাইজিং-BoxSizing সিএসএস ফ্লেক্সবক্স-Flexbox সিএসএস মিডিয়া কুয়েরি-MediaQuery সিএসএস মিডিয়া কুয়েরি উদাহরণসিএসএস রেসপন্সিভ টিউটোরিয়াল

সিএসএসরেসপন্সিভ পরিচিতি-Introduction সিএসএস রেসপন্সিভ ভিউপোর্ট-Viewport সিএসএস রেসপন্সিভ গ্রাইড ভিউ-Grid View সিএসএস রেসপন্সিভ মিডিয়া কুয়েরি-Media Query সিএসএসরেসপন্সিভ ইমেজ-Image সিএসএস রেসপন্সিভভিডিও-Video সিএসএস ফ্রেমওয়ার্ক-Frameworks

 

সিএসএস রেফারেন্স টিউটোরিয়াল

সিএসএস রেফারেন্স-Reference সিএসএস সিলেক্টর-Selector সিএসএস ফাংশন-Function সিএসএস রেফারেন্স আউরাল-ReferenceAural সিএসএস ওয়েব সেফ ফন্ট-WebSafeFont সিএসএস এনিমেটেবল-Animatable সিএসএস ইউনিট-Unit সিএসএস PX-EM কনভার্টার-Converter সিএসএস কালার-Color সিএসএস কালার ভ্যালু-ColorValue সিএসএস ডিফল্ট ভ্যালু-DefaultValue সিএসএস ব্রাউজার সাপোর্ট-BrowserSupport


 

Content added By

সিএসএস এবং কেন শিখবেন?(What is CSS & why learn?)


সিএসএস কেন ব্যবহার করবেন?

একটি ওয়েব পেজের ডিজাইন করা, গঠন তৈরি করা এবং বিভিন্নভাবে প্রদর্শনীর জন্য সিএসএস ব্যবহার করা হয়।

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


সিএসএসের মাধ্যমে বড় সমস্যার সমাধান

একটি ওয়েব পেজকে সাজানোর উদ্দেশ্য নিয়ে এইচটিএমএলের মধ্যে কোনো ট্যাগ নাই।

একটি ওয়েব পেজে শুধুমাত্র কন্টেন্ট বা পেজের গঠন তৈরির জন্যই এইচটিএমএল তৈরি করা করা হয়েছে। যেমনঃ

< h1>ইহা একটি হেডিং ট্যাগ 
< p>ইহা একটি প্যারাগ্রাফ ট্যাগ।< /p>

সর্বপ্রথম এইচটিএমএল ৩.২ এ যখন < font> ট্যাগ এবং color এট্রিবিউট সংযুক্ত করা হয়েছিল, তখন ইহা ওয়েব ডেভেলপারদের মধ্যে আতঙ্ক ছড়াতে শুরু করেছিল।

কারণ তখন বড় বড় ওয়েবসাইট ডেভেলপমেন্টের জন্য প্রত্যেকটি পেজে ফন্ট বা কালারের তথ্যসমুহ আলাদা আলাদা ভাবে লিখতে হত, যা একটি বড় সমস্যার কারণ হয়ে দাঁড়িয়েছিল।

এই সমস্যা সমাধানের জন্য World Wide Web Consortium (W3C) সিএসএস তৈরি করে।


সিএসএসের মাধ্যমে সময় ও কাজ সাশ্রয়

সাধারনত এক্সটার্নাল সিএসএস ফাইলকে .css এক্সটেনশন দিয়ে সংরক্ষণ করতে হয়। যেমনঃ- external.css

আপনি চাইলে শুধুমাত্র একটি এক্সটার্নাল সিএসএস ফাইল পরিবর্তনের মাধ্যমে খুব সহজেই একটি সম্পূর্ণ ওয়েবসাইটের স্টাইল পরিবর্তন করতে পারেন।


 

Content added By

সিএসএস সিন্ট্যাক্স (CSS Syntax)


সিএসএস সিনট্যাক্স(CSS Syntax)

সিএসএস সিলেক্টর এবং ডিক্লেয়ারেশন ব্লকের সমন্বয়ে একটি সিএসএস রুল-সেট গঠিত হয়।


CSS selector

আপনি যে এইচটিএমএল এলিমেন্টকে ষ্টাইল করতে চান তাকেই সিএসএস সিলেক্টর বলা হয়।

সিএসএসে এক বা একাধিক ডিক্লেয়ারেশন ব্লক থাকতে পারে। একের অধিক ডিক্লেয়ারেশন ব্লককে সেমিকোলনের মাধ্যমে পৃথক করা হয়।

প্রতিটি ডিক্লেয়ারেশন ব্লকে একটি সিএসএস প্রোপার্টির নাম ও একটি ভ্যালু থাকে এবং কোলনের মাধ্যমে এদেরকে পৃথক করা হয়।

প্রতিটি সিএসএস ডিক্লেয়ারেশন ব্লক সর্বদাই সেমিকোলনের মাধ্যমে শেষ হয় এবং ডিক্লেয়ারেশন ব্লক/ব্লকসমূহ Curly Braces(দ্বিতীয় বন্ধনী) দ্বারা বেষ্টিত থাকে।


নিচের উদাহরণে সবগুলো < p> এলিমেন্টের জন্য টেক্সটের এলাইনমেন্ট center এবং কালার red সেট করা হয়েছেঃ

kt_satt_skill_example_id=151

সিএসএস সিলেক্টর

name, id, class, attribute ইত্যাদির উপর ভিত্তি করে বিভিন্ন এইচটিএমএল এলিমেন্টকে স্টাইল করার জন্য সিএসএস সিলেক্টরসমূহ ব্যবহার করা হয়।



এলিমেন্ট সিলেক্টর

এইচটিএমএল এলিমেন্টের নামানুসারে এলিমেন্টকে সিলেক্ট করার জন্য এলিমেন্ট সিলেক্টর ব্যবহার করা হয়।

নিচের উদাহরণের মত আপনি একটি পেজের সবগুলো < p> এলিমেন্টকে স্টাইল করতে পারেনঃ

kt_satt_skill_example_id=153


id সিলেক্টর

এইচটিএমএল এলিমেন্টের id এট্রিবিউট ব্যবহার করে যেকোন একটি নির্দিষ্ট এলিমেন্টকে সিলেক্ট করা হয়।

একটি এলিমেন্টের id এট্রিবিউটের নাম অবশ্যই পেজে শুধুমাত্র একটি থাকতে পারবে। একই নাম দিয়ে একাধিক এলিমেন্টকে সিলেক্ট করতে চাইলে class এট্রিবিউট ব্যবহার করুন।

নির্দিষ্ট id সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে #(হ্যাশ) ক্যারেক্টার তারপরে ঐ এলিমেন্টের আইডির নাম লিখতে হবে।

নিচেে উদাহরণে id এর সাহায্যে একটি এলিমেন্টকে সিলেক্ট করে দেখানো হলোঃ

kt_satt_skill_example_id=155

বিঃদ্রঃ id নাম কখনোই নাম্বার দিয়ে শুরু করা যাবে না।


class সিলেক্টর

class সিলেক্টরের মাধ্যমে এক বা একাধিক class এট্রিবিউট সম্বলিত এলিমেন্টসমূহ সিলেক্ট করা যায়।

নির্দিষ্ট class সম্বলিত এলিমেন্টকে সিলেক্ট করার জন্য প্রথমে .(ডট) ক্যারেক্টার তারপরে ঐ এলিমেন্টের class এর নাম লিখতে হবে।

নিচের উদাহরণে class এট্রিবিউট ব্যবহার করে এলিমেন্ট সিলেক্ট করে দেখানো হলোঃ

kt_satt_skill_example_id=165


এছাড়াও আপনি চাইলে এলিমেন্টের নামের সাথে class সিলেক্টর ব্যবহার করে নির্দিষ্ট এইচটিএমএল এলিমেন্টকে সিলেক্ট করতে পারেন।

নিচের উদাহরণে শুধুমাত্র "text" নামের ক্লাসযুক্ত < p> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

kt_satt_skill_example_id=167


এইচটিএমএল এলিমেন্টের মধ্যে ভিন্ন ভিন্ন কাজের জন্য একের অধিক ক্লাসও ব্যবহার করা যায়।

নিচের উদাহরণে class="text" এবং class="para" অনুসারে < p> এলিমেন্টকে স্টাইল করা হয়েছেঃ

kt_satt_skill_example_id=169

বিঃদ্রঃ class নাম কখনোই নাম্বার দিয়ে শুরু করা যাবে না।


গ্রুপ সিলেক্টর

আপনি অনেকগুলো এলিমেন্টের একই রকম স্টাইল করতে চাইলে গ্রুপ সিলেক্টর ব্যবহার করতে পারেন। যেমনঃ

h1 {
 text-align: center;
 color: slateblue;
}
h2 {
 text-align: center;
 color: slateblue;
}
p {
 text-align: center;
 color: slateblue;
}

কোডের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করতে হয়। গ্রুপ সিলেক্টরের ক্ষেত্রে সিলেক্টরসমূহকে কমা দ্বারা পৃথক করতে হয়।

নিচের উদাহরণে উপরের কোডসমূহের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করে সিলেক্ট করা হয়েছেঃ

kt_satt_skill_example_id=171


সিএসএস কমেন্ট

সংক্ষেপে কোডের কাজ ব্যাখ্যা করার জন্য কমেন্ট ব্যবহার করা হয়। কমেন্ট আপনাকে পরবর্তী সময়ে এই কোড নিয়ে কাজ করতে সাহায্য করবে।

ব্রাউজার কখনোই কমেন্ট/কমেন্টসমূহ প্রদর্শন করে না।

সিএসএসে কমেন্ট শুরু হয় /* দিয়ে এবং শেষ হয় */ দিয়ে। এই কমেন্ট আবার একাধিক লাইনেরও হতে পারে।

kt_satt_skill_example_id=173


 

Content added || updated By

সিএসএস ব্যবহার পদ্ধতি (CSS Use)


যখন একটি ব্রাউজার কোন স্টাইল শীট পড়ে, তখন ইহা স্টাইল শীটে দেওয়া কমান্ড অনুসারে এইচটিএমএল ডকুমেন্টের স্টাইল/গঠন পরিবর্তন করে।

সিএসএস ব্যবহারের পদ্ধতি

এইচটিএমএল ডকুমেন্টকে স্টাইল করার জন্য তিনটি উপায় রয়েছেঃ

  • ইনলাইন(inline) স্টাইল
  • ইন্টারনাল(internal) স্টাইল
  • এক্সটার্নাল(external) স্টাইল

ইনলাইন স্টাইল

আপনি যদি আপনার সাইটের কোনো একটি পেজের শুধুমাত্র একটি এলিমেন্ট/ট্যাগকে অর্থাৎ কোনো নির্দিষ্ট অংশকে ভিন্ন ভাবে উপস্থাপন করতে চান তাহলে ইনলাইন স্টাইল ব্যবহার করতে পারেন।

এলিমেন্টকে ইনলাইন স্টাইল করার জন্য ঐ এলিমেন্টের মধ্যে style এট্রিবিউট যুক্ত করতে হয় যা যেকোনো সিএসএস property:value ধারন করতে পারে।

নিচের উদাহরণে ইনলাইন স্টাইলের ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=187


পরামর্শঃ ইনলাইন স্টাইল ব্যবহার থেকে বিরত থাকাই ভালো, ইহা আপনার কোডের মধ্যে বিশৃংখলা সৃষ্টি করবে, দেখতে অসুন্দর হবে। তাই এক্সটার্নাল স্টাইল শীট ব্যবহার করাই উত্তম।


ইন্টারনাল স্টাইল

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

এইচটিএমএল পেজের < head> সেকশনে < style> ট্যাগের মধ্যে ইন্টারনাল স্টাইলের কোড লিখতে হয়। নিচে উদাহরণের মাধ্যমে বিষয়টি দেখানো হলোঃ

kt_satt_skill_example_id=198


এক্সটার্নাল স্টাইল

আপনি যদি আপনার সাইটের সবগুলো পেজের স্টাইল একই রকম এবং একই সাথে পরিবর্তন করতে চান তাহলে এক্সটার্নাল স্টাইল শীট ব্যবহার করুন।

কেননা এক্সটার্নাল স্টাইল শীট ব্যবহার করে শুধুমাত্র একটি ফাইল পরিবর্তনের মাধ্যমে আপনি সম্পূর্ণ ওয়েব সাইটের চেহারা পরিবর্তন করে দিতে পারবেন।

এইচটিএমএল পেজের সাথে এক্সটার্নাল স্টাইল শীট সংযুক্ত করার জন্য < link> এলিমেন্টটি ব্যবহার করতে হয় এবং < link> ট্যাগটি < head> সেকশন এর মধ্যে রাখতে হয়।

kt_satt_skill_example_id=200


যেকোন টেক্সট এডিটরে এক্সটার্নাল স্টাইল শীট লেখা যায় এবং এই এক্সটার্নাল স্টাইল ফাইলে এইচটিএমএল ট্যাগ ব্যবহার করা যায় না। স্টাইল শীট ফাইলটি অবশ্যই .css এক্সটেনশন দিয়ে সংরক্ষন করতে হয়।

এখানে "style.css" কেমন হবে তা দেখানো হলোঃ

h2{
 color:blue;
}
p{
 color:white;
}
body{
 background-color: #DA90DA;
}

বিঃদ্রঃ প্রোপার্টির ভ্যালু এবং এর এককের মধ্যে কোনো স্পেস/ফাঁকা রাখবেন না। যেমনঃ margin-left: 30 px; করা যাবে না। সঠিক পদ্ধতি হলোঃ margin-left: 30px;


বহুমূখী স্টাইল শীট

একই এলিমেন্টকে স্টাইল করার জন্য যদি বিভিন্ন স্টাইল শীটের মধ্যে একই প্রোপার্টির বিভিন্ন ভ্যালু ব্যবহার করি তাহলে ব্রাউজার সবশেষে পঠিত ভ্যালুটি স্টাইল করার কাজে ব্যবহার করে।

উদাহরণ

ধরুন, < h2> এলিমেন্টকে স্টাইল করার জন্য এক্সটার্নাল স্টাইল শীটে নিচের কোড লেখা হয়েছেঃ

h2 {
 color: blue;
}

আবার ধরুন, < h2> এলিমেন্টকে স্টাইল করার জন্য ইন্টারনাল স্টাইল শীটে নিচের কোড লেখা হয়েছেঃ

h2 {
 color: green;
}

যদি এক্সটার্নাল স্টাইলের link ট্যাগের পরে ইন্টারনাল স্টাইলের কোড লেখা হয় তাহলে < h2> এলিমেন্টের কালার "green" হবে।

kt_satt_skill_example_id=201


তবে, যদি এক্সটার্নাল স্টাইলের পূর্বে ইন্টারনাল স্টাইলের কোড লেখা হয় তাহলে < h2> এলিমেন্টের কালার "blue" হবে।

kt_satt_skill_example_id=205


স্টাইলের ক্রম

একটি ওয়েবসাইটে কোন একটি এইচটিএমএল এলিমেন্টের জন্য একের অধিক স্টাইল শীট থাকলে কোন স্টাইলটি ব্যবহৃত হবে?

এইচটিএমএলে ব্যবহৃত স্টাইল শীটসমূহের অগ্রাধিকার ক্রমানুসারে নিম্নে তুলে ধরা হলোঃ

  1. ইনলাইন স্টাইল(এইচটিএমএল এলিমেন্টের মধ্যে)
  2. এক্সটার্নাল এবং ইন্টারনাল স্টাইল শীট(হেড সেকশন এর মধ্যে)
  3. ব্রাউজার ডিফল্ট

সুতরাং, ইনলাইন স্টাইল শীটের অগ্রাধিকার সবচেয়ে বেশি। অর্থাৎ ইহা < head> ট্যাগের মধ্যে ব্যবহৃত ইন্টারনাল এবং এক্সটার্নাল স্টাইল শীট অথবা ব্রাউজারের ডিফল্ট ভ্যালুকে পরিবর্তন করতে পারে।

kt_satt_skill_example_id=207


 

Content added || updated By

সিএসএস কালার (CSS Color)


আপনারা প্রতিনিয়তই বিভিন্ন সাইট ভিজিট করেন। লক্ষ্য করলে দেখবেন সাইটগুলোর কালারের ভিন্নতা আছে। সাইটসমূহের এই কালারের ভিন্নতা অর্থাৎ কালার সেট করা হয় সিএসএস দিয়ে।

সিএসএস দিয়ে কালার সেট করার জন্য অধিকাংশ সময় নিচের যেকোনো একটি পদ্ধতি ব্যবহৃত হয়।

  • কালারের নাম ব্যবহার করে- যেমন "red"
  • RGB ভ্যালু ব্যবহার করে - যেমন "rgb(255, 0, 0)"
  • HEX ভ্যালু ব্যবহার করে - যেমন "#ff0000"

কালারের নাম

কালারের নাম ব্যবহার করে কালার সেট করা যায়ঃ

kt_satt_skill_example_id=216

বিঃদ্রঃ কালারের নাম কেস-সেনসিটিভ নয়। যেমন- "Red", "red" অথবা "RED" একই।


RGB (Red, Green, Blue)

rgb(red, green, blue) সূত্র অনুসারে RGB কালার ভ্যালু সেট করা হয়।

প্রতিটি প্যারামিটার (red, green, blue)-এর ভ্যালু 0 থেকে 255 এর মধ্যে হতে হবে। কারণ কালারের সর্বোচ্চ ভ্যালু 255 এবং সর্বনিম্ন ভ্যালু 0।

উদাহরণস্বরূপ, rgb(255,0,0) এর রং লাল হবে। কারণ এখানে লাল কালারের ভ্যালু সেট করা হয়েছে 255 এবং অন্যান্য কালারের ভ্যালু সেট করা হয়েছে 0। নিচে RGB এর বিভিন্ন ভ্যালু মিশ্রন করে পরীক্ষা করুনঃ

RedGreenBlue
25500
   
   

rgb(255, 0, 0)



kt_satt_skill_example_id=221


হালকা ধূসর অথবা গাঢ় ধূসর অথবা শুধু ধূসর কালার করার জন্য ৩টি ভ্যালুই সমান রাখতে হবে।

kt_satt_skill_example_id=224

 


হেক্সাডেসিমাল কালার

হেক্সাডেসিমাল কালার ভ্যালু দিয়েও RGB কালার ভ্যালু সেট করা যায়। যেমন- #RRGGBB, এখানে RR (red), GG (green) এবং BB (blue) হলো 00 থেকে FF এর মধ্যে হেক্সাডেসিমাল ভ্যালু যা RGB এর 0-255 এর মতোই।

উদাহরণস্বরূপ, #FF0000 এর ভ্যলু লাল হবে। কারণ এখানে লাল কালারের ভ্যালু সেট করা হয়েছে FF এবং অন্যান্য কালারের ভ্যালু সেট করা হয়েছে 00।

kt_satt_skill_example_id=226



হালকা ধূসর অথবা গাঢ় ধূসর অথবা শুধু ধূসর কালার করার জন্য ৩টি ভ্যালুই সমান রাখতে হবে।

kt_satt_skill_example_id=228


 

Content added || updated By

সিএসএস ব্যাকগ্রাউন্ড (CSS Background)


এইচটিএমএল পেজ বা এলিমেন্টের ব্যাকগ্রাউন্ড সেট করার জন্য সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টি ব্যবহার করা হয়।

সিএসএস ব্যাকগ্রাউন্ডসংক্রান্ত প্রোপার্টিসমূহঃ

  • background-color
  • background-image
  • background-position
  • background-repeat
  • background-attachment

এক নজরে সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টিসমূহ

 

background

একটি ডিক্লেয়ারেশনের মধ্যে সকল ব্যাকগ্রাউন্ড প্রোপার্টি সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-attachment

পেজের ব্যাকগ্রাউন্ড ইমেজ ফিক্সড থাকবে নাকি স্ক্রল হবে তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-color

একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড কালার সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-image

একটি এলিমেন্টের জন্য ব্যাকগ্রাউন্ড ইমেজ সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-position

ব্যাকগ্রাউন্ড ইমেজের পজিশন সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।

background-repeat

ব্যাকগ্রাউন্ড ইমেজ কিভাবে রিপিট হবে, তা সেট করার জন্য এই প্রোপার্টিটি ব্যবহার করা হয়।


background-color

একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালার সেট করার জন্য background-color প্রোপার্টিটি ব্যবহার করা হয়।

search সিএসএস দিয়ে একটি সম্পূর্ণ পেজের ব্যাকগ্রাউন্ড কালার সেট করার জন্য নিচের পদ্ধতি অবলম্বন করা হয়।

kt_satt_skill_example_id=293



search সিএসএস দিয়ে কালার করতে অধিকাংশ ক্ষেত্রেই নিম্নোক্ত পদ্ধতিসমূহ ব্যবহৃত হয়ঃ

  • কালারের নাম ব্যবহার করে। যেমন- "red"
  • HEX ভ্যালু ব্যবহার করে। যেমন- "#ff0000"
  • RGB ভ্যালু ব্যবহার করে। যেমন- "rgb(255,0,0)"

সম্ভাব্য সমস্ত কালার ভ্যালুর তালিকা এক নজরে দেখার জন্য সিএসএস কালার ভ্যালু পেজে ভিজিট করুন।

নিচের উদাহরণে < h1>, < p> এবং < div> এলিমেন্টের ব্যাকগ্রাউন্ড কালারসমূহ ভিন্ন ভিন্ন ভাবে সেট করা হয়েছেঃ

 

kt_satt_skill_example_id=299


background-image

এলিমেন্টের ব্যাকগ্রাউন্ডে ছবি বা ইমেজ সেট করার জন্য background-image প্রোপার্টিটি ব্যবহার করা হয়।

সম্পূর্ণ এলিমেন্টকে কাভার করার জন্য ডিফল্টভাবে ইমেজটির পূনরাবৃত্তি ঘটে।

একটি পেজে কিভাবে ব্যাকগ্রাউন্ড ইমেজ সেট করা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ

kt_satt_skill_example_id=302


ব্যাকগ্রাউন্ড ইমেজ এবং টেক্সট কালারের সঠিক সমন্বয় না হলে লেখা পড়তে সমস্যা হয় তা নিচের উদাহরণের মাধ্যমে দেখানো হলোঃ

kt_satt_skill_example_id=304

বিঃদ্রঃ যখন ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবেন, তখন টেক্সটের কালার এবং এমন ইমেজ ব্যবহার করবেন যেন টেক্সট পড়তে সমস্যা না হয়।


background-repeat: repeat-x; & repeat-y;

background-image প্রোপার্টি ডিফল্টভাবে একটি ইমেজকে অনুভূমিক এবং উল্লম্ব উভয় দিকেই পুনরাবৃত্তি করে।

কিছু ইমেজকে হয় অনুভূমিকভাবে আর নয় উল্লম্বভাবে পুনরাবৃত্তি করা উচিত, তা না হলে এগুলো দেখতে অদ্ভুত লাগবে। যেমনঃ

kt_satt_skill_example_id=305

বিঃদ্রঃ স্পেসিফিকভাবে নির্দিষ্ট করে না দেয়া হলে ব্যাকগ্রাউন্ড ইমেজ x এবং y উভয় অক্ষেই পুনরাবৃত্তি করবে।


শুধুমাত্র অনুভূমিকভাবে ইমেজ রিপিট করার জন্য background-repeat: repeat-x; ব্যবহার করা হয়।

kt_satt_skill_example_id=306

পরামর্শঃ একইভাবে ইমেজকে উলম্বভাবে রিপিট করার জন্য background-repeat: repeat-y; সেট করুন।


background-position প্রোপার্টি এবং no-repeat ভ্যালুর ব্যবহার

আপনি যদি ব্যাকগ্রাউন্ড ইমেজকে শুধুমাত্র একবার দেখাতে চান তাহলে background-repeat প্রোপার্টির ভ্যালু no-repeat সেট করুনঃ

 

kt_satt_skill_example_id=309



উপরোক্ত উদাহরণে, টেক্সট এবং ব্যাকগ্রাউন্ড ইমেজকে একই জায়গায় দেখানো হয়েছে। আপনি চাইলে ইমেজের পজিশন পরিবর্তন করতে পারেন যাতে ইহা টেক্সটসমূহ পড়তে কোনো সমস্যা না করে।

background-position প্রোপার্টি দ্বারা ইমেজের পজিশন পরিবর্তন করা হয়।

kt_satt_skill_example_id=312


background-attachment

ব্যাকগ্রাউন্ড ইমেজটি ব্যাকগ্রাউন্ডে ফিক্সড থাকবে নাকি স্ক্রলের সাথে নড়বে সেটি নির্ধারণ করার জন্য background-attachment প্রোপার্টিটি ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=317


background - শর্টহ্যান্ড প্রোপার্টি

কোড সংক্ষিপ্ত করার জন্য সকল ব্যাকগ্রাউন্ড প্রোপার্টিকে একটি সিঙ্গেল প্রোপার্টির মধ্যে লেখা সম্ভব। একে শর্টহ্যান্ড প্রোপার্টি বলে

background হলো ব্যাকগ্রাউন্ডের জন্য শর্টহ্যান্ড প্রোপার্টিঃ

kt_satt_skill_example_id=322

যখন শর্টহ্যান্ড প্রোপার্টি ব্যবহার করবেন তখন নিচের ক্রম ঠিক রাখুনঃ

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

অন্য সবগুলো প্রোপার্টির ক্রম ঠিক থাকলে একটি প্রোপার্টির মান অনুপস্থিত থাকলেও কোন সমস্যা হবে না।


 

Content added || updated By

সিএসএস বর্ডার (CSS Border)


সিএসএস border প্রোপার্টি

সিএসএস border প্রোপার্টি ব্যবহার করে আপনি একটি এলিমেন্টের বর্ডারের স্টাইল, কালার এবং প্রস্থ পরিবর্তন করতে পারেন।

আপনার বুঝার স্বার্থে নিচে কিছু বর্ডারের ব্যবহার দেখানো হলোঃ

এই এলিমেন্টের চারপাশেই বর্ডার ব্যবহার করা হয়েছে।

এই এলিমেন্টের উপরে সবুজ কালারের বর্ডার ব্যবহার করা হয়েছে।

এই এলিমেন্টের চার পাশেই গোলাকার(round) বর্ডার ব্যবহার করা হয়েছে।

এক নজরে সিএসএস বর্ডার প্রোপার্টিসমূহ

border

একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom

একটি ডিক্লেয়ারেশনের মাধ্যমে নিচের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom-color

নিচের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom-style

নিচের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-bottom-width

নিচের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-color

বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-left

একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-left-color

বাম পাশের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-left-style

বাম পাশের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-left-width

বাম পাশের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

একটি ডিক্লেয়ারেশনের মাধ্যমে বাম পাশের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-top

একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-color

উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-style

উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-width

উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-width

বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-top

একটি ডিক্লেয়ারেশনের মাধ্যমে উপরের বর্ডারের সবগুলো প্রোপার্টি সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-color

উপরের বর্ডারের কালার সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-style

উপরের বর্ডারের স্টাইল সেট করার জন্য এটি ব্যবহার করা হয়।

border-top-width

উপরের বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।

border-width

বর্ডারের প্রস্থ সেট করার জন্য এটি ব্যবহার করা হয়।


বর্ডার(Border) স্টাইল

বিভিন্ন ধরনের বর্ডার তৈরির জন্য search সিএসএস border-style প্রোপার্টিটি ব্যবহার করা হয়।

নিম্নে border-style প্রোপার্টির জন্য ব্যবহৃত ভ্যালুগুলো দেওয়া হলোঃ

  • solid - এটি solid বর্ডার ডিফাইন করে
  • double - এটি double বর্ডার ডিফাইন করে
  • dotted - এটি dotted বর্ডার ডিফাইন করে
  • dashed - এটি dashed বর্ডার ডিফাইন করে
  • inset - এটি 3D inset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করে
  • outset - এটি 3D outset বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করে
  • groove - এটি 3D grooved বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করে
  • ridge - এটি 3D ridge বর্ডার ডিফাইন করে। যেটা border-color এর ভ্যালুর উপর নির্ভর করে
  • hidden - এটি বর্ডারকে হিডেন করে
  • none - কোন বর্ডার ডিফাইন করে না

border-style প্রোপার্টিতে এক থেকে চারটি পর্যন্ত ভ্যালু থাকতে পারে। এটি ক্রমানুসারে উপরের বর্ডার থেকে শুরু করে ডানপাশে, নিচে এবং বামপাশে গিয়ে শেষ হয়।

kt_satt_skill_example_id=373

বিঃদ্রঃ border-style প্রোপার্টির ভ্যালু সেট করা না হলে বর্ডার সংক্রান্ত অন্যান্য প্রোপার্টিগুলো কাজ করবে না।


border-width

একটি এলিমেন্টের চারিদিকের বর্ডারের প্রস্থ সেট করার জন্য border-width প্রোপার্টিটি ব্যবহার করা হয়।

সিএসএসে প্রস্থ নির্ধারণের বিভিন্ন একক যেমনঃ px, pt, cm, em ইত্যাদি ব্যবহার করে বর্ডারের প্রস্থ সেট করা হয় অথবা পূর্ব নির্ধারিত ভ্যালু যেমন thin, medium এবং thick ইত্যাদি ব্যবহার করেও বর্ডারের প্রস্থ সেট করা যায়।

border-width প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলোঃ top border, right border, bottom border এবং left border

kt_satt_skill_example_id=377


বিঃদ্রঃ border-width প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।


border-color

বর্ডারের কালার সেট করার জন্য border-color প্রোপার্টিটি ব্যবহার করা হয়।

নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ

  • Name - কালারের নাম ব্যবহার করে, যেমন "red"
  • Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন "#ff0000"
  • RGB - RGB ভ্যালু ব্যবহার করে, যেমন "rgb(255,0,0)"
  • transparent ব্যবহার করে।

border-color প্রোপার্টির এক হতে সর্বোচ্চ চারটি ভ্যালু থাকতে পারে। এগুলো হলো: (top border, right border, bottom border, এবং left border) 

border-color নির্ধারণ করা না হলে ইহা উত্তরাধিকার সূত্রে এলিমেন্টকে কালার করে ফেলে।

kt_satt_skill_example_id=384

বিঃদ্রঃ border-color প্রোপার্টিটি ব্যবহারের জন্য border-style প্রোপার্টিটি ব্যবহার করতে হবে, নতুবা এটি কাজ করবে না।


প্রত্যেক পাশে পৃথকভাবে বর্ডারের ব্যবহার

আপনি নিশ্চয় আগের উদাহরণেই জানতে পেরেছেন যে একটি এলিমেন্টের চারপাশে পৃথকভাবে বর্ডার সেট করা যায়।

পৃথকভাবে বর্ডার সেট করার প্রত্যেক পাশের বর্ডারের জন্য আলাদাভাবে search সিএসএস প্রোপার্টি ডিক্লেয়ার করতে হয়। (যেমন- top, right, bottom, left)

kt_satt_skill_example_id=385


এই উদাহরণটিতেও উপরের উদাহরণের মতো ফলাফল দেখাবেঃ

kt_satt_skill_example_id=386




উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ

যদি border-style প্রোপার্টিতে চারটি ভ্যালু থাকেঃ

  • উপরের বর্ডারটি dot স্টাইলের হবে।
  • ডানের বর্ডারটি solid স্টাইলের হবে।
  • নিচের বর্ডারটি double স্টাইলের হবে।
  • বামের বর্ডারটি dashed স্টাইলের হবে।
     

যদি border-style প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ

  • উপরের বর্ডারটি dot স্টাইলের হবে।
  • ডানের এবং বামের বর্ডার দুটি solid স্টাইলের হবে।
  • নিচের বর্ডারটি double স্টাইলের হবে।


যদি border-style প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ

  • উপরের এবং নিচের বর্ডার দুটি dotted স্টাইলের হবে।
  • ডানের এবং বামের বর্ডার দুটি solid স্টাইলের হবে।
  •  

যদি border-style প্রোপার্টিতে একটি ভ্যালু থাকেঃ

  • চারপাশের বর্ডারই dot স্টাইলের হবে।


 

উপরের উদাহরণে border-style প্রোপার্টি ব্যাবহার দেখানো হয়েছে। যাইহোক, border-style প্রোপার্টির মতোই border-width এবং border-color প্রোপার্টির ক্ষেত্রেও একই নিয়ম প্রযোজ্য।

border - শর্টহ্যান্ড প্রোপার্টি

আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, বর্ডার এর কিছু উপ-বর্ডার প্রোপার্টি রয়েছে এবং এসকল ক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।

তাই কোড সংক্ষিপ্ত করার জন্য, একটি বর্ডার প্রোপার্টির মধ্যে সবগুলো বর্ডার প্রোপার্টি ব্যবহার করা যায়।

নিচের উপ-বর্ডার প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো border:

  • border-width
  • border-style (আবশ্যক)
  • border-color

kt_satt_skill_example_id=388

এছাড়াও আপনি আলাদা আলাদা বর্ডার প্রোপার্টিসমূহকে একটি এলিমেন্টের এক পাশের বর্ডারকে স্টাইল করার জন্য ব্যবহার করতে পারেনঃ

kt_satt_skill_example_id=391

kt_satt_skill_example_id=395


রাউন্ডেড বর্ডার

একটি এলিমেন্ট এর চতুর্দিকের বর্ডারকে রাউন্ড করার জন্য border-radius প্রোপার্টিটি ব্যাবহার করা হয়।

kt_satt_skill_example_id=398

বিঃদ্রঃ border-radius প্রোপার্টিটি ইন্টারনেট এক্সপ্লোরার ৮ অথবা তার পূর্ববর্তী ভার্সনে সাপোর্ট করেনা।


 

Content added || updated By

সিএসএস মার্জিন (CSS Margin)


সিএসএস মার্জিন

একটি এলিমেন্টের চারপাশে স্পেস রাখার জন্য সিএসএস margin প্রোপার্টিটি ব্যবহার করা হয়।

সিএসএস margin প্রোপার্টি দ্বারা একটি এলিমেন্টের বর্ডার এর বাহিরে কি পরিমান ফাকা জায়গা থাকবে তা সেট করা হয়।

সিএসএস এর মাধ্যমে, আপনি মার্জিনকে নিয়ন্ত্রণ করতে পারেন। একটি এলিমেন্টের চারপাশে পৃথক পৃথক মার্জিন সেট করার জন্য পৃথক পৃথক সিএসএস margin প্রোপার্টি রয়েছে। যেগুলো হলো: top, right, bottom এবং left।


এই এলিমেন্টটিতে 50px মার্জিন ব্যবহার করা হয়েছে।

এক নজরে সিএসএস মার্জিন প্রোপার্টিসমূহ

margin

একটি ডিক্লেয়ারেশনের মাধ্যমে মার্জিনের সবগুলো প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।

margin-top

লিমেন্টের উপরের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

margin-right

এলিমেন্টের ডানের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

margin-bottom

এলিমেন্টের নিচের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

margin-left

এলিমেন্টের বামের মার্জিন সেট করার জন্য ব্যবহৃত হয়।


পৃথক পৃথক মার্জিন প্রোপার্টিসমূহ

একটি এলিমেন্ট চারপাশে পৃথকভাবে মার্জিন সেট করার জন্য সিএসএসে ব্যবহৃত margin প্রোপার্টিসমূহ নিম্নে তুলে ধরা হলোঃ-

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

এই মার্জিন প্রোপার্টিগুলো নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ

  • auto - ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।
  • length - px, pt, cm, ইত্যাদি একক ব্যবহার করে মার্জিন সেট করা হয়
  • % - সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।
  • inherit - প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।

নিচের উদাহরণে < p> এলিমেন্টের প্রত্যেক পাশে বিভিন্ন প্রকার মার্জিনের ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=411


মার্জিন - শর্টকাট প্রোপার্টি

কোড সংক্ষিপ্ত করার জন্য সকল মার্জিন প্রোপার্টিকে একটি শর্টকাট প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।

নিচের পৃথক পৃথক মার্জিন প্রোপার্টিসমূহের শটকার্ট প্রোপার্টি হলো margin প্রোপার্টিঃ

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

 

kt_satt_skill_example_id=416



উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ

যদি margin প্রোপার্টিতে চারটি ভ্যালু থাকেঃ

  • উপরের মার্জিন 50px হবে।
  • ডানের মার্জিন 40px হবে।
  • নিচের মার্জিন 80px হবে।
  • বামের মার্জিন 70px হবে।

যদি margin প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ

  • উপরের মার্জিন 50px হবে।
  • ডান ও বামের মার্জিন 40px হবে।
  • নিচের মার্জিন 80px হবে।

যদি margin প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ

  • উপরের এবং নিচের মার্জিন 50px হবে।
  • ডানের ও বামের মার্জিন 80px হবে।

যদি margin প্রোপার্টিতে একটি ভ্যালু থাকেঃ

  • চার পাশের মার্জিন 50px হবে।

"auto" ভ্যালুর ব্যবহার

একটি এলিমেন্ট যে কন্টেইনারের মধ্যে আছে সেই কন্টেইনারের অনুভূমিক বরাবর যদি সেটিকে সেন্টারে রাখতে চান তাহলে margin প্রোপার্টির ভ্যালু auto সেট করুন।

এক্ষেত্রে এলিমেন্টটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট প্রস্থ নিয়ে নিবে এবং অবশিষ্ট ফাঁকা জায়গাটি ডান এবং বামপাশে সমান ভাবে ভাগ করে দিবে। অর্থাৎ এলিমেন্টটি সেন্টারে অবস্থান করবে।

kt_satt_skill_example_id=419


"inherit" ভ্যালুর ব্যবহার

নিচের উদাহরণে পেরেন্ট এলিমেন্ট থেকে inherit এর মাধ্যমে

এলিমেন্ট বাম পাশের মার্জিন নিয়ে নেয়ঃ

kt_satt_skill_example_id=422


মার্জিন কলাপ্স

এলিমেন্টের উপরের এবং নিচের মার্জিন মাঝে-মাঝে কলাপ্স হয়ে সিঙ্গেল মার্জিনে পরিনত হয় এবং যার ভ্যালূ হবে মার্জিন দুটির ভ্যালুর মধ্যে সর্বোচ্চটি।

এটি হরিজন্টাল মার্জিন বা ডান এবং বামের মার্জিনের ক্ষেত্রে ঘটে না। শুধুমাত্র ভার্টিক্যাল মার্জিন বা উপরের এবং নিচের মার্জিনের ক্ষেত্রে ঘটে।

নিচের উদাহরণটি লক্ষ্য করলে এটি আপনার কাছে পরিষ্কার হয়ে যাবেঃ

kt_satt_skill_example_id=424

এই উদাহরণটিতে < h1> এলিমেন্টের নিচে 60px এবং < h2> এলিমেন্টের উপরে 40px মার্জিন দেয়া হয়েছে।

উপরের উদাহরণ দেখে আপনি খুব সহজেই বলে দিবেন যে, < h1> এবং < h2> এর মধ্যে ভার্টিকাল মার্জিন হবে 100px(60px+40px)। কিন্তু এখানে মার্জিন কলাপ্স ব্যবহৃত হওয়ার কারণে প্রকৃতপক্ষে মার্জিন হবে 60px।


 

Content added || updated By

সিএসএস প্যাডিং (CSS Padding)


সিএসএস প্যাডিং

বর্ডারের ভিতরে এবং কন্টেন্টের(content) চারপাশে ফাঁকা স্থান তৈরি করার জন্য সিএসএস Padding প্রোপার্টিটি ব্যবহার করা হয়।

Padding প্রোপার্টিটি একটি এলিমেন্টের মধ্যে কন্টেন্টের চারপাশে(বর্ডার এর মধ্যে) ফাঁকা জায়গা তৈরি করে।

সিএসএসের মাধ্যমে আপনি প্যাডিংকে সম্পূর্ণভাবে নিয়ন্ত্রন করতে পারেন। সিএসএস Padding প্রোপার্টি দ্বারা আপনি একটি এলিমেন্টের প্রত্যেক পাশে যেমন- top, right, bottom এবং left এ পৃথকভাবে প্যাডিং সেট করতে পারেন।

       

                           এই এলিমেন্টেটির চারপাশে 50px প্যাডিং ব্যবহার করা হয়েছে।

 

 


 

এক নজরে সিএসএস প্যাডিং প্রোপার্টিসমূহ

padding

একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো প্যাডিং প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।

padding-top

এলিমেন্টের উপরের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

padding-right

এলিমেন্টের ডানের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

padding-bottom

এলিমেন্টের নিচের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

padding-left

এলিমেন্টের বামের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।


 

পৃথক পৃথক প্যাডিং প্রোপার্টিসমূহ

একটি এলিমেন্টের কন্টেন্টের চারপাশে প্যাডিং সেট করার জন্য সিএসএসে ভিন্ন ভিন্ন প্যাডিং প্রোপার্টি রয়েছে। এগুলো হলোঃ

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

সবগুলো মার্জিন প্রোপার্টি নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ

  • auto- ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।
  • length- px, pt, cm, ইত্যাদি একক ব্যবহার করে মার্জিন সেট করা হয়
  • % - সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।
  • inherit- প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।


নিচের উদাহরণে

<p></code><span style="background-color:rgb(255,255,255);color:rgb(0,0,0);"> এলিমেন্টের প্রত্যেক পাশে বিভিন্ন প্রকার প্যাডিং এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=455


 

প্যাডিং - শর্টহ্যান্ড প্রোপার্টি

কোড সংক্ষিপ্ত করার জন্য সকল প্যাডিং প্রোপার্টিকে একটি শর্টহ্যান্ডশর্টহ্যান্ড প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।

নিচের পৃথক পৃথক প্যাডিং প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো padding প্রোপার্টিঃ

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

 

      kt_satt_skill_example_id=462



উপরের উদাহরণটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ

যদি padding প্রোপার্টিতে চারটি ভ্যালু থাকেঃ

  • উপরের প্যাডিং হবে 50px।
  • ডানের প্যাডিং হবে 40px।
  • নিচের প্যাডিং হবে 80px।
  • বামের প্যাডিং হবে 70px।

যদি padding প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ

  • উপরের প্যাডিং হবে 50px।
  • ডানের ও বামের প্যাডিং হবে 40px।
  • নিচের প্যাডিং হবে 80px।

যদি padding প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ

  • উপরের এবং নিচের প্যাডিং হবে 50px।
  • ডানের এবং বামের প্যাডিং হবে 80px।

যদি padding প্রোপার্টিতে একটি ভ্যালু থাকেঃ

  • চারপাশের প্যাডিংই হবে 50px।

kt_satt_skill_example_id=465


 

Content added || updated By

সিএসএস হাইট/ওয়াইথ (CSS Height/Width)


সিএসএস Width এবং Height সেট করা

একটি এলিমেন্টের width এবং height সেট করার জন্য সিএসএস width এবং height প্রোপার্টি ব্যবহার করা হয়।


এই এলিমেন্টে 70% width ব্যবহার করা হয়েছে।


এক নজরে সিএসএস ডাইমেনশন প্রোপার্টিসমূহ

width

একটি এলিমেন্টের width সেট করার জন্য ব্যবহার করা হয়।

max-width

একটি এলিমেন্টের সর্বোচ্চ(maximum) width সেট করার জন্য ব্যবহার করা হয়।

min-width

একটি এলিমেন্টের সর্বনিম্ন(minumum) width সেট করার জন্য ব্যবহার করা হয়।

height

একটি এলিমেন্টের height সেট করার জন্য ব্যবহার করা হয়।

max-height

একটি এলিমেন্টের সর্বোচ্চ(maximum) height সেট করার জন্য ব্যবহার করা হয়।

min-height

একটি এলিমেন্টের সর্বনিম্ন(minumum) height সেট করার জন্য ব্যবহার করা হয়।



স্বয়ংক্রিয়ভাবেও width এবং height সেট করা যেতে পারে। অর্থাৎ আমরা না সেট করে দিলে ব্রাউজার ডিফল্টভাবে নিজ থেকে width এবং height সেট করে নেয়। এছাড়াও দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm, % ইত্যাদি ব্যবহার করেও সেট করা যায়।



এই এলিমেন্টে width 100% এবং height 60px সেট করা হয়েছে।

kt_satt_skill_example_id=483


বিঃদ্রঃ width এবং height প্রোপার্টির মধ্যে padding, border এবং margin অন্তুর্ভূক্ত নয়। width এবং height প্রোপার্টি এলিমেন্টের প্যাডিং, বর্ডার এবং মার্জিনের ভিতরে width/height সেট করে।


max-width সেট করা

একটি এলিমেন্টের maximum width সেট করার জন্য max-width প্রোপার্টিটি ব্যবহার করা হয়।

দৈর্ঘ্য নির্ণয়ের বিভিন্ন একক যেমনঃ px, cm ইত্যাদি অথবা পারসেন্ট(%) ব্যবহার করে একটি এলিমেন্টের max-width সেট করা যেতে পারে। অথবা max-width এর ভ্যালু none সেট করা যেতে পারে। অর্থাৎ ডিফল্টভাবে যার কোনো কোন maximum width থাকবে না।


জেনে রাখা ভাল যে, যখন ব্রাউজার উইন্ডো থেকে এলিমেন্টের width বড় হয় তখন ব্রাউজার এলিমেন্টটিতে একটি হরিজন্টাল স্ক্রলবার যুক্ত করে নেয়।

এক্ষেত্রে max-width প্রোপার্টিটি ব্যবহার করে এই সমস্যার সমাধান করা যায়।

বিঃদ্রঃ আমাদের এই অধ্যায়ে ব্যবহৃত div দুটির মধ্যে পার্থক্য দেখার জন্য ব্রাউজার উইন্ডোর প্রস্থ(width) ৫০০px থেকে ছোট করুন।

এই এলিমেন্টটিতে height 100px এবং max-width 500px সেট করা হয়েছে

বিঃদ্রঃ max-width প্রোপার্টির ভ্যালু width প্রোপার্টির ভ্যালুকে ওভাররাইড(override) করে।

kt_satt_skill_example_id=485


 

Content added || updated By

সিএসএস বক্সমডেল (CSS Box Model)


সিএসএস বক্স মডেল

সকল এইচটিএমএল এলিমেন্টকে বক্স হিসেবে বিবেচনা করা যেতে পারে। আমরা যখন সিএসএসের মাধ্যমে ওয়েবপেজের ডিজাইন এবং লেআউট নিয়ে কথা বলি, তখন একটি টার্ম আমাদের কাছে চলে আসে তা হলো "box model"

বক্স মডেল স্বাভাবিকভাবেই একটি বক্স যা প্রত্যেকটি এইচটিএমএল এলিমেন্টকে একটি বক্সের মধ্যে মুড়িয়ে দেয়। ইহা মার্জিন, বর্ডার, পেডিং এবং প্রকৃত কন্টেন্ট নিয়ে গঠিত হয়। নিচে ছবির মাধ্যেম বক্স মডেলের ব্যখ্যা দেওয়া হলঃ

উপরের ছবির বিভিন্ন অংশের ব্যাখ্যাঃ

  • কন্টেন্ট - যা বক্সের কন্টেন্ট, যেখানে টেক্সট এবং ছবি প্রদর্শিত হয়।
  • প্যাডিং - যা কন্টেন্টের চারপাশে ফাঁকা অংশের সৃষ্টি করে এবং ইহা স্বচ্ছ।
  • বর্ডার - যা প্যাডিং এবং কন্টেন্টের চতুর্দিকে থাকে।
  • মার্জিন - যা বর্ডারের বাহিরে ফাঁকা অংশের সৃষ্টি করে। প্যাডিং এর মত ইহাও স্বচ্ছ।

আমরা বক্স মডেল ব্যবহার করেও একটি এলিমেন্টের চারপাশে বর্ডার সেট করতে পারি এবং এলিমেন্টের মধ্যে স্পেস(space) রাখতে পারি।


kt_satt_skill_example_id=500


width এবং height সেট করা

প্রত্যেকটি ব্রাউজারের জন্য এলিমেন্টের প্রস্থ(width) এবং দৈর্ঘ্য(height) সঠিকভাবে সেট করতে হলে আপনাকে অবশ্যই বক্স মডেলের ব্যবহার সম্পর্কে জানতে হবে।

বিঃদ্রঃ সিএসএস এর মাধ্যমে আপনি যখন একটি এলিমেন্টের দৈর্ঘ্য এবং প্রস্থ সেট করেন, তখন শুধুমাত্র কন্টেন্টের আয়তনের দৈর্ঘ্য এবং প্রস্থ সেট করেন।

কিন্তু একটি এলিমেন্টের সম্পূর্ণ আয়তন সেট করতে এর দৈর্ঘ্য এবং প্রস্থের সহিত আপনাকে অবশ্যই প্যাডিং, বর্ডার এবং মার্জিন সংযুক্ত করতে হবে।

ধরুন, আপনি একটি < div> এলিমেন্টকে স্টাইল করতে চাচ্ছেন যার width হবে 350px, তাহলে সেটিকে নিচের উদাহরণের মত স্টাইল করতে পারেনঃ

kt_satt_skill_example_id=504

উপরের ছবিটির প্রস্থ ৩৬০ পিক্সেল এবং সম্পূর্ণ এলিমেন্টটির প্রস্থও ৩৬০ পিক্সেল।



এখানে উপরের উদাহরণের সহজ হিসাব দেখানো হলোঃ
 

  320px (width)
+ 30px (বাম + ডান পাশের প্যাডিং)
+ 10px (বাম + ডান পাশের বর্ডার)
+   0px (বাম + ডান পাশের মার্জিন)
= 360px



একটি এলিমেন্টের সম্পূর্ণ প্রস্থ হিসাবের সূত্র হলোঃ

এলিমেন্টের সম্পূর্ণ প্রস্থ = কন্টেন্টের প্রস্থ + বাম পাশের প্যাডিং + ডান পাশের প্যাডিং + বাম পাশের বর্ডার + ডান পাশের বর্ডার + বাম পাশের মার্জিন + ডান পাশের মার্জিন

একটি এলিমেন্টের সম্পূর্ণ উচ্চতা হিসাবের সূত্র হলোঃ

এলিমেন্টের সম্পূর্ণ উচ্চতা = কন্টেন্টের উচ্চতা + উপরের প্যাডিংন + নিচের প্যাডিং + উপরের বর্ডার + নিচের বর্ডার + উপরের মার্জিন + নিচের মার্জিন

বিঃদ্রঃ ইন্টারনেট এক্সপ্লোরার-৮ এবং এর আগের ভার্সনগুলোতে width প্রোপার্টির মধ্যে padding এবং border যুক্ত হয়ে যায়। তাই এই সমস্যা সমাধানের জন্য এইচটিএমএল পেজে < !DOCTYPE html> যুক্ত করুন।


 

Content added By

সিএসএস আউটলাইন (CSS Outline)


সিএসএস আউটলাইন

সিএসএস outline প্রোপার্টির মাধ্যমে আউটলাইনের স্টাইল, কালার এবং প্রস্থ সেট করা হয়।

আউটলাইন হলো একটি লাইন যা একটি এলিমেন্টকে আলাদাভাবে উপস্থাপন করার জন্য এলিমেন্টের বর্ডারের বাহিরে আঁকা হয়।

যাইহোক, আউটলাইন প্রোপার্টি বর্ডার হতে ভিন্ন একটি প্রোপার্টি। আউটলাইন একটি এলিমেন্টের মার্জিনের অংশ নয় এবং আউটলাইনের প্রস্থের(width) মাধ্যমে এলিমেন্টের সম্পূর্ন দৈর্ঘ্য এবং প্রস্থের উপরে কোন প্রভাব পড়ে না।


এই এলিমেন্টটিতে একটি লাল সরু বর্ডার এবং 7px চওড়া সবুজ কালারের একটি ডট আউটলাইন সেট করা হয়েছে।


এক নজরে সিএসএস আউটলাইন প্রোপার্টিসমূহ

outline

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

outline-style

আউটলাইনের স্টাইল সেট করার জন্য ব্যবহার করা হয়।

outline-width

আউটলাইনের প্রস্থ(width) সেট করার জন্য ব্যবহার করা হয়।

outline-color

আউটলাইনের কালার সেট করার জন্য ব্যবহার করা হয়।

outline-offset

একটি এলিমেন্টের আউটলাইন এবং বর্ডারের মাঝখানে স্পেস বা ফাঁকা রাখার জন্য এটি ব্যবহার করা হয়।


আউটলাইন স্টাইল

outline-style প্রোপার্টি দ্বারা আউটলাইনের স্টাইল নির্ধারণ করা হয়।

outline-style প্রোপার্টিতে নিচের ভ্যালুসমূহ ব্যবহার করা যায়ঃ

  • solid - একটি সলিড আউটলাইন নির্দেশ করে।
  • double - একটি ডাবল আউটলাইন নির্দেশ করে।
  • dotted - একটি ডটেড আউটলাইন নির্দেশ করে।
  • dashed - একটি ড্যাশ আউটলাইন নির্দেশ করে।
  • inset - একটি 3D inset আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
  • outset - একটি 3D outset আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
  • groove - একটি 3D groove আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
  • ridge - একটি 3D ridge আউটলাইন নির্দেশ করে। outline-color এর ভ্যালুর উপর প্রভাব নির্ভর করে।
  • hidden - আউটলাইনকে হাইড করার জন্য ব্যবহার করা হয়।
  • none - কোন আউটলাইন না প্রদর্শনের জন্য ব্যবহার করা হয়।

এই উদাহরণে, প্রত্যেকটি < p> এলিমেন্টের চারপাশে একটি সরু কালো বর্ডার সেট করে, ভিন্ন ভিন্ন outline-style প্রোপার্টির ভ্যালুসমূহ সেট করে দেখানো হলোঃ

kt_satt_skill_example_id=525


আউটলাইনের প্রস্থ(width)

আউটলাইনের প্রস্থ সেট করার জন্য outline-width প্রোপার্টিটি ব্যবহার করা হয়।

সিএসএসে প্রস্থ নির্ণয়ের বিভিন্ন একক যেমন- px, pt, cm, em ইত্যাদি ব্যবহার করে আউটলাইনের প্রস্থ সেট করা হয় অথবা পূর্ব নির্দিষ্ট ভ্যালু যেমনঃ- thin, medium এবং thick ইত্যাদি ব্যবহার করেও আউটলাইনের প্রস্থ সেট করা যায়।

kt_satt_skill_example_id=527

আউটলাইন কালার

আউটলাইনের কালার সেট করার জন্য outline-color প্রোপার্টিটি ব্যবহার করা হয়।

নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ

  • name - কালারের নাম ব্যবহার করে, যেমন "red"
  • Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন "#ff0000"
  • RGB - RGB ভ্যালু ব্যবহার করে, যেমন “rgb(255,0,0)”

kt_satt_skill_example_id=528

আউটলাইন শর্টকাট প্রোপার্টি

আপনি উপরের উদাহরণ গুলো লক্ষ্য করলে দেখবেন যে, আউটলাইনের কিছু উপ-আউটলাইন প্রোপার্টি রয়েছে এবং এক্ষেত্রে কোডের দৈর্ঘ্যও বেড়ে গিয়েছে।

তাই কোড সংক্ষিপ্ত করার জন্য, একটি আউটলাইন প্রোপার্টির মধ্যে সবগুলো আউটলাইন প্রোপার্টি ব্যবহার করা হয়।

নিচের উপ-আউটলাইন প্রোপার্টিসমূহের শর্টকাট প্রোপার্টি হলো outline

  • outline-width
  • outline-style(আবশ্যক)
  • outline-color

kt_satt_skill_example_id=529


 

Content added By

সিএসএস টেক্সট (CSS Text)


টেক্সট ফরমেট

এই টেক্সটগুলোকে স্টাইল করার জন্য কিছু টেক্সট ফরম্যাট প্রোপার্টি ব্যবহার করা হয়েছে। হেডিং-এ text-align, text-transform এবং color প্রোপার্টি ব্যবহার করা হয়েছে। প্যারাগ্রাফে ইনডেন্ট এলাইন এবং ক্যারেক্টার স্পেসিং নির্দিষ্ট করে দেয়া হয়েছে।


এক নজরে সিএসএস টেক্সট প্রোপার্টিসমূহ

color

টেক্সটের কালার সেট করার জন্য ব্যবহার করা হয়।

direction

টেক্সটের ডিরেকশন সেট করার জন্য ব্যবহার করা হয়।

letter-spacing

শব্দের মধ্যে দুটি অক্ষরের মধ্যবর্তী স্পেস বৃদ্ধি বা হ্রাস করার জন্য ব্যবহার করা হয়।

line-height

দুটি লাইনের মধ্যবর্তী উচ্চতা সেট করার জন্য ব্যবহার করা হয়।

text-align

টেক্সটের হরিজন্টাল এলাইনমেন্ট সেট করার জন্য ব্যবহার করা হয়।

text-decoration

টেক্সটকে সাজসজ্জা বা ডেকোরেটশন করার জন্য ব্যবহার করা হয়।

text-indent

একটি টেক্সট ব্লকের প্রথম লাইনটির ইন্ডেন্টেশন সেট করার জন্য ব্যবহার করা হয়।

text-shadow

টেক্সটের মধ্যে স্যাডো ইফেক্ট তৈরি করার জন্য ব্যবহার করা হয়।

text-transform

টেক্সট ক্যাপিটাইলেজশন নিয়ন্ত্রন করার জন্য ব্যবহার করা হয়।

unicode-bidi

direction প্রোপার্টির সাথে ব্যবহৃত হয়ে একই ডকুমেন্টের মধ্যে বিভিন্ন ভাষা সাপোর্ট করানোর জন্য। টেক্সট ওভাররাইড হবে কিনা তা সেট বা রিটার্ন করে।

vertical-align

এলিমেন্টের ভার্টিকাল এলাইনমেন্ট সেট করার জন্য ব্যবহার করা হয়।

white-space

এলিমেন্ট গুলোর মধ্যে কতগুলো হোয়াইট স্পেস নেওয়া হবে তা ঠিক করার জন্য ব্যবহার করা হয়।

word-spacing

বাক্যের মধ্যে দুটি শব্দের মধ্যবর্তী স্পেস বৃদ্ধি বা হ্রাস করার জন্য ব্যবহার করা হয়।


color প্রোপার্টি

টেক্সটকে বিভিন্ন কালার করার জন্য color প্রোপার্টি ব্যবহার করা হয়।

নিচের যেকোনো একটি পদ্ধতি ব্যবহার করে কালার সেট করা যায়ঃ

  • name - কালারের নাম ব্যবহার করে, যেমন "green"
  • Hex - হেক্সাডেসিমাল ভ্যালু ব্যবহার করে, যেমন "#00ff00"
  • RGB - RGB ভ্যালু ব্যবহার করে, যেমন “rgb(0,255,0)”


কালার ভ্যালু সম্পর্কে সম্পূর্ণ ধারনা পাওয়ার জন্য আমাদের সিএসএস কালার ভ্যালু লিংক থেকে ঘুরে আসুন।

একটি পেজের ডিফল্ট টেক্সট কালার সেট করার জন্য body সিলেক্টর ব্যবহার করতে হয়।

নিচের উদাহরণে body সিলেক্টর দ্বারা একটি পেজের ডিফল্ট টেক্সট কালার blue সেট করা হলো। ফলে ডিফল্টভাবে এই পেজের টেক্সট কালার হবে blue

kt_satt_skill_example_id=538


text-align প্রোপার্টি

text-align প্রোপার্টি ব্যবহার করে টেক্সটের আনুভূমিক(horizontal) এলাইনমেন্ট সেট করা হয়।

টেক্সটে left, right, centered অথবা justified এই চার ধরনের এলাইনমেন্ট ব্যবহার করা যায়।

নিচের উদাহরণে টেক্সট এর জন্য center, left এবং right এলাইন ব্যবহার করা হয়েছে। টেক্সট এর নির্দেশনা বাম থেকে ডানে হলে left এলাইনমেন্ট ডিফল্ট হবে এবং টেক্সট এর নির্দেশনা ডান থেকে বামে হলে right এলাইনমেন্ট ডিফল্ট হবে।


kt_satt_skill_example_id=544



যখন text-align প্রোপার্টির ভ্যালু "justify" সেট করা হয়, তখন প্রত্যেক লাইন বামে ও ডানে সমানভাবে প্রসারিত হয়। অনেকটা ম্যাগাজিন এবং পত্রিকার মত বামে ও ডানে মার্জিন নিয়ে নেয়।

kt_satt_skill_example_id=546


text-decoration প্রোপার্টি

টেক্সট ডেকোরেশন সেট করতে বা মুছে ফেলার জন্য text-decoration প্রোপার্টিটি ব্যবহার করা হয়।

টেক্সটের নিচের আন্ডারলাইন মুছে ফেলার জন্য text-decoration: none; ব্যবহার করা হয়।

kt_satt_skill_example_id=552

বিঃদ্রঃ সাধারণত হাইপারলিংক যুক্ত টেক্সট আন্ডারলাইন হয়। এই উদাহরণটিতে text-decoration: none; ব্যবহার করায় লিংকটিতে কোন আন্ডারলাইন হয়নি।



টেক্সট ডেকোরেশনের জন্য text-decoration-এ অন্যান্য যে ভ্যালু গুলো ব্যবহৃত হয়ঃ

kt_satt_skill_example_id=556


text-transform প্রোপার্টি

টেক্সটকে সাধারণত বড় এবং ছোট হাতের অক্ষরে উপস্থাপন করার জন্য text-transform প্রোপার্টিটি ব্যবহার করা হয়।

এটি সাধারণত বড় হাতের অক্ষর(uppercase)-কে ছোট হাতের অক্ষরে(lowercase) বা ছোট হাতের অক্ষরকে বড় হাতের অক্ষরে রুপান্তরিত করার জন্য অথবা শব্দের প্রথম বর্ণকে বড় হাতের অক্ষরে লেখার জন্য ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=558



text-indent প্রোপার্টি

টেক্সটের প্রথম লাইনে ইনডেন্ট দেওয়ার জন্য text-indent প্রোপার্টি ব্যবহার করা হয়।

kt_satt_skill_example_id=561



letter-spacing প্রোপার্টি

টেক্সটের মধ্যে দুটি অক্ষরের মধ্যবর্তী দুরত্ব বাড়ানো বা কমানোর জন্য letter-spacing প্রোপার্টিটি ব্যবহার করা হয়।

নিচের উদাহরণে দেখানো হলো কিভাবে অক্ষরের স্পেস বাড়ানো বা কমানো যায়ঃ

kt_satt_skill_example_id=563



letter-spacing প্রোপার্টি

টেক্সটের মধ্যে দুটি অক্ষরের মধ্যবর্তী দুরত্ব বাড়ানো বা কমানোর জন্য letter-spacing প্রোপার্টিটি ব্যবহার করা হয়।

নিচের উদাহরণে দেখানো হলো কিভাবে অক্ষরের স্পেস বাড়ানো বা কমানো যায়ঃ

kt_satt_skill_example_id=568


direction প্রোপার্টি

একটি এলিমেন্টের টেক্সটের ডিরেকশন পরিবর্তন করার জন্য direction প্রোপার্টিটি ব্যবহার করা হয়।

kt_satt_skill_example_id=569


word-spacing প্রোপার্টি

বাক্যের মধ্যে দুটি শব্দের মধ্যবর্তী স্পেস বাড়ানো বা কমানোর জন্য word-spacing প্রোপার্টি ব্যবহার করা হয়।

নিচের উদাহরণের মাধ্যমে দেখানো হলো কিভাবে দুটি শব্দের মধ্যবর্তী স্পেস বাড়ানো বা কমানো যায়ঃ

kt_satt_skill_example_id=573


 

Content added || updated By

টেক্সটের জন্য ফন্ট ফ্যামিলি, গাঢ়ত্ব, সাইজ এবং স্টাইল নির্ধারণ করতে সিএসএস font প্রোপার্টি ব্যবহার করা হয়।


Serif এবং Sans-serif ফন্টের মধ্যে পার্থক্যঃ

Serif vs Sans-serif


এক নজরে সিএসএস ফন্ট প্রোপার্টিসমূহ

font

একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো ফন্ট প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।

font-size

টেক্সটের ফন্ট সাইজ সেট করার জন্য ব্যবহার করা হয়।

font-family

টেক্সটের ফন্ট ফ্যামিলি সেট করার জন্য ব্যবহার করা হয়।

font-style

টেক্সটের ফন্ট স্টাইল সেট করার জন্য ব্যবহার করা হয়।

font-variant

টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা তা নির্ধারণ করে।

font-weight

ফন্টকে গাঢ় বা হালকাভাবে উপস্থাপন করে।


সিএসএস ফন্ট ফ্যামিলি

সিএসএসের মধ্যে দুই ধরনের ফন্ট ফ্যামিলি রয়েছেঃ

  • generic family - দেখতে প্রায় একইরকম ফন্ট ফ্যামিলির একটি গ্রুপ। যেমন-"Serif", "Monospace" ইত্যাদি।
  • font family - একটি নির্দিষ্ট ফন্ট ফ্যামিলি যেমনঃ "Times New Roman", "Arial" ইত্যাদি।

বিঃদ্রঃ কম্পিঊটারের স্ক্রিনে serif ফন্টের চেয়ে sans-serif ফন্ট খুব সহজে পড়া যায়


ফন্ট ফ্যামিলি

font-family প্রোপার্টির মাধ্যমে টেক্সটের ফন্ট ফ্যামিলি সেট করা হয়।

font-family প্রোপার্টিতে "fallback" সিস্টেম হিসাবে বিভিন্ন ফন্ট এর নাম রাখা উচিত। যদি কোন ব্রাউজারে প্রথম ফন্টটি সাপোর্ট না করে, তাহলে তা পরবর্তী ফন্টের জন্য চেষ্টা করে এবং এভাবে চলতে থাকে।

আপনার পছন্দ অনুযায়ী ফন্টের নাম দিয়ে শুরু করুন এবং generic family দ্বারা শেষ করুন। কারণ যদি অন্য কোন ফন্ট না কাজ করে তাহলে ব্রাউজার তার মত করে generic family'র মধ্য থেকে একই ধরণের ফন্ট বাছাই করে নিবে।

বিঃদ্রঃ যদি কোনো ফন্ট ফ্যামিলির নাম এক শব্দের চেয়ে বেশি হয় তাহলে এটাকে অবশ্যই কোটেশন মার্ক(" ") এর মধ্যে রাখতে হবে। যেমনঃ "Times New Roman"

একের অধিক ফন্ট ফ্যামিলি থাকলে কমা(,) দ্বারা সেগুলোকে আলাদা করতে হবেঃ


kt_satt_skill_example_id=586



সচরাচর ব্যবহৃত ফন্টসমূহ সম্বন্ধে জানতে আমাদের ওয়েব সেফ ফন্টের সমাহার পেজটি ভিজিট করুন।


font-style প্রোপার্টি

অধিকাংশ ক্ষেত্রেই ফন্টসমূহকে হালকা বাঁকাভাবে(italic) উপস্থাপন করার জন্য font-style প্রোপার্টিটি ব্যবহার করা হয়।

এই প্রোপার্টিতে ৩টি ভ্যালু ব্যবহার করা যায়ঃ

  • normal - টেক্সটকে সাধারণভাবে দেখানো হয়।
  • italic - টেক্সটকে ইটালিক স্টাইলে দেখানো হয়।
  • oblique - এটি italic এর মত টেক্সটকে বাঁকা করে। কিনতু ইটালিকের তুলনায় ইহা কম সমর্থিত।

kt_satt_skill_example_id=590



font-size প্রোপার্টি

টেক্সটের সাইজ নির্ধারণ করার জন্য font-size প্রোপার্টি ব্যবহার করা হয়।

ওয়েব ডিজাইনিং এর ক্ষেত্রে টেক্সটের আকার(size) নির্ধারণ করা খুবই গুরুত্বপূর্ণ। যাইহোক, font-size প্রোপার্টি ব্যবহার করে প্যারাগ্রাফকে হেডিং এর সাইজে অথবা হেডিং কে প্যারাগ্রাফের সাইজে করা মোটেও উচিত হবে না।

সবসময় প্রয়োজন অনুযায়ী উপযুক্ত এইচটিএমএল ট্যাগ ব্যবহার করা উচিত। যেমন- হেডিং এর জন্য

থেকে
ট্যাগ এবং প্যারাগ্রাফ এর জন্য

ট্যাগ ব্যবহার করা উচিত।

font-size প্রোপার্টির ভ্যালু absolute অথবা relative হতে পারে।

বিঃদ্রঃ আপনি যদি ফন্টের সাইজ না সেট করে দেন, তাহলে ব্রাউজার থেকে ডিফল্টভাবে সাইজ নিয়ে নিবে।
       যেমন- প্যারাগ্রাফ এর জন্য ডিফল্ট সাইজ হলো 16px (16px = 1em)।



Px এককে ফন্ট সাইজ নির্ধারণ

Px একক ব্যবহার করে আপনি আপনার ইচ্ছা মত টেক্সট এর আকার নির্ধারণ করতে পারেনঃ


kt_satt_skill_example_id=594


Em এককে ফন্ট সাইজ নির্ধারণ

একজন ইউজারকে ব্রাউজার মেনু থেকে টেক্সট রিসাইজ(resize) করতে দেওয়ার জন্য অনেক ডেভেলপারই px এর পরিবর্তে em একক ব্যবহার করেন।

ফন্টের সাইজ নির্ধারণে em একক W3C সমর্থিত।

একটি ব্রাউজারের চলমান ফন্ট সাইজ হলো 1em এর সমান এবং ব্রাউজারের ডিফল্ট টেক্সট সাইজ হল 16px। সুতরাং 1em এর ডিফল্ট সাইজ = 16px।

পিক্সেলকে em এ কনভার্টের জন্য pixels/16 =em ফর্মূলা ব্যবহার করা হয়।



font-weight প্রোপার্টি

ফন্ট গাঢ় বা হালকা করার জন্য font-weight প্রোপার্টি ব্যবহার করা হয়ঃ

kt_satt_skill_example_id=599


font-variant প্রোপার্টি

টেক্সটের ফন্টসমূহ small-caps আকারে দেখাবে কিনা font-variant প্রোপার্টির মাধ্যমে তা নির্ধারণ করা হয়।

small-caps ফন্টে সকল ছোট অক্ষরের বর্ণ গুলো বড় অক্ষরের বর্ণে রুপান্তরিত হয়। রুপান্তরিত বড় অক্ষরের বর্ণগুলো প্রকৃত সাইজের চেয়ে ছোট হয়ে বড় অক্ষর হিসাবে ব্রাউজারে প্রদর্শিত হয়।


kt_satt_skill_example_id=601


 

Content added By

লিংক স্টাইল

যেকোনো সিএসএস প্রোপার্টি যেমন- color, background-color, margin ইত্যাদি প্রোপার্টির মাধ্যমে লিংকের স্টাইল করা যায়।

kt_satt_skill_example_id=610



এছাড়াও লিংকটি কি অবস্থায়(state) আছে তার উপর ভিত্তি করেও পৃথকভাবে লিংকের স্টাইল করা যেতে পারে।

একটি লিংক সচরাচর চারটি অবস্থায় থাকে।

লিংকের অবস্থাসমূহ নিম্নে তুলে ধরা হলোঃ

  • a:link - এটি একটি স্বাভাবিক লিংক যা ইউজার কর্তৃক এখনো প্রদর্শিতি(visited) হয় নি।
  • a:visited - ইউজার কর্তৃক পরিদর্শিত(visited) একটি লিংক।
  • a:hover - ইউজার কর্তৃক মাউজ কার্সর লিংকের উপর রাখা অবস্থাকে নির্দেশ করে।
  • a:active - ইউজার কর্তৃক ক্লিক করা হয়েছে এমন একটি লিংক।

kt_satt_skill_example_id=611

বিঃদ্রঃ ভালো ফলাফলের জন্য লিংক স্টাইলের এই ক্রম অবশ্যই অনুসরণ করতে হবে।



লিংকের বিভিন্ন অবস্থার জন্য পৃথকভাবে স্টাইল সেট করতে হলে নিচের নিয়ম দুটি মেনে চলতে হবে।

  • a:link এবং a:visited এর পরে a:hover ব্যবহার করতে হবে।
  • a:hover এর পরে a:active ব্যবহার করতে হবে।

background-color প্রোপার্টি

লিংকের ব্যাকগ্রাউন্ড-কালার সেট করার জন্য background-color প্রোপার্টি ব্যবহার করা হয়।

a:link {
 background-color: lawngreen;
}
a:visited {
 background-color: green;
}
a:hover {
 background-color: lightsalmon;
}
a:active {
 background-color: hotpink;
}

text-decoration প্রোপার্টি

লিংক থেকে আন্ডারলাইন মুছে ফেলার জন্য text-decoration প্রোপার্টির ভ্যালু none ব্যবহার করা হয়।

kt_satt_skill_example_id=615



লিংক বাটন

লিংককে বক্স বা বাটনের মত তৈরি করার জন্য অতিরিক্ত যে সিএসএস প্রোপার্টি ব্যবহার করা হয় তা নিম্নের উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=620

বিঃদ্রঃ আমরা চাইলে এই বাটনটির মধ্যে লিংকের বিভিন্ন অবস্থা(state) প্রয়োগ করতে পারবো।


 

Content added By

সিএসএস লিস্ট (CSS List)


এইচটিএমএল লিস্টকে বিভিন্নভাবে মার্কিং করার জন্য সিএসএস list-* প্রোপার্টি ব্যবহার করা হয়।



এইচটিএমএল লিস্ট এবং সিএসএস লিস্ট প্রোপার্টি

এইচটিএমএলে সাধারণত দুই ধরনের লিস্ট রয়েছেঃ

  • আন-অর্ডার লিস্ট (< ul>): - লিস্ট আইটেম গুলোকে বুলেট চিহ্ন দিয়ে মার্কিং করে।
  • অর্ডার লিস্ট (< ol>): - লিস্ট আইটেম গুলোকে সংখ্যা বা অক্ষর দিয়ে মার্কিং করে।


সিএসএস list প্রোপার্টির মাধ্যমে আপনি নিম্নোক্ত স্টাইলসমূহ করতে পারবেনঃ

  • অর্ডার লিস্টের আইটেমগুলোকে বিভিন্নভাবে মার্কিং করতে পারবেন।
  • আন-অর্ডার লিস্টের আইটেমগুলোকে বিভিন্নভাবে মার্কিং করতে পারবেন।
  • ইমেজ দিয়ে লিস্ট আইটেমকে মার্কিং করতে পারবেন।
  • লিস্ট এবং লিস্ট আইটেমে ব্যাকগ্রাউন্ড কালার সেট করতে পারবেন।

এক নজরে সিএসএস লিস্ট প্রোপার্টিসমূহ

প্রোপার্টিবর্ণনা
list-styleএকটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো লিস্ট প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড প্রোপার্টি।
list-style-imageলিস্ট আইটেমে মার্কিং হিসেবে ইমেজ সেট করার জন্য ব্যবহার করা হয়।
list-style-positionলিস্ট আইটেমের মার্কার কন্টেন্টের ভেতরে নাকি বাহিরে প্রদর্শিত হবে তা নির্ধারণ করে।
list-style-typeলিস্ট আইটেমকে মার্কিং করার জন্য টাইপ নির্ধারণ করে।



 

লিস্ট আইটেমকে বিভিন্নভাবে মার্কিং করার উপায়

লিস্টের আইটেমসমূহকে বিভিন্নভাবে মার্কিং করতে হলে সিএসএস list-style-type প্রোপার্টিটি ব্যবহার করতে হবে।

নিচের উদাহরণে লিস্টের আইটেমসমূহে কিছু মার্কারের ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=635

বিঃদ্রঃ list-style-type প্রোপার্টির কিছু ভ্যালু আন-অর্ডার লিস্টের জন্য এবং কিছু ভ্যালু অর্ডার লিস্টের জন্য ব্যবহৃত হয়।


ইমেজ দিয়ে লিস্ট আইটেম মার্কিং

ইমেজ দিয়ে লিস্ট আইটেমকেে মার্কিং করতে হলে সিএসএস list-style-image প্রোপার্টিটি ব্যবহার করতে হয়।

kt_satt_skill_example_id=637



 

লিস্ট আইটেমে মার্কারের পজিশন

লিস্ট আইটেমে মার্কার কন্টেন্টের ভেতরে প্রদর্শিত হবে নাকি বাহিরে প্রদর্শিত হবে তা সেট করার জন্য সিএসএস list-style-position প্রোপার্টিটি ব্যবহার করা হয়।

kt_satt_skill_example_id=640


লিস্টকে কালার করা

লিস্ট আইটেমগুলোকে আরোও দর্শনীয় করে উপস্থাপন করতে আমরা লিস্ট এবং লিস্ট আইটেমের ব্যাকগ্রাউন্ডকে কালার করতে পারি।

< ol> বা < ul> ট্যাগে কোনো স্টাইল যোগ করলে সম্পূর্ণ লিস্টেই এর প্রভাব পড়ে। কিন্তু < li> ট্যাগে স্টাইল যোগ করে আমরা লিস্ট আইটেমসমূহকে পৃথকভাবে স্টাইল করতে পারি।

kt_satt_skill_example_id=643



লিস্ট শটকার্ট প্রোপার্টি

list-style প্রোপার্টি হল লিস্টের জন্য একটি শর্টকার্ট প্রোপার্টি। একটি ডিক্লেয়ারেশনের মধ্যে সবগুলো লিস্ট প্রোপার্টি সেট করার জন্য এই প্রোপার্টি ব্যবহার করতে হয়।

শর্টকার্ট প্রোপার্টি ব্যবহার করতে হলে প্রোপার্টির নিম্নোক্ত ধারা মেনে চলতে হবেঃ

  1. list-style-type:- লিস্ট আইটেমকে মার্কিং করার জন্য যদি list-style-image প্রোপার্টি সেট করা হয়, কিন্তু কোনো কারণে যদি ইমেজ না প্রদর্শিত হয় তাহলে list-style-type প্রোপার্টির ভ্যালু প্রদর্শিত হবে।
  2. list-style-position:- লিস্ট আইটেমে মার্কার কন্টেন্টের ভেতরে না বাহিরে প্রদর্শিত হবে তা ঠিক করে দেয়।
  3. list-style-image:- ইমেজ দিয়ে লিস্ট আইটেমকেে মার্কিং করার জন্য এটি ব্যবহার করা হয়।

উপরের কোন একটি প্রোপার্টির ভ্যালু যদি বাদ পড়ে, তাহলে বাদ পড়া প্রোপার্টির জন্য ডিফল্ট ভ্যালু যুক্ত হবে।

kt_satt_skill_example_id=645


 

Content added By

সিএসএস টেবিল (CSS Table)


নিচে যে সুন্দর একটি এইচটিএমএল টেবিল দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।

এই অধ্যায়ে আমরা ধাপে ধাপে এধরনের টেবিল তৈরি করা শিখবোঃ

খেলোয়াড়ের নামদলীয় অবস্থানদেশ
মাশরাফি বিন মুর্তজাক্যাপ্টেন এবং বোলারবাংলাদেশ
সাকিব আল হাসানঅলরাউন্ডারবাংলাদেশ
ডু প্লেসিসক্যাপ্টেন এবং ব্যাটসম্যানদক্ষিন আফ্রিকা
বিরাট কোহলিব্যাটসম্যানভারত

 


একনজরে সিএসএসের টেবিল প্রোপার্টিসমূহ

প্রোপার্টিবর্ণনা
borderএকটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো বর্ডার প্রোপার্টি সেট করার জন্য একটি শর্টকাট প্রোপার্টি।
border-collapseটেবিলের বর্ডার কলাপ্স হবে কিনা তা নির্ধারণ করে।
border-spacingপাশাপাশি দুটি সেলের বর্ডারের দূরত্ব নির্ধারণ করে।
caption-sideটেবিল ক্যাপশনের অবস্থান নির্ধারণ করে।
empty-cellsএকটি টেবিলের মধ্যে খালি সেল এর বর্ডার এবং ব্যাকগ্রাউন্ড প্রদর্শিত হবে কিনা তা নির্ধারণ করে।
table-layoutএকটি টেবিলের লেআউট নির্ধারণ করে।

 


টেবিলে বর্ডার সেট

< table> এর চারপাশে বর্ডার সেট করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করতে হয়।

kt_satt_skill_example_id=695

উপরের উদাহরণে লক্ষ্য করলে দেখবেন, শুধুমাত্র < table> এর চারপাশে বর্ডার আছে। কিন্তু < th> এবং < td> এলিমেন্টে কোনো বর্ডার নাই।


< table>, < th> এবং < td> এলিমেন্টে বর্ডার দিতে হলে এদের প্রত্যেকটিতে পৃথকভাবে border প্রোপার্টি সেট করতে হবে।

kt_satt_skill_example_id=701

উপরের উদাহরণে লক্ষ্য করলে দেখবেন, টেবিলের মধ্যে ডাবল বর্ডার দেখা যাচ্ছে। কারণ

,
এবং তিনটি এলিমেন্টের জন্য পৃথকভাবে বর্ডার সেট করা হয়েছে।


টেবিলের বর্ডার কলাপ্স

টেবিলের বর্ডারসমূহ একটি একক বর্ডারে কলাপ্স হবে কিনা অর্থাৎ দুটি বর্ডার এক হয়ে যাবে কিনা তা নির্ধারণ করার জন্য border-collapse প্রোপার্টিটি ব্যবহার করা হয়।

kt_satt_skill_example_id=702

উপরের উদাহরনে border-collapse প্রোপার্টি ব্যবহার করায় দুটি বর্ডার একত্রিত হয়ে একটি বর্ডারে পরিনত হয়েছে।


টেবিলের টেক্সট এলাইনমেন্ট সেট

টেবিলের < th> এবং < td> এলিমেন্টের কন্টেন্টসমূহ অনুভূমিকভাবে সেন্টারে, বামে নাকি ডানে দেখাবে তা সেট করার জন্য সিএসএস text-align প্রোপার্টি ব্যবহার করা হয়।

ডিফল্টভাবে < th> এলিমেন্টেের কন্টেন্টসমূহ সেন্টারে থাকে এবং < td> এলিমেন্টের কন্টেন্টসমূহ বামে থাকে।

নিচের উদাহরনে < th> এলিমেন্টের কন্টেন্টসমূহের এলাইনমেন্ট left নির্ধারণ করা হয়েছে।

kt_satt_skill_example_id=703

বিঃদ্রঃ এছাড়াও আপনি চাইলে কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করতে পারবেন।  < th> এবং < td> এলিমেন্টের কন্টেন্টকে ভার্টিক্যাললি এ্যালাইন করার জন্য vertical-align প্রোপার্টিটি ব্যবহার করুন। এর সম্ভাব্য ভ্যালুগুলো হলোঃ top এবং bottom


টেবিলের প্রস্থ এবং উচ্চতা সেট

টেবিলের প্রস্থ এবং উচ্চতা নির্ধারণ করার জন্য সিএসএস width এবং height প্রোপার্টি ব্যাবহার করা হয়।

নিচের উদাহরনে < table> এর প্রস্থ সেট করা হয়েছে 100% এবং < th> এলিমেন্টের height সেট করা হয়েছে 50px।

kt_satt_skill_example_id=707


টেবিলে প্যাডিং যুক্তকরণ

টেবিলের বর্ডার এবং কন্টেন্ট এর মধ্যে স্পেস নিয়ন্ত্রন করার জন্য < th> এবং < td> এলিমেন্টে padding প্রোপার্টি ব্যবহার করা হয়।

kt_satt_skill_example_id=711


সারিকে অনুভূমিকভাবে বিভাজন

টেবিলের সারিগুলোকে অনুভূমিক ভাবে বিভাজন করার জন্য < th> এবং < td> এলিমেন্টে border-bottom প্রোপার্টি যুক্ত করা হয়।

kt_satt_skill_example_id=714


 

টেবিলের সারিতে পৃথকভাবে কালার সেট

নিচের উদাহরণে < th> এলিমেন্টের ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালার নির্ধারণ করা হয়েছেঃ

kt_satt_skill_example_id=720



টেবিলে জেব্রা স্টাইল যুক্তকরণ

টেবিলকে জেব্রা স্টাইল করতে হলে nth-child() সিলেক্টর ব্যবহার করে টেবিলের জোড় অথবা বিজোড় সারিতে background-color প্রোপার্টি যুক্ত করতে হবে।

kt_satt_skill_example_id=738


টেবিলে হোভার ইফেক্ট যুক্তকরণ

টেবিলের সারির উপর মাউস নেওয়ার পরে সারিকে হাইলাইট করার জন্য < tr> এলিমেন্টে :hover সিলেক্টর ব্যবহার করে সিএসএস প্রয়োগ করুন।

kt_satt_skill_example_id=732


রেসপন্সিভ টেবিল তৈরি করা

টেবিলকে রেস্পন্সিভ করার জন্য

এলিমেন্টকে
এলিমেন্টের মধ্যে রেখে
এলিমেন্টে overflow-x: auto প্রোপার্টি ব্যবহার করুন।

kt_satt_skill_example_id=736

বিঃদ্রঃ রেসপন্সিভনেস বুঝার জন্য ব্রাউজারের উইন্ডো রিসাইজ করুন।


 

Content added || updated By

সিএসএস ডিসপ্লে (CSS Display)


সিএসএসের মাধ্যমে একটি ওয়েবপেজকে সুন্দরভাবে উপস্থাপনের জন্য সবচেয়ে বেশি ব্যবহৃত এবং গুরুত্বপূর্ন প্রোপার্টি হলো display প্রোপার্টি।
 


এক নজরে সিএসএস display এবং visibility প্রোপার্টি

 

display

এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা উল্লেখ করে।

visibility

এইচটিএমএল এলিমেন্টটি দৃশ্যমান হবে কিনা তা উল্লেখ করে।


display প্রোপার্টির ব্যবহার

একটি এলিমেন্টকে কিভাবে প্রদর্শন করানো হবে তা display প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়।

এলিমেন্টের ধরনের উপর ভিত্তি করে অধিকাংশ এইচটিএমএল এলিমেন্টেরই একটি ডিফল্ট display ভ্যালু রয়েছে। অধিকাংশ এলিমেন্টের ডিফল্ট ভ্যালু হলো inline অথবা block


এইচটিএমএল ইনলাইন এলিমেন্ট

একটি ইনলাইন এলিমেন্ট নতুন লাইনে শুরু হয় না এবং যতটুকু দৈর্ঘ্য প্রয়োজন ততটুকুই নেয়।

এটি একটি প্যারাগ্রাফ এলিমেন্ট। এই প্যারাগ্রাফের মধ্যে ইনলাইন এলিমেন্ট রয়েছে।

কয়েকটি ইনলাইন এলিমেন্ট নিম্নে দেখানো হলোঃ

kt_satt_skill_example_id=745


এইচটিএমএল ব্লক-লেভেল এলিমেন্ট

এইচটিএমএল ব্লক-লেভেল(block-level) এলিমেন্ট সবসময়ই একটি নতুন লাইন দিয়ে শুরু হয় এবং এর কন্টেইনারের বাম পাশ থেকে ডান পাশ পর্যন্ত সম্পূর্ণ অংশ দখল করে।

এটি একটি

এলিমেন্ট, যা একটি ব্লক লেভেল এলিমেন্ট।

কয়েকটি ব্লক-লেভেল এলিমেন্ট নিম্নে দেখানো হলঃ

  • -

    kt_satt_skill_example_id=746



    এলিমেন্টের ডিফল্ট display ভ্যালু পরিবর্তন

    আমরা ইতিমধ্যেই দেখেছি যে, প্রত্যেকটি এইচটিএমএল এলিমেন্টের জন্য একটি ডিফল্ট display ভ্যালু ব্যবহৃত হয়। যেমন- inline অথবা block। আপনি সিএসএস display প্রোপার্টি ব্যবহার করে এই ভ্যালু পরিবর্তন করতে পারেন।

    এইচটিএমএল এলিমেন্ট সমূহকে আপনি আপনার মত করে উপস্থাপন করার জন্য একটি ইনলাইন এলিমেন্টকে একটি ব্লক লেভেল এলিমেন্ট অথবা একটি ব্লক লেভেল এলিমেন্টকে ইনলাইন এলিমেন্টে রূপান্তরিত করতে পারেন। এতে ওয়েবে স্ট্যান্ডার্ড ভঙ্গ হয় না।

    হরিজন্টাল মেনুবার তৈরি করার জন্য < li> এলিমেন্টকে আমরা প্রায়ই ইনলাইন এলিমেন্টে রূপান্তরিত করি।

    kt_satt_skill_example_id=747

    বিঃদ্রঃ একটি এইচটিএমএল এলিমেন্ট কিভাবে প্রদর্শিত হবে তা ঠিক করে দেওয়ার জন্য সিএসএস display প্রোপার্টি ব্যবহার করা হয়। এলিমেন্টের ধরণ পরিবর্তন করার জন্য display প্রোপার্টি ব্যবহার করা হয় না। সুতরাং প্রোপার্টি-ভ্যালু display: block; সম্বলিত কোনো এইচটিএমএল এলিমেন্টের মধ্যে একই লাইনে অন্য কোনো এলিমেন্ট অবস্থান নিতে পারে না।


    নিচের উদাহরণে < span> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোঃ

    kt_satt_skill_example_id=749

    নিচের উদাহরণে < a> এলিমেন্টকে ব্লক এলিমেন্ট হিসাবে প্রদর্শন করানো হলোেঃ

    kt_satt_skill_example_id=752



    display: none; এর ব্যবহার

    একটি এলিমেন্টকে ডিলেট না করে বা পূনরায় সৃষ্টি না করে লুকানো অথবা দেখানোর জন্য জাভাস্ক্রিপ্টের সাথে display: none; প্রোপার্টি ব্যবহার করা হয়।

    < script> এলিমেন্টে ডিফল্টভাবে display: none; ব্যবহৃত হয়।


    kt_satt_skill_example_id=754


    এলিমেন্টকে সুপ্ত অবস্থায় রাখা

    এইচটিএমএল এলিমেন্টকে সুপ্ত(hidden) অবস্থায় রাখতে হলে প্রোপার্টি-ভ্যালু display: none; অথবা visibility:hidden ব্যবহার করতে হয়।

    display: none; ব্যবহার করলে এইচটিএমএল পেজ এমনভাবে প্রদর্শিত হবে মনে হবে সুপ্ত এলিমেন্টটি এই পেজে নেই।

    kt_satt_skill_example_id=756


     

সিএসএস ম্যাক্স-ওয়াইথ (CSS Max-width)


width, max-width এবং margin: auto এর ব্যবহার

পূর্ববর্তী অধ্যায় থেকে আমরা জেনেছি যে, একটি ব্লক-লেভেল এলিমেন্ট সবসময় সম্পূর্ণ প্রস্থ অর্থাৎ বাম এবং ডানদিকে যতটা সম্ভব জায়গা দখল করে।

ব্লক লেভেল এলিমেন্টে width সেট করে দিলে এর কন্টেইনারের শেষ প্রান্ত পর্যন্ত প্রস্থ দখল করতে পারে না।

 

এর পরে আপনি এলিমেন্টটিকে কন্টেইনারের মধ্যে অনুভূমিকভাবে সেন্টারে রাখতে চাইলে margin প্রোপার্টির ভ্যালু auto সেট করতে হবে।

এক্ষেত্রে এলিমেন্টটি নির্দিষ্ট প্রস্থ দখল করবে এবং বাকী অংশটুকু উভয় পাশের মার্জিনের জন্য সমানভাবে ভাগ করে দিবে।

এই

এলিমেন্টটিতে width প্রোপার্টির ভ্যালু সেট করা হয়েছে 600px এবং margin প্রোপার্টির ভ্যালু সেট করা হয়েছে auto


 

এলিমেন্টের width(600px) থেকে ব্রাউজার উইন্ডো ছোট হলে উপরের

এলিমেন্ট নিয়ে সমস্যায় পড়তে হবে।

অর্থাৎ ব্রাউজার একটি হরিজন্টাল স্ক্রলবার সৃষ্টি করবে।

এই সমস্যা থেকে উত্তরণের জন্য max-width প্রোপার্টি ব্যবহার করা হয়।


এই

এলিমেন্টটিতে max-width প্রোপার্টির ভ্যালু সেট করা হয়েছে 600px এবং margin প্রোপার্টির ভ্যালু সেট করা হয়েছে auto


 

বিঃদ্রঃ আমাদের এই অধ্যায়ে ব্যবহৃত

দুটির মধ্যে পার্থক্য দেখার জন্য ব্রাউজার উইন্ডোর আকার 600px থেকে ছোট করুন।

নিচের উদাহরণে এদের ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=762

বিঃদ্রঃ দুটি

এর মধ্যে পার্থক্য় বুঝার জন্য ব্রাউজার উইন্ডোর আকার 600px থেকে ছোট করুন।


 

Content added By

সিএসএস পজিশন (CSS Position)


একটি এলিমিন্টের পজিশন স্ট্যাটিক(static), রিলেটিভ(relative), ফিক্সড(fixed), এবসোলিউট(absolute) নাকি স্টিকি(sticky) হবে তা নির্ধারণ করার জন্য সিএসএস position প্রোপার্টি ব্যবহার করা হয়।

অর্থাৎ একটি এলিমেন্টের পজিশন সেট করার জন্য সিএসএস position প্রোপার্টি ব্যবহার করা হয়।

positionপ্রোপার্টির কীওয়ার্ড(keyword) ভ্যালুসমূহঃ

  • position: static;
  • position: relative;
  • position: fixed;
  • position: absolute;
  • position: sticky;

position প্রোপার্টির গ্লোবাল(global) ভ্যালুসমূহঃ

  • position: inherit;
  • position: initial;
  • position: unset;


 

এরপরে এলিমেন্টগুলোর পজিশন ঠিক করে দেওয়ার জন্য top, bottom, left এবং right প্রোপার্টি ব্যবহার করা হয়।

যাইহোক, আপনি যদি প্রথমেই position প্রোপার্টি না সেট করে দেন তাহলে এই প্রোপার্টিসমূহ ঠিকমত কাজ করবে না। কারণ, এই প্রোপার্টিগুলো position প্রোপার্টির ভ্যালুর উপরে নির্ভরশীল।



এক নজরে সিএসএস পজিশন প্রোপার্টিসমূহ

bottom

absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের নিচ প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।

clip

absolute পজিশনে থাকা একটি এলিমেন্টের কতটুকু অংশ দৃশ্যমান হবে তা নির্ধারণ করে।

cursor

কি ধরণের মাউস কার্সর প্রদর্শিত হবে তা নির্ধারণ করে।

left

absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের বাম প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।

overflow

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।

overflow-x

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে তার ডানে বা বামে কি হবে তা নির্ধারণ করে।

overflow-y

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow হয়) তাহলে তার উপরে বা নিচে কি হবে তা নির্ধারণ করে।

position

একটি এলিমেন্টের পজিশনের ধরন নির্ধারণ করে।

right

absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের ডান প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।

top

absolute পজিশনের ক্ষেত্রে একটি এলিমেন্ট যে বক্সের মধ্যে থাকে সেই বক্স এবং উক্ত এলিমেন্টের উপর প্রান্তের মধ্যবর্তী দূরত্ব নির্ধারণ করে।

z-index

একটি এলিমেন্টের stack order সেট করে।



position:static;

এইচটিএমএল এলিমেন্টসমূহের ডিফল্টভাবে পজিশন স্ট্যাটিক থাকে।

এলিমেন্টের পজিশন স্ট্যাটিক থাকলে top, right, bottom এবং left প্রোপার্টির ভ্যালুসমূহের কোনো প্রভাব থাকে না।

position: static; প্রোপার্টি সংশ্লিষ্ট এলিমেন্ট বিশেষ কোনো পদ্ধতিতে তার নিজের পজিশন পরিবর্তন করতে পারে না। এটি সব সময় পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়ে থাকে।

kt_satt_skill_example_id=788

উপরের উদাহরণে সিলেক্টর #two-তে position: static; ব্যবহার করায় ইহা পেজের স্বাভাবিক ধারা অনুযায়ী পজিশন পেয়েছে।


position:relative;

position: relative; প্রোপার্টি সংশ্লিষ্ট এলিমেন্ট তার নিজের সাপেক্ষে পজিশন পরিবর্তন করতে পারে।

position: relative; প্রোপার্টি সংশ্লিষ্ট এলিমেন্টের স্বাভাবিক অবস্থানের পরিবর্তন ঘটানোর জন্য top, right, bottom অথবা left প্রোপার্টি ব্যবহার করা হয়।

এক্ষেত্রে এর পার্শ্ববর্তী অন্য এলিমেন্ট এসে এই ফাঁকা অংশ পূরণ করে না। অর্থাৎ ফাঁকা অংশ ফাঁকাই রয়ে যাবে।

kt_satt_skill_example_id=792

উপরের উদাহরণে সিলেক্টর #two-তে position: relative; ব্যবহার করায় এর নিজের সাপেক্ষে অবস্থানের পরিবর্তন ঘটেছে।


position:absolute;

position: absolute; যুক্ত একটি এলিমেন্ট তার নিকটবর্তী পূর্বসুরী(ancestor) এলিমেন্টের অবস্থানের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে।

যাই হোক, যদি Absolute পজিশনে থাকা এলিমেন্টের কোনো পূর্বসুরী না থকে তাহলে ইহা ডকুমেন্ট বডি(body) কে পূর্বসুরী ধরে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে এবং পেজ স্ক্রলিং এর সাথে সাথে নড়া চড়া করে।

এক্ষেত্রে সৃষ্ট ফাঁকা অংশ পার্শ্ববর্তী অন্য এলিমেন্ট এসে পূরণ করে।

বিঃদ্রঃ static পজিশন ব্যতীত সবগুলো এলিমেন্টই নিজের অবস্থানের পরিবর্তন ঘটাতে পারে।

kt_satt_skill_example_id=795

উপরের উদাহরণে সিলেক্টর #two-তে position: absolute; ব্যবহার করায় পূর্বসুরী(ancestor) এলিমেন্টের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটিয়েছে।



position:fixed;

position: fixed; যুক্ত একটি এলিমেন্ট viewport এর সাপেক্ষে নিজের পজিশনের পরিবর্তন ঘটাতে পার। অর্থ্যাৎ পেজ স্ক্রল করলেও ইহা নিজের অবস্থান থেকে এক বিন্দুও নড়ে না।

kt_satt_skill_example_id=796

উপরের উদাহরণে সিলেক্টর #three-তে position: fixed; ব্যবহার করায় এটি viewport এর সাপেক্ষে পজিশন ফিক্সড রয়েছে।


position: sticky;

position: sticky; যুক্ত এলিমেন্ট ইউজারের পেজ স্ক্রলের সাপেক্ষে নিজের অবস্থানের পরিবর্তন ঘটাতে পারে। স্ক্রল পজিশনের উপর ভিত্তি করে এটি Relative এবং Fixed অবস্থানের মধ্যে টোগল করে।

kt_satt_skill_example_id=797


z-index এর ব্যবহার

একটি পজিশনে থাকা এলিমেন্টের উপর অন্য একটি এলিমেন্ট এসে সমাপতিত(overlap) হতে পারে। এতে আগের এলিমেন্টি উড়ে এসে জুড়ে বসা এলিমেন্টের নিচে চাপা পড়ে অদৃশ্য হয়ে যেতে পারে।

এলিমেন্টসমূহের স্ট্যাক অর্ডার(stack order) নির্ধারণ করার জন্য সিএসএস z-index প্রোপার্টি ব্যবহার করা হয়।

একটি এলিমেন্টের ধনাত্মক(+) অথবা ঋনাত্মক(-) স্ট্যাক অর্ডার থাকতে পারেঃ

kt_satt_skill_example_id=798

স্ট্যাক অর্ডারের ভ্যালু যত বেশী হবে সে এলিমেন্টটি তত বেশি সামনে থাকবে। পক্ষান্তরে স্ট্যাক অর্ডারের ভ্যালু যত কম হবে সে এলিমেন্টটি তত বেশি পেছনে থাকবে।

বিঃদ্রঃ যদি দুইটি অবস্থানকৃত এলিমেন্ট z-index ছাড়া সমাপতিত (overlap) হয় তখন এলিমেন্টের শেষ অবস্থানের এইচটিএমএল কোড উপরে দেখাবে।


একটি ইমেজে টেক্সটের পজিশন

নিচের উদাহরণে দেখানো হয়েছে, কিভাবে একটি ইমেজের উপর টেক্সটের পজিশন নির্ধারণ করা হয়।

satt academy

ছবিতে লেখা

কিভাবে একটি ইমেজের উপর লেখা যায় তা নিচের উদাহরণে দেখানো হলোঃ

kt_satt_skill_example_id=799


 

Content added || updated By

সিএসএস ওভারফ্লো (CSS Overflow)


সিএসএস overflow

যখন কোন কনটেন্ট তার কন্টেন্ট বক্স থেকে উপচে পড়ে(overflow) তখন কনটেন্টকে ক্লিপ করার জন্য বা স্ক্রলবার যুক্ত করার জন্য অথবা শুধু কন্টেন্টকে প্রদর্শন করানোর জন্য সিএসএস overflow প্রোপার্টি ব্যবহার করা হয়।

overflow প্রোপার্টিতে নিম্নোক্ত ভ্যালুসমূহ ব্যবহৃত হয়।

overflow প্রোপার্টির কী-ওয়ার্ড ভ্যালুসমূহ

  • overflow: visible; - ডিফল্ট ভ্যালু। এখানে overflow ক্লিপ হয় না এবং কন্টেন্ট বক্সের বাইরে প্লাবিত হয়।
  • overflow: hidden;- overflow ক্লিপ হয় এবং কনটেন্টের বাকি অংশ অদৃশ্য হয়ে যায়।
  • overflow: scroll; - overflow ক্লিপ হয় এবং স্ক্রলবার যুক্ত হয়, যা দ্বারা স্ক্রল করে কনটেন্টের বাকি অংশ দেখা যায়।
  • overflow: auto;- ব্রাউজার সয়ংক্রিয়ভাবে overflow ক্লিপ করে এবং স্ক্রলবার তৈরি করে।


 

overflow প্রোপার্টির গ্লোবাল ভ্যালুসমূহঃ

  • overflow: inherit;
  • overflow: initial;
  • overflow: unset;

বিঃদ্রঃ শুধুমাত্র নির্দিষ্ট উচ্চতা(height) সম্বলিত এলিমেন্টের ক্ষেত্রে overflow প্রোপার্টিটি প্রযোজ্য।


ফরমাল সিনট্যাক্স

overflow: visible | hidden | scroll | auto;

kt_satt_skill_example_id=801


overflow: visible;

overflow প্রোপার্টির ডিফল্ট ভ্যালু হলো visible বা দৃর্শমান। অর্থাৎ overflow ক্লিপ হয় না এবং কন্টেন্ট বক্সের বাইরে প্লাবিত অবস্থায় দৃশ্যমান থাকে।

p { 
 overflow: visible;  /* কন্টেন্ট ক্লিপ হয় না  */ 
}

লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে


overflow: hidden;

overflow-কে ক্লিপ করে কনটেন্টের বাকি অংশকে অদৃর্শ করে দেয়।

p {
 overflow: hidden; /* কোনো স্ক্রলবার তৈরি হয় না। */
}

overflow: scroll;

scroll যুক্ত করলে overflow ক্লিপ হয় এবং স্ক্রলবার সরবরাহ করে।

p {
 overflow: scroll; /* সবসময়ই স্ক্রলবার তৈরি হয়। */ 
}

লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুঝার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে


overflow: auto;

ব্রাউজার সয়ংক্রিয়ভাবে overflow ক্লিপ করে এবং স্ক্রলবার তৈরি করে।

p {
 overflow: auto; /* প্রয়োজন অনুযায়ী ব্রাউজার স্ক্রলবার তৈরি হয়। */
}

লে-আউট ভালো ভাবে নিয়ন্ত্রন করতে চাইলে আপনাকে overflow প্রোপার্টি ব্যবহার করতে হবে। একটি এলিমেন্ট এর ভেতরে কন্টেন্ট গুলো কিভাবে থাকবে overflow প্রোপার্টি দ্বারা তা নির্দেশ করা হয়।
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে
overflow বুজার জন্য অতিরিক্ত লেখা যুক্ত করা হয়েছে


সবগুলোর প্রোপার্টির ব্যবহারঃ

kt_satt_skill_example_id=805



overflow-X এবং overflow-Y

overflow-X এবং overflow-Y প্রোপার্টি overflow কনটেন্টকে অনুভূমিক/উলম্ব অথবা উভয় ভাবে পরিবর্তন করে।

overflow-X দ্বারা কনটেন্টের বাম অথবা ডান প্রান্তে কি হবে তা নির্ধারণ করে।
overflow-Y দ্বারা কনটেন্টের উপর বা নিচ প্রান্তে কি হবে তা নির্ধারণ করে।

কন্টেন্টের লেআউট সঠিকভাবে নিয়ন্ত্রণ করতে চাইলে overflow প্রোপার্টিটি ব্যবহার করুন।

kt_satt_skill_example_id=806


 

Content added || updated By

সিএসএস ফ্লট (CSS Float)


কটি এলিমেন্ট ভাসমান(float) হবে কিনা, অর্থাৎ একটি এলিমেন্ট ডানে না বামে থাকবে তা নির্ধারণের জন্য সিএসএস float প্রোপার্টি ব্যবহার করা হয়।

ফ্লোটিং এলিমেন্টসমূহের আচরণ নিয়ন্ত্রণে রাখার জন্য clear প্রোপার্টি ব্যবহার করা হয়।

নিচে দুটি বাটনের সাহায্যে float এবং clear প্রোপার্টির ব্যবহার দেখানো হলোঃ

float:left ব্যবহার করে বামদিকে নেওয়া হয়েছে

float:right ব্যবহার করে ডানদিকে নেওয়া হয়েছে




এক নজরে সিএসএসে ব্যবহৃত float প্রোপার্টিসমূহ

float

একটি এলিমেন্ট ভাসমান(float) হবে কিনা তা নির্ধারণ করে।

clear

একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের নিচে(বামে বা ডানে) থাকতে বাধ্য করে।

overflow

কন্টেন্ট তার এলিমেন্ট বক্স থেকে উপচে পড়লে(overflow) কি ঘটে তা নির্ধারণ করে।

overflow-x

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে ডানে বা বামে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।

overflow-y

একটি এলিমেন্ট যদি তার কন্টেন্ট বক্স থেকে উপরে বা নিচে উপচে পড়ে(overflow হয়) তাহলে কি হবে তা নির্ধারণ করে।



float প্রোপার্টির ব্যবহার

সাধারণত ইমেজের চারপাশকে টেক্সট দিয়ে মোড়ানোর জন্য float প্রোপার্টি ব্যবহার করা হয়।

নিচের উদাহরণে টেক্সটের বামপাশে এবং ডানপাশে ইমেজকে ফ্লোট করে দেখানো হলোঃ

kt_satt_skill_example_id=825


clear প্রোপার্টির ব্যবহার

ফ্লোটিং এলিমেন্টের আচরণ নিয়ন্ত্রনের জন্য clear প্রোপার্টি ব্যবহার করা হয়।

সাধারণত float এর কার্যকারিতা এর পরবর্তী এলিমেন্ট গুলো এর উপরে চলে আসে। তাই এটাকে এড়িয়ে যাওয়ার জন্য clear প্রোপার্টি ব্যবহার করা হয়।

একটি এলিমেন্টকে ফ্লোটিং এলিমেন্টের কোন পাশে ফ্লোট হওয়া থেকে বাধা দেবে তা নির্ধারণের জন্য clear প্রোপার্টিটি প্রয়োগ করা হয়।

kt_satt_skill_example_id=826



overflow: auto; এর ব্যবহার

একটি এলিমেন্ট যদি তার কন্টেইনারের চেয়ে বড় এবং ফ্লোটিং হয় তাহলে ইহা এর কনটেইনার থেকে উপচে পড়বে।আরেকটি এলিমেন্ট আকারে বড় হয় তাহলে বড় অংশটি কন্টেইনারের বাহিরে ওভারফ্লো করবে।

এই সমস্যা সমাধাণের জন্য আমরা overflow: auto; ব্যবহার করতে পারি।

এই অধ্যায়ের পূর্ববর্তী অধ্যায়ে overflow সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।


 

ওয়েব লেআউটের উদাহরণ

float প্রোপার্টি ব্যবহারের মাধ্যমে একটি সাধারণ ওয়েবপেজের লে-আউট তৈরি করে দেখানো হলোঃ

kt_satt_skill_example_id=827


 

Content added || updated By

সিএসএস ইনলাইন ব্লক (CSS Inline-block)


display: inline-block;

দীর্ঘ সময় ধরে float প্রোপার্টি ব্যবহার করে গ্রিড(gird) বক্স তৈরি করা হতো, ব্রাউজার রিসাইজ করলে যা ব্রাউজারের সম্পূর্ণ প্রস্থ দখল করে এবং কন্টেন্টসমূহকে সুন্দরভাবে মুড়িয়ে(wrapping) ফেলে।

যাইহোক display: inline-block; ব্যবহার করে এই কাজ আরো সহজে করা সম্ভব।

Inline-block এলিমেন্ট ইনলাইন এলিমেন্ট এর মতই, কিন্তু inline-block এর ক্ষেত্রে নির্দিষ্ট প্রস্থ এবং উচ্চতা থাকতে পারে।


float-ব্যবহারের পূর্বের পদ্ধতি

 

kt_satt_skill_example_id=823


inline-block এর নতুন ব্যবহার পদ্ধতি

নিচের উদাহরণে লক্ষ্য করুন, ফ্লোটিং বক্সে display:inline-block ব্যবহার করা হয়েছে ফলে পরের ফ্লোটিং এর জন্য clear প্রোপার্টি ব্যবহারের প্রয়োজন হয়নি।

kt_satt_skill_example_id=824


 

Content added By

সিএসএস এলাইন (CSS Align)


সিএসএসের মাধ্যমে একটি এলিমেন্টকে ডানে, বামে এবং মাঝে শ্রেনীবিন্যাস বা সাজানো যায়। যেমনটি এই এলিমেন্টটিকে মাঝে শ্রেনীবিন্যাস করা হয়েছে।


 


এলিমেন্টকে মধ্যখানে এলাইন

margin: auto; ব্যবহার করে আপনি কোন এলিমেন্টকে অনুভূমিকভাবে কেন্দ্রে আনতে পারবেন। কন্টেন্টের জন্য আপনাকে নির্দিষ্ট প্রস্থ(widht) সেট করে দিতে হবে। আর কন্টেন্টের প্রস্থ ব্যতীত অবশিষ্ট প্রস্থটি দুই মার্জিনের মধ্যে সমানভাবে বিভক্ত হবে। এতে করে আপনার কন্টেন্টটি সর্বদাই মধ্যখানে অবস্থান করবেঃ

kt_satt_skill_example_id=828

বিঃদ্রঃ যেই এলিমেন্টের জন্য width প্রোপার্টি সেট করা হয়নি অথবা width প্রোপার্টির ভ্যালু 100% সেট করা হয়েছে, সেই সকল এলিমেন্টে margin: auto; কোন প্রভাবে ফেলবে না। এই বিষয়টি গুরুত্ব সহকারে মনে রাখতে হবে।


টেক্সট মাঝে এলাইন

কোন একটি এলিমেন্টের অন্তর্গত টেক্সটকে মাঝে এলাইন করার জন্য text-align: center; প্রোপার্টি ব্যবহার করা হয়।

kt_satt_skill_example_id=829

পরামর্শঃ টেক্সট এলাইন সম্পর্কে আরো জানতে আমাদের সিএসএস টেক্সট অধ্যায়টি দেখুন।


ছবিকে মাঝে এলাইন

img এলিমেন্টের মধ্যে margin: auto; এবং display: block; একত্রে ব্যবহার করে আমরা একটি ইমেজকে মাঝখানে আনতে পারবোঃ

kt_satt_skill_example_id=832


এলিমেন্টকে ডানে এবং বামে এলাইন

এলাইনের আরো একটি উপায় রয়েছে। position: absolute; ব্যবহার করে আমরা একটি এলিমেন্টকে ডানে এবং বামে এলাইন করতে পারিঃ

kt_satt_skill_example_id=834

পরামর্শঃ যখন কোনো এলিমেন্টকে এলাইন করার জন্য position প্রোপার্টি ব্যবহার করবেন, এক্ষেত্রে অবশ্যই এলিমেন্টে margin এবং padding উল্লেখ করতে হবে। কারণ এটি ডিফল্টভাবে বিভিন্ন ব্রাউজারে বিভিন্ন হয়।

এছাড়াও ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনের সাথে position প্রোপার্টি ব্যবহার করতে সমস্যা হয়। এখন যদি আমরা একটি container এলিমেন্ট ব্যবহার করি যার প্রস্থ নির্দিষ্ট করা আছে এবং যদি !DOCTYPE ঘোষণা করা না হয়ে থাকে তাহলে ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে ডান দিকে 17px মার্জিন যোগ হবে। মনে করা হয় যে এই জায়গাটি স্ক্রলবারের

kt_satt_skill_example_id=837

উপরের উদাহরনের লক্ষ্য করুন, ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে position প্রোপার্টি ব্যবহার করতে সমস্যা হয় তাই সম্পুর্ন বডির মার্জিন এবং প্যাডিং শূন্য করে দিয়ে একটি container এলিমেন্ট width নির্দিষ্ট করে দেওয়া হয়েছে। ফলে ইন্টারনেট এক্সপ্লোরারে এ সমস্যা আর হবে না।


 

বামে এবং ডানে এলাইন - float প্রোপার্টির ব্যবহার

আমরা float প্রোপার্টি ব্যবহার করেও এলিমেন্টকে ডানে এবং বামে এলাইন করতে পারি।

বিঃদ্রঃ যখন কোনো এলিমেন্টকে এলাইন করার জন্য float প্রোপার্টি ব্যবহার করবেন, এক্ষেত্রে অবশ্যই < body> এলিমেন্টে margin এবং padding উল্লেখ করতে হবে। কারণ এটি ডিফল্টভাবে বিভিন্ন ব্রাউজারে বিভিন্ন হয়।

এছাড়াও ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনের ক্ষেত্রে float প্রোপার্টি ব্যবহারে সমস্যা রয়েছে। যদি !DOCTYPE ঘোষণা করা না হয়ে থাকে তাহলে ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে ডান দিকে 17px মার্জিন যোগ হবে। মনে করা হয় যে এই জায়গাটি স্ক্রলবারের জন্য নির্দিষ্ট করা থাকে। তাই সবসময় float ব্যবহার করার আগে !DOCTYPE ঘোষণা করতে হবে।

kt_satt_skill_example_id=839


 

Content added || updated By

সিএসএস কম্বিন্যাটর (CSS Combinator)


সিএসএস কম্বিনেটর

সিএসএস সিলেক্টরের ক্ষেত্রে এক বা একাধিক এলিমেন্টকে একত্রে সিলেক্ট করা যায়। আমরা দুইটি এলিমেন্টে সিলেক্টরের মাঝে কম্বিনেটর ব্যবহার করতে পারি।

সিএসএস(৩) এ চারটি ভিন্ন কম্বিনেটর রয়েছেঃ

  • বংশধর সিলেক্টর - descendant selector(space)
  • চাইল্ড সিলেক্টর - child selector(>)
  • সহোদর সিলেক্টর - adjacent sibling selector(+)
  • সাধারণ সহোদর সিলেক্টর - general sibling selector(~)

বংশধর(descendant) সিলেক্টর

একটি এলিমেন্টের মধ্যে অবস্থিত সকল বংশধর বা ডিসেন্ডেন্ট এলিমেন্টকে সিলেক্ট করার জন্য ডিসেন্ডেন্ট সিলেক্টর ব্যবহার করা হয়।

নিম্নের উদাহরণটিতে বংশধর(descendant) সিলেক্টর ব্যবহার করে < div> এলিমেন্টের মধ্যে অবস্থিত সকল < p> এলিমেন্টকে সিলেক্ট করে দেখানো হলোঃ

kt_satt_skill_example_id=851


চাইল্ড(child) সিলেক্টর

একটি এলিমেন্টের মধ্যে অবস্থিত সরাসরি চাইল্ড এলিমেন্ট গুলো সিলেক্ট করতে চাইল্ড সিলেক্টর ব্যবহার করা হয়।

নিম্নের উদাহরণটিতে < div> এলিমেন্টের মধ্যের < p> এলিমেন্টগুলো থেকে যেগুলো < div> এর সরাসরি চাইল্ড সেগুলোকে সিলেক্ট করবেঃ

kt_satt_skill_example_id=853


সহোদর(adjacent sibling) সিলেক্টর

একটি এলিমেন্টের পরবর্তী প্রথম সিবলিং এলিমেন্টকে সিলেক্ট করার জন্য সহোদর(adjacent sibling) সিলেক্টর ব্যবহার করা হয়।

সিবলিং এলিমেন্ট গুলো অবশ্যই একই প্যারেন্ট এলিমেন্টের অর্ন্তভূক্ত হতে হবে এবং adjacent sibling - এর ক্ষেত্রে এটি শুধুমাত্র এর পরবর্তী এলিমেন্টটিকে সিলেক্ট করবে।

নিম্নের উদাহরণটিতে শুধুমাত্র < div> এলিমেন্টের পরবর্তী সিবলিং < p> এলিমেন্টটিকে সিলেক্ট করবেঃ

kt_satt_skill_example_id=855


সাধারণ সহোদর(general sibling) সিলেক্টর

একটি এলিমেন্টের পরবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য জেনারেল সিবলিং সিলেক্টর ব্যবহার করা হয়।

নিম্নের উদাহরণটিতে < div> এলিমেন্টের পরবর্তী সকল সিবলিং < p> এলিমেন্ট গুলো সিলেক্ট করবেঃ

kt_satt_skill_example_id=857


 

Content added || updated By

সিএসএস সুডো-ক্লাস (CSS Pseudo-class)


সুডো-ক্লাস কি?

একটি এলিমেন্টের বিশেষ অবস্থাকে সিলেক্ট করার জন্য সুডো ক্লাস ব্যবহার করা হয়। সুডো ক্লাস ব্যবহার করার জন্য আপনাকে কোনো অতিরিক্ত জাভাস্ক্রিপ্ট অথবা অন্য কোনো স্ত্রিপ্ট ব্যবহার করতে হবে না। উদাহরণস্বরূপ, আপনি কোনো এলিমেন্টের হোবারকে সিলেক্ট করতে চাইলে সুডো-ক্লাস :hover এর মাধ্যমে সিলেক্ট করতে হবে।

উদাহরণ হিসেবে আমরা নিচের অংশটুকু দেখতে পারিঃ

নিচের ধূসর রংয়ের বক্সের মধ্যে মাউস নিয়ে আসুন। অবাক হয়েছেন!! মাউস আনার সাথে সাথেই বক্সের রং পরিবর্তন হয়ে গেছে।

মাউস আনুন, পরিবর্তন দেখুন।


সকল সিএসএস সুডো-ক্লাস

সিলেক্টরউদাহরণবর্ণনা
:activea:activeএকটিভ লিংককে সিলেক্ট করবে।
:checkedinput:checkedযেসকল এলিমেন্ট "checked" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে।
:disabledinput:disabledযেসকল এলিমেন্ট "disabled" সেট করা হয়েছে সেগুলোকে সিলেক্ট করবে।
:emptydiv:emptyযেসকল
এলিমেন্টের কোন চাইল্ড এলিমেন্ট নেই তাদেরকে সিলেক্ট করবে।
:enabledinput:enabledপ্রত্যেকটি সক্রিয় এলিমেন্টকে সিলেক্ট করবে।
:first-childli:first-childপ্যারেন্ট এলিমেন্টের প্রথম
  • চাইল্ড এলিমেন্টকে সিলেক্ট করবে।
  • :first-of-typeli:first-of-typeপ্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো
  • এলিমেন্টের মধ্যে প্রথম
  • এলিমেন্টকে সিলেক্ট করবে।
  • :focusinput:focusফোকাসকৃত এলিমেন্টকে সিলেক্ট করবে।
    :hoverdiv:hover
    এলিমেন্টের উপর মাউসের কার্সর থাকা অবস্থাকে সিলেক্ট করবে।
    :in-rangeinput:in-rangeএকটি নির্দিষ্ট রেঞ্জের ভ্যালুসহ এলিমেন্টকে সিলেক্ট করবে।
    :invalidinput:invalidইনভ্যালিড ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :langp:lang(lan)lang এট্রিবিউটের "lan" এর ভ্যালুযুক্ত সকল

    এলিমেন্টকে সিলেক্ট করে

    :last-childli:last-childপ্যারেন্ট এলিমেন্টের সর্বশেষ
  • চাইল্ড এলিমেন্টকে সিলেক্ট করবে।
  • :last-of-typeli:last-of-typeপ্যারেন্ট এলিমেন্টের অন্তর্গত সবগুলো
  • এলিমেন্টের মধ্যে সর্বশেষ
  • এলিমেন্টকে সিলেক্ট করবে।
  • :linka:linkএকটি সাধারণ আন-ভিজিটেড লিংককে সিলেক্ট করবে।
    :not(selector):not(div)
    এলিমেন্ট ছাড়া সকল এলিমেন্টকে সিলেক্ট করবে
    :nth-child(n)p:nth-child(2)প্যারেন্ট এলিমেন্টের দ্বিতীয় চাইল্ড

    এলিমেন্টকে সিলেক্ট করবে।

    :nth-last-child(n)p:nth-last-child(2)একই প্যারেন্ট এলিমেন্টের শেষের দিক থেকে দ্বিতীয় চাইল্ড

    এলিমেন্টকে সিলেক্ট করবে।

    :nth-last-of-type(n)p:nth-last-of-type(2)একই প্যারেন্ট এলিমেন্টের সবগুলো

    এলিমেন্টের মধ্যে শেষের দিক থেকে দ্বিতীয়

    এলিমেন্টকে সিলেক্ট করবে।

    :nth-of-type(n)p:nth-of-type(2)প্যারেন্ট এলিমেন্টের সবগুলো

    এলিমেন্টের মধ্যে দ্বিতীয়

    এলিমেন্টকে সিলেক্ট করবে।

    :only-of-typep:only-of-typeযদি

    এলিমেন্টটি তার প্যারেন্টের একমাত্র

    এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।

    :only-childp:only-childযদি

    এলিমেন্টটি তার প্যারেন্টের একমাত্র চাইল্ড এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।

    :optionalinput:optionalrequired এট্রিবিউট ব্যাতীত বাকি এলিমেন্টগুলোকে সিলেক্ট করবে।
    :out-of-rangeinput:out-of-rangeনির্দিষ্ট রেঞ্জের বাহিরের ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :read-onlyinput:read-only"readonly" এট্রিবিউটযুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :read-writeinput:read-write"readonly" এট্রিবিউট ব্যাতীত বাকি সবগুলো এলিমেন্টকে সিলেক্ট করবে।
    :requiredinput:required"required" এট্রিবিউটযুক্ত সবগুলো এলিমেন্টকে সিলেক্ট করবে।
    :rootrootডকুমেন্টের মূল(সাধারনত ) এলিমেন্টকে সিলেক্ট করবে।
    :target#news:targetসক্রিয় #news আইডি যুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :validinput:validসকল ভ্যালিড ভ্যালুযুক্ত এলিমেন্টকে সিলেক্ট করবে।
    :visiteda:visitedভিজিটেড লিংককে সিলেক্ট করবে।


     


    গঠন প্রণালী

    সুডো-ক্লাস এর গঠন প্রণালীঃ

    selector:pseudo-class {
       property: value;
     }

    অ্যাঙ্কর(Anchor) সুডো-ক্লাস

    একটি লিংককে আমরা বিভিন্ন পর্যায়ে বিভিন্ন ভাবে প্রদর্শন করতে পারিঃ

    kt_satt_skill_example_id=866

    উপরের উদাহরণটিতে লিংকের বিভিন্ন অবস্থাকে সুডো-ক্লাসের মাধ্যমে সিলেক্ট করে স্টাইল করা হয়েছে। এখানে a:hover অবশ্যই a:link এবং a:visited এর পরে লিখতে হবে। তা না হলে a:hover কাজ করবে না। এছাড়া a:active কে অবশ্যই a:hover এর নিচে লিখতে হবে। তা না হলে a:hover কাজ করবে না।


    সুডো-ক্লাস এবং সিএসএস-ক্লাস

    আমরা সিএসএস ক্লাসের সাথে সুডো-ক্লাস গুলোকে একত্রে ব্যবহার করতে পারি।

    নিম্নের উদাহরণটিতে আমরা দেখবো একটি লিংকে কিভাবে হোভার যুক্ত করতে হয়ঃ

    kt_satt_skill_example_id=867


    < div> এর মধ্যে হোভার

    নিম্নের উদাহরণটিতে আমরা দেখবো কিভাবে :hover সুডো-ক্লাস ব্যবহার করে কিভাবে একটি

    এলিমেন্টের হোভারের সময় কালার পরিবর্তন করা যায়ঃ

    kt_satt_skill_example_id=868


    টুলটিপ হোভার

    নিম্নের উদাহরণে < div> এলিমেন্টটিতে হোভার করলে অনেকটা টুলটিপ আকারে একটি < p> এলিমেন্ট দেখা যাবে।

    kt_satt_skill_example_id=869


    :first-child সুডো-ক্লাস

    প্যারেন্ট এলিমেন্টের প্রথম চাইল্ডকে সিলেক্ট করতে আমরা :first-child সুডো ক্লাস ব্যবহার করবো।

    নিম্নের উদাহরণটিতে প্যারেন্ট এলিমেন্টের প্রথম চাইল্ড যদি

    এলিমেন্ট হয় তবে তাকে সিলেক্ট করবে।

    kt_satt_skill_example_id=871


    < div> এলিমেন্টের মধ্যের < p> এলিমেন্ট সিলেক্ট

    নিম্নের উদাহরণে < div> এলিমেন্টের মধ্যে অবস্থিত প্রথম < p> এলিমেন্টটি সিলেক্ট করবে।

    kt_satt_skill_example_id=872


    প্রথম চাইল্ড এলিমেন্ট < li> এর মধ্যে < span> এলিমেন্ট গুলো সিলেক্ট

    নিম্নের উদাহরণটিতে প্রথম চাইল্ড এলিমেন্ট < li> কে খুজে বের করে তার মধ্যকার < span> এলিমেন্ট গুলো সিলেক্ট করবে।

    kt_satt_skill_example_id=880


     

    Content added || updated By

    সিএসএস সুডো-এলিমেন্ট (CSS Pseudo-element)


    সুডো-এলিমেন্ট কি?

    সিএসএস সুডো-এলিমেন্ট দ্বারা একটি এলিমেন্টের নির্দিষ্ট অংশকে সিলেক্ট করে স্টাইল করা হয়।

    উদাহরণস্বরুপঃ

    • একটি এলিমেন্টের প্রথম অংশ বা প্রথম লাইনের স্টাইল পরিবর্তন।
    • একটি এলিমেন্টের পূর্বে এবং পরে কন্টেন্ট যোগ।

    সকল সিএসএস সুডো-এলিমেন্ট

    সিলেক্টরউদাহরণবর্ণনা
    ::afterp::after< p> এলিমেন্টের পরে কন্টেন্ট যোগ করবে।
    ::beforep::before< p> এলিমেন্টের পূর্বে কন্টেন্ট যোগ করবে।
    ::first-letterp::first-letter< p> এলিমেন্টের প্রথম শব্দটি সিলেক্ট করবে।
    ::first-linep::first-line< p> এলিমেন্টের প্রথম লাইনটিকে সিলেক্ট করবে।
    ::selectionp::selectionব্যবহারকারী কর্তৃক সিলেক্টকৃত < p> এলিমেন্টের অংশকে সিলেক্ট করবে।

    গঠণপ্রণালী

    selector::pseudo-element {
       property: value;
    }

    সিএসএস(১) এবং সিএসএস(২)-এ সুডো-এলিমেন্ট এবং সুডো-ক্লাসে একটি কোলন ব্যবহার হতো। সিএসএস(৩)-এ সুডো-এলিমেন্টে একটি কোলন ব্যবহারের পরিবর্তে দুইটি কোলন ব্যবহারের প্রচলন করে। সুডো-এলিমেন্ট এবং সুডো-ক্লাসের গঠণপ্রণালীর মধ্যে পার্থক্য তৈরি করার জন্য ইহা প্রচলন করা হয়েছিল।


    ::first-line সুডো-এলিমেন্ট

    ::first-line সুডো-এলিমেন্টটি একটি টেক্সটের প্রথম লাইনকে সিলেক্ট করার জন্য ব্যবহার করা হয়।

    kt_satt_skill_example_id=905



    বিঃদ্রঃ ::first-line সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্যে ব্যবহার করা যায়।

    ::first-line সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃ

    • font
    • color
    • background
    • word-spacing
    • letter-spacing
    • text
    • Vertical-align
    • text-transfor
    • line-height
    • clear

    ::first-letter সুডো-এলিমেন্ট

    একটি টেক্সটের প্রথম অক্ষরকে সিলেক্ট করার জন্য ::first-letter সুডো-এলিমেন্টটি ব্যবহার করা হয়।

    kt_satt_skill_example_id=908



    বিঃদ্রঃ::first-letter সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্য ব্যবহার করা যায়।

    ::first-letter সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃ

    • font
    • color
    • background
    • margin
    • padding
    • border
    • text-decoration
    • vertical-align("float" যদি "none" হয়)
    • text-transform
    • line-height
    • float
    • clear

    সুডো-এলিমেন্ট এবং সিএসএস ক্লাস

    সুডো-এলিমেন্টগুলো সিএসএস ক্লাসের সাথেও ব্যবহার করা যায়ঃ

    kt_satt_skill_example_id=910


    একাধিক সুডো-এলিমেন্টের ব্যবহার

    আপনি চাইলে একই এলিমেন্টে একাধিক সুডো এলিমেন্ট ব্যবহার করতে পারেন।

    kt_satt_skill_example_id=913


    ::before সুডো-এলিমেন্ট

    একটি এলিমেন্টের আগে কন্টেন্ট যোগ করার জন্য ::before সুডো-এলিমেন্ট ব্যবহার করা হয়।

    kt_satt_skill_example_id=916


    ::after সুডো-এলিমেন্ট

    একটি এলিমেন্টের পরে কন্টেন্ট যোগ করার জন্য ::after সুডো-এলিমেন্ট ব্যবহার করা হয়।

    kt_satt_skill_example_id=918


    ::selection সুডো-এলিমেন্ট

    ব্যবহারকারী একটি এলিমেন্টের কোন অংশকে সিলেক্ট করলে, সিলেক্টকৃত অংশকে স্টাইল করার জন্য ::selection সুডো-এলিমেন্টটি ব্যবহার করা হয়।

    ::selection সুডো-এলিমেন্টের সাথে নিচের সিএসএস প্রোপার্টিগুলো ব্যবহার করা যায়ঃ

    • color
    • background
    • cursor
    • outline

    kt_satt_skill_example_id=920


     

    Content added || updated By

    সিএসএস প্রোপার্টি (CSS Opacity)


    সিএসএস-এ কোনো এলিমেন্টকে উজ্জ্বল বা অনুজ্জ্বল অথবা সচ্ছ বা অসচ্ছ করতে opacity প্রোপার্টি ব্যবহার করবো।


    ট্রান্সপারেন্ট ইমেজ

    কোনো ইমেজকে সচ্ছ বা অসচ্ছ করতে আমরা opacity প্রোপার্টি ব্যবহার করতে পারি। এই ক্ষেত্রে আমরা 0.0 থেকে 1.0 পর্যন্ত ভ্যালু নিতে পারবো। এখানে ভ্যালু যত কম হবে তত বেশি অসচ্ছ বা ট্রান্সপারেন্ট হয়ঃ

    opacity 0.3

    opacity 0.5

    opacity 1
    ডিফল্ট

    kt_satt_skill_example_id=939


    ট্রান্সপারেন্ট হোভার ইফেক্ট

    এখন আমরা opacity এবং :hover এই দুইটি প্রোপার্টিকে একত্রে ব্যবহার করে আমরা ইমেজে হোভারের মধ্যে opacity ইফেক্ট দিবঃ

                  

    kt_satt_skill_example_id=942

    এই ইমেজ গুলোতে হোভার করলে ইমেজ গুলো অসচ্ছ দেখাবে। এই উদাহরণটি আগের উদাহরনের ঠিক বিপরীত করেঃ

    kt_satt_skill_example_id=944

    RGBA মাধ্যমে ট্রান্সপারেন্ট

    আপনি যদি একটি এলিমেন্টের ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করতে চান, সেক্ষেত্রে আপনি RGBA ব্যবহার করতে পারেন। RGBA কালার ভ্যালু হচ্ছে RGB কালারের প্রসারিত অংশ যার সাথে alpha channel থাকে, যা কালারের opacity নির্দেশ করে। নিচের উদাহরনে শুধু ব্যাকগ্রাউন্ড কালারকে ট্রান্সপারেন্ট করা হয়েছে কিন্তু টেক্সট গুলোতে করা হয়নিঃ

    100% opacity

    60% opacity

    30% opacity

    10% opacity

    টিপসঃ RGBA কালার সম্পর্কে বিস্তারিত জানতে আমাদের সিএসএস কালার অধ্যায়টি দেখুন।

    kt_satt_skill_example_id=951


    ট্রান্সপারেন্ট টেক্সট বক্স

    তারুণ্যই সফলতা, তারুণ্যই স্যাট। তারুণ্যেই গড়বে ডিজিটাল বাংলাদেশ।

    kt_satt_skill_example_id=954


     

    Content added || updated By

    সিএসএস ন্যাভিগেশন বার (CSS Navigation Bar)


    নেভিগেশনবার হচ্ছে কিছু লিংকের লিস্ট। একটি নেভিগেশনবার যেহেতু কিছু লিঙ্কের লিস্ট, তাই আমরা এই লিস্ট তৈরি করার জন্য < ul> এবং < li> ট্যাগ ব্যবহার করবোঃ

    kt_satt_skill_example_id=1211

    কিছু স্টাইল যোগ করুনঃ

    kt_satt_skill_example_id=1218

    উদাহরণের বর্ণনাঃ

    • list-style-type: none; - লিস্টের বুলেট চিহ্নকে মুছে দেয়। নেভিগেশনবারে বুলেট চিহ্ন দেখতে খারাপ দেখায়
    • ব্রাউজারের ডিফল্ট সেটিংস পরিবর্তন করার জন্য margin: 0; and padding: 0; সেট করুন

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


    ভার্টিকাল নেভিগেশন বার

    ভার্টিকাল নেভিগেশনবার তৈরির জন্য আপনি লিস্টের < a> এলিমেন্টকে স্টাইল করতে পারেন, এই জন্য উপরের কোডের সাথে নিচের অংশ ব্যবহার করতে হয়ঃ

    kt_satt_skill_example_id=1224

    উদাহরণের বর্ণনাঃ

    • display: block; - লিঙ্কগুলোকে ব্লক এলিমেন্ট এবং পুরো লিঙ্ক এরিয়াকে ক্লিকযোগ্য করে, এবং ইহা আমাদেরকে অতিরিক্ত স্টাইল করতে সাহায্য করে
    • width: 80px; - ব্লক এলিমেন্ট পুরো প্রস্থ ডিফল্ট আকারে নিয়ে নেয়। আমরা ৬০ পিক্সেল প্রস্থ নির্ধারণ করে দিয়েছি

    উপরের কোডের পরিবর্তে আপনি নিচের মত করেও লিখতে পারেনঃ

    kt_satt_skill_example_id=1225


    ভার্টিকাল নেভিগেশন বারের উদাহরণ

    একটি সাধারণ নেভিগেশনবারের উদাহরণঃ

    kt_satt_skill_example_id=1226

    এক্টিভ/কারেন্ট নেভিগেশন লিংক

    ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ

    kt_satt_skill_example_id=1227

     

    সেন্টার এলাইন লিংক এবং বর্ডার যোগ

    লিংককে মাঝে আনতে < li> অথবা < a> এলিমেন্টে text-align:center ব্যবহার করুন।

    নেভিগেশনবারের চারপাশে বর্ডার দিতে < ul> এর মধ্যে border প্রোপার্টি দিন। নেভিগেশনবারের মাঝে বর্ডার দিতে

  • এলিমেন্টে border-bottom ব্যবহার করতে হবেঃ

    সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার

    একটি সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার তৈরি করিঃ

    kt_satt_skill_example_id=1232

    দ্রষ্টব্যঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।


    হরিজন্টাল নেভিগেশন বার

    হরিজন্টাল নেভিগেশনবার তৈরির ২টি পদ্ধতি আছে। inline, float লিস্ট স্টাইল ব্যবহার করে।

    ইনলাইন লিস্ট আইটেম

    < li> এলিমেন্টকে ইনলাইন ডিফাইন করেঃ

    kt_satt_skill_example_id=1234

    উদাহরণের বর্ণনাঃ

    • display: inline; - ডিফল্টভাবে লিস্ট আইটেমগুলো ব্লক এলিমেন্ট হিসেবে থাকে। আমরা এখানে লিস্টকে একই লাইনে দেখানোর জন্য আইটেমের উভয় পাশের লাইনব্রেক সরিয়ে দিলাম

    ফ্লোটিং লিস্ট আইটেম

    float ব্যবহার করেও হরিজন্টাল নেভিগেশনবার তৈরি করা যায়ঃ

    kt_satt_skill_example_id=1237

    উদাহরণের বর্ণনাঃ

    • float: left; ব্যবহার করে ব্লক এলিমেন্টকে একটির পাশে আরেকটিকে রাখা হয়েছে
    • display: block; লিঙ্কগুলোকে ব্লক এলিমেন্ট হিসেবে এবং সম্পূর্ণ এড়িয়াকে ক্লিকযোগ্য করে তোলে
    • padding: 5px; সৌন্দর্যের জন্য ব্লক এলিমেন্টগুলোর চারপাশে প্যাডিং ডিফাইন করা হয়েছে
    • background-color: aqua; রঙয়ের ব্যাকগ্রাউন্ড কালার দেয়া হল

    হরিজন্টাল নেভিগেশন বারের উদাহরণ

    একটি সাধারণ হরিজন্টাল নেভিগেশনবার তৈরি করে দেখানো হলোঃ

    kt_satt_skill_example_id=1243

    এক্টিভ/কারেন্ট নেভিগেশন লিংক

    ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ

    kt_satt_skill_example_id=1248

    রাইট-এলাইন লিংক

    লিস্ট আইটেমে float:right; ব্যবহার করে রাইট-এলাইন লিংক তৈরি করা হলঃ

    kt_satt_skill_example_id=1250

    লিংক ডিভাইডার

    < li> এর মধ্যে border-right প্রোপার্টি যুক্ত করে লিঙ্ক ডিভাইডার তৈরি করা হয়ঃ

    kt_satt_skill_example_id=1252

    ফিক্সড নেভিগেশন বার

    ইউজার যদি পেজকে স্ক্রল করে তবুও নেভিগেশন বার পেজের উপরে অথবা নিচে ফিক্সড থাকবেঃ

    kt_satt_skill_example_id=1258

    kt_satt_skill_example_id=1261

    বিঃদ্রঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।


    বর্ডারসহ হরিজন্টাল নেভিগেশনবার

    হালকা ধূসর বর্ডারসহ একটি ধূসর হরিজন্টাল নেভিগেশন বারের উদাহরণঃ

    kt_satt_skill_example_id=1264


     

  • Content added || updated By

    সিএসএস ড্রপডাউন (CSS Dropdown)


    ড্রপডাউনের উদাহরণ

    মাউস আনুন !

    ড্রপডাউন

    ইমেজ ড্রপডাউনঃbuilding


    বেসিক ড্রপডাউন

    একটি বেসিক ড্রপডাউন তৈরি করিঃ

    kt_satt_skill_example_id=1176

    উদাহরণের বর্ণনা

    এইচটিএমএলঃ
    হোভার করে ড্রপডাউন কন্টেন্ট প্রদর্শনের জন্য একটি এলিমেন্ট ব্যবহার করতে হয়। যেমনঃ অথবা

    সিএসএস টুলটিপ (CSS Tooltip)

    টুলটিপের উদাহরণ

    কোন এলিমেন্টের টেক্সটের উপর ইউজার মাউস পয়েন্টার নিয়ে গেলে টেক্সট সম্পর্কে অতিরিক্ত কোন তথ্য দেখানোকে টুলটিপ বলে। যেমনঃ

    উপরে টুলটিপ টেক্সট

    ডানে টুলটিপ টেক্সট

    নিচে টুলটিপ টেক্সট

    বামে টুলটিপ টেক্সট

     


    বেসিক টুলটিপ

    একটি টুলটিপ তৈরি করার পদ্ধতিঃ

    kt_satt_skill_example_id=1144

    উদাহরণের বর্ণনা

    এইচটিএমএলঃ
    একটি কন্টেইনার এলিমেন্ট হিসেবে < div> এলিমেন্টকে ব্যবহার করা হয়েছে এবং এতে "tooltip" ক্লাসটি যোগ করা হয়েছে।

    span এলিমেন্টে class="tooltiptext" ব্যবহার করা হয়েছে এবং টুলটিপ টেক্সট রাখা হয়েছে।

    সিএসএসঃ
    tooltipক্লাসটিতে position:relative ব্যবহার করা হয়েছে। কারণ আমরা টুলটিপ টেক্সটের অবস্থান নির্ধারণের ক্ষেত্রে position:absolute ব্যবহার করবো।

    tooltiptext ক্লাসটির মাধ্যমে টুলটিপ টেক্সটকে হাইড করা হয়েছে এবং টুলটিপ টেক্সটের আরো কিছু স্টাইল করা হয়েছে।

    class="tooltip" যুক্ত

    এলিমেন্টে :hover সিলেক্টরটি যোগ করা হয়েছে। এর ফলে আমরা
    এলিমেন্টের উপর মাউস নিয়ে গেলে .tooltiptext ক্লাসের visibility প্রোপার্টির ভ্যালু visible সেট হয়ে যাবে।

     


    টুলটিপের অবস্থান নির্ধারণ

    ডানদিকে টুলটিপ

    এই উদাহরণে, আমরা টুলটিপ টেক্সটকে ডান পাশে দেখানোর জন্য left:105% ব্যবহার করেছি এবং টুলটিপ টেক্সটকে হোভারএবল টেক্সটের মাঝামাঝি দেখানোর জন্য top:-5px ব্যবহার করেছি।

    আপনি যদি টুলটিপ টেক্সটের প্যাডিংয়ের ভ্যালু বাড়ান অথবা কমান তাহলে, top প্রোপার্টির ভ্যালুতেও একই মান ব্যবহার করতে হবে। একই মান ব্যবহার না করলে টুলটিপ টেক্সট মাঝামাঝি থাকবে না।

    kt_satt_skill_example_id=1145

     

    উপরেরদিকে টুলটিপ

    যদি আপনি টুলটিপকে উপরে দেখাতে চান তাহলে bottom: 100% ব্যবহার করতে হবে এবং আমরা margin-left: -60px ব্যবহার করেছি টুলটিপ টেক্সটকে মাঝামাঝি দেখানোর জন্য। -৬০ পিক্সেল ব্যবহার করার কারণ টুলটিপ টেক্সটের প্রস্থ ১২০ পিক্সেল, আমরা এর প্রস্থের অর্ধেক নিয়েছি।

    আপনি যদি টুলটিপ টেক্সটের প্রস্থ ১০০ পিক্সেল সেট করেন তাহলে মার্জিন সেট করতে হবে -৫০ পিক্সেল।

    kt_satt_skill_example_id=1147

    নিচেরদিকে টু্লটিপ

    টুলটিপ টেক্সটকে নিচেরদিকে দেখাতে চাইলে আপনাকে bottom: 100% এর পরিবর্তে top: 100% ব্যবহার করতে হবেঃ

    kt_satt_skill_example_id=1149


    টুলটিপে অ্যাঁরোর ব্যবহার

    নিচেরদিকে অ্যাঁরো

    আমরা অ্যাঁরোকে নিচেরদিকে রাখার জন্য top: 100% ব্যবহার করেছি এবং left: 50% ব্যবহার করে অ্যাঁরোকে মাঝামাঝি নিয়ে এসেছি। border-width: 5px দ্বারা অ্যাঁরোর সাইজ নির্ধারণ করা হয়েছে, অ্যাঁরোর সাইজ নির্ধারণ করার পর একে মাঝামাঝি রাখার জন্য margin-left: -5px ব্যবহার করেছি।

    লক্ষণীয় বিষয় হচ্ছে উভয় প্রোপার্টির মান সমানভাবে দিতে হবে, ১০পিক্সেল বর্ডার দিলে মার্জিনও -১০পিক্সেল ব্যবহার করতে হবে। border-color: black transparent transparent transparent; সেট করতে হবে।

    kt_satt_skill_example_id=1150

    উপরেরদিকে অ্যাঁরো

    উপরের দিকে অ্যাঁরো দেখানোর জন্য top: 100% এর পরিবর্তে bottom: 100% ব্যবহার করতে হবে এবং border-color: transparent transparent black transparent; সেট করতে হবে।

    kt_satt_skill_example_id=1153

    বামদিকে অ্যাঁরো

    বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, right: 100% এবং border-color: transparent black transparent transparent ব্যবহার করতে হবে।

    kt_satt_skill_example_id=1156

    ডানদিকে অ্যাঁরো

    বামদিকে অ্যাঁরো দেখানোর জন্য top: 50%, left: 100% এবং border-color: transparent transparent transparent black ব্যবহার করতে হবে।

    kt_satt_skill_example_id=1161

     

    টুলটিপ এনিমেশন

    টুলটিপ টেক্সটে এনিমেশন যোগ করার পদ্ধতি হচ্ছে transition প্রোপার্টি ও opacity প্রোপার্টির ব্যবহারঃ

    kt_satt_skill_example_id=1163

    Content added || updated By

    আপনি সিএসএস ব্যবহার করে খুব সহজেই চমৎকার ইমেজ গ্যালারি তৈরি করতে পারেন।


    এখানে ইমেজের বর্ণনা লিখুন

    বাংলাদেশ

    এখানে ইমেজের বর্ণনা লিখুন

    নিলগিরি

    এখানে ইমেজের বর্ণনা লিখুন

    বাংলাদেশ

    এখানে ইমেজের বর্ণনা লিখুন


    ইমেজ গ্যালারি

    নিম্নের ইমেজ গ্যালারিটি সিএসএস দিয়ে তৈরি করা হয়েছেঃ

    kt_satt_skill_example_id=1111

     

    kt_satt_skill_example_id=1115

    Content added By

    সিএসএস ইমেজ স্প্রাইট (CSS Image Sprite)


    ইমেজ স্প্রাইট(Sprite)

    ইমেজ স্প্রাইট(Sprite) হলো একটি ছবির মধ্যে একগুচ্ছ ছবি সংগ্রহ করে রাখা।

    অসংখ্য ছবি যুক্ত একটি ওয়েবপেজ লোড হতে অনেক সময় নিতে পারে এবং অসংখ্য সার্ভার রিকুয়েস্ট তৈরি করতে পারে।

    ইমেজ স্প্রাইটের (Sprite) ব্যবহার সার্ভার রিকুয়েস্টের সংখ্যা কমিয়ে আনে এবং ব্যান্ডউইথ বাচিয়ে দেয়।


    ইমেজ স্প্রাইট(Sprite) - সাধারণ উদাহরণ

    তিনটি আলাদা ছবি ব্যবহার করার চেয়ে আমরা একটি ছবিতে তিনটি ছবি ব্যবহার করতে পারঃ("icon.gif")

    spriteimage

    সিএসএস এর সাহায্যে আমরা একটি ছবির যতটুকু প্রদর্শন করে দেখানোর দরকার ততটুকুই দেখাতে পারি।

    নিচের উদাহরণে, "icon.gif" ইমেজের কোন অংশটুকু প্রদর্শিত হবে তা সিএসএস দিয়ে নির্ধারণ করে দেয়া হয়েছেঃ

    kt_satt_skill_example_id=1092

    উদাহরণের ব্যাখ্যা

    • - একটি ছোট ট্রান্সপারেন্ট ইমেজকে নির্দেশ করে কারণ src এট্রিবিউট খালি রাখা যায় না। সিএসএসের মাধ্যমে নির্ধারিত ইমেজটি ব্যাকগ্রাউন্ড ইমেজ হিসাবে প্রদর্শিত হবে।
    • width: 46px; height: 44px; - ইমেজের যে অংশটি আমরা ব্যবহার করতে চাই সেই অংশটিকে নির্দিষ্ট করে।
    • background: url(icon.gif) 0 0; - ব্যাকগ্রাউন্ড ইমেজ এবং এর অবস্থান নির্ধারণ করে ( এখানে left এর ভ্যালু 0px এবং top এর ভ্যালু 0px )।

    ইমেজ স্প্রাইট(Sprite) ব্যবহারের এটাই সবচেয়ে সহজ উপায়। নিচে আমরা স্প্রাইট ইমেজে লিঙ্ক ও হোভার ইফেক্টের ব্যবহার দেখাবোঃ


    ইমেজ স্প্রাইট(Sprite) এর মাধ্যমে নেভিগেশন লিস্ট তৈরি

    নেভিগেশন লিস্ট তৈরির জন্য আমরা "icon.gif" স্প্রাইট(Sprite) ইমেজটি ব্যবহার করবো।

    আমরা এখানে এইচটিএমএল লিস্ট ব্যবহার করবো, কারণ ইহা একই সাথে লিংক ও ব্যাকগ্রাউন্ড ইমেজ সাপোর্ট করে

    kt_satt_skill_example_id=1093

    উদাহরণের ব্যাখ্যা

    • #listitem {position:relative;} - এর মধ্যে Absolute পজিশন সাপোর্ট করানোর জন্য পজিশন এর ভ্যালু Relative সেট করা হয়েছে।
    • #listitem li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - দ্বারা মার্জিন ও প্যাডিং "0" সেট করা হয়েছে, লিস্ট স্টাইল বাদ দেওয়া হয়েছে, এবং সকল লিস্ট আইটেমের পজিশন Absolute করা হয়েছে।
    • #listitem li, #listitem a {height:44px;display:block;} - দ্বারা সকল ইমেজের উচ্চতা ৪৪px সেট করা হয়েছে।

    তারপরে ইমেজের প্রত্যেক অংশের জন্য অবস্থান এবং স্টাইল সেট করা হয়েছেঃ

    • # {left:0px; width:46px;} - সবার বামে নিয়ে আসে এবং ইমেজের প্রস্থ 46px সেট করে।
    • # {background:url(icon.gif) 0 0;} - ব্যাকগ্রাউন্ড ইমেজ এবং এর অবস্থান নির্দেশ করে।(left এ 0px এবং top এ 0px)
    • #backpage {left:63px; width:43px;} - 63px ডানদিকে অবস্থান করে (# এর প্রস্থ 46px + আইটেমগুলোর মাঝের অতিরিক্ত ফাকা অংশ), এবং 43px প্রস্থ।
    • #backpage {background:url('icon.gif') -47px 0;} - ব্যাকগ্রাউন্ড ইমেজটি 47px ডানে থাকবে (# এর প্রস্থ 46px + 1px লাইন ডিভাইডার)
    • #nextpage {left:129px;width:43px;}- 129px ডানে অবস্থান করে(#backpage এর শুরু 63px + #backpage এর প্রস্থ 43px + অতিরিক্ত জায়গা), এবং এর প্রস্থ হবে 43px।
    • #nextpage {background:url('icon.gif') -91px 0;} - ব্যাকগ্রাউন্ড ইমেজ 91px ডানে থাকবে (# এর প্রস্থ 46px + 1px লাইন ডিভাইডার + #backpage এর প্রস্থ 43px + 1px লাইন ডিভাইডার)

    ইমেজ স্প্রাইট(Sprite) - হোভার ইফেক্ট

    এখন আমরা নেভিগেশন লিস্টে হোভার ইফেক্ট যোগ করবো।

    টিপসঃ :hover সিলেক্টরটি শুধুমাত্র লিংকে নয়, বরং সকল এলিমেন্টেই ব্যবহার করা যায়।

    আমাদের নতুন ইমেজটিতে ("iconbg.gif")নেভিগেশনের জন্য তিনটি ইমেজ রয়েছে এবং তিনটি ইমেজ রয়েছে হোভার ইফেক্টের জন্য।

    ImgSpite

    ইহা একটি সিংগেল ইমেজ অর্থাৎ ছয়টি আলাদা ইমেজ না হওয়ায় ব্যবহারকারী যখন ইমেজের উপর হোভার করবে তখন লোডিংয়ের জন্য সময় নষ্ট হবে না,

    হোভার ইফেক্ট যুক্ত করার জন্য আমরা শুধুমাত্র তিন লাইনের কোড যোগ করেছিঃ

    kt_satt_skill_example_id=1094

    উদাহরণের ব্যাখ্যাঃ

    • # a:hover {background: transparent url('iconbg.gif') 0 -45px;} - তিনটি হোভার ইমেজের জন্য আমরা একই ব্যাকগ্রাউন্ড পজিশন সেট করেছি, শুধুমাত্র 45px আরো নিচে।

     

    Content added By

    সিএসএস এট্রিবিউট সিলেক্টর (CSS Attr Selector)


    নির্দিষ্ট এট্রিবিউটের সাহায্যে এইচটিএমএল এলিমেন্টকে স্টাইল করা

    কোন একটি নির্দিষ্ট এট্রিবিউট অথবা এট্রিবিউটের ভ্যালুকে সিলেক্টের মাধ্যমে এইচটিএমএল এলিমেন্টকে স্টাইল করা সম্ভব।


    সিএসএস [attribute] সিলেক্টর

    [attribute] সিলেক্টরের সাহায্যে নির্দিষ্ট এট্রিবিউট যুক্ত এলিমেন্টকে সিলেক্ট করা যায়।

    নিচের উদাহরণে target এট্রিবিউট যুক্ত সকল এলিমেন্ট সিলেক্ট করা হয়েছে।

    linkcode

    টার্গেট এট্রিবিউট দ্বারা লিংকটির ব্রেকগ্রাউন্ড কালার পরিবর্তন করা হয়েছে।

    kt_satt_skill_example_id=1070


    সিএসএস [attribute="value"] সিলেক্টর

    [attribute="value"] সিলেক্টরের মাধ্যমে নির্দিষ্ট এট্রিবিউট এবং এট্রিবিউটের ভ্যালু যুক্ত এলিমেন্টকে সিলেক্ট করা যায়।

    নিচের উদাহরণে target="_blank" এট্রিবিউট যুক্ত সকল < a> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

    kt_satt_skill_example_id=1073


    সিএসএস [attribute~="value"] সিলেক্টর

    [attribute~="value"] সিলেক্টরের মাধ্যমে এট্রিবিউটের ভ্যালুর কোন একটি নির্দিষ্ট শব্দের সাহায্যে এলিমেন্টকে সিলেক্ট করা যায়।

    নিচের উদাহরণে, title এট্রিবিউটের ভ্যালুর মধ্যে একটি সতন্ত্র শব্দ "satt" যুক্ত সকল এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

    kt_satt_skill_example_id=1075

    উপরের উদাহরণে title=" chandpur satt", এবং title="satt logo" যুক্ত এলিমেন্টগুলোর সাথে ম্যাচ(match ) করবে। কিন্তু title="our-satt" অথবা title="satts" যুক্ত এলিমেন্টের সাথে ম্যাচ করবে না।


    সিএসএস [attribute|="value"] সিলেক্টর

    [attribute|="value"] সিলেক্টরের মাধ্যমে কোন নির্দিষ্ট এট্রিবিউটের একটি নির্দিষ্ট ভ্যালু দিয়ে শুরু হওয়া এলিমেন্টকে সিলেক্ট করা যায়।

    নিচের উদাহরণে class এট্রিবিউটের "satt" শব্দ দিয়ে শুরু হওয়া ভ্যালু যুক্ত সকল এলিমেন্টকে সিলেক্ট করা হয়েছেঃ

    নোটঃ ভ্যালু অবশ্যই একটি পুরো শব্দ হতে হবে। যেমনঃ-class="satt",class="satt_info",class="satt-name" অথবা class="sattservicee"! 

    kt_satt_skill_example_id=1076


    সিএসএস [attribute^="value"] সিলেক্টর

    [attribute^="value"] সিলেক্টরটি এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউটের ভ্যালু কোন একটি নির্দিষ্ট ভ্যালু দিয়ে শুরু হয়।

    নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করবে যাদের এট্রিবিউটের ভ্যালু "satt" দিয়ে শুরু হয়েছে।

    নোট: ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে। যেমন: class="satt", অথবা হাইফেন ( - ) দ্বারাও ব্যবহার করা যেতে পারে। যেমনঃ class="satt-name"! ,class="satt_info"!

    kt_satt_skill_example_id=1077


    সিএসএস [attribute$="value"] সিলেক্টর

    [attribute$="value"] সিলেক্টরটি এমন এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউটের ভ্যালু কোন একটি নির্দিষ্ট ভ্যালু দিয়ে শেষ হয়।

    নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করবে যাদের এট্রিবিউট class এবং যার ভ্যালু "satt" দিয়ে শেষ হয়েছে।

    নোট: ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে। যেমন: class="satt", অথবা হাইফেন ( - ) দ্বারাও ব্যবহার করা যেতে পারে। যেমনঃ class="satt-name"! ,class="satt_info"!

    kt_satt_skill_example_id=1079


    সিএসএস [attribute*="value"] সিলেক্টর

    [attribute*="value"] সিলেক্টরটি এমন এলিমেন্টকে সিলেক্ট করতে ব্যবহৃত হয় যাদের এট্রিবিউট একটি নির্দিষ্ট ভ্যালু বহন করে।

    নিচের উদাহরণে ঐ সকল এলিমেন্টকে সিলেক্ট করে যার class এট্রিবিউটের ভ্যালু "sa" বর্ণগুলো বহন করেঃ

    নোটঃ ভ্যালুটি সম্পূর্ণ শব্দ না হলেও চলবে।

    kt_satt_skill_example_id=1080


    এট্রিবিউট সিলেক্টরের মাধ্যমে ফর্ম স্টাইল করা

    class বা ID ছাড়াও এট্রিবিউট সিলেক্টরের মাধ্যমে ফরম স্টাইল করা সহজ।

    kt_satt_skill_example_id=1083


    বিঃ দ্র: ইন্টারনেট এক্সপ্লোরের[এট্রিবিউট] দ্রুত কাজ করানোর জন্য DOCTYPE অবশ্যই ডিক্লেয়ার করতে হবে

    টিপস: ফর্ম স্টাইল সম্মন্ধে আরো জানতে আমাদের সিএসএস ফরম অধ্যায় ভিজিট করুন।


    সিএসএস সিলেক্টরের সম্পূর্ণ রেফারেন্সের জন্য আমাদের সিএসএস সিলেক্টর অধ্যায়টি পড়ূন।


     

    Content added || updated By

    সিএসএস এর মাধ্যমে একটি এইচটিএমএল ফর্মকে অসাধারণ ভাবে সাজানো যায়ঃ

    নিচে যে সুন্দর একটি এইচটিএমএল ফর্মটি দেখতে পাচ্ছেন তা সিএসএস দিয়ে স্টাইল করা হয়েছে।

    kt_satt_skill_example_id=1003

     


    ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করা

    ইনপুট ফিল্ড এর প্রস্থ নির্ধারণের জন্য width প্রোপার্টি ব্যবহার করা হয়।

    kt_satt_skill_example_id=1005

    উপরের উদাহরণটি সব ধরনের width ইলিমেন্ট এর জন্য প্রযোজ্য। আপনি যদি শুধুমাত্র একটি নির্দিষ্ট ইনপুট এলিমেন্টকে স্টাইল করতে চান, তাহলে আপনি এট্রিবিউট সিলেক্টর ব্যবহার করতে পারেনঃ

    • input[type=text] - শুধুমাত্র টেক্সট ফিল্ডকে সিলেক্ট করে।
    • input[type=submit] - শুধুমাত্র সাবমিট ফিল্ডকে সিলেক্ট করে।
    • input[type=number] - শুধুমাত্র নাম্বার ফিল্ডেকে সিলেক্ট করে।

    ইনপুট ফিল্ডে প্যাডিং যুক্ত করা

    টেক্সট ফিল্ড এর ভেতরের চারপাশে ফাকা জায়গা যুক্ত করার জন্য padding প্রোপার্টি ব্যবহার করতে হয়।।

    টিপসঃ একাধিক input ফিল্ডের ক্ষেত্রে আপনি যদি ফিল্ডের চারপাশে কিছু margin যুক্ত করতে চান তাহলে মার্জিন প্রোপার্টি ব্যবহার করুনঃ

    kt_satt_skill_example_id=1007

    উপরের উদাহরণে লক্ষ্য করলে দেখবেন box-sizing প্রোপার্টির ভ্যালু border-box সেট করা হয়েছে। এর মাধ্যমে আমরা নিশ্চিত হয় যে, এলিমেন্টের প্যাডিং এবং মার্জিন এর মোট দৈর্ঘ্য এবং প্রস্থের মধ্যে অন্তর্ভুক্ত হয়েছে।


    box-sizing প্রোপার্টি সম্পর্কে আর বিস্তারিত জানতে আমাদের সিএসএস(৩) box-sizing অধ্যায় ভিজিট করুন।


    ইনপুট ফিল্ডে বর্ডার যুক্ত করা

    বর্ডারের আকার এবং কালার পরিবর্তন করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করা হয়। এছাড়া বর্ডারের আকার গোলাকৃতি কর্ণারের মত করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ

    kt_satt_skill_example_id=1010

    আপনি যদি শধুমাত্র ইনপুট ফিল্ডের নিচের বর্ডার পরিবর্তন করতে চান তাহলে border-bottom প্রোপার্টিটি ব্যবহার করুনঃ

    kt_satt_skill_example_id=1035


    ইনপুট ফিল্ডে কালার যুক্ত করা

    ইনপুট ফিল্ডে ব্যাকগ্রাউন্ড কালার যুক্ত করার জন্য background-color প্রোপার্টি এবং টেক্সটের কালার পরিবর্তনের জন্য color প্রোপার্টি ব্যবহার করা হয়ঃ

    kt_satt_skill_example_id=1036


    ইনপুট ফিল্ডকে ফোকাস করা

    যখন ইনপুট ফিল্ডে ক্লিক করা হয় বা ইনপুট ফিল্ড ফোকাস হয়, তখন কিছু কিছু ব্রাউজার ডিফল্টভাবে এর চারপাশে নীল আউটলাইন যুক্ত করে। আপনি চাইলে outline: none; ব্যবহার করে এই ইফেক্ট দুর করতে পারেন।

    ফোকাস অবস্থায় কোন কিছু সেট করার জন্য :focus সিলেক্টরটি ব্যবহার করা হয়ঃ

    kt_satt_skill_example_id=1037

    kt_satt_skill_example_id=1038


    ইনপুট ফিল্ডে আইকন/ইমেজ যুক্ত করা

    ইনপুট ফিল্ডের মধ্যে আইকন/ইমেজ যুক্ত করার জন্য background-image প্রোপার্টি এবং অবস্থান নির্ধারণ করার জন্য background-position প্রোপার্টি ব্যবহার করা হয়।

    নিচের উদাহরণে লক্ষ্য করলে দেখবেন আইকনের বামপাশে যথার্থ স্পেস রাখার জন্য উপরোক্ত প্রোপার্টি ছাড়াও আমরা padding-left প্রোপার্টি ব্যবহার করেছি।

    kt_satt_skill_example_id=1041


    সার্চ ইনপুটে এনিমেশন যুক্ত করা

    ফোকাস হওয়া অবস্থায় সার্চ ইনপুটকে এনিমেট করার জন্য এই উদাহরণে আমরা সিএসএস(৩) transition প্রোপার্টি ব্যবহার করেছি। ট্রানজিশন সম্মন্ধে জানতে আমাদের সিএসএস(৩) ট্রানজিশন অধ্যায় ভিজিট করুন।

    kt_satt_skill_example_id=1042


    টেক্সট এরিয়াকে স্টাইল করা

    টিপসঃ টেক্সট এরিয়ার সাইজ নিজের মত করে নির্ধারণ করার জন্য resize প্রোপার্টি ব্যবহার করা হয়। resize প্রোপার্টির মাধ্যমে টেক্সট এরিয়াকে রিসাইজ করা থেকে বিরত রাখা যায়।

    kt_satt_skill_example_id=1048


    সিলেক্ট মেনুকে স্টাইল স্টাইল করা

    kt_satt_skill_example_id=1050

    ইনপুট বাটন স্টাইল করা

    kt_satt_skill_example_id=1053

    সিএসএস এর মাধ্যমে বাটন স্টাইল সম্পর্কে আর ভালভাবে জানতে, আমাদের সিএসএস বাটন টিউটোরিয়াল অধ্যায় ভিজিট করুন।


     

    Content added || updated By

    সিএসএস কাউন্টার (CSS Counter)


    সিএসএস কাউন্টার

    সিএসএস কাউন্টার(counter) হলো সিএসএস কর্তৃক নিয়ন্ত্রিত ভ্যারিয়েবল। কোনো এলিমেন্ট একটি পেজের মধ্যে কতবার ব্যবহৃত হয়েছে তার উপর ভিত্তিকরে সিএসএস নিয়মের আওতায় কাউন্টার ভ্যারিয়েবলের ভ্যালুসমূহ বৃদ্ধি পায়।

    ডকুমেন্টের কন্টেন্টের উপর ভিত্তিকরে কাউন্টারসমূহকে মানানসই অবস্থানে রাখতে পারবেন।

    এক নজরে সিএসএস কাউন্টার প্রোপার্টিসমূহ

    content

    জেনারেটেড কন্টেন্ট ইনসার্ট(insert) করার জন্য ::before এবং ::after সুডো-এলিমেন্টের সাথে ব্যবহার করা হয়।

    counter-increment

    কাউন্টারের ভ্যালু এক বা তার অধিক বৃদ্ধি পায়।

    counter-reset

    এক বা তার অধিক কাউন্টার তৈরি বা রিসেট হয়।

    সিএসএস কাউন্টার নিয়ে কাজ করার জন্য, আমরা আবারো সিএসএস কাউন্টার প্রোপার্টি এবং ফাংশনের কার্যাবলী নিম্নে সংক্ষেপে তুলে ধরলাম।

    1. counter-reset - একটি কাউন্টার তৈরি বা রিসেট করে।
    2. counter-increment - কাউন্টারের ভ্যালু বৃদ্ধি করে।
    3. content - সৃষ্টিকৃত কন্টেন্ট ইনসার্ট করে।
    4. counter() অথবা counters() ফাংশন - একটি এলিমেন্টে কাউন্টারের ভ্যালু যুক্ত করে।

    সিএসএস কাউন্টার ব্যবহার করতে হলে প্রথমে অবশ্যই counter-reset প্রোপার্টি দিয়ে ইহা তৈরি করে নিতে হবে।

    নিচের উদাহরণে body সিলেক্টরের মাধ্যমে একটি পেজকে সিলেক্ট করে এর মধ্যে counter-reset প্রোপার্টি ব্যবহার করে section নামের একটি কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।

    তারপরে counter-increment প্রোপার্টি ব্যবহার করে প্রত্যেক < h1> এলিমেন্টের জন্য section এর ভ্যালু বৃদ্ধি করা হয়েছ।

    content প্রপার্টির মাধ্যমে কাউন্টার(section) ভ্যারিয়েবলসহ এর বর্ধিত ভ্যালুকে প্র্যতেক < h1> এলিমেন্টের পূর্বে স্থান দেওয়া হয়েছে।

    kt_satt_skill_example_id=981


    নেস্টেড কাউন্টার

    নিচের উদাহরণে body সিলেক্টরের মাধ্যমে পেজের জন্য section কাউন্টার ভ্যারিয়েবল তৈরি করে

    সিলেক্টরের মাধ্যমে section এর মধ্যে subsection কাউন্টার ভ্যারিয়েবল তৈরি করা হয়েছে।

    kt_satt_skill_example_id=982


    আউটলাইন লিস্ট তৈরির জন্য কাউন্টার যথাপোযুক্ত। কারণ কাউন্টারের নতুন ভ্যালু স্বয়ংক্রিয়ভাবে চাইল্ড এলিমেন্টসমূহে যুক্ত হয়।

    নেস্টেড কাউন্টারের বিভিন্ন লেভেলের মধ্যে একটি স্ট্রিং যুক্ত করার জন্য counters() এর পরিবর্তে counters() ফাংশন ব্যবহার করা হয়।

    kt_satt_skill_example_id=984


     

    Content added By
    Please, contribute to add content into সিএসএস আইকন (CSS Icon).
    Content

    সিএসএস জি-ইন্ডেক্স (CSS Z-index)

    Please, contribute to add content into সিএসএস জি-ইন্ডেক্স (CSS Z-index).
    Content

    সিএসএস !ইম্পর্ট্যান্ট রুল (CSS !important Rule)

    Please, contribute to add content into সিএসএস !ইম্পর্ট্যান্ট রুল (CSS !important Rule).
    Content

    সিএসএস ম্যাথ ফাংশন (CSS Math Function)

    Please, contribute to add content into সিএসএস ম্যাথ ফাংশন (CSS Math Function).
    Content

    আরও দেখুন...

    Promotion