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

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

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

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

בואו לשמור קובץ זה, לשנות אותה הרשאות, ותסתכל על רגע ב-Chrome. Chmod + r CSS0.html. בואו עכשיו לפתוח את הכרום וביקור http://localhost.CSS0.html. ואכן, הנה דף בית לג'ון הרווארד. בואו עכשיו לסגנן את זה קצת יותר דווקא בעזרת כמה CSS. 

חזרה בgedit, בואו נלך לזה תג div הראשון ולהוסיף סגנון מייחס המפרט שאני רוצה גודל גופן של, נניח, 36 פיקסלים, או px. ואני רוצה את משקל גופן זה להיות נועז ולא ברירת המחדל, וזה נורמלי. לdiv השני, בואו לציין תכונה אחרת בסגנון שיש בו גודל גופן של 24 פיקסלים, ולכן קצת קטן יותר. ציטוטים לסגור אחרי פסיק. 

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

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

עכשיו יש לנו קצת יותר מעניין דף הבית של ג'ון הרווארד, לפיה בשורה הראשונה עם את שמו, שהוא חלק פנימי של ש div הראשון, הוא 36 פיקסלים גבוה וגם מודגש, לפי השורה השנייה, וזה שבdiv השני, הוא 24 פיקסלים מודגשים גבוהה, אבל לא. ולפי השורה השלישית בשלישי ש div הוא 12 פיקסלים גבוה וגם לא מודגש. אבל נניח שעכשיו אני רוצה לעבור כל הטקסט הזה על כך שזה מרוכז. 

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

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

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