১-১১: HTML ও CSS — পরিচিতি, স্টাইলিং পদ্ধতি এবং উদাহরণসহ গাইড

By /
HTML ও CSS পরিচিতি স্টাইলিং পদ্ধতি এবং উদাহরণসহ গাইড

ভূমিকা

HTML দিয়ে আপনি ওয়েবপেজের স্ট্রাকচার তৈরী করেন; CSS (Cascading Style Sheets) দিয়ে ওই স্ট্রাকচারের স্টাইল/লুক নিয়ন্ত্রণ করেন — রঙ, ফন্ট, লেআউট, স্পেসিং, অ্যানিমেশন ইত্যাদি। এই পোস্টে HTML ও CSS একসাথে কিভাবে কাজ করে, স্টাইল যোগ করার বিভিন্ন পদ্ধতি এবং গুরুত্বপূর্ণ কনসেপ্টগুলো সহজ উদাহরণসহ দেখানো হলো।

HTML + CSS কেন আলাদা?

  • Separation of concerns: HTML = Content/Structure, CSS = Presentation/Style
  • রক্ষণাবেক্ষণ সহজ হয়; একবার CSS লিখে অনেক পেজে প্রয়োগ করা যায়
  • Responsive design ও advanced UI CSS দিয়ে করা হয়

কিভাবে CSS যোগ করবেন? (৩টি পদ্ধতি)

1) Inline CSS (ট্যাগের ভিতরে সরাসরি)

 
<p style="color: red; font-size: 18px;">Inline style উদাহরণ</p>

  • দ্রুত টেস্টের জন্য ভালো; বড় প্রোজেক্টে নিষেধ।

2) Internal CSS (একই HTML ফাইলের <style> ট্যাগে)

 
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: navy; }
p { color: #333; line-height: 1.6; }
</style>
</head>
<body>
<h1>শিরোনাম</h1>
<p>প্যারাগ্রাফ</p>
</body>
</html>

  • পেজ-লেভেল স্টাইলিং; ডেভ-টেস্টিং বা একটি পেজ স্পেসিফিক স্টাইল্‌সের জন্য ব্যবহারযোগ্য।

3) External CSS (বিভিন্ন পেজ ভাগ করে ব্যবহার)

