בגדול מדובר על הפרדת הגדרות העיצוב מדף ה-HTML כך שניתן יהיה להגדיר את העיצוב של כל האתר מקובץ אחד ושקבצי ה-HTML יהיו קריאים יותר, כך גם ניתן להפריד את העבודה לאנשי מקצוע שונים.
הדגמה יפה הממחישה את כוחו של CSS בהצגת אותו התוכן בעיצובים שונים (שאותם בוחרים מהתפריט הימני) ניתן לראות כאן. כמו במקרה של HTML5 ניתן להתנסות במה ש-CSS3 מציע בצורה מקוונת ב- w3schools.
כתיבה נכונה של דף HTML לא תכלול כלל הגדרות עיצוב ולא תשתמש בטבלאות ככלי עיצובי, כל הגדרות העיצוב ירוכזו בקובץ נפרד. התגית <style> לא צריכה להופיע בדף ה-HTML.
מה שצריך להיות זה אוסף אלמנטים, למשל <div>, שלהם משייכים עיצוב מסויים.
המשימה שלנו היא ליצור את החיבור בין דף ה-HTML שיצרנו בחלק הקודם לקובץ ה-CSS שניצור עכשיו.
כדי ליצור את קובץ ה-CSS ניצור קודם כל תיקייה חדשה (לשם נוחות וקריאות), אח"כ נלחץ על הלחצן הימני בעכבר Add -> Add New Item... -> Style Sheet (תמונה 2), ולבסוף נבחר שם לקובץ ונאשר.
- בראש קובץ ה-HTML נוסיף תגית <head> מיד לאחר תגית <html>.
- VS2012 מודיע לנו שחסר <title>, שזה הכיתוב שנמצא על הטאבים בדפדפנים, על ידי קו גלי ירוק מתחת לתגית <head>. נוסיף משהו.
- כדי לקשור בין המסמך לקובץ העיצוב נוסיף את התגית <link> עם הפרמטרים המתאימים בין פתיחת וסגירת ה- <head>.
כדי לבחון שהעיצוב בקובץ ה-CSS אכן משפיע על צורת הצגת דף ה-html נשנה כמה הגדרות עיצוב.
בתמונה 4 ניתן לראות את תוצאת השינויים לעומת תמונה 3 בעיצוב הכותרת h1 ובפסקה p, פשוט העתקתי כמה הגדרות מתוך הדוגמאות שב- w3schools.
בחלק הבא ננסה להבין איך להשתמש בקוד JavaScript כדי ליצור אנימציות ולהוסיף הרבה יכולות אחרות.