CSS - מבוא

בהתחלה בהתחלה, לפני ימי ה-css עמודי אינטרנט עוצבו באמצעות HTML, וזה היה בסדר גמור. 
כל עוד לא עיצבתם את הדף.

אז למה? למה אנחנו צריכים ללמוד עוד טכנולוגיה חדשה בשביל שנוכל לעשות את מה שאפשר היה לעשות ב-HTML? 

באופן מפתיע התשובה מאוד פשוטה - ויש יותר מתשובה אחת:

אפשר לעשות יותר

כשמדובר ב-css, במיוחד בתקן css 2, אפשר לעשות הרבה יותר - כלומר, אפשר לעשות הרבה יותר ממה שהיינו יכולים לעשות רק ב-html. 
רוצים דוגמא פשוטה? שקיפות, אי אפשר להגדיר שקיפות ב-html לבד. ומיקום. ושכבות. וlayoutים, אי אפשר ליצור layoutים שלא באמצעות טבלאות - וראינו כבר כמה נכון וחכם יהיה שימוש בטבלאות.

הדפדפן הפופולארי הראשון, למשל, Mosaic, אפשר למפתחים לכתוב אתרים רק ב-html - מה שגרר המון תלונות מצד עורכי תוכן ששאלו את מפתחי הדפדפן למה אי אפשר לעצב דף אינטרנט כמו שאפשר לעצב דף רגיל ב-Word? זה לא הגיוני?

חשוב לציין שבאותה תקופה עוד לא היה תקן אחיד, והשאיפה לסטנדרט אחיד עוד לא הופנמה אז, שוק הדפדפנים לא היה תחרותי כמו שהוא היום - לא היה מבחר של דפדפנים עם פלחי שוק כמעט זהים (חוץ מ-IE) - לכן דפדפן אחד הכתיב לרוב את התקנים הקיימים כשעוד w3c לא סיפקו מענה לבעיות html. 
אם היתה בעיה, היו פונים למפתחי הדפדפן, במקרה הזה המפתחים של Mosaic.

לאט לאט, התחילו לעלות הצעות להגדרת css שאיפשרו למפתחים וכותבים לעצב את הדף בצורה נוחה יותר ובמקביל פותחו גם חלופות - כלומר שפות עיצוב שונות מ-css, כאפשרות נוספת לעיצוב הדף (ישנן דוגמאות לקראת סוף המאמר בקישור - שימו לב לדימיון).
שפת עיצוב נוספת היתה DSSSL - שפותחה על ידי ISO להדפסת מסמכי SGML אך מסיבות שנראה בהמשך דווקא css היתה השפה הנכונה ביותר לעיצוב דפי אינטרנט. 

הפרדה

מאז ומתמיד היתה שאיפה בעולם הפיתוח ובעולם פיתוח האתרים בפרט ליצור הפרדה בין עיצוב הדף לבין תוכנו. 
אז למה שנרצה לעשות הפרדה? מה הבעיה עם תגיות html שייעודן עיצוב הדף?
כלומר, מה הבעיה למשל ביצירת טבלה עם צבע רקע כחול בצורה הזאת:

<table bgcolor="blue"> 
</table>

טוב, אולי בדוגמה הזו זה באמת לא נורא. אבל זה הופך להיות נורא כשזה מגיע למשהו כזה:

<table bgcolor="blue" border="4" cellpadding="5" cellspacing="10">
 <tr bgcolor="yellow">
  <td valign="top" align="center">
   This example meant to show you how <b>horrifying</b>
   <u>HTML <font color="green" size="7">text design</font> 
    can be</u>
  </td>
  <td>
   <table bgcolor="red" height="700" cellspacing="6" 
   cellpadding="10" border="0" width="800">
    <tr><td valign="center" bgcolor="navy">
     <font color="white" familily="Arial">White colored text</font> 
    </td><td><table width="400"><tr><td>Some text 1</td>
    <td height='40' width="70" valign="top">Some text 2</td><td>Some text 3</td>
    <td>Some text 4</td></tr><tr><td>Some text 1</td>
    <td>Some text 2</td><td>Some text 3</td><td>Some text 4</td></tr>
   </table></tr><tr><center><a href="http://gotosomesite.com">
   <img src="some_image.jpg" alt=""/></a></center></tr></table>
  </td><td></td><td></td><td></td></tr><tr bgcolor="white">
