সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

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

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-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

 

সিএসএস পরিচিতি


সিএসএস কি?

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


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

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

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



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

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

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


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

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

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

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



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

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

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