הגדרת התגים  <h1>...<h6> מחדש   

עכשיו נביט בדוגמה שתראה לנו כיצד ניתן להגדיר מחדש את ששת התגים שמשמשים לכותרות רגילות ב HTML ע"י שפת CSS (Cascading Style Sheets). במקרה זה נגדיר מחדש את כל ששת התגים שיוגדרו בפונט, צבע, סגנון וגודל כאשר ההבדל היחיד בין כולם יהיה הגודל. האמת היא שניתן על ידי CSS להגדיר תכונות נוספות לתגים אלו.

כאן CSS מגדירה מחדש את התגים:

 h1 {font-family: Arial, Helvetica, sans-serif;
     font-size: 24pt; font-weight: bold; color: #cc3300}
h2 {font-family: Arial, Helvetica, sans-serif;
     font-size: 18pt; font-weight: bold; color: #cc3300}
h3 {font-family: Arial, Helvetica, sans-serif;
     font-size: 16pt; font-weight: bold; color: #cc3300}
h4 {font-family: Arial, Helvetica, sans-serif;
     font-size: 14pt; font-weight: bold; color: #cc3300}
h5 {font-family: Arial, Helvetica, sans-serif;
     font-size: 12pt; font-weight: bold; color: #cc3300}
h6 {font-family: Arial, Helvetica, sans-serif;
     font-size: 10pt; font-weight: bold; color: #cc3300}

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

לדוגמא, נראה את החוק שהתחיל ב h1. הכלל הזה "מגדיר מחדש" את התג <h1>. לפניך אחת ההגדרות:

font-size: 24pt

הגדרה זו קובעת את גודל הפונט שיופיע כאשר נשתמש בתג <h1>. בהגדרה זו הפריט הראשוןfont-size  יוגדר להיות הערך 24pt.

בדפים הבאים נביא דוגמאות רבות. כדי להמחיש דוגמאות אלו נשתמש בקישורים אשר יפתחו חלונות הדגמה בנושאים הנלמדים. אל תבהל! לאחר שתבין את הדוגמא תוכל פשוט ללחוץ עם סמן העכבר על סמן ה - X בקצהו העליון של החלון, ע"י כך לסגור אותו ולהמשיך בלימוד כרגיל.

תוכל לראות ב דוגמא 1 המחשה של ההגדרות שהוגדרו בדוגמא למעלה.