המבנה התחבירי של כל כלל ב-CSS מורכב מסלקטור (Selector) והצהרה (Declaration). הסלקטור הוא האלמנט מתוך ה-html שאת עיצובו אנו רוצים להגדיר, וההצהרה היא הנחיות העיצוב לגבי אותו אלמנט.
כל הצהרה מורכבת מתכונה (Property) וערך (Value). התכונה היא שמו של המאפיין (attribute) ב-html שאותו אנו רוצים לשנות והערך של כל תכונה מגדיר את העיצוב החדש שלה.
הדוגמה הבאה ממחישה את המבנה של כל כלל ב-CSS. ניתן לראות כי הסלקטור h1 מופיע בראש ומתחתיו בתוך סוגריים מסולסלים מופיעות ההצהרות לגביו, במקרה הזה - גודל הפונט והצבע (אלו הן התכונות properties, והערך שלהן מופיע לאחר הנקדתיים). בסוף כל הצהרה יש לשים נקודה פסיק (;).
font-size:28px;
color:blue;
}
הפרדת ההצהרות לשורות נפרדות איננה בגדר חובה. עושים זאת בעיקר כדי להקל על הקריאה של הקובץ, אולם ניתן לכתוב זאת גם כך:
לאחר הבנת המבנה הבסיסי של קובצי CSS, בפרקים הבאים נלמד כיצד מעצבים את האלמנטים השונים שב-html.