📘 Who Is This CSS Guide For?
If you already know a little bit of HTML and now want to make your pages look
beautiful, clean, and professional – this guide is for you.
In this article, we’ll walk through CSS step by step so that:
- You understand what CSS actually does behind the scenes.
- You know how to connect CSS with your HTML files.
- You can read and write basic CSS confidently.
- You understand important concepts like selectors, box model, layout & responsiveness.
Don’t try to become a CSS master in one night.
Focus on understanding the concepts, then practice a little every day.
1️⃣ What Is CSS?
CSS stands for Cascading Style Sheets.
If HTML is the skeleton & content of a web page, CSS is the
design & skin.
With CSS, you control:
- Colors, fonts, sizes
- Spacing (margin, padding)
- Layout (position, flexbox, grid)
- Hover effects, transitions, animations
In simple words: HTML tells the browser "what" to show, CSS tells "how" it should look.
2️⃣ How Does CSS Work With HTML?
There are 3 main ways to add CSS to an HTML page:
🟢 1. Inline CSS (not recommended for big projects)
<h1 style="color: orange; text-align: center;">Hello CSS</h1>
Good for quick testing, but messy in real projects because style is mixed with HTML.
🟡 2. Internal CSS (inside <style> tag)
<head>
<style>
h1 {
color: orange;
text-align: center;
}
</style>
</head>
🔵 3. External CSS (best practice)
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
h1 {
color: orange;
text-align: center;
}
In professional websites, we almost always use external CSS files.
That’s how your own blog template is built too.
3️⃣ Basic CSS Syntax – How to Read & Write CSS
CSS follows a simple pattern:
selector {
property: value;
}
Example:
p {
color: #f5f5f5;
font-size: 16px;
}
- selector: which HTML element(s) to style (e.g.
p, h1, .btn)
- property: what you want to change (e.g.
color, font-size)
- value: the new setting (e.g.
#f5f5f5, 16px)
4️⃣ Selectors – How CSS Targets Elements
Selectors tell CSS “which element should get this style”.
Let’s look at the most important ones.
🔹 Type Selector
Targets all elements of a specific type (tag):
h1 {
color: #ffb300;
}
🔹 Class Selector
Used for reusable styles. In HTML we add class="" attribute.
<button class="primary-btn">Save</button>
.primary-btn {
background: #ffb300;
color: #111;
padding: 10px 18px;
border-radius: 8px;
}
🔹 ID Selector
Used for unique elements (should not be reused many times).
<h1 id="mainTitle">Welcome</h1>
#mainTitle {
font-size: 2rem;
}
🔹 Descendant Selector
Targets elements inside another element.
.card p {
color: #cfd6e6;
}
🔹 Pseudo-classes (like :hover)
Change style based on state (hover, focus, active).
a {
color: #8ecbff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #ffb300;
}
Practical Tip: In real projects, we use class selectors the most.
Try to avoid styling too many elements with IDs only.
5️⃣ Colors, Units & Fonts – Making Things Look Nice
🎨 Colors
Common ways to write colors:
- Named:
red, blue, orange
- Hex:
#ffb300, #0f1115
- RGB:
rgb(255, 179, 0)
- RGBA (with transparency):
rgba(0,0,0,0.5)
📏 Units
- px – fixed pixels
- rem – relative to root font size (good for responsive text)
- % – percentage of parent
- vh / vw – viewport height/width
🔤 Fonts
body {
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 16px;
}
6️⃣ The CSS Box Model – Very Important Concept
Every HTML element is treated like a box. That box has:
- Content – the text or image itself
- Padding – space inside the element, around the content
- Border – line around the padding
- Margin – space outside the border (separates elements)
.card {
padding: 16px;
border: 1px solid rgba(255,255,255,0.1);
margin-bottom: 20px;
}
If you understand the box model, spacing and layout become much easier.
7️⃣ Display, Flexbox & Basic Layout
🔹 display: block vs inline vs inline-block
- block – takes full width, starts on a new line (e.g.
div, p)
- inline – only takes needed width, no new line (e.g.
span, a)
- inline-block – inline element but behaves like a small block (can set width/height)
🔹 Intro to Flexbox (used in your blog design)
Flexbox makes it easy to align items horizontally/vertically.
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
justify-content – controls horizontal alignmentalign-items – controls vertical alignmentgap – space between items
8️⃣ Responsive Design With Media Queries
Responsive design means: your page looks good on mobile, tablet, and desktop.
We use media queries to change style based on screen width.
@media (max-width: 768px) {
.container {
padding: 16px;
}
.title {
font-size: 1.6rem;
}
}
Your blog template already uses media queries – that’s why it looks good on mobile.
9️⃣ Good Practices for Clean CSS
- Use meaningful class names like
.hero, .btn-primary, .card.
- Avoid repeating the same styles everywhere – reuse classes.
- Group related CSS together (header, hero, content, footer).
- Keep colors, spacing, fonts consistent across pages.
- Test on both light and dark backgrounds if you use themes.
🔟 Small Practice Plan – Build Your CSS Muscle
Here’s a simple daily practice routine you can follow for 2–3 weeks:
- Create a simple HTML page with a heading, paragraph and button.
- Add external CSS and style the background, text color and fonts.
- Use classes for buttons and cards; apply hover effects.
- Practice margin & padding to control spacing between sections.
- Use
display: flex to align two boxes side by side.
- Add one media query to make the layout stack on mobile.
Reality check: You don’t need to know all of CSS to start building real pages.
Master the basics in this article and combine them with your HTML knowledge –
you’re already ahead of many beginners.
✅ Final Thoughts
CSS is not just about making things “pretty”. It controls how users feel on your website:
clean, fast, readable, professional.
Start small: style headings, paragraphs, buttons, simple layouts.
As you grow, you’ll naturally move into advanced things like transitions, animations, grid, and complex layouts.
The most important thing is: build something – even a simple personal page.
That’s how CSS concepts will become real in your mind.
📘 এই CSS গাইড কাদের জন্য?
তুমি যদি আগে থেকে HTML এর একটু বেসিক জানো, আর এখন চাও তোমার পেজগুলোকে
সুন্দর, প্রফেশনাল, আর clean design দিতে – তাহলে এই গাইড তোমার জন্য।
এই আর্টিকেল শেষ হওয়ার পর তুমি:
- CSS আসলে কী করে – সেটা ক্লিয়ার ভাবে বুঝবে।
- HTML + CSS একসাথে কীভাবে কাজ করে – সেটা বুঝতে পারবে।
- Basic CSS লিখতে ও পড়তে comfortable হবে।
- Selector, Box Model, Layout, Responsive এর মতো important topic গুলোর বেসিক ধরে ফেলবে।
একদিনে CSS এক্সপার্ট হওয়ার চেষ্টা করো না।
আগে Concept বোঝো, তারপর রোজ একটু করে প্র্যাকটিস করো – ধীরে ধীরে সব clear হয়ে যাবে।
1️⃣ CSS কী?
CSS এর পূর্ণরূপ Cascading Style Sheets।
HTML যদি তোমার ওয়েব পেজের হাড়–মাংস ও কনটেন্ট হয়,
তাহলে CSS হলো তার ডিজাইন, রং, ফন্ট, layout – সবকিছু।
CSS দিয়ে তুমি কন্ট্রোল করতে পারো:
- Color, font, size
- Spacing (margin, padding)
- Layout (position, flexbox, grid)
- Hover effect, animation, transition
সহজ ভাষায়: HTML বলে "কি" দেখাবে, CSS বলে "কেমনভাবে" দেখাবে।
2️⃣ CSS & HTML একসাথে কীভাবে কাজ করে?
HTML পেজে CSS যোগ করার ৩টা জনপ্রিয় উপায় আছে:
🟢 1. Inline CSS (শুধু ছোট কাজে ভালো)
<h1 style="color: orange; text-align: center;">Hello CSS</h1>
ছোট test এর জন্য ভালো, কিন্তু বড় প্রজেক্টে একদম recommended না।
কারণ এতে HTML আর CSS একসাথে মিশে যায়, কোড ম্যানেজ করা কঠিন হয়।
🟡 2. Internal CSS (page এর head এর ভেতরে)
<head>
<style>
h1 {
color: orange;
text-align: center;
}
</style>
</head>
🔵 3. External CSS (প্রফেশনাল ওয়েবসাইটে যেটা বেশি ব্যবহার হয়)
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
h1 {
color: orange;
text-align: center;
}
Professional project, বড় ওয়েবসাইট, তোমার blog template – সবখানেই মূলত external CSS file ব্যবহার করা হয়।
3️⃣ Basic CSS Syntax – কীভাবে পড়বে ও লিখবে?
CSS এর basic structure খুব simple:
selector {
property: value;
}
উদাহরণ:
p {
color: #f5f5f5;
font-size: 16px;
}
- selector: কোন element-কে style দেবে (যেমন:
p, h1, .btn)
- property: কি পরিবর্তন করবে (যেমন:
color, font-size)
- value: কেমন করে করবে (যেমন:
#f5f5f5, 16px)
4️⃣ Selector – CSS কাকে টার্গেট করে?
Selector দিয়ে তুমি ব্রাউজারকে বলো – “এই element গুলোর style তুমি এইভাবে apply করো।”
🔹 Type Selector
সরাসরি element এর নাম দিয়ে টার্গেট:
h1 {
color: #ffb300;
}
🔹 Class Selector
একই style অনেক জায়গায় ব্যবহার করতে চাইলে class ব্যবহার করা হয়।
<button class="primary-btn">Save</button>
.primary-btn {
background: #ffb300;
color: #111;
padding: 10px 18px;
border-radius: 8px;
}
🔹 ID Selector
একটা element কে ইউনিকভাবে style দিতে চাইলে ID দিয়ে টার্গেট:
<h1 id="mainTitle">Welcome</h1>
#mainTitle {
font-size: 2rem;
}
🔹 Descendant Selector
একটা container এর ভেতরের element গুলোকে style করতে:
.card p {
color: #cfd6e6;
}
🔹 Pseudo-class (যেমন :hover)
কোনো state অনুযায়ী style বদলাতে (hover, focus):
a {
color: #8ecbff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #ffb300;
}
Practical Tip: Real project এ class selector সবথেকে বেশি ব্যবহার হবে।
ID দিয়ে সবকিছু style করার চেষ্টা করলে পরে ঝামেলা হয়।
5️⃣ Color, Unit & Font – ডিজাইনের বেসিক অংশ
🎨 Color লেখা
- Named:
red, blue, orange
- Hex:
#ffb300, #0f1115
- RGB:
rgb(255, 179, 0)
- RGBA:
rgba(0,0,0,0.5) (transparent + color)
📏 Units (px, %, rem ইত্যাদি)
- px: fixed pixel – ছোট design এ বেশি ব্যবহৃত
- rem: root font-size এর উপর ভিত্তি করে – responsive টেক্সটের জন্য ভালো
- %: parent element এর percentage (layout এ খুব কাজে লাগে)
- vh / vw: viewport height/width এর উপর নির্ভর
🔤 Font সেট করা
body {
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 16px;
}
6️⃣ Box Model – CSS বোঝার জন্য সবচেয়ে গুরুত্বপূর্ণ কনসেপ্ট
ব্রাউজার প্রতিটা element-কে একটা box হিসেবে দেখে। এই box এর ৪টা অংশ আছে:
- Content: টেক্সট বা ইমেজ
- Padding: content আর border এর মাঝের space
- Border: padding কে ঘিরে থাকা রেখা
- Margin: অন্য element থেকে আলাদা করার জন্য বাইরের space
.card {
padding: 16px;
border: 1px solid rgba(255,255,255,0.1);
margin-bottom: 20px;
}
Box model ভালো করে বুঝলে layout, spacing আর “কেন সবকিছু এদিক–ওদিক লাগছে” – এসব সমস্যা অনেক কমে যাবে।
7️⃣ display, Flexbox & Layout – এলিমেন্টগুলো কীভাবে সাজাবে?
🔹 display: block / inline / inline-block
- block: সম্পূর্ণ width দখল করে, new line থেকে শুরু (যেমন:
div, p)
- inline: যতটুকু জায়গা লাগে ততটাই নেয়, same line এ থাকে (যেমন:
span, a)
- inline-block: inline থেকে একটু বেশি control, width/height সেট করা যায়
🔹 Flexbox – Modern layout এর বেসিক
Flexbox দিয়ে খুব সহজে horizontal/vertical alignment করা যায়। তোমার blog template এও অনেক জায়গায় flex ব্যবহার হয়েছে।
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
justify-content: horizontally কিভাবে সাজাবেalign-items: vertically কিভাবে align হবেgap: element গুলোর মাঝে space
8️⃣ Responsive Design & Media Query
আজকের দিনে ওয়েবসাইট যদি মোবাইলে ঠিকমতো না চলে – ইউজার site বন্ধ করে দেয়। তাই responsive design must.
Screen size অনুযায়ী CSS বদলানোর জন্য আমরা media query ব্যবহার করি।
@media (max-width: 768px) {
.container {
padding: 16px;
}
.title {
font-size: 1.6rem;
}
}
তোমার এই blog design এ already multiple media query আছে – তাই mobile/desktop দুটোতেই সুন্দর দেখায়।
9️⃣ Clean CSS লেখার ভালো অভ্যাস
- Meaningful class নাম দাও – যেমন
.hero, .blog-card, .btn-primary।
- একই style বারবার লিখো না – একটা class বানিয়ে reuse করো।
- Color, font, spacing – এগুলোতে consistency রাখো, design steady দেখাবে।
- Section অনুযায়ী CSS group করো: header, hero, content, footer ইত্যাদি।
- Light + Dark দুই ধরণের background এ text কেমন দেখায় সেটাও টেস্ট করো।
🔟 Practice Plan – ২–৩ সপ্তাহের জন্য ছোট রুটিন
প্রতিদিন চেষ্টা করো:
- একটা simple HTML পেজ বানাও: heading + paragraph + button।
- External CSS file link করে background, text color, font change করো।
- Button–এর জন্য আলাদা class দিয়ে hover effect দাও।
- Section গুলোর মাঝে margin/padding দিয়ে proper spacing সেট করো।
- দুইটা box side-by-side রাখতে flex ব্যবহার করো।
- একটা simple media query যোগ করো যাতে mobile এ layout vertical হয়ে যায়।
বাস্তব কথা: সব CSS না জেনেও তুমি real প্রজেক্ট শুরু করতে পারো।
এই আর্টিকেলে থাকা basic গুলো strong করে ফেলো, বাকি advanced জিনিস project করতে করতে নিজে নিজে clear হয়ে যাবে।
✅ শেষ কথা
CSS শুধু “সুন্দর দেখানো” না – বরং user কেমন feel করবে, সে কত সহজে কনটেন্ট পড়তে পারবে,
ওই experience-এর বেশিরভাগই CSS এর উপর নির্ভর করে।
ছোট করে শুরু করো – heading, paragraph, button, simple layout।
তারপর ধীরে ধীরে animation, grid, advance layout-এ যাও।
সবচেয়ে গুরুত্বপূর্ণ হলো: নিজের হাতে কিছু বানাও – personal page, portfolio, blog – যাই হোক।
সেই কাজের মধ্যে দিয়ে তোমার CSS knowledge সত্যিকারের strong হয়ে যাবে।
