CSS چیست؟ آموزش کامل CSS از صفر برای مبتدیان

مقدمه

در مقاله قبلی یاد گرفتیم HTML چیست و چطور اسکلت یک صفحه وب را می‌سازد. اما اگر یک صفحه HTML خالص را در مرورگر باز کنید، چیزی شبیه یک سند متنی ساده می‌بینید — بدون رنگ، بدون فاصله‌بندی درست، بدون هیچ جذابیت بصری.

اینجاست که CSS وارد می‌شود. CSS همان چیزی است که وب را از یک سند متنی خشک تبدیل به تجربه‌ای بصری و زیبا می‌کند. همه چیز از رنگ و فونت گرفته تا انیمیشن و طراحی واکنش‌گرا با CSS ساخته می‌شود.

در این مقاله از صفر شروع می‌کنیم. در پایان می‌دانید CSS چیست، چطور کار می‌کند، و پایه‌ای محکم برای یادگیری طراحی وب حرفه‌ای خواهید داشت.

CSS چیست؟

CSS مخفف Cascading Style Sheets است. بریم ببینیم هر کلمه چه معنایی دارد:

Cascading (آبشاری): قوانین CSS به شکل آبشاری اعمال می‌شوند. یعنی اگر چند قانون روی یک عنصر اعمال شوند، CSS با الگوریتم مشخصی تعیین می‌کند کدام قانون اولویت دارد.
Style (استایل): CSS ظاهر بصری عناصر HTML را کنترل می‌کند — رنگ، اندازه، فاصله، فونت، موقعیت.
Sheets (برگه‌ها): استایل‌ها در فایل‌های جداگانه‌ای نوشته می‌شوند که به HTML متصل می‌شوند.

به زبان ساده‌تر: اگر HTML اسکلت ساختمان است، CSS دیوارپوش، رنگ، نورپردازی و تزئینات داخلی آن است. بدون CSS، وب فقط یک صفحه متن سیاه روی پس‌زمینه سفید بود.

CSS چطور به HTML متصل می‌شود؟

سه روش برای اضافه کردن CSS به HTML وجود دارد:

روش اول: فایل خارجی (External CSS) — توصیه‌شده

یک فایل .css جداگانه می‌سازید و با تگ link به HTML متصل می‌کنید:

<!-- در head صفحه HTML -->
<link rel="stylesheet" href="styles.css">

این روش بهترین انتخاب است چون یک فایل CSS می‌تواند به چندین صفحه HTML اعمال شود و کد تمیزتری دارید.

روش دوم: CSS داخلی (Internal CSS)

داخل تگ style در head صفحه می‌نویسید:

<head>
    <style>
        h1 {
            color: blue;
            font-size: 2rem;
        }
    </style>
</head>

برای صفحات کوچک یا تست سریع مناسب است.

روش سوم: CSS درون‌خطی (Inline CSS)

مستقیم روی attribute style یک عنصر:

<h1 style="color: blue; font-size: 2rem;">عنوان</h1>

این روش را تا جای ممکن نپیوندید. نگهداری کد را خیلی سخت می‌کند و اولویت بالایی دارد که گاهی باعث سردرگمی می‌شود.

ساختار یک قانون CSS

هر قانون CSS از دو بخش تشکیل شده:

selector {
    property: value;
    property: value;
}

Selector: مشخص می‌کند این استایل روی کدام عنصر HTML اعمال شود.
Property: ویژگی‌ای که می‌خواهید تغییر دهید — مثل color، font-size، margin.
Value: مقدار آن ویژگی — مثل red، 16px، auto.

یک مثال واقعی:

h1 {
    color: #1a1a2e;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

این کد می‌گوید: همه تگ‌های h1 را با رنگ تیره، اندازه ۲.۵ برابر، ضخامت ۷۰۰ و فاصله پایین ۱rem نمایش بده.

انتخابگرها (Selectors) در CSS

Selector قلب CSS است — تعیین می‌کند استایل روی کدام عناصر اعمال شود.

انتخابگر تگ (Element Selector)

/* همه پاراگراف‌ها */
p {
    line-height: 1.8;
}
 
/* همه h2 ها */
h2 {
    color: #333;
}

انتخابگر کلاس (Class Selector)

پرکاربردترین نوع انتخابگر. با . شروع می‌شود:

/* HTML */
<div class="card">محتوا</div>
 
/* CSS */
.card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

انتخابگر ID

با # شروع می‌شود. باید در هر صفحه یکتا باشد:

/* HTML */
<header id="main-header">...</header>
 
/* CSS */
#main-header {
    background: #1a1a2e;
    height: 64px;
}

