در این بخش آموزش CSS به طور کاملا تصویری و با مثال های مختلف برای درک بهتر آموزش داده می شود

CSS روشی است برای تغییر ظاهری اسناد HTML یا صفحات وب . به این صورت که شما به راحتی می توانید با استفاده از دستوراتی که در ادامه به طور کامل برای شما توضیح میدهم ظاهر یک صفحه وب را تغییر بدهید .

به عنوان مثال رنگ فونت ، خط دور تصاویر ، رنگ پس زمینه ، رنگ لینکها و ... را می توانید با استفاده از دستورات CSS تغییر بدهید . دستوراتی که در فایل CSS استفاده می شود می تواند به طور مستقیم در خود کدهای Html هم تایپ شوند اما به چند دلیل این روش پیشنهاد نمی شود :
1. تکرار و دوباره نویسی دستورهای CSS
2. کند شدن سرعت بارگذاری صفحه

3. مشکل شدن کد نویسی و خوانایی کدها
Css هم مانند جاوا اسکریپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین ظاهر بخش های مختلف یک صفحه استفاده کنیم. به این صورت که با استفاده از یک لینک در بین تگ head فایل css را فراخوانی کرده و با توجه به دستورات مورد نظری که در فایل css وجود دارد شکل ظاهری تغییر می کند .

پس فایل css را به دو روش می توان استفاده کرد :
1. داخلی
2. خارجی

قالب دستوری CSS
هر دستور CSS به طور کل از سه بخش تشکیل می شود
1. انتخابگر یا فراخوان تگ وارد شده در فایل html
2. خصوصیت که دستورهای ثابت برای هر عنصر می باشد
3.مقدار که با در نظر گرفتن قالب طراحی شده متفاوت می باشد .

شاید این سوال برای شما پیش بیاید که چگونه هدر صفحه یا لینکهایی که در قسمت های مختلف استفاده می شود بوسیله CSS تغییر پیدا می کنند .
روش کار و فراخوانی دستورات CSS به طور به این شکل است که شما در بین کدهای html یا زبانهای برنامه نویسی دیگر بعد از مشخص کردن قسمت های مختلف سایت مثل header.logo.content.یک ID یا Class به قسمت مورد نظر بین تگ div اضافه میکنیم و بعد از اضافه کردن همان تگ را در فایل css فراخوانی کرده و تغییرات لازم را اعمال می کنیم . برای اینکه متوجه بشوید به مثال زیر توجه کنید :
فرض کنید صفحه اصلی سایت من تشکیل شده از 5 قسمت با عنوانهای

حالا من اگه بخوام خصوصیات ظاهری این پنج قسمت را تغییر بدم چکار باید بکنم که فایل css متوجه بشه دستورات مربوط به کدام قسمت هست ؟
میام قسمت های اشاره شده را بین تگ div با یک صفت id یا class فراخوانی میکنم به این صورت:

<div id='wrapper'></div>
<div id='header'></div>
<div id='navigation'></div>
<div id='content'></div>
<div id='footer'></div>

 حالا فرق صفت id با class چیه ؟خیلی راحت بگم اگر بخواهید از یک عنصر یا المنت در صفحه فقط یکبار استفاده کنید مثل logo یا footer میام از صفت id استفاده می کنیم به دلیل اینکه :
1. ID حالت شاخصی داره و unique هست یعنی هر المنت فقط میتونه یک ID داشته باشه و قسمت های مختلف نداره که بخواهیم مشخصات آن را تغییر بدهیم.
ولی اگر بخواهیم از یک تگ مثل <p>هم در فوتر استفاده کنیم هم در قسمت header آن وقت باید بیایم از class استفاده کنیم.
برای اینکه متوجه بشید یک مثال میزنم تا متوجه بشید :
با استفاده از کلاس می توانیم برای تگ Html استایلهای متفاوتی را تعریف کنیم .برای نمونه فرض کنیم می خواهیم در صفحه دو نمونه پاراگراف داشته باشیم : یکی با متن قرمز و دیگری با رنگ سبز . برای مشخص کردن این دو پاراگراف می توانیم از class استفاده کنیم .

# content .p
{
color : red;
}
#footer .p
{
color : green ;
}

با توجه به توضیحات بالا مهمتر از همه چی این هست که صفحات سایت خودتان را به فایل های css مشخص شده لینک بدهید
برای انجام اینکار بین تگ head لینک css را به روش زیر اضافه می کنیم .

<link rel='stylesheet'  href='css/style.css'/>

 لینک بالا دارای دو صفت مهم است :
1.صفت rel رابط بین فایل css و html برای نامگذاری فایل css می باشد.
2. صفت href مسیر فایل css را مشخص می کند.
نکات مهم :
1. هیچ وقت نام کلاس را با یک عدد شروع نکنید چون بعضی از مرورگرها از چنین خاصیتی استفاده نمی کنند.
2. حتما بین ویژگیها مثل رنگ یا سایز از علامت (:) دو نقطه استفاده شود نه مساوی
3. لازم نیست ویژگیها را بین علامت نقل قول ' قرار دهیم
4. حتما آخر هر ویژگی از علامت سیمی کالن (;) استفاده شود.

حالا به راحتی می توانید از فایل css خودتان در صفحه اصلی استفاده کنید .