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

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

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

 

সিএসএস লিংক


লিংক স্টাইল

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  a {
    color: white;
    background-color: green;
  }
    </style>
</head>
<body>

  <h2>সিএসএস এর মাধ্যমে লিংক স্টাইল</h2>
  <a href="https://www.sattacademy.com" target="_blank">স্যাট একাডেমি</a>

</body>
</html>

ফলাফল





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

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  a:link {
    color: red;
  }
  a:visited {
    color: green;
  }
  a:hover {
    color: hotpink;
  }
  a:active {
    color: blue;
  }
  </style>
</head>
<body>

  <p><a href="https://www.sattacademy.com/js" target="_blank">স্যাট একাডেমি জাভাস্ক্রিপ্ট</a></p>

</body>
</html>

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

ফলাফল





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

  • 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 ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  a:link {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
  </style>
</head>
<body>

  <p><a href="https://www.sattacademy.com" target="_blank">স্যাট একাডেমি</a></p>

</body>
</html>

ফলাফল





লিংক বাটন

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  a {
    background-color: #f010f0;
    color: black;
    padding: 20px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bolder;
  }
  </style>
</head>
<body>

  <a href="../index.php" target="_blank">স্যাট একাডেমি</a>

</body>
</html>

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

ফলাফল