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

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

হোম-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 Syntax)

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


CSS selector

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

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

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

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



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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস  উদাহরণ</title>
  <style>
  p {
    color: red;
    text-align: center;
  }
  </style>
</head>
<body>

  <p>এই প্যারাগ্রাফটি <strong>সিএসএস</strong> দ্বারা স্টাইল করা হয়েছে।</p>
  <p>এই প্যারাগ্রাফটিও <strong>সিএসএস</strong> দ্বারা স্টাইল করা হয়েছে।</p>

</body>
</html>

ফলাফল





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

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



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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
    text-align: center;
    color: slateblue;
  }
  </style>
</head>
<body>

  <p>প্রত্যেকটি প্যারাগ্রাফ ট্যাগে একই ধরনের স্টাইল হবে।</p>
  <p>এই প্যারাগ্রাফ ট্য্যগটিতেও একই স্টাইল হবে!</p>
  <p>এটিতেও একই স্টাইল হবে!</p>

</body>
</html>

ফলাফল





id সিলেক্টর

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

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  #text {
    text-align: center;
    color: slateblue;
  }
  </style>
</head>
<body>

  <p id="text">এই প্যারাগ্রাফটি স্টাইল করার জন্য id ব্যবহার করা হয়েছে।</p>
  <p>এই প্যারাগ্রাফটিতে স্টাইল করা হয়নি।</p>

</body>
</html>

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

ফলাফল





class সিলেক্টর

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .text {
    text-align: center;
    color: slateblue;
  }
  </style>
</head>
<body>

  <h3 class="text">শিরোনামের লেখাটি slateblue কালার এবং মাঝখানে রয়েছে।</h3>
  <p class="text">এই লেখাটিও slateblue কালার এবং মাঝখানে রয়েছে।</p>

</body>
</html>

ফলাফল





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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p.text {
    text-align: center;
    color: slateblue;
  }
</style>
</head>
<body>

  <h3 class="text">শিরোনামটি প্রভাবিত হবে না।</h3>
  <p class="text">প্যারাগ্রাফটি slateblue কালার এবং মাঝখানে রয়েছে।</p>

</body>
</html>

ফলাফল





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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p.text {
    text-align: center;
    color: slateblue;
  }
  p.para {
    font-size: 200%;
  }
  </style>
</head>
<body>

  <h2 class="text">শিরোনামটি প্রভাবিত হবে না।</h2>
  <p class="text">প্যারাগ্রাফটি slateblue কালার হবে এবং মাঝখানে থাকবে।</p>
  <p class="text para">প্যারাগ্রাফটির লিখাগুলো বড় আকারের, slateblue কালারের এবং মাঝখানে থাকবে।</p>

</body>
</html>

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

ফলাফল





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

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

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <head>
  <style>
  h1, h2, p {
    text-align: center;
    color: slateblue;
  }
  </style>
</head>
<body>

  <h1>স্যাট একাডেমিতে আপনাদের স্বাগতম!</h1>
  <h2>গ্রুপ সিলেক্টরের ব্যবহার</h2>
  <p>কোডসমূহের দৈর্ঘ্য কমানোর জন্য গ্রুপ সিলেক্টর ব্যবহার করা হয়।</p>

</body>
</html>

ফলাফল





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

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  </head>
  <style>
  p {
    color: slateblue;
    /* এটি একটি সিংগেল-লাইন কমেন্ট */
    text-align: center;
  }
  /* এটি একটি
  মাল্টি-লাইন
  কমেন্ট */
  </style>
</head>
<body>

<p>এই প্যারাগ্রাফটি সিএসএস দ্বারা স্টাইল করা হয়ছে।</p>
<p>সিএসএস এর কমেন্টগুলো ব্রাউজারে প্রদর্শিত হবে না।</p>

</body>
</html>

ফলাফল