انتخابگرهای ترکیبی

/* فرزند مستقیم */
.card > h2 { color: blue; }
 
/* همه فرزندان تودرتو */
.card h2 { color: blue; }
 
/* چند selector با هم */
h1, h2, h3 { font-family: 'Vazirmatn', sans-serif; }
 
/* Pseudo-class: وقتی هاور می‌شود */
.btn:hover { background: #0056b3; }
 
/* Pseudo-class: اولین فرزند */
li:first-child { font-weight: bold; }

رنگ‌ها در CSS

CSS چند روش برای تعریف رنگ دارد:

/* نام رنگ */
color: red;
color: tomato;
 
/* هگزادسیمال — پرکاربردترین */
color: #ff5733;
color: #333;      /* خلاصه‌نویسی #333333 */
 
/* RGB */
color: rgb(255, 87, 51);
 
/* RGBA — با شفافیت */
color: rgba(255, 87, 51, 0.5);
 
/* HSL — طراحان آن را دوست دارند */
color: hsl(11, 100%, 60%);
 
/* متغیرهای CSS */
:root {
    --primary: #6c63ff;
}
.btn { background: var(--primary); }

واحدهای اندازه‌گیری در CSS

یکی از مفاهیم مهم CSS انتخاب واحد مناسب است:

واحد	نوع	کاربرد
`px`	ثابت	border، shadow، breakpoint
`rem`	نسبی به root	font-size، padding، margin
`em`	نسبی به والد	spacing داخلی کامپوننت
`%`	نسبی	width، height نسبی
`vw/vh`	نسبی به viewport	layout تمام‌صفحه

توصیه حرفه‌ای: برای font-size از rem استفاده کنید تا تنظیمات accessibility کاربر (بزرگ کردن فونت در مرورگر) رعایت شود.

مدل جعبه (Box Model) — مفهوم کلیدی CSS

یکی از مهم‌ترین مفاهیمی که باید کاملاً بفهمید Box Model است. در CSS هر عنصر HTML یک جعبه مستطیلی است که از چهار لایه تشکیل شده:

/* ─────────────────────────
   margin   (فضای خارج)
   ┌─────────────────────┐
   │  border (کادر)      │
   │  ┌───────────────┐  │
   │  │ padding       │  │
   │  │ ┌───────────┐ │  │
   │  │ │  content  │ │  │
   │  │ └───────────┘ │  │
   │  └───────────────┘  │
   └─────────────────────┘
   ───────────────────────── */
 
.box {
    /* محتوا */
    width: 300px;
    height: 200px;
 
    /* فاصله داخلی */
    padding: 24px;
 
    /* کادر */
    border: 2px solid #e2e8f0;
 
    /* فاصله خارجی */
    margin: 16px auto;
}

box-sizing: border-box

یک تفاوت مهم: به صورت پیش‌فرض، width فقط محتوا را اندازه می‌گیرد و padding و border اضافه می‌شوند. با border-box این مشکل حل می‌شود:

/* ریست استاندارد — اول هر پروژه بنویسید */
*,
*::before,
*::after {
    box-sizing: border-box;
}

حالا width: 300px یعنی کل جعبه شامل padding و border دقیقاً ۳۰۰ پیکسل است — خیلی قابل پیش‌بینی‌تر.

فاصله‌گذاری: margin و padding

/* چهار طرف یکسان */
margin: 16px;
 
/* بالا/پایین | چپ/راست */
margin: 16px 24px;
 
/* بالا | چپ/راست | پایین */
margin: 8px 16px 24px;
 
/* بالا | راست | پایین | چپ (ساعت) */
margin: 8px 16px 24px 32px;
 
/* طرف خاص */
margin-top: 16px;
padding-bottom: 24px;
 
/* وسط‌چین افقی */
margin: 0 auto;

فونت و تایپوگرافی

CSS کنترل کاملی روی متن می‌دهد:

/* وارد کردن فونت فارسی */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
 
body {
    font-family: 'Vazirmatn', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #1a1a2e;
    direction: rtl;
}
 
h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
 
p {
    font-size: 1rem;
    color: #4a5568;
}
 
/* کوتاه کردن متن بلند */
.card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Display و مدل‌های چیدمان

ویژگی display یکی از مهم‌ترین ویژگی‌های CSS است و تعیین می‌کند عنصر چطور در صفحه جای بگیرد:

/* Block: عرض کامل، خط جدید */
display: block;        /* div, p, h1 پیش‌فرض */
 
/* Inline: فقط به اندازه محتوا، در همان خط */
display: inline;       /* span, a پیش‌فرض */
 
/* Inline-Block: ترکیب هر دو */
display: inline-block;
 
/* مخفی کردن عنصر */
display: none;
 
/* Flexbox — مدرن‌ترین روش چیدمان یک‌بعدی */
display: flex;
 
/* Grid — قدرتمندترین روش چیدمان دوبعدی */
display: grid;

Flexbox — چیدمان مدرن CSS

Flexbox انقلابی در چیدمان وب بود. با یک خط کد می‌توانید عناصر را به صورت ردیفی یا ستونی مرتب کنید:

.container {
    display: flex;
    flex-direction: row;        /* ردیفی (پیش‌فرض) */
    justify-content: center;    /* هم‌راستایی محور اصلی */
    align-items: center;        /* هم‌راستایی محور عمود */
    gap: 16px;                  /* فاصله بین آیتم‌ها */
    flex-wrap: wrap;            /* شکستن به خط جدید */
}
 
/* کاربرد واقعی: navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 64px;
}
 
/* کاربرد واقعی: کارت‌های شبکه‌ای */
.cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}
.card {
    flex: 1 1 300px;  /* grow | shrink | basis */
}

