תיעוד CSS עם דוגמאות להרצה: CSS חיצוני

Q: מה זה CSS חיצוני?

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

Q: מה זה CSS פנימי?

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

Q: איך מקשרים קובץ CSS ל-HTML?

מוסיפים בתוך . ה-href הוא נתיב יחסי לקובץ ה-HTML, כך ש-css/styles.css מצביע לתיקיית css שלידו, ו-/styles.css מתחיל משורש האתר.

Q: למה ה-CSS החיצוני שלי לא עובד?

הסיבות הרגילות הן נתיב href שגוי (בדקו בלשונית Network אם יש 404), rel="stylesheet" חסר, תגיות שנכתבו בתוך קובץ ה-.css, או כלל מאוחר יותר שדורס את שלכם. רענון מלא שולל עותק ישן מהמטמון.

External CSS ו-Internal CSS: הסבר על link ו-style

CSS חיצוני נמצא בקובץ .css שכל עמוד מקשר אליו עם <link rel="stylesheet">; CSS פנימי יושב באלמנט <style> בתוך עמוד אחד. למדו את שניהם, איך עובדים נתיבי קבצים, ואיזה כלל מנצח כשהם נפגשים.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

CSS חיצוני בשורה אחת

CSS חיצוני הוא קובץ .css נפרד. מקשרים אליו מתוך ה-<head> של כל עמוד שצריך אותו:

<head>
  <link rel="stylesheet" href="styles.css">
</head>

הקובץ עצמו מכיל כללי CSS רגילים, בלי תגיות HTML סביבם:

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  color: #111827;
}

.card {
  border: 2px solid #2563eb;
  border-radius: 8px;
  padding: 12px 16px;
}

לתצוגה המקדימה שלמטה אין קובץ שני לטעון, ולכן היא שמה את אותו CSS באלמנט <style>. זה CSS פנימי, והוא מוצג בדיוק כמו שהקובץ המקושר היה מוצג:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card</title>
  <!-- On a real site: <link rel="stylesheet" href="styles.css"> -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      color: #111827;
    }

    .card {
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 12px 16px;
    }
  </style>
</head>
<body>
  <div class="card">One stylesheet, every page.</div>
</body>
</html>

CSS פנימי: האלמנט style

