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

בכתיבה זאת, אף על פי כן, הדפדפנים העיקריים תמיכה לא מושלמת ב- CSS. אף על פי שגם אינטרנט אקספלורר גירסה 3.0 ומעלה ונטסקייפ גירסה 4.0 ומעלה תומכים ב- CSS, היישום שלהם של זה שונה. דוגמא מתסכלת היא תכונת השוליים. ב- HTML. כותרות צפות רחוק מעל הפיסקואת אותן הו מתארות. עם CSS ניתן לבחור שוליים יותר מתאימים. אולם הדפדפן של נטסקייפ מוסיף את הכמות הנבחרת לשוליים הרגילים, בעוד שאקספלורר פשוט מוסיף את השוליים המוגדרים. עד שהדפדפנים יציעו ביצוע עקבי של CSS, רק חלק מהתכונות יכולות להיות משומשות באופן אמין.

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

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

1. הפרדה של תוכן ועיצוב. CSS נותן למפתחים את הטוב בשני העולמות : תוכן שמשקף את המבנה ההגיוני של המידע והחופש להגדיר בדיוק איך כל תווית HTML תראה.
2. שליטה יעילה על מסמכים רבים. הביצועים הכי חזקים של CSS יתנו למעצבים לשלוט בגרפיקה של אלפי דפים על ידי שינוי דף יחיד של CSS.

גיליונות סגנון מספקים שליטה טיפוגרפית גדולה בפחות קוד. בשימוש ב- HTML פשוט, אתה צריך להגדיר את התכונות הפיסיות של אלמנט כמו תווית <H1> כל זמן אתה משתמש בה.

<H1 ALIGN="center"><FONT FACE="Verdana, Helvetica, Arial, sans-serif" SIZE="6" COLOR="gray">Section heading</H1></FONT>

כאשר אתה מגדיר את התכונות האלה באמצעות CSS, ההגדרה היחידה הזאת, או כלל, תקפה לגבי כל מופע של <H1> בכל המסמכים שמתייחסים לגיליון הסגנון.

<H1 ALIGN="center"><FONT FACE="Verdana, Helvetica, Arial, sans-serif" SIZE="6" COLOR="gray">Section heading</H1></FONT>

איך גיליונות סגנון עובדים
גיליונות סגנון אינם חדשים. כל דפדפן גרפי כלל גיליונות סיגנון. זה פשוט לא היה אפשרי לשנות את הסיגנונות שדפדפנים היו קובעים, למשל, בדיוק איך כותרות 1H נראות על המסך. הרעיון היסודי מאחורי CSS זה לתת למעצבים ומשתמשים לקבוע את הפרטים של גודל, סיגנון, ומבנה לכל אחת מתוויות ה- HTML.

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