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

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

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

 

সিএসএস ফরম


সিএসএস এর মাধ্যমে একটি এইচটিএমএল ফর্মকে অসাধারণ ভাবে সাজানো যায়ঃ

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <style>
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #39ac73;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #26734d;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}
 </style>
 <body>

 <h3>এইচটিএমএল ফর্মকে স্টাইল করার জন্য সিএসএস ব্যবহার করা হয়। </h3>

 <div>
   <form>
     <label for="fname">নাম </label>
     <input type="text" id="fname" name="firstname">

     <label for="lname">পিতার নাম </label>
     <input type="text" id="lname" name="lastname">

     <label for="country">দেশ </label>
     <select id="country" name="country">
       <option value="australia"> অস্টেলিয়া </option>
       <option value="canada"> কানাডা </option>
       <option value="usa">ইউএসএ </option>
     </select>
  
     <input type="submit" value="সাবমিট">
   </form>
 </div>

</body>
</html>

ফলাফল




ইনপুট ফিল্ডের প্রস্থ নির্ধারণ করা

ইনপুট ফিল্ড এর প্রস্থ নির্ধারণের জন্য width প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input {
    width: 100%;
}
</style>
</head>
<body>

<p>একটি full-width ইনপুট ফিল্ডঃ</p>

<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

ফলাফল



উপরের উদাহরণটি সব ধরনের width ইলিমেন্ট এর জন্য প্রযোজ্য। আপনি যদি শুধুমাত্র একটি নির্দিষ্ট ইনপুট এলিমেন্টকে স্টাইল করতে চান, তাহলে আপনি এট্রিবিউট সিলেক্টর ব্যবহার করতে পারেনঃ


ইনপুট ফিল্ডে প্যাডিং যুক্ত করা

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

টিপসঃ একাধিক input ফিল্ডের ক্ষেত্রে আপনি যদি ফিল্ডের চারপাশে কিছু margin যুক্ত করতে চান তাহলে মার্জিন প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
</style>
</head>
<body>

<p>পেডিংসহ টেক্সট ফিল্ডঃ</p>

<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname">
  <label for="fname">ঠিকানা</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

ফলাফল



উপরের উদাহরণে লক্ষ্য করলে দেখবেন box-sizing প্রোপার্টির ভ্যালু border-box সেট করা হয়েছে। এর মাধ্যমে আমরা নিশ্চিত হয় যে, এলিমেন্টের প্যাডিং এবং মার্জিন এর মোট দৈর্ঘ্য এবং প্রস্থের মধ্যে অন্তর্ভুক্ত হয়েছে।


box-sizing প্রোপার্টি সম্পর্কে আর বিস্তারিত জানতে আমাদের সিএসএস(৩) box-sizing অধ্যায় ভিজিট করুন।


ইনপুট ফিল্ডে বর্ডার যুক্ত করা

বর্ডারের আকার এবং কালার পরিবর্তন করার জন্য সিএসএস border প্রোপার্টি ব্যবহার করা হয়। এছাড়া বর্ডারের আকার গোলাকৃতি কর্ণারের মত করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
 <style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 2px solid teal;
    border-radius: 4px;
}
 </style>
 </head>
 <body>

 <p> বর্ডারসহ টেক্সট ফিল্ড </p>

 <form>
   <label for="fname">নাম </label>
   <input type="text" id="fname" name="fname">
   <label for="lname">ঠিকানা </label>
   <input type="text" id="lname" name="lname">
 </form>
</body>
</html>

ফলাফল



আপনি যদি শধুমাত্র ইনপুট ফিল্ডের নিচের বর্ডার পরিবর্তন করতে চান তাহলে border-bottom প্রোপার্টিটি ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 2px solid teal;
}
</style>
</head>
<body>

<p>শুধুমাত্র একটি বটম বর্ডারসহ টেক্সট ফিল্ড</p>

<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname">
  <label for="fname">ঠিকানা</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

ফলাফল




ইনপুট ফিল্ডে কালার যুক্ত করা

ইনপুট ফিল্ডে ব্যাকগ্রাউন্ড কালার যুক্ত করার জন্য background-color প্রোপার্টি এবং টেক্সটের কালার পরিবর্তনের জন্য color প্রোপার্টি ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    background-color: #3CBC8D;
    color: white;
}
</style>
</head>
<body>

<p>কালার টেক্সট ফিল্ডঃ</p>

<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname" value="হাফিজ">
  <label for="fname">ঠিকানা</label>
  <input type="text" id="lname" name="lname" value="চাঁদপুর">
</form>

</body>
</html>

ফলাফল




ইনপুট ফিল্ডকে ফোকাস করা

যখন ইনপুট ফিল্ডে ক্লিক করা হয় বা ইনপুট ফিল্ড ফোকাস হয়, তখন কিছু কিছু ব্রাউজার ডিফল্টভাবে এর চারপাশে নীল আউটলাইন যুক্ত করে। আপনি চাইলে outline: none; ব্যবহার করে এই ইফেক্ট দুর করতে পারেন।

