ساختار قانون (rule) در نوشتن فایل های css

معمولا کدهای css در داخل یک فایل جداگانه، حاوی شیوه نامه ها (style sheet) نوشته می شوند که شامل فهرستی از قوانین (rules) است. به عنوان مثال برای نوشتن یک قانون برای اینکه رنگ تمام محتویات یک عنصر پاراگراف (p) به رنگ قرمز نمایش داده شود باید به این شیوه عمل کرد:

p {color: red;}

قانونی که در بالا نوشته شده است شامل دو قسمت است: یک انتخاب کننده (selector) و یک بلوک اعلان (declaration). انتخاب کننده یا selector به یک عنصر اچ تی ام ال اشاره می کند که قرار است قانون نوشته شده به آن اعمال شود. با این روش می توان هر کدام از عناصر اچ تی ام ال (تگ های اچی تی ام ال) را به عنوان انتخاب کننده معرفی کرد. در واقع انتخاب کننده css برای این استفاده می شود که عناصر اچ تی ام ال را بر اساس نام عنصر، id، نام کلاس، خصوصیت (attribute)، و چیزهای دیگر را انتخاب(select) یا پیدا (find) کند. بلوک اعلان همیشه ما بین آکولاد (}{) قرار می گیرد. در بلوک اعلان مشخص می کنیم که چه سبکی به عناصر انتخاب شده اعمال شود. در این بلوک می توان یک یا بیشتر از یک اعلان را قرار داد. در هر اعلان یک ویژگی سبک وجود دارد که بعد از آن علامت دونقطه قرار می گیرد و سپس یک مقدار معتبر برای آن ویژگی قرار می دهیم (هر کدام از این مقادیر قوانین مربوط به خود را دارند که در آینده به آنها اشاره خواهد شد). در انتهای هر اعلان یک علامت نقطه ویرگول قرار می دهیم (اعلان ها را با استفاده از علامت نقطه ویرگول از هم جدا می کنیم)، و سپس اعلان بعدی را می نویسیم؛ البته می توان در انتهای آخرین اعلان از نقطه ویرگول استفاده نکرد:

P {color: red; background: black }

همانطور که گفتم گذاشتن نقطه ویرگول انتهایی واجب نیست اما بهتر است که عادت کنیم این نقطه ویرگول را نیز بنویسیم، این کار باعث می شود که اگر در آینده خواستیم به انتهای یک اعلان، اعلان دیگری را اضافه کنیم، ناخواسته نقطه ویرگول را فراموش نکنیم. سعی کنید یک قاعده کلی دیگر را هم رعایت کنید: در هنگام نوشتن کدهای css تمام حروف را با حروف کوچک بنویسید، هرچند تمام ویژگی ها و انتخاب کننده ها نسبت به بزرگی و کوچکی حروف حساس نیستند (این روش باعث می شود کدهای ما ساختار ظاهری بهتر و یک دست تری داشته باشند ).
به طور خلاصه می توان گفت که یک قانون سبک شامل انتخاب کننده و اعلان است که در اعلان یک یا بیشتر از یک قسمت شامل ویژگی: مقدار (property: value) قرار می گیرد.