CSS פנימי (שנקרא גם CSS מוטמע) הוא אלמנט <style> בתוך העמוד. שימו אותו ב-<head> כדי שהסגנונות יהיו ידועים לפני שה-body מוצג. הוא חל על העמוד כולו, והכללים שלו משתמשים בסלקטורים, מה שתכונות style מסוג inline לא יכולות לעשות.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #2563eb; }
    .tag {
      background: #e5e7eb;
      padding: 2px 8px;
      border-radius: 999px;
    }
    .tag:hover { background: #f59e0b; }
  </style>
</head>
<body>
  <h1>Internal CSS</h1>
  <span class="tag">html</span>
  <span class="tag">css</span>
</body>
</html>

העבירו את העכבר מעל תגית: :hover עובד כאן כי זה כלל אמיתי. הדרך השלישית, התכונה style, מוסברת בעמוד ה-inline CSS.

CSS פנימי מול חיצוני

	חיצוני (`<link>`)	פנימי (`<style>`)
איפה	קובץ `.css`	בתוך עמוד ה-HTML
טווח	כל עמוד שמקשר אליו	עמוד אחד
מטמון	מורד פעם אחת ומשמש שוב בכל העמודים	נשלח מחדש עם כל עמוד
שינוי המראה של אתר	משנים קובץ אחד	משנים כל עמוד
בקשה נוספת	כן, אחת לכל קובץ	לא
מתאים ל	אתרים אמיתיים	הדגמות, עמודים בודדים, אימייל HTML, CSS קריטי

הספציפיות זהה בשניהם: כלל באלמנט <style> ואותו כלל בקובץ מקושר שוקלים בדיוק אותו דבר. כשיש תיקו, זה שמופיע מאוחר יותר במסמך מנצח.

סדר: גיליון הסגנונות המאוחר מנצח

גיליונות סגנונות נקראים לפי סדר המסמך, <link> ו-<style> כאחד. משני כללים עם אותה ספציפיות, המאוחר מנצח. שני בלוקי ה-<style> שלמטה מייצגים קובץ מקושר ואחריו דריסה ברמת העמוד:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Order</title>
  <style>
    /* first: think of this as styles.css */
    .btn { background: #2563eb; color: white; padding: 8px 14px; border: 0; }
  </style>
  <style>
    /* second: a page override, same selector */
    .btn { background: #16a34a; }
  </style>
</head>
<body>
  <button class="btn">Green: the later rule wins</button>
</body>
</html>

הכפתור שומר את ה-padding והטקסט הלבן מהכלל הראשון, ולוקח מהשני רק את הרקע. לכן גיליון הסגנונות של האתר עצמו בא אחרי זה של ה-framework: עשו <link> לספרייה קודם, ואחריה לשלכם.

נתיבי קבצים ב-href

ה-href של <link> הוא כתובת URL, שמחושבת ביחס למיקום של קובץ ה-HTML.

href	טוען
`styles.css`	קובץ באותה תיקייה כמו העמוד
`css/styles.css`	תיקיית `css` ליד העמוד
`../styles.css`	תיקייה אחת למעלה
`/styles.css`	משורש האתר
`https://example.com/a.css`	כתובת מלאה בשרת אחר

באתר שהעמודים שלו נמצאים בעומקים שונים, הצורה היחסית לשורש (/css/styles.css) שומרת על נתיב אחד שעובד בכל עמוד.

גיליונות סגנונות להדפסה ולמדיה אחרת

תכונת media מגבילה גיליון סגנונות לתנאים מתאימים. גם <link> וגם <style> מקבלים אותה:

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="wide.css" media="(min-width: 900px)">

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Media</title>
  <style>
    .banner { background: #2563eb; color: white; padding: 12px; }
  </style>
  <style media="print">
    /* only when printing: hide the banner */
    .banner { display: none; }
  </style>
</head>
<body>
  <div class="banner">Visible on screen, hidden when printed.</div>
  <p>The article text prints normally.</p>
</body>
</html>

התצוגה המקדימה היא מסך, ולכן הבאנר מופיע. בעמוד אמיתי הבאנר נעלם מההדפסה, וב-DevTools אפשר לראות את אותו הדבר על ידי הדמיה של סוג המדיה print (בחלונית Rendering).

טעויות נפוצות

נתיב שגוי. שגיאת הקלדה ב-href לא טוענת כלום, והעמוד מוצג בלי עיצוב. פתחו את DevTools, לשונית Network, וחפשו 404 על קובץ ה-.css.
שכחה של rel="stylesheet". בלעדיו, <link href="styles.css"> לא טוען גיליון סגנונות.
HTML בתוך קובץ ה-.css. קובץ .css מכיל רק כללים. תגיות <style> בתוכו הן לא CSS תקין, והן שוברות את הכלל שלידן.
גיליון הסגנונות שלכם לפני זה של ה-framework. בספציפיות שווה הקובץ המאוחר מנצח, אז קשרו את ה-CSS שלכם אחרון.
רואים גרסה ישנה. דפדפנים שומרים גיליונות סגנונות במטמון. עשו רענון מלא, או הוסיפו גרסה לכתובת (styles.css?v=2) כשאתם מעלים שינוי.

שאלות נפוצות

מה זה CSS חיצוני?

CSS חיצוני הוא גיליון סגנונות ששמור בקובץ .css משלו ונטען עם <link rel="stylesheet" href="styles.css"> בתוך ה-<head> של העמוד. כל עמוד שמקשר לקובץ מקבל את אותם סגנונות, והדפדפן שומר את הקובץ במטמון בין עמודים.

מה זה CSS פנימי?

CSS פנימי, שנקרא גם CSS מוטמע, הוא CSS שנכתב בתוך אלמנט <style> במסמך ה-HTML עצמו, בדרך כלל ב-<head>. הוא חל רק על העמוד הזה.

איך מקשרים קובץ CSS ל-HTML?

מוסיפים <link rel="stylesheet" href="styles.css"> בתוך <head>. ה-href הוא נתיב יחסי לקובץ ה-HTML, כך ש-css/styles.css מצביע לתיקיית css שלידו, ו-/styles.css מתחיל משורש האתר.

מה עדיף, CSS פנימי או חיצוני?

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

למה ה-CSS החיצוני שלי לא עובד?

הסיבות הרגילות הן נתיב href שגוי (בדקו בלשונית Network אם יש 404), rel="stylesheet" חסר, תגיות <style> שנכתבו בתוך קובץ ה-.css, או כלל מאוחר יותר שדורס את שלכם. רענון מלא שולל עותק ישן מהמטמון.

מושגים קשורים