styles.css:

 
body { font-family: Arial, sans-serif; background: #f9f9f9; }
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
.btn { display: inline-block; padding: 10px 16px; background: #007bff; color: #fff; text-decoration: none; border-radius: 6px; }

HTML এ লিংক করুন:

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

  • সবচেয়ে বেশি ব্যবহৃত এবং প্রফেশনাল পদ্ধতি।

Selectors (নির্বাচক)

CSS selector দিয়ে আপনি নির্দিষ্ট HTML এলিমেন্ট টার্গেট করেন:

  • element selector: p {}

  • class selector: .btn {} → <a class="btn">

  • id selector: #header {} → <div id="header">

  • descendant selector: .nav a {}

  • attribute selector: input[type="text"] {}

Specificity & Cascade (কেন কোন স্টাইল জেতে?)

  • Inline style > ID selector > Class selector > Element selector

  • একই specificity হলে পরে যেই নিয়মটি এসেছে তা প্রাধান্য পায় (cascade)

  • !important ব্যবহার করলে ঐ স্টাইল বেশি গুরুত্ব পায় — অল্প ও সাবধানে ব্যবহার করুন।

Box Model (HTML এর প্রতিটি এলিমেন্টের বেসিক কাঠামো)

প্রতি ব্লক-এলিমেন্টের চারটি অংশ: content → padding → border → margin

.box {
width: 200px;
padding: 10px;
border: 2px solid #ccc;
margin: 20px;
}

বৈশিষ্ট্যগুলো বোঝার ফলে লেআউট বানানো সহজ হয়।

Layout Basics (লেআউট তৈরির পদ্ধতি) Floats (পুরনো)

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

Flexbox (আধুনিক, এক-মাত্রিক লেআউট)

 
.container { display: flex; gap: 20px; align-items: center; }

  • হরাইজন্টাল বা ভর্টিকাল কন্টেন্ট অ্যালাইন করতে খুবই উপযোগী।

Grid (দুই-মাত্রিক লেআউট)

 
.grid { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }

  • জটিল লেআউট সহজে তৈরি করা যায়।

Typography ও Colors

body { font-family: 'Inter', Arial, sans-serif; color: #222; }
h1 { font-size: 2rem; color: #1f2937; }
a { color: #007bff; text-decoration: none; }
a:hover { text-decoration: underline; }

  • রঙ ও ফন্ট সঠিকভাবে নির্বাচন করলে UI সুন্দর হয়; accessibility (contrast) খেয়াল রাখুন।

Responsive Design (মোবাইল ফার্স্ট)

Media queries দিয়ে বিভিন্ন স্ক্রিন সাইজের জন্য আলাদা স্টাইল দিন:

/* Mobile first */
.container { padding: 16px; }/* Larger screens */
@media (min-width: 768px) {
.container { padding: 32px; }
}

  • Fluid units (%, vw, rem) ব্যবহার করুন fixed px কম করতে।

Pseudo-classes & Pseudo-elements

  • :hover, :focus, :active (pseudo-classes)

  • ::before, ::after (pseudo-elements) — কনটেন্ট আগে/পর সোজা inject করতে পারে

 
.button::after { content: " →"; }
a:hover { color: darken(#007bff, 10%); }

Transitions & Animations (হালকা অ্যানিমেশন)

.btn { transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

  • অতিরিক্ত অ্যানিমেশন বাদ দিয়ে subtle effect দিন — UX উন্নত করে।

Accessibility & Performance টিপস

  • কন্ট্রাস্ট ও font-size ঠিক রাখুন (readability)

  • prefers-reduced-motion সমর্থন করুন অ্যানিমেশনের জন্য

  • CSS Minify ও Critical CSS ব্যবহার করে পারফরম্যান্স বাড়ান

  • Semantic HTML (header, nav, main, article, footer) ব্যবহার করুন — screen readers ভালোভাবে বোঝে

প্র্যাকটিক্যাল পূর্ণ উদাহরণ (HTML + External CSS)

index.html

<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML & CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<div class="container">
<h1>আমার সাইট</h1>
<nav class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#" class="btn">Get Started</a>
</nav>
</div>
</header><main class=“container”>
<section class=“intro”>
<h2>ওয়েলকাম!</h2>
<p>এই উদাহরণে HTML ও CSS কিভাবে একসাথে কাজ করে দেখানো হয়েছে।</p>
</section>
</main>
</body>
</html>

styles.css

 

:root {
--primary: #0b76ef;
--bg: #f7f9fc;
--text: #1f2937;
--container: 1100px;
}* { box-sizing: border-box; }body {
margin: 0;
font-family: “Helvetica Neue”, Arial, sans-serif;
background: var(–bg);
color: var(–text);
line-height: 1.6;
}

.container {
max-width: var(–container);
margin: 0 auto;
padding: 16px;
}

.site-header { background: #fff; border-bottom: 1px solid #e6eef6; }
.site-header .nav { display: flex; gap: 12px; align-items: center; }
.btn { background: var(–primary); color: #fff; padding: 8px 14px; border-radius: 6px; text-decoration: none; }

@media (min-width: 768px) {
.container { padding: 24px; }
.site-header .nav { justify-content: flex-end; }
}

শুরু করার রোডম্যাপ (Recommended Learning Path)

  1. HTML মৌলিক — tags, attributes, semantic elements

  2. CSS মৌলিক — selectors, properties, box model

  3. Layout — Flexbox → Grid

  4. Responsive design (media queries)

  5. Advanced — animations, preprocessors (Sass), CSS architecture (BEM)

  6. Performance & accessibility best practices

উপসংহার

HTML এবং CSS একসাথে ওয়েব ডিজাইন ও ডেভেলপমেন্টের হার্ট। HTML দিয়ে আপনি কন্টেন্ট সাজান; CSS দিয়ে সেটাকে সুন্দর, রেস্পন্সিভ ও ব্যবহারযোগ্য করেন। External CSS ব্যবহার করে, modern layout (Flexbox/Grid) জানলে আপনি যেকোনো সুন্দর ও কার্যকর ওয়েবপেজ বানাতে পারবেন।

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Posts

Portfolio website create guide rezablogbd

১-৬: Portfolio website তৈরি গাইড

Leave a Comment / ১. Web Design, Web Design Projects / By / , , , , , , ,

ভূমিকা Portfolio Website তৈরি বর্তমান সময়ে একটি অত্যন্ত গুরুত্বপূর্ণ স্কিল, বিশেষ করে Freelancer, Blogger বা Web Designer দের জন্য। প্রথমত,…

WordPress website create guide

১-৪: WordPress Website Create: সম্পূর্ণ গাইড (Beginner to Advanced)

Leave a Comment / ১. Web Design, Web Design Projects / By / , , , , , ,

ভূমিকা WordPress Website Create বর্তমানে সবচেয়ে জনপ্রিয় এবং প্রয়োজনীয় একটি স্কিল, বিশেষ করে যারা অনলাইনে কাজ করতে চান তাদের জন্য।…

Scroll to Top