דוגמת מוטיבציה                            

בכדי לעזור לך להבין את הערך המוסף של גיליונות סגנון וכיצד שימוש בהם יקל עליך את העבודה, הבה ונראה כיצד נוכל לשפר את הכותרות בדף הרשת. תגי ברירת המחדל של הדפדפן <h1>,<h2>,<h3>..<h6> מאפשרים לך ליצור בקלות כותרות בגדלים שונים, אבל הם לא מאפשרות לשלוט בהם הרבה יותר. לדוגמא, אם תרצה ליצור את הכותרת הבאה: “כמה דוגמאות של אנימציות” והיית משתמש בידע שיש לך היום היית מקבל את הכותרת הבאה:

כמה דוגמאות של אנימציות

על ידי שימוש בקוד:

<h4>כמה דוגמאות של אנימציות<h4>

מצד שני, אם תרצה להציג את הכותרת בגודל, צבע או כל מאפיין אחד יכולת ליצור את הכותרת הבאה:

כמה דוגמאות של אנימציות 

אך תצטרך להשתמש בקוד המורכב הבא:

<p>
<B>
<FONT FACE="Helvetica,Geneva,Arial" size="+1"
color="#cc0000">
כמה דוגמאות של אנימציות
</FONT>
</B>
<p>

שים לב שכדי להגיע לתוצאה זו היית צריך לפרט את הפונט, גודל, צבע וסגנון.

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

ישנה דרך טובה יותר: אתה יכול להשתמש בגיליונות סגנון ולהגדיר מחדש את משמעות התגים <h1>...<h6> כך שהם ישמשו בגרסאות החדשות כפי שתגדיר אותם גם לעניין צבע, סגנון וכו'. ובכל פעם שתרצה לשנות סגנון כותרות תצטרך רק לשנות פעם אחת את הגדרת התג והוא ישפיע אוטומטית על כל מקום בו השתמשת בתג זה.

ניתן מיד לראות ששימוש בגיליונות סגנון יחסכו לך מאמץ וזמן רב. (ומונע אפשרויות לטעויות שעלולות לקרות כאשר צריך ליצור כל כותרת בנפרד בדרך הישנה). דוגמה זאת היא אפילו לא קצה הקרחון לעומת מה שניתן לבצע על ידי גיליונות סגנון.

מינוח: גיליונות סגנון ו CSS: