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

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

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

 

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


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



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

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

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


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

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<body>

  <h3 style="ctext-align:center;">ইনলাইন স্টাইলের ব্যবহার</h3>
  <p style="color:blue;text-align:center;">ইনলাইন স্টাইলের মাধ্যমে কালার এবং এলাইনমেন্ট সেট করা হয়েছে।</p>

</body>
</html>

ফলাফল





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


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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    background-color: skyblue;
    color: white;
  }
  p {
    margin-left: 90px;
    margin-top: 50px;
  }
  </style>
</head>
<body>

  <p>হেড সেকশনে স্টাইল ট্যাগের মাধ্যমে ইন্টারনাল স্টাইল করা হয়েছে।</p>

</body>
</html>

ফলাফল





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

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  <h2>এক্সটার্নাল স্টাইল শীট</h2>
  <p>হেড সেকশনে link ট্যাগে এক্সটার্নাল স্টাইল শীটের মাধ্যমে স্টাইল করা হয়েছে।</p>

</body>
</html>

ফলাফল





যেকোন টেক্সট এডিটরে এক্সটার্নাল স্টাইল শীট লেখা যায় এবং এই এক্সটার্নাল স্টাইল ফাইলে এইচটিএমএল ট্যাগ ব্যবহার করা যায় না। স্টাইল শীট ফাইলটি অবশ্যই .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" হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
  h2 {
    color:green;
  }
  </style>
</head>
<body>

  <h2>একটি গুরুত্বপূর্ণ শিরোনাম</h2>
  <p>এই ডকুমেন্টের স্টাইলটি অভ্যন্তরীন এবং বাহ্যিক স্টাইলশীটের সমন্বয়ে গঠিত।</p>

</body>
</html>

ফলাফল





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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  h2 {
    color: green;
  }
  </style>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<h2>একটি গুরুত্বপূর্ণ শিরোনাম</h2>
<p>এই ডকুমেন্টের স্টাইলটি অভ্যন্তরীন এবং বাহ্যিক স্টাইলশীটের সমন্বয়ে গঠিত</p>

</body>
</html>

ফলাফল





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

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

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

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

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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <style>
    body {background-color: violet;}
  </style>
</head>
<body style="background-color: green;color:white;">

  <h1>বাংলাদেশ সরকার ব্যবস্থা</h1>
  <p>বাংলাদেশের সংবিধান ১৯৭২ খ্রিস্টাব্দে প্রণীত হয়। পরবর্তীতে ২০১৫ খ্রিস্টাব্দ পর্যন্ত
  সর্বমোট ১৬টি সংশোধনী আনা হয়েছে।[২৭] বর্তমান সংবিধান অনুযায়ী বাংলাদেশে সংসদীয় 
  গণতন্ত্র ব্যবস্থার সরকার পদ্ধতি প্রচলিত।রাষ্ট্রযন্ত্রের তিনটি শাখা: সংসদ, প্রশাসন এবং
  বিচার ব্যবস্থা।বাংলাদেশের জাতীয় সংসদ এক কক্ষবিশিষ্ট। এতে জনগণের
  সরাসরি ভোটে নির্বাচিত ৩০০ জন সদস্য ছাড়াও মহিলাদের জন্য ৫০টি
  সংরক্ষিত আসন আছে। প্রতিটি সংসদের নির্ধারিত মেয়াদকাল ৫ বছর।</p>

</body>
</html>

ফলাফল