מדריך CSS מספר 1 - מה זה CSS ולמה צריך את זה ?

שלבים

1. 1

   שלב 1

   איך זה עובד? סינטקס הCSS בנוי כך שנגדיר חוקים(Rules). החוקים בנויים מסלקטור (Selector) והכרזות על הסלקטור (Declaration), הסלקטור הוא תגית הHTML אותה נרצה לעצב וההכרזה היא הצורה בה נעצב את התגית (סלקטור). כל הכרזה בנויה ממאפיין (Property) וערך (Value). דוגמא לחוק CSS:
2. 2

   שלב 2

   h2 {color:red; font-size:10px;}
4. 3

   שלב 3

   הסלקטור בדוגמא הזאת היא התגית h2 והכרזנו שהמאפיין color יהיה בעל הערך red ושגודל הפונט font-size יהיה בגדול 10px. שימו לב המאפיינים והערכים שלהם נמצאים בין סוגריים מסולסלים ואחרי הסלקטור. כמו כן, לאחר כל ערך של מאפיין שמים את התו ' ; ' . מה החוק הזה נותן? החוק הזה מגדיר שכל פעם שנשתמש בתגית הh2 במסמך הHTML שלנו, הוא יעוצב על פי מה שהגדרנו לו (בדוגמא שלנו - יהיה בצבע אדום ובגודל 10px).
5. 4

   שלב 4

   אוקיי, אז בואו נכתוב קוד דף HTML שלם בכדי להמחיש את הדוגמא.
6. 5

   שלב 5

   
   h2{color:red; font-size:10px;}

   This is some cool stuff!

7. 6

   שלב 6

   כמה דגשים לגביי הדוגמא: 1. את חוק הCSS שלנו יש להציב בין תגיות style כאשר לתגית הstyle מאפיין בשם type עם הערך text/css. 2. את חוק הCSS עם תגית הstyle יש להציב בhead של מסמך הHTML שלנו. 3. הטקסט בגוף המסמך נמצא בין תגיות הh2, כלומר חוק הCSS שעשינו תקף עליו!
8. 7

   שלב 7

   
   יופי, כעת נריץ את מסמך הHTML שלנו בדפדפן ונראה איך זה נראה. מעולה! עובד כמו בובהל'ה.