</tr><tr bgcolor="white"></tr></table> 

כמובן שבנוסף לכל הסיפור דאגתי גם לכך שהקוד בדוגמה לא יהיה מסודר אבל כשמדובר בhtml שמשמש גם לניהול תוכן וגם לעיצוב קשה להמנע מקוד לא מסודר - עכשיו נסו לשנות את צבע השורה הראשונה של הטבלה כולה לכתום ואת צבע רקע כל השורות האחרות לאפור ולבן. 

לא נעים. 

כעת חישבו על עורך התוכן, כלומר, אותו אחד שלא מעוניין לעצב את הדף אלא רק לעדכן את תוכנו, נניח שהוא רוצה רק לשנות את הטקסט באחד התאים. כמה קל יהיה לו למצוא את הטקסט שעליו לשנות? כמה קל יהיה לו לשנות את העיצוב בטעות?

באותה מידה, חישבו על המעצב, אותו אחד שלא מעוניין בתוכן הדף אלא רק בעיצובו - כמה קל לו לשנות את צבע כל הכותרות בדף - בהנחה שיש לא מעט כותרות? כמה קל לו לשנות את מיקום האלמנטים בדף? באיזו קלות הוא יכול למחוק או לשנות בטעות את התוכן באחד התאים? 

בנקודה הזאת אנחנו כבר צריכים להבין מדוע חשוב לשמור על הפרדה - חשבו על היתרון העצום ביצירת שני דפים - באחד נכתוב את מבנה הדף (שלד) ובשני נגדיר את העיצוב לשלד - בשני מקומות נפרדים לחלוטין. 

עכשיו הרבה יותר קל לעדכן את תוכן הדף ולשנות את העיצוב שלו.

מחלקות

ב-css יש לנו אפשרות להגדיר עיצוב אחד על אוסף של תגיות. למה הכוונה? נניח ואנחנו רוצים לשנות את גודל הגופן עבור כל הפסקאות בדף. אבל רק הפסקאות. 

בלי css היינו צריכים להוסיף את התגית font (הישנה והמיותרת) לכל אחת מהפיסקאות ולהוסיף לה את המאפיין המעדכן את גודל הגופן.

עם css נוכל לעשות זאת בשורה אחת - שורת קוד אחת שתשנה את צבע הרקע של כל הפיסקאות, גודל הגופן שלהן וסוג הגופן אם נרצה.

משנים את העיצוב של האתר? אין בעיה, משנים את אותה שורת קוד שכתבתנו לפני כן ומעדכנים את העיצוב בכל האתר.

לקוח

css נותן לנו את האפשרות ליצור עיצוב שונה עבור קוראים שונים. 

היום הגלישה לאינטרנט נעשית באמצעים רבים - אנחנו יכולים לגלוש באינטרנט באמצעות הדפדפן במחשב שלנו, באמצעות האייפון, האייפד, הטאבלט הטלויזיה ועוד. 

לכל אחד מהמכשירים הללו ישנם מאפיינים שונים - למשל, מסך מחשב (ברוב המקרים) יהיה גדול יותר ממסך טאבלט שיהיה גדול יותר ממסך של סמארטפון. 

במקרים רבים עיצוב אתר מסוים יתאים למסך המחשב האישי אך לא יתאים למסך הקטן של הסמארטפון. 

כשאנחנו סומכים על html בלבד, אנחנו דואגים שאותו עיצוב יופיע בכל אחד מהמכשירים, גם אם זה לא כל כך מתאים.

עם css נוכל להגדיר עיצוב שונה עבור כל אחד מהמכשירים מבלי לגעת בקוד ה-html של האתר. 

מה אם למשל היינו רוצים להגדיר שתי גירסאות לאתר? גירסת תצוגה וגירסת הדפסה? 

נוכל להגדיר שני עיצובים שונים לאתר - להגדירם כתצוגת מסך ותצוגת הדפסה ולתת לדפדפן לשלוח את הגרסה הנכונה למדפסת.

בקיצור, css מספק לנו דרך להציג ללקוח מספר עיצובים אפשריים ולאפשר לו לבחור את העיצוב המתאים לו ביותר (לקוח=דפדפן או מכשיר)

ישנן עוד סיבות רבות וטובות לשימוש ב-css, היום טכנולוגיה לעיצוב אתרים בלעדיה האתר שלנו יראה פשוט, ישן וזול..