CSS چیست؟ نقش CSS در طراحی صفحات وب و تفاوت آن با HTML

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

در اینجا مثالی از استایل‌دهی به یک نوار ناوبری (Navbar) آورده شده است.

نکته: فعلاً نگران درک کدهای CSS نباشید. شما در درس‌ها و کارگاه‌های آینده یاد خواهید گرفت که همه این‌ها چگونه کار می‌کنند. این مثال فقط برای این است که ایده‌ای از کارهایی که می‌توانید با مقدار کمی CSS انجام دهید، به دست آورید.

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

<nav class="navbar">
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f4f4f4;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem 2rem;
  color: white;
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #ff9800;
}

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

با استفاده از CSS، شما می‌توانید چیدمان (Layout)، رنگ‌ها، فونت‌ها و ظاهر کلی صفحات وب را بدون دستکاری در ساختار HTML کنترل کنید.

بیایید یک تمثیل ساده را در نظر بگیریم: اگر یک وب‌سایت را مانند یک خانه تصور کنید، HTML فونداسیون و چارچوب خانه است، در حالی که CSS همان رنگ، کاغذ دیواری و تزئیناتی است که خانه را از نظر بصری جذاب و منحصر به فرد می‌کند.

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

در اینجا مثالی را مشاهده می‌کنید که یک عنصر دکمه (Button) بدون استایل و یک دکمه استایل‌دهی شده را نشان می‌دهد. برای تعامل با این مثال، باید ویرایشگر تعاملی را فعال کنید.

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

<button class="regular-btn">Unstyled Button</button>
<button class="round-btn">Round Button</button>

.round-btn {
  font-size: 1rem;
  font-family: 'Segoe UI', sans-serif;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  background-color: #2ecc71;
  color: white;
  border-radius: 50px;
  padding: 0.6rem 1.6rem;
}

.round-btn:hover {
  background-color: #27ae60;
  transform: translateY(-2px);
}

این استایل‌ها می‌توانند شامل ویژگی‌هایی مانند رنگ، اندازه فونت و بسیاری موارد دیگر باشند. با تغییر دادن این ویژگی‌ها، می‌توانید ظاهر یک صفحه وب را به طور چشمگیری تغییر دهید، بدون اینکه محتوای آن را عوض کنید.

یکی از قدرتمندترین جنبه‌های CSS، توانایی آن در ایجاد طراحی‌های واکنش‌گرا (Responsive Designs) است.

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

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

سعی کنید ویرایشگر تعاملی را فعال کرده و اندازه پنجره پیش‌نمایش را تغییر دهید تا ببینید چیدمان چگونه با اندازه صفحه سازگار می‌شود.

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

<header class="header">
    <h1>Welcome to My Responsive Site</h1>
    <p>This layout adapts to your screen size!</p>
</header>

<main class="content">
    <section class="box">Box 1</section>
    <section class="box">Box 2</section>
    <section class="box">Box 3</section>
</main>

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

.header {
  background-color: #4CAF50;
  color: white;
  padding: 2rem;
  text-align: center;
}

.content {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  justify-content: center;
}

.box {
  flex: 1;
  min-width: 200px;
  background-color: #ddd;
  padding: 2rem;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.box:hover {
  background-color: #ccc;
}

/* Responsive: برای تبلت‌ها و کوچک‌تر (≤ 768px) */
@media (max-width: 768px) {
  .content {
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 90%;
    font-size: 1.1rem;
  }
}

/* Responsive: برای گوشی‌ها (≤ 480px) */
@media (max-width: 480px) {
  .header {
    padding: 1.5rem 1rem;
  }

  .header h1 {
    font-size: 1.5rem;
  }

  .header p {
    font-size: 1rem;
  }

  .box {
    font-size: 1rem;
    padding: 1.5rem;
  }
}

ویژگی مهم دیگر CSS، ماهیت آبشاری (Cascading) آن است که نامش هم از همین جا گرفته شده است.

این یعنی استایل‌ها می‌توانند به ارث برسند (Inherited) و یا بازنویسی شوند (Overridden)، که این امر اجازه می‌دهد یک ساختار سلسله‌مراتبی برای استایل‌دهی داشته باشیم. در درس‌های آینده در مورد نحوه عملکرد این موضوع بیشتر خواهید آموخت.

CSS همچنین از استفاده از استایل‌شیت‌های خارجی (External Stylesheets) پشتیبانی می‌کند.

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

این ویژگی قابلیت نگهداری وب‌سایت‌ها، به خصوص وب‌سایت‌های بزرگتر را به شدت بهبود می‌بخشد. به جای اینکه مجبور باشید استایل‌ها را در تک‌تک صفحات تغییر دهید، می‌توانید تغییرات را در یک فایل CSS اعمال کنید و آن تغییرات بر تمامی صفحات متصل تأثیر خواهد گذاشت.

در دنیای توسعه وب، CSS نقشی حیاتی در ایجاد وب‌سایت‌های جذاب بصری، واکنش‌گرا و کاربرپسند ایفا می‌کند.

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