Lecturer: Welcome to the first lecture about
CSS خوش اومدید به اولین جلسه درباره‌ی CSS.
So just like we did in the HTML fundamental section,
پس دقیقاً مثل بخشی که اصول اولیه‌ی HTML رو داشتیم
in this section, توی این بخش
we will also start by looking at what CSS actually
is ما هم شروع می‌کنیم با بررسی اینکه CSS در واقع چیه
and we will learn some common terminology و یک‌سری اصطلاحات رایج رو یاد می‌گیریم
so that you always know what I'm talking about
تا همیشه بدونی من دارم درباره‌ی چی صحبت می‌کنم
when I refer to different pieces of the CSS
code وقتی به بخش‌های مختلف کد CSS اشاره می‌کنم.
So first of all, CSS stands for cascading style sheets,
خب اول از همه CSS مخفف Cascading Style Sheets هست
and just like html, و درست مثل HTML.
CSS is also one of the core technologies of the web CSS هم یکی از فناوری‌های اصلی وبه.
Now remember that we use HTML یادت باشه که ما از HTML استفاده می‌کنیم
to basically describe the content of a page برای توصیف محتوای یک صفحه.
And on the other hand, و از طرف دیگه
we use CSS to describe the visual style ما از
CSS استفاده می‌کنیم تا استایل بصری رو توصیف کنیم
and the presentation of the content و همچنین نحوه‌ی نمایش محتوا
that we previously wrote using HTML که قبلاً با HTML نوشتیم.
So CSS and HTML work very closely together پس CSS و HTML خیلی نزدیک به هم کار می‌کنن.
And in fact, down here you can see a web page
و در واقع این پایین می‌تونی یک صفحه‌ی وب ببینی
which is actually the project that we will build
که در واقع همون پروژه‌ایه که ما قراره بسازیم
later in the course در ادامه‌ی دوره.
So in the left side, you have just the content, پس در سمت چپ فقط محتوا رو داری
so just the HTML یعنی فقط HTML.
And then on the right side you have و بعد در سمت راست داری
the exact same HTML code, but with a lot of CSS
دقیقاً همون کد HTML رو اما همراه با کلی CSS.
And so that CSS describes the visual style و اون CSS استایل بصری رو توصیف می‌کنه
and also the layout basically of that whole
content و همچنین در اصل چیدمان کل اون محتوا رو.
Now, as you already know, HTML consists of a
bunch حالا همون‌طور که می‌دونی HTML شامل یک‌سری
of different elements that we can use از عناصر مختلفه که ما می‌تونیم استفاده کنیم
to describe the content برای توصیف محتوا.
And so again, CSS is similar to that و بنابراین CSS هم شبیه همینه
because CSS consists of countless properties
چون CSS شامل تعداد بی‌شماری ویژگیه
that we developers can then use to format the content که ما
توسعه‌دهنده‌ها می‌تونیم برای فرمت‌دهی محتوا ازشون استفاده کنیم.
And these properties allow us to format different things و
این ویژگی‌ها به ما اجازه می‌دن بخش‌های مختلفی رو فرمت کنیم
about the font, the text, the general spacing, مثل فونت متن فاصله‌گذاری کلی
layout of the page, and so on and so forth چیدمان صفحه و خیلی چیزای دیگه.
There is really lots of different properties,
واقعاً ویژگی‌های خیلی زیادی وجود داره
and of course you don't need to know all of them by
heart و البته لازم نیست همه‌ی اون‌ها رو حفظ باشی.
There's just no need for that واقعاً نیازی به این کار نیست.
The way that you learn these properties is راه یاد گرفتن این ویژگی‌ها اینه که
that you use the most important ones over and over
again ویژگی‌های مهم‌تر رو بارها و بارها استفاده کنی
and at one point it will then become very intuitive
و در یک مقطعی برات کاملاً شهودی و طبیعی می‌شه.
Okay, so this is what CSS is all about خب پس موضوع CSS همینه.
So let's now take a look at an actual piece of CSS
code پس حالا بیایم یک قطعه واقعی از کد CSS رو ببینیم.
So this is what a typical small piece of CSS
خب این مثالی از یک قطعه‌ی کوچک و معمولی CSSه
might look like, که ممکنه این‌جوری باشه
and it always starts with a selector و همیشه با یک سلکتور شروع می‌شه.
So for example, if we want to style all the H1 elements
مثلاً اگه بخوایم به همه‌ی المنت‌های H1 استایل بدیم
on the page, روی صفحه
we need to select it in CSS باید اونو در CSS انتخاب کنیم
and then we can apply some styles to it و بعد می‌تونیم یک‌سری استایل بهش اعمال کنیم.
And so each of these styles, we can call it a declaration و بنابراین
هر کدوم از این استایل‌ها رو می‌تونیم یک "اعلان" (declaration) بنامیم.
So for example, here we set the font size to 20 pixels
مثلاً اینجا اندازه‌ی فونت رو روی ۲۰ پیکسل قرار دادیم.
And so that font size is called the property و
بنابراین "اندازه‌ی فونت" رو ویژگی (property) می‌گن.
And the 20 pixels is the value that we declare و
اون ۲۰ پیکسل مقداریه که ما برای اون ویژگی مشخص کردیم
for that font size property برای ویژگی "اندازه‌ی فونت".
And so property and value together is a declaration پس
ویژگی و مقدار با همدیگه می‌شن یک اعلان (declaration)
And we can also more casually call it a style و
به شکل ساده‌تر هم می‌تونیم بهش بگیم یک استایل.
Then all of these declarations بعد همه‌ی این اعلان‌ها
or styles together make up the declaration block یا استایل‌ها
با همدیگه یک "بلوک اعلان" (declaration block) رو تشکیل می‌دن.
So we have these curly braces after the selector پس
ما بعد از سلکتور این آکولادهای باز و بسته رو داریم.
And so inside of the declaration block, و داخل بلوک اعلان
go all the different declarations همه‌ی اعلان‌های مختلف قرار می‌گیرن.
So all our styles یعنی همه‌ی استایل‌های ما.
And all this together, و همه‌ی اینا با همدیگه
so basically the selector یعنی در اصل سلکتور
plus the declaration block is what we call a CSS rule به‌اضافه‌ی
بلوک اعلان چیزی می‌شه که ما بهش می‌گیم "یک قانون CSS" (CSS rule)
And so what this means is that in the end و این یعنی در نهایت
or CSS code will be a lot of different CSS rules کد
CSS ما شامل تعداد زیادی قانون CSS مختلف خواهد بود
one after another where we select all که پشت سر هم نوشته می‌شن جایی که ما همه‌ی
of our elements and style them in any way that we want عناصرمون
رو انتخاب می‌کنیم و به هر شکلی که بخوایم استایل می‌دیم.
Okay, and so that is exactly what we will start doing خب
و این دقیقاً همون چیزیه که ما شروع می‌کنیم به انجام دادنش
in the next video توی ویدیوی بعدی.
So let's go there right now پس همین الان بریم سراغش