CSS দিয়ে মার্কডাউন স্টাইল করা

মার্কডাউন সিম্যান্টিক স্ট্রাকচার প্রদান করে, CSS আপনাকে আপনার কন্টেন্টের ভিজ্যুয়াল উপস্থাপনা নিয়ন্ত্রণ করতে দেয়। কীভাবে কার্যকরভাবে আপনার মার্কডাউন ডকুমেন্ট স্টাইল করবেন তা শিখুন।

মার্কডাউন এবং CSS বোঝা

মার্কডাউন HTML-এ রূপান্তরিত হয়, যা তারপর CSS দিয়ে স্টাইল করা যায়। মূল বিষয়গুলি হল:

HTML আউটপুট: আপনার মার্কডাউন কোন HTML এলিমেন্ট তৈরি করে তা জানুন
CSS সিলেক্টর: নির্দিষ্ট এলিমেন্টগুলিকে কার্যকরভাবে টার্গেট করুন
স্পেসিফিসিটি: CSS রুল কীভাবে প্রয়োগ করা হয় তা বুঝুন
রেসপন্সিভ ডিজাইন: নিশ্চিত করুন স্টাইলগুলি বিভিন্ন ডিভাইসে কাজ করে

বেসিক CSS ইন্টিগ্রেশন

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

আপনার মার্কডাউনে CSS সরাসরি অন্তর্ভুক্ত করুন:

markdown

<style>
h1 {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
}

p {
  line-height: 1.6;
  color: #34495e;
}
</style>

# স্টাইল করা হেডিং

এই প্যারাগ্রাফটি উপরের কাস্টম স্টাইল ব্যবহার করবে।

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

বাহ্যিক CSS ফাইলে লিঙ্ক করুন:

markdown

<link rel="stylesheet" href="styles.css">

# আমার ডকুমেন্ট

এখানে কন্টেন্ট বাহ্যিক স্টাইল ব্যবহার করবে।

সাধারণ মার্কডাউন এলিমেন্ট স্টাইল করা

হেডিং

css

/* প্রাইমারি হেডিং */
h1 {
  font-size: 2.5em;
  font-weight: 700;
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 2px solid #eaecef;
}

/* সেকেন্ডারি হেডিং */
h2 {
  font-size: 2em;
  font-weight: 600;
  color: #34495e;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid #eaecef;
}

/* টার্শিয়ারি হেডিং */
h3 {
  font-size: 1.5em;
  font-weight: 600;
  color: #34495e;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

প্যারাগ্রাফ এবং টেক্সট

css

p {
  margin-bottom: 1em;
  line-height: 1.7;
  color: #2c3e50;
}

strong {
  font-weight: 700;
  color: #2c3e50;
}

em {
  font-style: italic;
  color: #555;
}

code {
  background-color: #f4f4f4;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: #e74c3c;
}

লিঙ্ক

css

a {
  color: #3498db;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

a:hover {
  color: #2980b9;
  border-bottom-color: #2980b9;
}

a:visited {
  color: #8e44ad;
}

লিস্ট

css

ul, ol {
  margin-bottom: 1em;
  padding-left: 2em;
}

li {
  margin-bottom: 0.5em;
  line-height: 1.6;
}

ul ul, ol ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* কাস্টম বুলেট পয়েন্ট */
ul {
  list-style-type: none;
}

ul li::before {
  content: "▸";
  color: #3498db;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

কোড ব্লক

css

pre {
  background-color: #f6f8fa;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin-bottom: 1em;
  border: 1px solid #e1e4e8;
}

pre code {
  background-color: transparent;
  padding: 0;
  font-size: 0.95em;
  line-height: 1.45;
  color: #24292e;
}

ব্লককোট

css

blockquote {
  margin: 1em 0;
  padding: 0.5em 1em;
  border-left: 4px solid #3498db;
  background-color: #f8f9fa;
  color: #555;
  font-style: italic;
}

blockquote p {
  margin: 0.5em 0;
}

blockquote cite {
  display: block;
  text-align: right;
  font-size: 0.9em;
  color: #777;
  margin-top: 0.5em;
}

টেবিল

css

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
  overflow-x: auto;
  display: block;
}

th {
  background-color: #f6f8fa;
  font-weight: 600;
  text-align: left;
  padding: 12px;
  border: 1px solid #dfe2e5;
}

td {
  padding: 12px;
  border: 1px solid #dfe2e5;
}

tr:nth-child(even) {
  background-color: #f6f8fa;
}

tr:hover {
  background-color: #f1f3f5;
}

ইমেজ

css

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 1em 0;
}

/* সেন্টার করা ইমেজ */
img[alt$="center"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ইমেজ ক্যাপশন */
img + em {
  display: block;
  text-align: center;
  font-size: 0.9em;
  color: #666;
  margin-top: -0.5em;
  margin-bottom: 1em;
}

অ্যাডভান্সড স্টাইলিং টেকনিক

ডার্ক মোড সাপোর্ট

css

/* লাইট মোড (ডিফল্ট) */
:root {
  --bg-color: #ffffff;
  --text-color: #2c3e50;
  --heading-color: #1a202c;
  --link-color: #3498db;
  --border-color: #eaecef;
}

/* ডার্ক মোড */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a202c;
    --text-color: #e2e8f0;
    --heading-color: #f7fafc;
    --link-color: #63b3ed;
    --border-color: #4a5568;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

h1, h2, h3 {
  color: var(--heading-color);
  border-bottom-color: var(--border-color);
}

a {
  color: var(--link-color);
}

রেসপন্সিভ টাইপোগ্রাফি

css

/* বেস ফন্ট সাইজ */
html {
  font-size: 16px;
}

/* ট্যাবলেট */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
  
  h1 { font-size: 2em; }
  h2 { font-size: 1.75em; }
}

/* মোবাইল */
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  h1 { font-size: 1.75em; }
  h2 { font-size: 1.5em; }
}

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

