על מנת להתחיל להשתמש בתכונות העיצוב החדשות שנלמד בפרקים הבאים, יש להכין קובץ 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, ראינו דוגמאות בנושא וגם קיבלנו סקירה על המדריך הבא.
אנחנו משתמשים בעוגיות כדי לאפשר תפקוד בסיסי ולבצע פונקציות מסוימות. כאן ניתן לנהל כל קטגוריה.