על מנת להתחיל להשתמש בתכונות העיצוב החדשות שנלמד בפרקים הבאים, יש להכין קובץ HTML ובתוכו נקרא לקובץ CSS.
יצירת קובץ CSS מתבצעת בצורה הבא:
יוצרים קובץ בשם: style.css ופותחים תיקייה בשם style ששם נאחד את כל עיצוב האתר.
אחרי פתיחת הקובץ, נכנס למסמך HTML ונכתוב את הפקודות הבאות על מנת שנוכל להתשמש באלמנטים שהגדרנו ב – CSS:
לאחר הוספת שורת הפקודה הזאת, נוכל להשתמש באלמנטים שהוגדרו בקובץ העיצוב.
אופן כתיבת התכונות זהה לפקודות HTML בסיסיות, לכן נתחיל עם דוגמא בסיסית לשינוי צבע הטקסט .
זהו קוד שהיינו אמורים לכתוב ב – HTML:
<body bgcolor="#24A8D3">
במקום זה נכתוב את הקוד הבא בקובץ CSS:
body {background-color: #24A8D3;}
התוצאה הסופית היא נראת כך בקוד HTML:
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
</body>
</html>
בשיעור זה למדנו כיצד ליצור קובץ CSS ואיך משלבים זאת עם קובץ HTML, ראינו דוגמאות בנושא וגם קיבלנו סקירה על המדריך הבא.