למה CSS? CSS היא שפת עיצוב המשמשת לשליטה על המראה והפריסה של מסמכי HTML. היא מאפשרת להפריד בין התוכן (HTML) לעיצוב, מה שהופך את האתרים לקלים יותר לתחזוקה ולרספונסיביות.
קובע את צבע הטקסט של אלמנט.
p { color: #ADD8E6; /* כחול בהיר */ }
קובע את צבע הרקע של אלמנט.
div { background-color: #555; }
מגדיר את משפחת הגופנים.
body { font-family: 'Verdana', sans-serif; }
קובע את גודל הטקסט.
h1 { font-size: 2em; }
קובע את עובי הגופן (normal, bold, או ערך מספרי).
strong { font-weight: bold; }
מיישר טקסט בתוך אלמנט (left, right, center, justify).
h2 { text-align: center; }
מגדיר רווח מסביב לאלמנט.
img { margin: 10px; }
מגדיר רווח בתוך האלמנט.
button { padding: 8px 12px; }
מגדיר גבול סביב אלמנט.
div { border: 1px solid #777; }
מעגל את פינות האלמנט.
img { border-radius: 5px; }
מוסיף צל לאלמנט.
div { box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }
קובעים את מימדי האלמנט.
img { width: 100px; height: auto; }
קובע כיצד אלמנט יוצג (לדוגמה, block, inline, flex).
.container { display: flex; }
קובע את שיטת המיקום (static, relative, absolute, fixed).
.fixed-element { position: fixed; top: 10px; left: 10px; }
קובע את רמת השקיפות (בין 0 ל-1).
img:hover { opacity: 0.6; }
מאפשר ליצור אנימציה חלקה בין מצבים שונים של מאפיין CSS.
button { background-color: blue; transition: background-color 0.3s ease; } button:hover { background-color: darkblue; }
מאפשר לבצע טרנספורמציות (הזזה, סיבוב, שינוי קנה מידה).
div:hover { transform: scale(1.05); /* הגדלה קלה */ }
מאפשר ליישם סגנונות שונים בהתאם למאפייני המכשיר (לדוגמה, רוחב מסך).
@media (max-width: 600px) { body { background-color: #444; /* רקע שונה במסכים קטנים */ } }
מאפשר לעצב אלמנטים כאשר העכבר מרחף מעליהם.
a:hover { text-decoration: underline; }
קובע את הכיוון של פריטים בתוך מיכל flex (row, column).
.container { display: flex; flex-direction: column; }
מיישר את הפריטים לאורך הציר הראשי ב-flexbox.
.container { display: flex; justify-content: center; /* מרכוז */ }
מיישר את הפריטים לאורך הציר המשני ב-flexbox.
.container { display: flex; align-items: center; /* מרכוז */ }
מגדיר את סמן העכבר שיופיע מעל אלמנט (pointer, default, text).
a { cursor: pointer; }
קובע קישוטים לטקסט (none, underline, overline, line-through).
a { text-decoration: none; }
קובע את סוג התבליטים עבור פריטי רשימה (none, disc, circle, square).
ul { list-style-type: none; /* הסרת תבליטים */ }
קובע מה יקרה כאשר התוכן של אלמנט חורג מהמימדים שלו (visible, hidden, scroll, auto).
.scroll-box { width: 150px; height: 80px; overflow: auto; }