טוב אז אתם לא מתכנתים וקוד מפחיד אתכם מאוד, "אנחנו יודעים סה"כ פוטושופ ואילוסטרייטור, מה לנו ולתכנות?" אתם בטח שואלים, תקראו את הפוסט הזה ותחליטו אח"כ בעצמכם.
מה זה CSS בכלל?
ראשי התיבות אומרות Cascading Style Sheet או בעברית: גיליונות סגנון מדורגים.
כמו בתוכנות האופיס השונות, WORD, POWER POINT וכו'… אפשר לתת לכל טקסט או אלמנט עיצוב משלו באופן פרטני:
לדוגמה אם נרצה לצבוע את הטקסט שלנו בצבע אדום, פשוט נסמן את הטקסט וניתן לו צבע אדום:
דוגמה לטקסט
וגם להכין עיצוב פעם אחת ולהחיל אותו על מספר דברים.
אם נרצה שכל הכותרות שלנו יהיו אדומות ובסגנון פונט מסויים נעשה את העיצוב על כותרת אחת ואז נוכל לשמור אותה כ"סגנון" ולהחיל אותה על כל הכותרות:
כותרת מספר 1
כותרת מספר 2
אותו דבר באינטרנט אפשר לתת סגנון לאובייקטים כדי לעצב אותם בדיוק כמו שתכננו בעיצוב.
למה בעצם למעצב כדאי לדעת CSS?
אז כמובן שלא חייבים לדעת אבל ממש כדאי, זה פשוט ולא דורש ממכם לרשום בעצמכם את הקוד, אלא רק להבין מה אפשרי מבחינת תיכנות, מה המגבלות וגם אולי תקבלו רעיונות מעניינים שתוכלו ליישם בעיצוב שלכם. זה מתחבר באופן ישיר למתכנת שעובד איתכם על האתר שאתם עיצבתם, אם תרצו להסביר למתכנת שרציתם את האובייקט בצורה כזו או אחרת יהיה לכם פשוט יותר להסביר לו בשפה שהוא מכיר והתוצאה תהיה מהירה וטובה יותר.
אני חושב שבכלל לכל מעצב מתחום האינטרנט כדאי לדעת HTML + CSS אבל זה לשטיפת מוח אחרת בשבילכם 
CSS נכתב בצורה הבאה:
מאפיין : ערך ;
* שימו לב שכל שורת מאפיין מסתיימת תמיד בנקודה פסיק ;
לדוגמה
לא ניכנס לאיך לרשום ואיפה לרשום את הסגנון בתוך הקוד אלא רק נבין מה המשמעות של כל מאפיין.
בואו ניגש לעניין ונגדיר כמה מאפייני CSS שאספתי עבורכם שנראים לי כעיקריים וחשובים למעצב:
color צבע פונט
או
יצבע לנו את הטקסט בכחול
background-color צבע רקע
יתן לנו רקע בצבע טורקיז ירקרק
border קו או מסגרת
כמו שאתם עושים בפוטושופ מסגרת תוכלו לעשות גם ב CSS
* שימו לב שהוספת מסגרת של 1 פיקסל למשל תגדיל את האובייקט שלכם ב-4 פיקסלים בסה"כ – כלומר 1 מכל צד.
יתן מסגרת בעובי 1 פיקסל בצבע סגול
יתן קו מנוקד בעובי 2 פיקסלים בצבע שחור
יתן מסגרת מקווקוות בעובי 1 פיקסל בצבע אדום
הגדרות שונות אפשר לתת לפונט, החל בסגנון, גודל, עובי וכו'...
font-family משפחת הפונטים
דוגמה לפונט אריאל
font-size גודל הפונט
דוגמה לפונט בגודל 36 פיקסלים
font-weight משקל הפונט
עכשיו הפונט מודגש
font-style סגנון הפונט
אם נרצה פונט נטוי
width רוחב האוביקט
height גובה האוביקט
נקבל אוביקט בצורה הזו
margin ריווח
מגדיר את הריווח של אובייקט מסוים מכל הצדדים למשל אם נרצה לשמור על מרווח של 10 פיקסלים מכל הצדדים לריבוע נעשה זאת כך
נקבל את זה
אפשר לעשות זאת פרטנית לכל צד כך
margin-right: 13px;
margin-bottom: 24px;
margin-left: 0px;
או בשורה אחת לפי כיוון השעון – למעלה, ימינה, למטה ושמאלה
נקבל את זה
padding ריווח פנימי או ריפוד
גם כאן מדובר בריווח, אבל בריווח פנימי של האובייקט, או בעצם ריפוד היא המילה המתאימה. נניח שהאובייקט שלנו ברוחב 100 פיקסלים ובגובה של 50 פיקסלים ונוסיף לו Padding של 5 פיקסלים מכל כיוון – נקבל ריבוע גדול יותר:
110 פיקסלים רוחב ו-60 פיקסלים גובה לפי חשבון פשוט:
רוחב 100 + 5 פיקסל ריפוד משמאל ו-5 מימין = 110
גובה 50 + 5 פיקסל ריפוד מלמטה ו-5 מלמעלה = 60
כך זה נכתב
וזו התוצאה
גם כאן כמובן אפשר באופן פרטני
padding-right: 15px;
padding-bottom: 0px;
padding-left:58px;
או בשורה אחת
וכך זה יראה
רוב הגדרות ה-CSS ברורות ואפשר לזכור אותן לפי השמות הלועזיים שלהן, עכשיו במקום להסביר למתכנת שיושב לידנו או עובד על האתר שעיצבנו שרצינו ריווח פנימי של 5 פיקסלים ומרווח חיצוני של 20 פיקסלים משמאל בזמן שמימין יש 9 פיקסלים לריבוע בגודל 80 על 40 פיקסלים בצבע טורקיז פחות או יותר עם מסגרת מנוקדת סגולה שבתוכה פונט ARIAL תעשו את זה ברור וקצר יותר ככה:
height: 40px;
background-color: #e5ff00;
padding: 5px;
margin: 0px 9px 0px 20px;
font-family: arial;
border: 2px dotted #662d91;
זה מה שנקבל
מקווה שזה עזר לכם להבין בהצלחה
