معرفی CSS

CSS مخفف عبارت Cascading Style Sheets است. در واقع، CSS نحوه نمایش عناصر HTML در صفحه وب، کاغذ یا سایر رسانه‌ها را تعیین می‌کند. این یعنی شما با استفاده از CSS می‌توانید رنگ‌ها، اندازه‌ها، موقعیت‌ها و دیگر ویژگی‌های ظاهری را تنظیم کنید.

مثال:
اگر می‌خواهید تمام عناوین (h1) صفحه شما قرمز و وسط‌چین باشد، از کد CSS زیر استفاده می‌کنید:

h1 {
  color: red;
  text-align: center;
}

چرا باید از CSS استفاده کنیم؟ 💡

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

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

مزایای استفاده از CSS 🎯

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

مثال عملی:
اگر شما یک فایل CSS به نام style.css داشته باشید و آن را به صفحات مختلف وب خود متصل کنید، تنها با تغییر در آن فایل، ظاهر تمامی صفحات تغییر خواهد کرد.

قبل از CSS: مشکل بزرگ! 😵

در گذشته، HTML به طور مستقیم برای طراحی صفحات وب استفاده می‌شد. برای مثال، شما برای تغییر رنگ متن یا اندازه فونت، باید از تگ‌هایی مانند <font> در خود HTML استفاده می‌کردید:

<font color="red">این متن قرمز است.</font>

این کار باعث می‌شد که صفحات وب بسیار سنگین و زمان‌بر شوند و مدیریت آن‌ها سخت باشد.

راه‌حل: CSS 🌐

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

مثال:
فقط با یک فایل CSS، تمام استایل‌های صفحات وب خود را مدیریت می‌کنید. برای مثال:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

یک مثال ساده از CSS 📄

فرض کنید می‌خواهید صفحه وبی بسازید که رنگ پس‌زمینه‌اش آبی روشن باشد و عناوین (h1) سفید و وسط‌چین شوند. کد CSS به این شکل خواهد بود:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

CSS چطور به ما کمک می‌کند؟ 🛠️

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

تمرین 🌟

در فایل HTML خود یک تگ <h1> قرار دهید و به آن رنگ قرمز بدهید.
در فایل CSS خود کد زیر را اضافه کنید:

h1 {
  color: red;
}

مشاهده کنید که رنگ تگ <h1> به قرمز تغییر کرده است.

نکته نهایی 📝

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