עיצוב עם CSS ב-HTML

CSS (Cascading Style Sheets) היא שפה שמיועדת לעצב את התוכן ב-HTML. באמצעות CSS, ניתן לשנות את המראה של אלמנטים, כמו צבעים, גופנים, ורווחים.

מה זה CSS?

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

הוספת CSS לדף HTML

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

סגנון אינליין

סגנון אינליין מוחל ישירות על תג HTML באמצעות מאפיין style.


        <p style="color: red; font-size: 20px;">טקסט בעיצוב אינליין</p>

כאן השתמשנו במאפיין style כדי לשנות את צבע הטקסט וגודלו.

סגנון פנימי

סגנון פנימי נכתב בתוך תג <style> בתוך תג <head> של הדף.


        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>סגנון פנימי</title>
            <style>
              p {
                color: blue;
                font-size: 24px;
              }
            </style>
          </head>
          <body>
            <p>טקסט בעיצוב פנימי</p>
          </body>
        </html>

כאן השתמשנו בתג <style> כדי להחיל עיצובים על תגיות HTML.

סגנון חיצוני

סגנון חיצוני נכתב בקובץ CSS נפרד ומחובר לדף HTML באמצעות תג <link>.


        <!DOCTYPE html>
        <html lang="en">
          <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>סגנון חיצוני</title>
            <link rel="stylesheet" href="../css/styles.css">
          </head>
          <body>
            <p>טקסט בעיצוב חיצוני</p>
          </body>
        </html>

כאן השתמשנו בתג <link> כדי לחבר קובץ CSS חיצוני לדף HTML.

למידע נוסף על CSS, עיין במדריך CSS .