براتون یک آموزش سی اس اس آماده کردم که یکی از کاربرانمون درخواستشو کرده بودند.آموزش به طور کامل توضیح داده شده و در آخر هم دموی حاصل کار رو قرار دادم
خب برای شروع یک فایل در برنامه ی Notepad یا Dreamweaver با پسوند CSS ایجاد کنید و مراحل زیر رو انجام بدید :
اول باید یک تگ با اسم body بنویسید و بک سری کد توی اون قرار بدید ، ایم جا تگ رو به همراه کد هاش مشاهده می کنید ( البته هر قالبی این کد رو داره و بیشتر از ۱ بار نباید ازش استفاده کنید )
body {

background: url(images/bg.png) repeat ;

font-family : tahoma, sans-serif;

font-size: 8pt;

color: #fff;

direction: rtl;

}



background همونطور که از اسمش مشخصه برای تعیین پس زمینه ی اصلی قالبتون هست
font-family این خط برای تنظیم فونت شاخص قالب هست
font-size این خط برای تنظیم اندازه ی فونت هست
color این خط برای تعیین رنگ نوشته ی شماست
direction این قسمت هم برای راست چین کردن هست که در قالب های فارسی باید ازش استفاده بشه
- خب حالا شما باید یک تگ درست کنید و در نهایت اون رو در قالب فراخوانی کنید ، اسم این تگ رو می تونید به دلخواه انتخاب کنید که من اینجا اسمش رو box میذارم
کد HTML:



	
کد HTML:

	
 .box {
background: url(images/box.png) no-repeat;
text-align: justify;
color: #ffd800;margin: 0 auto;width: 352px;height: 128px;}


 
آدرس عکستون رو توی پرانتز قرار بدید و به این صورت توی قالبتون فراخوانیش کنید :
 
<div class="box">متن مورد نظر</div>










 
حالا برای نمایش مراحل بالا میتونید این کد ها رو در یک فایل با پسوند html سیو کنید
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">







<html xmlns="http://www.w3.org/1999/xhtml">







<head>







<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />







<style>







body {







background: url(images/bg.png) repeat ;







font-family : tahoma, sans-serif;







font-size: 8pt;







color: #fff;







direction: rtl;







}







.box {







background: url(images/box.png) no-repeat;







text-align: justify;







color: #ffd800;







margin: 0 auto;







width: 352px;







height: 128px;







}







</style>











</head><body>







<div class="box">متن مورد نظر</div>







</body>







</html>










 برای مشاهده ی دمو اینجا کلیک کنید