CSS (Cascading Style Sheets) یک زبان استایل‌دهی است که برای طراحی و زیباتر کردن صفحات وب استفاده می‌شود.

این زبان به طراحان و توسعه‌دهندگان وب این امکان را می‌دهد که ظاهر عناصر HTML را تغییر داده و صفحات وب را جذاب‌تر و کاربرپسندتر کنند.

CSS چیست؟

CSS مخفف Cascading Style Sheets به معنای “برگه‌های سبک آبشاری” است. این زبان به ما کمک می‌کند که رنگ‌ها، فونت‌ها، پس‌زمینه‌ها، چیدمان، اندازه و بسیاری از ویژگی‌های بصری عناصر HTML را تغییر دهیم. بدون استفاده از CSS، صفحات وب ظاهری ساده و بدون طراحی خواهند داشت.

CSS چگونه کار می‌کند؟

CSS با استفاده از قواعد (Rules) استایل‌دهی، مشخص می‌کند که هر عنصر HTML چگونه باید نمایش داده شود. این قواعد شامل انتخابگرها (Selectors) و ویژگی‌ها (Properties) می‌شوند.

۱. انتخابگرها (Selectors)

انتخابگرها مشخص می‌کنند که استایل‌های CSS بر روی کدام عناصر HTML اعمال شوند. برخی از انواع رایج انتخابگرها عبارتند از:

انتخابگر تگ → p { color: blue; } → تمام <p>ها آبی می‌شوند.
انتخابگر کلاس → .title { font-size: 20px; } → عناصری که کلاس "title" دارند، اندازه فونت ۲۰ پیکسل خواهند داشت.
انتخابگر آیدی → #header { background-color: gray; } → عنصری با id=”header” پس‌زمینه‌ی خاکستری خواهد داشت.

۲. ویژگی‌ها (Properties) و مقادیر (Values)

هر دستور CSS شامل یک ویژگی (Property) و یک مقدار (Value) است. نمونه‌ای از یک دستور CSS:

p {
    color: red;
    font-size: 16px;
    text-align: center;
}

در این مثال:

color: red; → رنگ متن را قرمز می‌کند.
font-size: 16px; → اندازه فونت را ۱۶ پیکسل تعیین می‌کند.
text-align: center; → متن را در مرکز قرار می‌دهد.

روش‌های اعمال CSS در صفحه وب

سه روش اصلی برای اعمال CSS در یک صفحه HTML وجود دارد:

۱. درون‌خطی (Inline CSS)

در این روش، استایل مستقیماً داخل تگ HTML نوشته می‌شود.

<p style="color: blue;">این یک پاراگراف آبی است.</p>

۲. داخلی (Internal CSS)

استایل‌ها داخل یک تگ <style> در بخش <head> صفحه HTML تعریف می‌شوند.

<head>
    <style>
        p { color: green; }
    </style>
</head>

۳. خارجی (External CSS) – روش توصیه‌شده

در این روش، استایل‌ها در یک فایل جداگانه (style.css) نوشته شده و از طریق تگ <link> به HTML متصل می‌شوند.

<head>
    <link rel="stylesheet" href="style.css">
</head>

ویژگی‌های کلیدی CSS

Cascading (آبشاری بودن) → قوانین CSS بر اساس اولویت اعمال می‌شوند و ممکن است برخی قوانین جایگزین یکدیگر شوند.
Responsive Design (طراحی واکنش‌گرا) → CSS امکان طراحی سایت‌های قابل نمایش در موبایل، تبلت و دسکتاپ را فراهم می‌کند.
Animation & Effects (انیمیشن و جلوه‌ها) → با CSS می‌توان انیمیشن‌های سبک و جلوه‌های بصری مانند تغییر رنگ و اندازه را ایجاد کرد.

نتیجه‌گیری

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