לימוד CSS » מה זה CSS? ומה עושים עם זה?

מה זה CSS? ומה עושים עם זה?

שפת הקוד CSS או בשם המלא (Cascading Style Sheets) היא שפה שעוזרת לנו לשלוט על העיצוב של האתר ועל המיקומים של אלמנטים. במדריך הבא נלמד אתכם מה זה CSS וכיצד קוד CSS משפיעה על האתר שלכם באופן מעשי.

מה זה CSS?

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

בשביל להבין כיצד נראה עמוד הבית שלנו המציג מדריכים ל-CSS ללא עיצוב בקוד CSS צפו בתמונה הבאה:

אתר לדוגמא ללא קוד CSS

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

אתר לדוגמא עם קוד CSS

איך משתמשים ב-CSS?

קיימות דרכים רבות לשימוש בקוד CSS באתרי אינטרנט ועל כך נדבר בהרחבה בשאר המדריכים באתר. קיימות 3 דרכים עיקריות לשימוש בקוד CSS בעת כתיבת קוד ועיצוב של עמוד. האפשרות הראשונה היא שימוש של קוד באמצעות טעינה של קובץ CSS חיצוני נפרד. האפשרות השנייה היא על ידי טעינה של קוד CSS בתוך אזור ה-hader של האתר עם הקוד העיצובי שאתם רוצים בתוך העמוד וניתן לראות כיצד זה נראה בקוד לדוגמא מתחת (הקוד הבא אמור לשנות את הצבע של רקע העמוד):

    
<head> 
    <style>

        body {
            background: #c2c2c2;
        }

    </style>
</head>

דרך נוספת לטעינת קוד CSS בתוך עמוד היא על ידי הוספת קוד לאלמנט ספציפי בעמוד. למשל לקחת פסקה באתר שמכילה שורת טקסט נוכל להוסיף טקסט ולשנות את הצבע של הטקסט


    <p style="color:red">טקסט עם צבע אדום</p>

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

אם אהבתם את המדריך ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:

    כתיבת תגובה

    מלאו את כל השדות על מנת להשאיר תגובה (האימייל שלכם לא יוצג באתר).

    כלי נגישות

    כלי נגישות

    הגדלת גודל פונטהקטנת גודלת פונטניגודיות נמוכהניגודיות גבוההאיפוס הגדרותהצהרת נגישות לאתר