גיליונות סגנון מדורגים

Cascading Style Sheets (CSS) הם פורמט לעיצוב דפי אינטרנט. הם קובעים איך תגי HTML ו־XML ייראו, למשל צבע, גודל ופסקות. CSS נוצר כדי להפריד בין התוכן למראה. לפני 1995 היה גם התוכן וגם העיצוב באותו קובץ HTML. זה הפך את הקוד למסובך, ושינוי עיצוב דרש עריכה של כל הדפים.

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

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

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

התחביר הבסיסי נראה כך:
selector { property: value; }

סלקטור (selector) הוא המבליט את האלמנט שמעוניינים לעצב. property (תכונה) היא מה שמשתנה, ו־value (ערך) הוא מה שמקבלים. דוגמה פשוטה:

p { color: blue; }

כאן בחרנו את הפסקה (p) וקבענו שהצבע יהיה כחול.

סלקטורים יכולים להיות פשוטים או מתוחכמים. דוגמה של סלקטור לפי מזהה (id):
p#article { color: blue; }

וזה לפי מזהה אחר:
p#letter { color: red; }

`id` מזהה ייחודי לפריט יחיד ב־HTML. `class` מחלקה (class) מאפשרת להחיל את אותו סגנון על כמה אלמנטים שונים.

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

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

ב־1 באוגוסט 2024 החלה קבוצת הקהילה CSS‑Next לאסוף רעיונות ללוגו חדש. ב־12 בנובמבר 2024 נבחר העיצוב של חאבי אגילר כלוגו הרשמי. הלוגו מוצג על רקע הצבע בקוד #663399, המכונה Rebecca Purple. הצבע נקרא על שם בתו של המפתח אריק א. מאייר, רֶבֶּקָה, שנפטרה ממחלת מוח זמן קצר לאחר יום הולדתה השישי.

CSS הם הוראות שעוזרות לעצב אתרים. הוראות אלה אומרות איך טקסט וכפתורים ייראו.

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

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

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

הצורה הבסיסית היא: selector { property: value; }

סלקטור (selector) בוחר מי יקבל את העיצוב. תכונה (property) היא מה שמשתנה. ערך (value) הוא מה שמסמנים.
דוגמה פשוטה: p { color: blue; }, פסקה תצבע בכחול.

id הוא שם ייחודי לפריט. ככה משתמשים בו: p#article { color: blue; }
class היא קבוצת שמות שניתן להשתמש בה על הרבה פריטים.

בקיץ 2024 התחילו לאסוף רעיונות ללוגו חדש. בנובמבר 2024 בחרו בעיצוב של חאבי אגילר. הרקע שלו הוא הצבע #663399, שנקרא Rebecca Purple. הצבע נקרא על שם ילדה בשם רבתה, שנפטרה כשהייתה קטנה.