css

@media print {
  /* ব্যাকগ্রাউন্ড সরান */
  * {
    background: white !important;
    color: black !important;
  }
  
  /* শ্যাডো এবং বর্ডার সরান */
  img, pre, blockquote {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
  
  /* পেজ ব্রেক */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  /* লিঙ্ক URL দেখান */
  a::after {
    content: " (" attr(href) ")";
  }
}

সম্পূর্ণ থিম উদাহরণ

প্রফেশনাল ডকুমেন্টেশন থিম

css

/* ফন্ট ইম্পোর্ট করুন */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Fira+Code&display=swap');

/* গ্লোবাল স্টাইল */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: #2c3e50;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
}

/* টাইপোগ্রাফি */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2.5em;
  color: #1a202c;
  border-bottom: 3px solid #3498db;
  padding-bottom: 0.3em;
}

h2 {
  font-size: 2em;
  color: #2d3748;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 0.3em;
}

/* কোড */
code, pre {
  font-family: 'Fira Code', 'Courier New', monospace;
}

code {
  background-color: #f7fafc;
  color: #e74c3c;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-size: 0.9em;
}

pre {
  background-color: #2d3748;
  color: #e2e8f0;
  padding: 1.5em;
  border-radius: 8px;
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* লিঙ্ক */
a {
  color: #3498db;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* টেবিল */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5em 0;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #e2e8f0;
}

th {
  background-color: #f7fafc;
  font-weight: 600;
  color: #2d3748;
}

tr:hover {
  background-color: #f7fafc;
}

/* ব্লককোট */
blockquote {
  margin: 1.5em 0;
  padding: 0.5em 1.5em;
  border-left: 4px solid #3498db;
  background-color: #f7fafc;
  font-style: italic;
}

/* টাস্ক লিস্ট */
input[type="checkbox"] {
  margin-right: 0.5em;
}

CSS ফ্রেমওয়ার্ক এবং মার্কডাউন

Tailwind CSS ব্যবহার করা

markdown

<div class="prose lg:prose-xl">

# আমার ডকুমেন্ট

এই কন্টেন্ট Tailwind-এর টাইপোগ্রাফি প্লাগিন স্টাইল ব্যবহার করবে।

</div>

Bootstrap ব্যবহার করা

markdown

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-md-8">
      
# মূল কন্টেন্ট

    </div>
  </div>
</div>

সেরা অনুশীলন

CSS ভেরিয়েবল ব্যবহার করুন: থিমগুলি সহজে কাস্টমাইজেবল করুন
মোবাইল ফার্স্ট: মোবাইলের জন্য ডিজাইন করুন, তারপর বড় স্ক্রিনের জন্য উন্নত করুন
অ্যাক্সেসিবিলিটি: পর্যাপ্ত রঙ কন্ট্রাস্ট এবং পঠনযোগ্য ফন্ট নিশ্চিত করুন
পারফরম্যান্স: CSS মিনিমাইজ করুন, ব্যবহার না করা রুল সরান
সামঞ্জস্যতা: সামঞ্জস্যপূর্ণ স্পেসিং এবং টাইপোগ্রাফি স্কেল ব্যবহার করুন

টুলস এবং রিসোর্স

CSS Validators: ত্রুটির জন্য আপনার CSS চেক করুন
Autoprefixer: স্বয়ংক্রিয়ভাবে ভেন্ডর প্রিফিক্স যোগ করুন
PurgeCSS: ব্যবহার না করা CSS সরান
PostCSS: JavaScript প্লাগিন দিয়ে CSS রূপান্তর করুন

উপসংহার

CSS আপনাকে আপনার মার্কডাউন কন্টেন্ট কেমন দেখায় তার উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়। সুন্দর, অ্যাক্সেসিবল ডকুমেন্ট তৈরি করতে সিম্যান্টিক মার্কডাউনকে চিন্তাশীল CSS-এর সাথে একত্রিত করুন।

CSS দিয়ে মার্কডাউন স্টাইল করা

মার্কডাউন এবং CSS বোঝা

বেসিক CSS ইন্টিগ্রেশন

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

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

সাধারণ মার্কডাউন এলিমেন্ট স্টাইল করা

হেডিং

প্যারাগ্রাফ এবং টেক্সট

লিঙ্ক

লিস্ট

কোড ব্লক

ব্লককোট

টেবিল

ইমেজ

অ্যাডভান্সড স্টাইলিং টেকনিক

ডার্ক মোড সাপোর্ট

রেসপন্সিভ টাইপোগ্রাফি

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

সম্পূর্ণ থিম উদাহরণ

প্রফেশনাল ডকুমেন্টেশন থিম

CSS ফ্রেমওয়ার্ক এবং মার্কডাউন

Tailwind CSS ব্যবহার করা

Bootstrap ব্যবহার করা

সেরা অনুশীলন

টুলস এবং রিসোর্স

উপসংহার

অতিরিক্ত রিসোর্স

সম্পর্কিত সিনট্যাক্স

CSS দিয়ে মার্কডাউন স্টাইল করা ​

মার্কডাউন এবং CSS বোঝা ​

বেসিক CSS ইন্টিগ্রেশন ​

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

এক্সটার্নাল স্টাইলশিট ​

সাধারণ মার্কডাউন এলিমেন্ট স্টাইল করা ​

হেডিং ​

প্যারাগ্রাফ এবং টেক্সট ​

লিঙ্ক ​

লিস্ট ​

কোড ব্লক ​

ব্লককোট ​

টেবিল ​

ইমেজ ​

অ্যাডভান্সড স্টাইলিং টেকনিক ​

ডার্ক মোড সাপোর্ট ​

রেসপন্সিভ টাইপোগ্রাফি ​

প্রিন্ট স্টাইল ​

সম্পূর্ণ থিম উদাহরণ ​

প্রফেশনাল ডকুমেন্টেশন থিম ​

CSS ফ্রেমওয়ার্ক এবং মার্কডাউন ​

Tailwind CSS ব্যবহার করা ​

Bootstrap ব্যবহার করা ​

সেরা অনুশীলন ​

টুলস এবং রিসোর্স ​

উপসংহার ​

অতিরিক্ত রিসোর্স ​

সম্পর্কিত সিনট্যাক্স ​

CSS দিয়ে মার্কডাউন স্টাইল করা

মার্কডাউন এবং CSS বোঝা

বেসিক CSS ইন্টিগ্রেশন

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

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

সাধারণ মার্কডাউন এলিমেন্ট স্টাইল করা

হেডিং

প্যারাগ্রাফ এবং টেক্সট

লিঙ্ক

লিস্ট

কোড ব্লক

ব্লককোট

টেবিল

ইমেজ

অ্যাডভান্সড স্টাইলিং টেকনিক

ডার্ক মোড সাপোর্ট

রেসপন্সিভ টাইপোগ্রাফি

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

সম্পূর্ণ থিম উদাহরণ

প্রফেশনাল ডকুমেন্টেশন থিম

CSS ফ্রেমওয়ার্ক এবং মার্কডাউন

Tailwind CSS ব্যবহার করা

Bootstrap ব্যবহার করা

সেরা অনুশীলন

টুলস এবং রিসোর্স

উপসংহার

অতিরিক্ত রিসোর্স

সম্পর্কিত সিনট্যাক্স