درس ۱: CSS چیست و چرا استفاده می‌شود؟

CSS چیست؟

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

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

چرا CSS مهم است؟

• ظاهر سایتت را شیک و مرتب می‌کند
  فرض کن فقط با HTML سایت بسازی؛ نتیجه‌اش صفحه‌ای خشک و ساده و بی‌رنگ است! با CSS می‌تونی هر قسمت را رنگ‌آمیزی، اندازه و محلش را تغییر بدهی.
• مدیریت راحت‌تر صفحات بزرگ
  با CSS می‌تونی هزاران صفحه را فقط با یک فایل CSS شبیه هم کنی؛ پس ویرایش و تغییر ظاهر کلی سایت خیلی ساده‌تر می‌شود.
• چندین حالت نمایش
  می‌تونی سایتت را برای موبایل، تبلت و کامپیوتر به شکل مناسب هر دستگاه نمایش دهی (ریسپانسیو).
• سئو و دسترس‌پذیری بهتر
  وقتی صفحات ظاهر منظمی داشته باشند، کاربران و گوگل راحت‌تر از سایتت لذت می‌برند و استفاده می‌کنند!

یک مثال خیلی ساده برای مقایسه

فقط HTML:

<p>این یک متن ساده است</p>
<p>این هم یک متن دیگر</p>

با CSS:

<style>
  p {
    color: blue;
    font-size: 18px;
    background: #f0f0f0;
    padding: 10px;
    border-radius: 8px;
  }
</style>
<p>این یک متن ساده است</p>
<p>این هم یک متن دیگر</p>

حالا متن، هم رنگی شده هم خوشگل‌تر!

نتیجه‌گیری

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

تمرین پیشنهادی

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