לפני שמתחילים שלב 1 - רקע שלב 2 - גופן שלב 3 - פסקה שלב 4 - תיבה שלב 5 - מיון עיצוב קישורים שונות CSS ב-JS

גופן מאפיני גופן קובעים את עיצובי הגופנים, הגדלים, הצבעים, נטוי, קו תחתון, קו עליון ועוד Color המאפין Color קובע את צבעו של רכיב,והוא מקבל שם של צבע או ערך RGB דוגמא להצהרה הזו: UL {Color:navy} Font-Family המאפין Font-Family קובע את הגופן שבו יוצג הטקסט של הרכיב, והוא מקבל שם של גופן במחשב או שם של גופן כללי (לטבלת הגופנים הכלליים לחץ כאן). תואם ל-<Font Face=FrankRuehl > ניתן להכין רשימה של גופנים שבמידה ולא יהיה זמין הרשון אז זמין השני וכן הלאה... דוגמא להצהרה הזו: p {Font-Family: FrankRuehl,Times New Roman, Arial} הערה:כאשר משתמשים בעברית חזותית, Font-Family כמו Font Face ב-HTML רגיל, מעוותת את העברית בנטסקייפ. כאן כדאי לומר שהגירסה החדשה של NetScape- גירסה 6 תומכת בעברית ישרה אך אינה תומכת בעברית ההפוכה שנכתבה במיוחד למשתמשי נטסקייפ. בנושא הזה אני שואל מה עושים (תשלחו לי כאן) Font-Size המאפין Font-Size קובע את גודלה של האות ברכיב,והוא מקבל כל גודל מטבלת הגדלים ומהטבלה הזו הערך תיאורו x-small קטן ב-50% מ- -small s-small קטן ב-50% מהגופן הקטן small קטן ב-50% מהגופן הבינוני large גדול ב-50% מהגופן הבינוני x-large גדול ב-50% מהגופן הגדול xx-large גדול ב-50% מהגופן x-large larger גדול ב-50% מגופן רכיב האם smaller קטן ב-50% מגופן רכיב האם דוגמא להצהרה הזו: P {Font-Size:12pt} Font-Style המאפין Font-Style קובע את סגנון הגופן והוא מקבל את הערכים הבאים: הערך תיאורו normal סגנון רגיל oblique סגנון משופע italic סגנון נטוי דוגמא להצהרה הזו: P {Font-Style:italic} Font-Variant המאפין Font-Variant קובע אם הטקסט ברכיב יהיה באותיות רגילות - normal או קטנות - small-caps. דוגמא להצהרה הזו: UL {Font-Variant:small-caps} Font-Weight המאפין Font-Weight קובע את עובי הגופן והוא מקבל את הערכים הבאים: הערך תיאורו normal רגיל bolder מודגש lighter דק או המספרים 100,200,300,400,500,600,700,800,900 כאשר כל מספר מיצג עובי גדול יותר. 400 הוא בערך עובי רגיל דוגמא להצהרה הזו: P {Font-Weight:700} Text-Decoration המאפין Text-Decoration מאפשר להוסיף קישוטים שונים לאותיות (לדוגמא: קו עליון) ,והוא מקבל את המאפינים הבאים:‏ הערך תיאורו none ללא קישוטים underline טקסט מודגש בקו תחתון overline טקסט מודגש בקו עליון line-though קו חוצה את הטקסט blink טקסט מהבהב (כמו <blink>) דוגמא להצהרה הזו: P {Text-Decoration:blink} Font המאפין Font קובע את הכל לפי הסדר הבא: font-style, font-weight, font-size, font-family דוגמא להצהרה הזו: font: italic bold 19pt arial (hebrew) לשלב הבא, מאפיני טקסט