ফোকাস অবস্থায় কোন কিছু সেট করার জন্য :focus সিলেক্টরটি ব্যবহার করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #555;
    outline: none;
}

input[type=text]:focus {
    background-color: lightblue;
}
</style>
</head>
<body>

<p>এই উদাহরনে টেক্সট ফিল্ডে ক্লিক করলে ব্যাকগ্রাউন্ড কালার পরিবর্তনের জন্য আমরা:focus selector ব্যবহার করি।</p>

<form>
  <label for="fname">প্রথম নাম</label>
  <input type="text" id="fname" name="fname" value="সুহিন">
  <label for="fname">শেষ নাম</label>
  <input type="text" id="lname" name="lname" value="রাজু">
</form>
</body>
</html>

ফলাফল



উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 3px solid #39ac73;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
}
input[type=text]:focus {
    border: 3px solid #26734d;
}
</style>
</head>
<body>
<p>ফোকাস অবস্থায় কোন কিছু সেট করার জন্য :focus সিলেক্টরটি ব্যবহার করা হয়ঃ </p>
<p><b>নোটঃ</b> বর্ডার কালারকে এনিমেট করার জন্য আমরা CSS3 transition প্রোপার্টি ব্যবহার করব (এখানে কালারটি ফোকাসে করতে ০.৫ সেকেন্ড সময় নেয়।</p>
<form>
  <label for="fname">নাম</label>
  <input type="text" id="fname" name="fname" value="নূর মোহাম্মদ রাজু">
  <label for="fname">পিতার নাম</label>
  <input type="text" id="lname" name="lname" value="মো: হাবিব উল্লাহ">
</form>
</body>
</html>

ফলাফল




ইনপুট ফিল্ডে আইকন/ইমেজ যুক্ত করা

ইনপুট ফিল্ডের মধ্যে আইকন/ইমেজ যুক্ত করার জন্য background-image প্রোপার্টি এবং অবস্থান নির্ধারণ করার জন্য background-position প্রোপার্টি ব্যবহার করা হয়।

নিচের উদাহরণে লক্ষ্য করলে দেখবেন আইকনের বামপাশে যথার্থ স্পেস রাখার জন্য উপরোক্ত প্রোপার্টি ছাড়াও আমরা padding-left প্রোপার্টি ব্যবহার করেছি।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #39ac73;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>আইকনসহ ইনপুটঃ</p>

<form>
  <input type="text" name="search" placeholder="সার্চ..">
</form>
</body>
</html>

ফলাফল




সার্চ ইনপুটে এনিমেশন যুক্ত করা

ফোকাস হওয়া অবস্থায় সার্চ ইনপুটকে এনিমেট করার জন্য এই উদাহরণে আমরা সিএসএস(৩) transition প্রোপার্টি ব্যবহার করেছি। ট্রানজিশন সম্মন্ধে জানতে আমাদের সিএসএস(৩) ট্রানজিশন অধ্যায় ভিজিট করুন।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #39ac73;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>
</head>
<body>

<p>অ্যানিমেটেড সার্চ ইনপুট:</p>

<form>
  <input type="text" name="search" placeholder="সার্চ..">
</form>

</body>
</html>

ফলাফল




টেক্সট এরিয়াকে স্টাইল করা

টিপসঃ টেক্সট এরিয়ার সাইজ নিজের মত করে নির্ধারণ করার জন্য resize প্রোপার্টি ব্যবহার করা হয়। resize প্রোপার্টির মাধ্যমে টেক্সট এরিয়াকে রিসাইজ করা থেকে বিরত রাখা যায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #39ac73;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 16px;
    resize: none;
}
</style>
</head>
<body>

<p><strong>টিপস:</strong> টেক্সট এরিয়াকে রিসাইজ থেকে বিরত রাখার জন্য resize প্রোপার্টি ব্যবহার করা হয়।</p>
<form>
  <textarea>টেক্সট লিখুন...</textarea>

</body>
</html>

ফলাফল




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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #39ac73;
}
</style>
</head>
<body>

<p> স্টাইলকৃত একটি সিলেক্ট মেন্যুঃ</p>

<form>
  <select id="country" name="country">
    <option value="usa">চাঁদপুর</option>
    <option value="usa">ঢাকা</option>
    <option value="usa">ফরিদগঞ্জ</option>
  </select>
</form>

</body>
</html>

ফলাফল




ইনপুট বাটন স্টাইল করা

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>এইচটিএমএল উদাহরণ</title>
<style>
input[type=button], input[type=submit], input[type=reset] {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 16px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}
</style>
</head>
<body>

<p>স্টাইল ইনপুট বাটনঃ</p>

<input type="button" value="বাটন">
<input type="reset" value="রিসেট">
<input type="submit" value="সাবমিট">

</body>
</html>

ফলাফল



সিএসএস এর মাধ্যমে বাটন স্টাইল সম্পর্কে আর ভালভাবে জানতে, আমাদের সিএসএস বাটন টিউটোরিয়াল অধ্যায় ভিজিট করুন।