Pseudo-class و Pseudo-element

این‌ها به شما اجازه می‌دهند حالت‌های خاص و بخش‌های ویژه عناصر را استایل دهید:

/* Pseudo-class: حالت‌های عنصر */
a:hover   { color: #6c63ff; }
a:visited { color: #9c88ff; }
input:focus { border-color: #6c63ff; outline: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
li:nth-child(even) { background: #f8fafc; }
 
/* Pseudo-element: بخشی از عنصر */
p::first-line { font-weight: bold; }
p::selection  { background: #6c63ff; color: white; }
 
/* ساختن محتوا با CSS */
.required::after {
    content: ' *';
    color: red;
}

طراحی واکنش‌گرا (Responsive Design) با Media Query

یکی از مهم‌ترین مهارت‌های CSS نوشتن استایل‌هایی است که روی همه اندازه‌های صفحه درست به نظر برسند:

/* استایل پایه (mobile-first) */
.container {
    padding: 16px;
    font-size: 14px;
}
 
/* تبلت (768px و بالاتر) */
@media (min-width: 768px) {
    .container {
        padding: 24px;
        font-size: 16px;
    }
}
 
/* دسکتاپ (1024px و بالاتر) */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px;
    }
}
 
/* Dark Mode */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1a2e;
        color: #e2e8f0;
    }
}

رویکرد Mobile-First یعنی ابتدا برای موبایل استایل می‌نویسید و با media query برای صفحه‌های بزرگ‌تر اضافه می‌کنید. Google این رویکرد را برای SEO ترجیح می‌دهد.

متغیرهای CSS (Custom Properties)

یکی از قدرتمندترین ویژگی‌های CSS مدرن، متغیرها هستند:

:root {
    /* رنگ‌ها */
    --color-primary: #6c63ff;
    --color-text: #1a1a2e;
    --color-bg: #ffffff;
 
    /* فاصله‌ها */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
 
    /* فونت */
    --font-body: 'Vazirmatn', sans-serif;
    --font-size-base: 16px;
 
    /* Border */
    --border-radius: 12px;
}
 
.btn {
    background: var(--color-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
}
 
/* Dark mode با یک تغییر */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text: #e2e8f0;
        --color-bg: #1a1a2e;
    }
}

