הבדלים בין גרסאות בדף "גיליונות סגנון מדורגים"

(←‏קישורים חיצוניים: ויקיזציה תחבירית של הקישורים (לא בדקתי תקינות ואיכות קישורים), עברות כתובת רשת וריווח קוד-ויקי.)
selector { property : value; }
</syntaxhighlight>
הסלקטור הינו ה"בוחר" ומגדיר את האלמנט שאותו אנו רוצים לעצב. הוא יכול להיות שם של אלמנט, למשל - <code>p</code>, <code>div</code>, <code>span</code>, <code>h1</code>, <code>input</code> (פסקה, בלוק טקסט, קטע טקסט, כותרת ושדה-קלט בהתאמה) וכדומה.
הוא יכול להיות שם של אלמנט, למשל - <code>p</code>, <code>div</code>, <code>span</code>, <code>h1</code>, <code>input</code> (קטע טקסט, בלוק טקסט, פסקה, כותרת ושדה-קלט בהתאמה)וכדומה.
 
ה-<code>property</code> "תכונה" היא התכונה שאנו רוצים לשנות באלמנט הנבחר. אחריה יבואו נקודתיים.
 
ה-<code>value</code> "ערך" היא הערך שאנו רוצים לתת לתכונה של האלמנט הנבחר. לדוגמה:
לדוגמה:
<syntaxhighlight lang="CSS">
p { color : "blue"; }
 
===בוררים===
לעתים יש צורך להגדיר סוגים שונים של אותו פריט. לדוגמה: פסקה שהיא חלק מכתבה תהיה כחולה ופסקה שהיא חלק ממכתב תהיה אדומה. במקרה כזה נכנס השימוש בבוררי <code>class</code> ובוררי <code>id</code>. קודם כל יש להגדיר את שם הפסקה, באמצעות כתיבת השם אחרי האלמנט הנבחר:
קודם כל יש להגדיר את שם הפסקה, באמצעות כתיבת השם אחרי האלמנט הנבחר:
<syntaxhighlight lang="CSS">
<style>
ישנן ארבע צורות בוררים להגדיר עיצוב אלמנטים:
; 1. כל האלמנטים: יעשה שימוש בבורר *
; 2. על פי שם האלמנט: לדוגמה לכל הפסקותהכותרות המשניות - יעשה שימוש בבורר 'h2'
; 3. צאצא: לדוגמה אלמנט 'a' שהוא צאצא של אלמנט 'li' - יעשה שימוש בבורר 'li a'
; 4. מחלקה או תכונת id: לדוגמה לאלמנטים מסוג "class="class" id="id - יעשה שימוש בבורר class. או בבורר id#
 
התחביר של גיליון העיצוב פשוט למדי וכולל רשימת כללים. כל כלל כולל בורר ובלוק הצהרתי. כל בלוק הממוקף בתוי סוגריים מסולסלים ({}) כולל רשימה של מאפיינים המופרדים אחד מהשני בנקודה-פסיק (;). כל מאפיין מורכב משמו, נקודתיים (:) וערך.
;צורת תחביר: שם בורר {תכונה:ערך; תכונה:ערך;}
 
דוגמה של הגדרות בקובץ CSS:
משתמש אלמוני