خب، توی قسمت اول، یه خورده با بدنه ی دستورات سی اس اس آشنا شدیم و یاد گرفتیم که به تگ body یه سری استایل مثل رنگ زمینه بدیم!
حالا میخوایم با هم، همون استایل ها رو روی تگ های دیگه امتحان کنیم و نتایج رو ببینیم چی میشه…
اگه یادتون باشه تو قسمت قبل، یه مثال زدم که باهاش میتونستین متن های داخل تگ body رو به رنگ دلخواه در بیارین… اما خب، ممکنه شما بخواین چند پاراگراف متن، داخل صفحه ای داشته باشین و هر کدوم هم یه رنگ متفاوت داشته باشن! چیکار باید بکنیم؟!
چند مثال مختلف در این رابطه میزنم و با هم امتحانشون میکنیم:
مثال یک: من میخوام یک پاراگراف در یک صفحه داشته باشم که رنگ متنش سبز و نوع قلمش (فونتش) Tahoma باشه…
دستور زیر اینقدر خوشگل این کار رو انجام میده که نگو:

P {
color: #33b133;
font-family: Tahoma;
}

تحلیل این دستور:
از اونجایی که ما میخواستیم این دستورات رو به یک پاراگراف نسبت بدیم، پس باید این استایل ها به تگ P نسبت داده میشدن! درسته؟!
خب، در اینجا ما میخوایم دوتا دستور بدیم… یعنی هم رنگ رو مشخص کنیم، هم فونت رو!
پس باید اول (ترتیبش فرقی نمیکنه) با دستور color رنگ متن رو مقدار دهی کنیم (که با این دستور قبلا آشنا شدیم) و بعد از اون یه اینتر میزنیم و میایم خط پایین و نوع فونت رو مشخص میکنیم…
برای مشخص کردن فونت هم از مشخصه ی font-family استفاده میکنیم و برای مقدار دهی هم اسم فونت دلخواه رو میدیم! توجه داشته باشین که اگر فونتی رو بدید و اون فونت در کامپیوتر یک کاربر وجود نداشته باشه، برای اون متن، فونت پیشفرض مرورگر مورد استفاده قرار میگیره… اما شاید شما دوست نداشته باشید که مثلا اگر فلان فونت در کامپیوتر کاربری وجود نداشت، فونتی بغیر از فونت دلخواه شما جایگزین بشه… پس راه حل؟!
خیلی ساده هست! به جای اینکه فقط یک فونت رو مشخص کنین، چند فونت رو به مشخصه ی font-family معرفی کنین تا اگر فونت اول وجود نداشت، فونت بعدی جایگزین بشه… دستور زیر همین چیزی که گفتم هست:

P {
color: #33b133;
font-family: BElham, Tahoma, Arial, Times New Roman;
}

همونطور که میبینین، اول از همه من فونت BElham رو به مشخصه font-family دادم و مسلما این فونت در هر کامپیوتری موجود نیست و من بعد از اون فونت Tahoma رو به این مشخصه پیشنهاد کردم و اگر این فونت هم در کامپیوتری یافت نشد، فونت بعدی یعنی Arial به پاراگراف اختصاص داده میشه و همینطور این رویه پیش میره تا نوبت به آخرین فونت برسه… اگر اون هم وجود نداشت، اونوقته که دوباره مرورگر جان دخالت میکنه و فونت پیشفرض خودش رو قالب میکنه! (البته به جز فونت BElham، بقیه ی فونت هایی که در دستور بالا اومدن، در هر کامیپتری پیدا میشن!).

