در مرحله بعد بايد براي هر پاراگرافي که مي خواهيم به رنگ مشکي باشد از شناسه “class=”black در تگ <p> استفاده کنيم و براي پاراگراف قرمز از شناسه “class=”red. البته نام کلاسها اختياري است ولي بهتر است آنها را طوري انتخاب کنيد که مفهوم داشته باشند تا وقتي که حجم استايل شما بيشتر شد به گنگ نباشد. در مثال زير مي توانيد کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنيد :

<p>اين متني است که به رنگ مشکي نمايش داده مي شود</p>

<p>اين متن به رنگ قرمز نمايش داده مي شود.</p>

نکته : شما مي توانيد بيش از يک کلاس براي يک تگ HTML تعريف کنيد اما براي اين طراحی وب سایت کار نبايد دو بار از شناسه class استفاده کرد.  بلکه بايد در يک شناسه class نام دو کلاس مورد نظر را با يک فاصله بين آنها وارد کرد. براي مثال در پاراگراف زير از دو کلاس فرضي red و center استفاده شده است :

<p>اين متن پاراگرافي است که تحت تأثير دو کلاس red و center قرار دارد</p>

در نوشتن استايل مي توان از نوشتن نام تگ در سلکتور کلاس چشم پوشي کرد. در اين صورت ويژگيهاي تعريف شده در آن کلاس بر هر تگ HTML که از کلاس مربوطه در شناسه class آن استفاده شده باشد اثر مي گذارد.  براي مثال در کلاس زير ويژگي وسط چين را تعريف مي کنيم و از نام تگ در سلکتور کلاس استفاده نمي کنيم :

.center {text-align: center}

اکنون براي هر تگي که احتياج به وسط چين داشته باشد مي توانيم از کلاس بالا استفاده کنيم. به چند نمونه در زير توجه کنيد:

<p>متن اين پاراگراف به صورت وسط چين نمايش داده مي شود</p>

<div>متن اين قسمت به صورت وسط چين نمايش داده مي شود</div>

<h2>متن اين سرفصل به صورت وسط چين نمايش داده مي شود</h2>

تذکر : هيچ وقت نام کلاس را با يک عدد شروع نکنيد چون در اين صورت مرورگرهاي Mozilla و Firefox نمي توانند از آن کلاس استفاده کنند.

ما مي توانيم از سلکتور کلاس براي تگي که حاوي شناسه class است استفاده کنيم که در قسمتهاي قبلي در اين مورد توضيح داده شد. علاوه بر اين مي توانيم از ويژگيهاي تعريف شده در سلکتور کلاس براي تگهايي که در يک تگ محتوي شناسه class قرار دارند نيز استفاده کنيم. مثلا براي لينکهايي که در يک DIV قرار دارند و براي DIV کلاس تعريف شده است. براي اين کار در نوشتن استايل مربوطه بايد پس از نقطه که مشخص کننده سلکتور کلاس است نام کلاس را وارد کنيم و پس از وارد کردن يک فضاي خالي نام تگي که مي خواهيم ويژگيهاي بر روي آن اعمال شود. به مثال زير توجه کنيد:

در اين مثال از استايل زير در استفاده مي کنيم:

.test { border: #F00 1px double }

.test a { color: green }

.test a:hover { border: yellow 2px solid }

کد HTML زير براي اين مثال مورد استفاده قرار مي گيرد:

<div>

<a href=”#”>لينک آزمايشي شماره ?</a>

</div>

<a href=”#”>لينک آزمايشي شماره ?</a>

افزودن استايل به نوع مشخصي از عناصر

همانطور که مي دانيد با وجود اينکه برخي از عناصر در صفحه با هم طراحی وب سایت  تفاوت دارند، از يک تگ HTML براي ايجاد آنها استفاده مي شود.براي مثال برخي از اين عناصر را که از تگ <input> در به وجود آوردن آنها استفاده مي شود مي توانيد در زير مشاهده کنيد:

<"input type="text>

کادرهاي متني که در فرمها استفاده مي شود.

<"input type="checkbox>

چک باکس هم با استفاده از تگ <input> به وجود مي آيد.

<"input type="radio>

در ساختن دکمه هاي راديو هم از همان تگ استفاده مي شود.

<"input type="button>

اين تگ در ساختن هم استفاده مي شود.

<"input type="submit>

براي ساختن دکمه ارسال فرم هم از تگ <input> استفاده مي شود.

حالا فرض کنيد ما در يک صفحه از چند نمونه از عناصر بالا استفاده کرده ايم ولي فقط مي خواهيم ويژگيهاي يکي از آنها را تغيير دهيم. دو روش براي اين کار وجود دارد: يکي استفاده از کلاس است که در اين روش اگر تعداد زيادي از عنصر مورد نظر در صفحه وجود داشته باشد بايد به همان تعداد از شناسه class در تگهاي آنها استفاده کنيم و ممکن است اين کار باعث افزايش حجم صفحه يا موجب سختي در نوشتن کد شود. روش دوم تعريف کردن سلکتور input براي عناصر مورد نظر است که به صورت زير انجام مي گيرد:

فرض کنيد مي خواهيم فقط عرض کادرهاي متني را در صفحه تغيير دهيم. در صورتي که در استايل از سلکتور input به تنهايي استفاده کنيم عرض همه چک باکسها ، دکمه ارسال، دکمه هاي راديو و ساير عناصري که از تگ <input> استفاده کرده اند نيز تغيير مي کند.  براي انجام اين کار مي توانيد سلکتور را به صورت زير تعريف کنيم:

input[type="text"] {

width: 200px

}

کد استايلي که در بالا نوشتيم فقط بر روي کادر هاي متني که در آنها از شناسه “type=”text استفاده شده است اثر مي گذارد.

البته اين روش ممکن است در مرورگر Internet Explorer پشتيباني نشود اما مرورگرهاي Firefox و Opera از آن پشتيباني مي کنند.

سلکتور id

روش ديگري که براي تعريف استايل وجود دارد استفاده از ID است. شناسه ID احتمالاً در آينده جايگزين شناسه name در تگهاي HTML مي شود, بنا بر اين در هرصفحه نبايد بيش از يک بار از هر ID استفاده شود. اگر بيش از يک بار از يک id استفاده شود کارايي صفحه تغييري نمي کند ولي صفحه اعتبار خود را از دست مي دهد. سلکتور id با علامت # مشخص مي شود. با استايل زير همه عناصر که شناسه “id=”border دارند با کادري سبز رنگ نمايش داده مي شوند