מבוא ל CSS
css הוא שמו של תקן לעיצוב דפי אינטרנט - ראשי תיבות של cascading style sheets או בעברית: גליונות עיצוב מדורגים.
css מאפשר לעצב דף html או אתר שלם בנפרד מדפי ה - html עצמם. כללי העיצוב יכולים להכתב בתוך קובץ ה-html אך לרוב הם נכתבים בקובץ נפרד.
קובץ css טיפוסי מכיל רשימה של כללי עיצוב. כל כלל כזה מחולק לשניים:
- בורר (selector) - מעין כותרת לכלל המגדירה על אילו אלמנטים בדף הוא חל.
- קבוצה של הגדרות עיצוב, כל אחת מהן מורכבת משם של תכונה וערך מילולי או מספרי עבור אותה התכונה.
דוגמה לכלל כזה:
a {
background: gray;
color: red;
margin: 8px;
}בדוגמה זו הגדרנו כלל עבור כל האלמנטים בדף מסוג a (קישור). העיצוב שקובע הכלל מונה 3 הגדרות:
| תכונה | ערך |
| צבע הרקע של האלמנט | אפור |
| צבע הטקסט של האלמנט | אדום |
| עובי השוליים של האלמנט | 8 פיקסלים |
css כולל תכונות רבות באמצעותן ניתן לשלוט על כל פרט בעיצוב, ביניהן:
- טקסט - צבע, גודל, סוג פונט, משקל פונט (רגיל, מודגש, מוטה, וכו'), רווחים
- מסגרת - עובי, צבע, סוג קו
- שוליים - רוחב השוליים סביב האלמנט
- רקע - צבע, בחירת תמונת רקע
- שיטת מיקום האלמנט על הדף
עבודה עם css מאפשרת להשיג הפרדה מלאה בין תוכן הדף (html) לבין עיצובו (css). הפרדה זו חשובה ומועילה מכמה היבטים. ראשית, ביכולת לבנות ולעדכן בקלות את תוכן האתר ואת עיצובו. עדכון התוכן נעשה בפשטות ע"י עריכת קובץ ה - html.בכדי לשנות את עיצוב האתר מספיק לערוך את קבצי ה - css ללא התערבות כלשהי בתוכן. דוגמאות מרהיבות לכך אפשר לראות באתר css zen garden. לאתר זה קיימים מאות עיצובים מבוססי css שנוצרו בידי טובי המעצבים, ניתן להחליף ביניהם ולהתרשם ממגוון האפשרויות.
שנית, השימוש ב - css למטרת עימוד (מיקום אלמנטים על הדף, page layout), עוזר ליצור אתר נקי ובהיר. כאשר משתמשים בטבלאות למטרות עימוד מתמלא קובץ ה - html בתגי <tr> ו - <td> שמגדילים את נפח הקובץ אך אינם תורמים דבר מבחינה סמנטית. לעומת זאת, השימוש ב - css למטרה זו מצמצם את גודל הקובץ ומספר האלמנטים, והופך את הדף לקריא וברור בהרבה הן עבור בונה האתר והן עבור מנועי החיפוש.
יתרונות נוספים בגישה זו הם: עליה מהירה יותר של הדף, התאמה טובה יותר למגוון פלטפורמות ומכשירים עם מסכים קטנים, הדף נגיש גם דרך קוראי מסך (חשוב לעיוורים)