با متغیرهای CSS یک بار palette تعریف می‌کنید و در سراسر پروژه استفاده می‌کنید. تغییر رنگ اصلی سایت با ویرایش یک خط انجام می‌شود.

یک مثال کامل: کارت مقاله

بریم همه چیزی که یاد گرفتیم را در یک مثال واقعی ببینیم:

/* HTML */
<article class="article-card">
    <img class="article-card__image" src="thumbnail.jpg" alt="CSS چیست">
    <div class="article-card__body">
        <span class="article-card__tag">فرانت‌اند</span>
        <h2 class="article-card__title">CSS چیست؟</h2>
        <p class="article-card__summary">آموزش جامع CSS از صفر...</p>
        <a href="/articles/what-is-css" class="article-card__link">
            ادامه مطلب
        </a>
    </div>
</article>

/* CSS */
.article-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
 
.article-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
 
.article-card__body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
 
.article-card__tag {
    display: inline-block;
    background: #ede9fe;
    color: #6c63ff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}
 
.article-card__title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.5;
}
 
.article-card__summary {
    font-size: 0.875rem;
    color: #718096;
    line-height: 1.7;
}
 
.article-card__link {
    align-self: flex-start;
    color: #6c63ff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}
 
.article-card__link:hover {
    text-decoration: underline;
}

تفاوت CSS، Sass و Tailwind

وقتی شروع به یادگیری CSS می‌کنید، احتمالاً با این اسم‌ها روبرو می‌شوید:

ابزار	توضیح	مناسب برای
CSS خالص	استاندارد مرورگر، نیاز به ابزار اضافه ندارد	یادگیری پایه، پروژه‌های کوچک
Sass/SCSS	پری‌پروسسور: نستینگ، mixin، حلقه	پروژه‌های بزرگ با CSS سنتی
Tailwind CSS	Utility-first: کلاس‌های آماده در HTML	توسعه سریع با React/Next.js

توصیه: ابتدا CSS خالص را کاملاً یاد بگیرید. وقتی Box Model، Flexbox و Responsive Design را درک کنید، یادگیری Tailwind در چند ساعت اتفاق می‌افتد چون مفاهیم پایه یکسان هستند.

نکات مهم برای نوشتن CSS خوب

از BEM naming استفاده کنید: block__element--modifier کد را خوانا نگه می‌دارد — مثل card__title، btn--primary.
Mobile-First بنویسید: از کوچک به بزرگ استایل بدهید. کدتان تمیزتر و سازگارتر خواهد بود.
از !important فرار کنید: استفاده از !important نشانه مشکل در معماری CSS است، نه راه‌حل.
متغیر تعریف کنید: رنگ‌ها، فونت‌ها و spacing ها را به عنوان Custom Property تعریف کنید.
DevTools را یاد بگیرید: F12 در مرورگر بهترین ابزار debug کردن CSS است. می‌توانید استایل‌ها را مستقیم تست کنید.

CSS یاد گرفتنش ساده، اما تسلط بر آن سال‌ها طول می‌کشد. هر توسعه‌دهنده فرانت‌اند حرفه‌ای داستان‌های جالبی از اشکالات عجیب CSS دارد! اگر می‌خواهید مسیر یادگیری فرانت‌اند را ساختارمند طی کنید، نقشه راه کدلوپ نقطه شروع خوبی است.

نتیجه‌گیری

CSS ستون دوم وب است. یادگیری پایه‌ای آن آسان است — چند ساعت کافی است اولین استایل‌ها را ببینید. اما برای رسیدن به سطح حرفه‌ای باید Box Model را عمیقاً بفهمید، Flexbox و Grid را مسلط شوید، و Responsive Design را در خون داشته باشید.

قدم بعدی بعد از یادگیری CSS، JavaScript است که به صفحاتتان رفتار و تعامل می‌دهد. اما قبل از آن، مطمئن شوید پایه CSS شما محکم است — خیلی از مشکلاتی که توسعه‌دهندگان با JavaScript حل می‌کنند، با CSS خالص راه‌حل بهتری دارند.

CSS چیست؟ آموزش جامع CSS از صفر تا پیشرفته