במדריך הזה, נלמד CSS לעיצוב דפי אינטרנט. המדריך נועד למתחילים ולמתקדמים והוא בנוי בפרקים קלים לקריאה המלווים בטיפים ובדוגמאות.
אם הגעתם למדריך הזה ואינכם יודעים עדין HTML, נמליץ להתחיל קודם עם קורס HTML אונליין.
CSS (ראשי תיבות של Cascading Style Sheets) היא שפת גיליון סגנונות המשמשת לתיאור העיצובי של דפי אינטרנט הכתובים ב-HTML (ראשי תיבות של Hypertext Markup Language).
HTML ו-CSS עובדים יחד ליצירת דף אינטרנט מובנה ומעוצב. הם מחלקים ביניהם את ההיבטים השונים של דף האינטרנט באופן הבא:
- HTML מספקת את המסגרת המבנית עבור דף האינטרנט, תוך שימוש באלמנטים כמו כותרות, פסקאות, רשימות וקישורים לארגון התוכן. ניתן לחשוב על כל רכיב HTML כעל אבן בניין.
- CSS משמשת להחלת סגנונות ועיצוב על רכיבי HTML אלה. ניתן להתמקד באלמנטים ספציפיים, בקבוצות של אלמנטים, או אפילו לכל האלמנטים בדף ולהגדיר כיצד הם צריכים להופיע. כללי CSS מורכבים מסלקטורים (מזהים אילו אלמנטים לסגנן) והצהרות (ציון מאפייני הסגנון). ההצהרות בנויות מתכונות (כגון "צבע") וערכים לתכונות (כגון "אדום").
אחד מעקרונות המפתח של פיתוח אתרים הוא הפרדה בין תוכן (HTML), עיצוב (CSS) והתנהגות (JavaScript). הפרדה זו מקלה על תחזוקה ועדכון של אתר האינטרנט וגם משפרת את מהירות הטעינה של דפי האינטרנט בדפדפן. ניתן לבצע שינויים בעיצוב החזותי ב-CSS מבלי לשנות את מבנה ה-HTML הבסיסי.