و اما مثال بعدی ما کمی متفاوت میشه و یکم بیشتر وارد سی اس اس میشیم…
در مثال بالا، وقتی که ما به تگ p اون استایل ها رو دادیم، اگر شما در صفحه تون هزارتا هم تگ p بذارین، همشون یه شکل هستن! چون ما یه استایل عمومی برای تگ p نوشتیم و این استایل ها به تمامی تگ های p موجود در صفحه نسبت داده شدن. پس جای تعجب نداره که همشون یه شکل در بیان!
اینجاست که مهم ترین ویژگی سی اس اس به کمکمون میاد…
با یه مثال جالب این ویژگی مهم رو توضیح میدم:
مدرسه ای رو فرض کنین که توش ده تا کلاس وجود داره و توی هر کلاس هم بیست تا دانش آموز!
مدرسه رو میتونیم به عنوان یک وبسایت در نظر بگیریم و هر کلاس رو هم یک مجموعه از استایل های سی اس اس و هر دانش آموزی هم که داخل یک کلاس هست به منزله ی یک استایل سی اس اس!
هر کدوم از این کلاس ها نام منحصر به فردی دارن و در زنگ های تفریح، هر کلاس به کاری مشغول میشه!
مثلا یه کلاس، حیاط مدرسه رو تمیز میکنه و کلاس دیگه ای هم کتابخونه ی مدرسه رو مدیریت میکنه و یک کلاس هم مسئول نظم دادن به کل مدرسه هست و یه کلاس دیگه هم…
در این بین ممکنه یک کلاس، بیشتر از یک کار انجام بده! مثلا هم مسئول ورزش مدرسه باشه و هم به بهداشت مدرسه کمک کنه!
واضح بود دیگه؟! حالا از مثال میایم بیرون و عملا همین ها رو در سی اس اس پیاده میکنیم!
خب، مثلا میخوایم سه تا پاراگراف توی یه صفحه داشته باشیم و میخوایم که هر پاراگراف استایلی متفاوت و مجزا با پاراگراف های دیگه داشته باشه:

#paragraph-1 {
color: #33b133;
font-family: Tahoma, Arial;
}

تحلیل این دستور:
بله، قبل از هر چیز، ابتدا باید کاراکتر # بذارین و بعد هم نامی دلخواه و البته متناسب برای کلاس! مثلا من نام Paragraph-1 رو انتخاب کردم.
یه سوال؟! چرا تا الان فقط اسم تگ رو مینوشتیم و استایل مورد نظر رو بهش میدادیم و کار حل میشد ولی الان یه اسم دلخواه نوشتیم و تازه قبلش هم یه کاراکتر # گذاشتیم؟!
واضحه! هر وقت میخوایم مستقیما به یک تگ، استایلی رو نسبت بدیم، کافیه که اسم همون تگ رو بنویسیم و بعدش هم استایل های مربوطه! اما زمانی که میخوایم از یک تگ در چندین جا استفاده کنیم و هر کدوم از اون تگ ها باید نسبت به هم متفاوت باشن، باید برای هر کدومشون یه کلاس یا آی‌دی درست کنیم و به تگ مورد نظر نسبت بدیمشون! برای نسبت دادن آی‌دی بالا به تگ پاراگراف هم مثل زیر عمل میکنیم (برای همه ی تگ ها به همین صورت عمل میکنیم):

<p id="paragraph-1">متن پاراگراف</p>

حالا میخوایم استایل های پاراگراف دوم رو بنویسیم:

#paragraph-2 {
color: #009cff;
font-family: Tahoma, Arial;
font-weight: bold;
}

در مورد این استایل هم مثل پاراگراف یک عمل می‌کنیم.

.paragraph-3 {
color: #ff1260;
font-family: Tahoma, Arial;
flign: justify;
}

خب، نکته‌ای که الان اینجا وجود داره اینه که ما پاراگراف سوم رو به‌صورت آی‌دی درست نکردیم و به‌صورت کلاس درآوردیم.

<p class="paragraph-3">متن پاراگراف</p>

از کلاس‌ها ما می‌تونیم بارها در صفحه استفاده کنیم اما از آی‌دی‌ها فقط یک بار باید استفاده کنیم. یعنی paragraph-1 و paragraph-2رو فقط هر کدوم می‌تونیم یک بار به تگ پی بدیم. اما pragraph-3 رو می‌تونیم به هرچقدر تگ پی که دلمون خواست بدیم و هیچ اتفاقی هم نمی‌اُفته. این رو هم احتمالا متوجه شدید که برای مشخص کردن آی‌دی، اول اسمش شارپ (#) می‌ذاریم و برای کلاس هم اول اسمش نقطه (.).