הגדרת תגים שונים 
בדפים הבאים נביא דוגמאות רבות. כדי להמחיש דוגמאות אלו נשתמש בקישורים אשר יפתחו חלונות הדגמה בנושאים הנלמדים. אל תבהל! לאחר שתבין את הדוגמא תוכל פשוט ללחוץ עם סמן העכבר על סמן ה - X בקצהו העליון של החלון, ע"י כך לסגור אותו ולהמשיך בלימוד כרגיל.
ראינו כיצד ניתן להשתמש ב CSS על מנת להגדיר מחדש את התגים <h1> עד <h6> וראינו את השיטות השונות לביצוע הגדרות אלה בדף HTML. הבה ונביט במספר חוקי CSS על מנת להגדיר תגים אחרים.
הגדרת התג <body> (גוף)
ניתן לאפיין במסגרת חוקי CSS אפילו את התג body. במסגרת חוקים אלו ניתן להגדיר גודל, סגנון, צבע ורקע של הטקסט העיקרי בדף. ניתן גם להגדיר את הרקע בצבע מסוים או תמונה. הגדרת התג body שימושית במיוחד כאשר נרצה להגדיר מראה של קבוצה גדולה של דפי HTML. על מנת להגיע למראה דומה של מספר דפים ללא שימוש ב CSS יש לוודא שבכל דף הוגדרו אותם תגי body. בנוסף, תצטרך לקבוע את הפונט המרכזי בכל דף.
אך אם נשתמש בגיליונות סגנון, נוכל ליצור קובץ CSS חיצוני שיגדיר מחדש את חוקי התג body ולכלול אותם בתוך כל דף HTML שנרצה. לאחר שנוצר קובץ CSS חיצוני יש ליצור קישור אל קובץ זה מתוך קובץ ה HTML על ידי <link> (כפי שהסברנו בדף הקודם). ברגע שיצרנו קישור לקובץ החיצוני, קובץ ה HTML ישתמש בצורה הפשוטה של התג <body>. בדוגמא 5 יצרנו קישור מתוך דף ה HTML לגיליון הסגנון stylefile2.css המגדיר את חוקי CSS החדשים. קובץ חיצוני זה דומה מאוד לקובץ שהגדרנו קודם (stylefile1.css) מלבד הוספת הקוד הבא:
body {font-family: Arial, Helvetica, sans-serif;
font-size: 10.5pt; color: #000000;
background-color: #eeeeee;
background-image: url(back1.gif);}
לחוק CSS זה מבנה זהה להגדרת התגים הקודמים שהגדרנו. בבואנו להגדיר תג חדש נתחיל בכך שנכתוב את שמו, body במקרה זה. לאחר מכן יפתחו סוגרים מסולסלות }. ולאחר מכן רשימה של כל ההגדרות שנרצה לקבוע באותו תג. כל הגדרה מורכבת משם ההגדרה לאחר מכן נקודותיים ולאחר מכן הערך שתקבל אותה הגדרה. לבסוף נסגור את ההגדרה בסוגריים מסולסלות {. (אסור לשכוח להפריד בין ההגדרות עצמם על ידי ; ).
הופעת חוקי התג body בקובץ חיצוני היא האופציה האופיינית ביותר. (לא תרוויח יותר מידי מכך שתוסיף את הגדרות חוקי CSS עבור תג זה בתוך קובץ ה HTML עצמו). כפי שהדגשנו, שימוש בקובץ CSS חיצוני על מנת להגדיר מחדש את תג ה body עוזר לנו ליצור דפים רבים בעלי מראה זהה. שימוש כזה יעזור גם בעתיד אם מסיבה כלשהי תרצה לשנות את מראה הדפים שלך בקלות.
הערה על גודל הפונט: הבה וניקח מבט מהיר נוסף על הגדרת התגbody . שים לב לערך שניתן לגודל הפונט: 10.5pt. מה שרצינו להדגיש כאן הוא ש CSS מאפשר שליטה רבה יותר על גודל הפונט מאשר HTML. בעזרת HTML תוכל להשתמש בתכונה של גודל הפונט לבחירת שבעה גדלים שונים.
בעזרת CSS תוכל לבחור גודל פונט במספר דרכים. אתה יכול להשתמש במילת מפתח שבוחרת גודל מסוים מתוך קבוצה של גדלים שהוגדרו מראש. או שתוכל להשתמש באחוזים שיקבעו את גודל הפונט באופן יחסי לגודלו של הטקסט מסביב (על מנת ליצור הדגש בסביבה מסוימת). אבל כנראה שהאופציה השימושית ביותר היא בחירת גודל הפונט על ידי ערך מספרי. לדוגמא, 10pt, 12pt (משמעות pt היא נקודות [points], יחידת גודל מסורתית להגדרות הדפסה). כפי שראינו בדוגמה למעלה, ניתן אפילו לקבוע חלקי נקודה (שבר) לגודל הפונט בעזרת CSS.
הגדרת התג <B>
התנהגות ברירת המחדל של התג <B> היא יצירת טקסט מודגש. ניתן להשתמש ב CSS על מנת לגרום לתג זה לקבל הגדרות נוספות (ניתן אפילו אם תרצה לגרום לו לא להדגיש את הטקסט). לדוגמא, ניתן לגרום לתג <B> להציג את הטקסט בפונט יותר גדול, בסגנון מסוים ובצבע מיוחד: דוגמא 6 משתמשת בחוקים הבאים להגדרת התג <B>:
B {font-size: 24pt; color: #32cd32;
font-family: Arial, Helvetica, sans-serif;}
שים לב שהפורמט לחוקים אלו דומה לחוקים שהוגדרו עבור תגי הכותרות. שים לב שחלק מההגדרות דומות להגדרות של תגי הכותרות.
כאשר הגדרנו מחדש את <B>, ניתן גם לקבוע צבע לרקע של הטקסט בלבד כפי שניתן לראות כאן בדוגמא 6ב דוגמה זו עושה שימוש בקוד הבא בכדי להגדיר מחדש את הרקע של התג <B>:
B {font-weight: bolder; font-size: 24pt; color: #32cd32;
font-family: Arial, Helvetica, sans-serif;
background-color: #ffff00;}
הערה בנושא צבעי רקע: זוהי רק אחת מתוך דוגמאות רבות בה CSS מאפשרת לנו להגדיר צבע של רקע. HTML מאפשר לנו לקבוע צבע רקע של דף שלם או טבלה, אך בעזרת CSS ניתן להגדיר את תכונת צבע הרקע עבור אלמנטים שונים ומגוונים בדף.
הגדרת התג <P>
עכשיו נגדיר את התג P בעזרת חוקי CSS. אך הפעם יש להיזהר: ההגדרה מחדש צריכה לגשת אך ורק לאלמנטים המוכלים בתג זה (<P>).
ניתן, לדוגמא, להגדיר עבור טקסט שיופיע בתוך תג זה צבע, פונט ושינון מאלמנטים אחרים בדף: דוגמא 7. (אלה הם רק חלק מהתכונות שניתן להגדיר מחדש לתג זה). בדוגמה זו הגדרנו עבור התג <P> את הקוד:
P {background-color: #ffff00; font-size: 10pt;
font-family: "times new roman", times, garamond;
margin-left: 50px;}
אזהרה: 
חלק מהדפדפנים עלולים להתבלבל כאשר מציגים דפים שמערבים את השימוש ב <P>…</P> וכן ב <P> בלבד: דוגמא ב7 . אם אתה מתכוון להגדיר מחדש את התג P, תצטרך להקפיד להשתמש תמיד גם ב <P> וגם </P>.
ניתן לתת לתג P גם הגדרת תמונת רקע על ידי לפרט ערך לתכונה של דמות של הרקע: דוגמא 7ג. הדוגמה הזאת משתמשת בקוד הבא לצורך הגדרת התג P מחדש:
P {background-image: url(orange_paper.gif);
background-color: #ffff00; font-size: 10pt;
font-family: "times new roman", garamond;
margin-left: 50px;}
בדוגמה זו חלק מהפסקאות יהיו עכשיו בעלי רקע בגוון כתום.
גולשים מקוונים: 1