What is CSS?

CSS is short for Cascading Style Sheets and is the primary language used to describe look and formatting for webpages across the Internet and documents of markup (e.g. HTML and XML) in general.

A markup language like HTML was initially designed to provide information about formatting and looks itself, but it soon became clear that it would make much more sense to split this into two layers: Document Content and Document Presentation, with CSS fulfilling the task of the latter. Historically that is why HTML has tags like font, which sole purpose is to adjust font family, color and size locally, a job that is today handled by CSS. This allows the developer to re-use formatting rules across several places in the same document and even across multiple documents. Here's an example to prove my point, and don't worry if it's not entirely clear to you what it does - all aspects will be explained throughout this tutorial:

עיצוב טקסט בסגנון ישן, תוך שימוש ב-HTML בלבד

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

גישה מודרנית יותר עם CSS:

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

שים לב כיצד אני פשוט משתמש מחדש באותה מערכת חוקים במספר תגי HTML. זה כבר יתרון כשמשתמשים בו שלוש פעמים, כמו שאנחנו עושים בדוגמה, אבל זה לא נגמר שם - הכנס את ה- CSS לקובץ גיליון סגנונות חיצוני (עוד על כך בהמשך) ותוכל להשתמש באותם כללים בכל אתר האינטרנט שלך. ומה אם אתה מחליט שטקסט מודגש צריך להיות אדום במקום כחול? עם הגישה הראשונה, יהיה עליך לערוך ידנית את התגים בכל מקום שהשתמשת בו - עם CSS, פשוט שנה את הסימון "highlight." היחיד!

Summary

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