CSS פנימי

חלק מהיחידה עיצוב באמצעות CSS במסלול ה-HTML של Coddy. שיעור 7 מתוך 76.

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

הנה התחביר הבסיסי לשימוש ב-CSS פנימי:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

בדוגמה הזו, התג <style> מכיל כללי CSS שמגדירים את צבע הרקע של body לתכלת, ואת הצבע של p (פסקה) לכחול, ואת גודל הגופן ל־16 פיקסלים. הסגנונות האלה יחולו על כל האלמנטים במסמך ה־HTML.

אתגר

קל

ניתן לך מסמך HTML. השתמש ב-CSS פנימי כדי לעצב את המסמך עם המאפיינים הבאים:

הגדר את צבע הרקע של body ל-lightgreen.
הגדר את צבע הטקסט של כל הכותרות h1 ל-red.
הגדר את גודל הגופן של כל הפסקאות (p) ל-18px.

ניתן לך קוד CSS התחלתי עבורו.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            
        }
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>