قواعد پایه ی استایل دهی در CSS

 همان طور که بیان شد، یک ویژگی اصلی css، توانایی آن در اعمال برخی دستورات(rules) به یک مجموعه از عناصر در سند(document) است. بعنوان مثال، فرض کنید که می خواهیم متن تمام عناصر h2 به رنگ خاکستری(gray) در بیاید. با استفاده از HTML های قدیمی، برای انجام این کار، باید از عبارت <font color="gray">…</font> در درون تمام عناصر h2 استفاده کنیم. همچنین با استفاده از خصوصیت style، باید عبارت style="color:gray;" را به صورت زیر در تمام عناصر h2 استعمال کنیم:

<h2><font color="gray">This is h2 text</font></h2>
<h2 style="color: gray;">This is h2 text</h2>

 اگر سند ما حاوی تعداد زیادی عنصر h2 باشد، این روش خسته کننده خواهد بود. بدتر از همه این است که اگر ما بعداً بخواهیم تمام این عناصر h2 را به جای خاکستری(gray) به رنگ سبز(green) در بیاوریم، مجبوریم این کار را برای تمامی تگ ها دوباره انجام دهیم.

 css به ما امکان می دهد تا دستوراتی ایجاد کنیم که تغییر و ویرایش آنها ساده باشد و بتوانیم آنها را به تمام عناصر متنی که تعریف کرده ایم اعمال کنیم(در بخش بعدی، به توضیح این می پردازیم که این قواعد چگونه کار می کنند). بعنوان مثال، ما می توانیم با استفاده از دستور زیر، متن تمام عناصر h2 را به رنگ خاکستری(gray) در بیاوریم:

h2 {color: gray;}

 حالا اگر بخواهیم متن تمام عناصر h2 را به رنگی دیگر مثلا نقره ای(silver) در بیاوریم، تنها کافیست به جای gray از silver استفاده کنیم:

h2 {color: silver;}