در چارچوب W3.CSS ، یک سری رنگ های استاندارد توسط نام متناسب با آن رنگ ها، در نظر گرفته شده اند و هنگامی که نام یک رنگ را در انتهای یک کلاس (Class) ببینیم، به آن معنی است که آن کلاس، از همان رنگ استفاده می کند. اینکه آن رنگ برای تغییر کدام ویژگی از عنصر (مثل رنگ پس زمینه (background)، رنگ متن (text)، رنگ خطوط حاشیه (border)، تغییر رنگ هنگام بردن موس بر روی عنصر و ...) باشد، بستگی به عبارت ابتدای نام کلاس (Class) دارد.

قبل از هر چیز، باید رنگ های متناظر با هر نام را بدانیم. آنها را در زیر نمایش داده ایم (البته نام ها باید کاملا با حروف کوچک نوشته شوند) :

البته رنگ های دیگری نیز در چارچوب W3.CSS در نظر گرفته شده است که بعدا در مورد آنها صحبت خواهیم کرد.

نامی که برای هر رنگ در نظر گرفته شده، در انتهای نام کلاس (Class) آورده می شود و بخش ابتدای نام کلاس هم مشخص می کند که آن رنگ، برای کدام ویژگی از عنصر به کار خواهد رفت. به عنوان مثل، چند کلاس (Class) مختلف مرتبط با رنگ ها (Color) عبارتند از (همگی را برای رنگ آبی (Blue) نوشته ایم) :

بنابراین در ادامه، حالت های مختلف استفاده از کلاس های مرتبط با رنگ ها را شرح می دهیم (برای هر حالت، یک عبارت خاص در ابتدای نام کلاس ذکر خواهد شد).

کلاس های (Class) مربوط به تغییر رنگ پس زمینه (Background) عنصرها، در W3.CSS :

در کلاس های (Class) مربوط به تغییر رنگ پس زمینه (Background) عنصرها، ابتدا عبارت w3- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :

این کلاس ها (Class)، رنگ پس زمینه عنصر را تغییر می دهند. به عنوان مثال، کلاس w3-green ، باعث می شود که رنگ پس زمینه عنصر برابر رنگ سبز (green) باشد.

به مثال زیر توجه کنید :

برای توضیحات و مثال های بیشتر، کلید شماره 26147 را بخوانید.

کلاس های (Class) مربوط به تغییر رنگ پس زمینه (Background) عنصرها، وقتی موس را بر روی عنصر می بریم، در W3.CSS :

در کلاس های (Class) مربوط به تغییر رنگ پس زمینه (Background) عنصرها (در هنگام بردن موس بر روی آنها)، ابتدا عبارت w3-hover- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :

این کلاس ها (Class)، باعث می شوند که وقتی موس بر روی عنصر قرار گرفت، آنگاه رنگ پس زمینه عنصر، تغییر کند. به عنوان مثال، کلاس w3-hover-green ، باعث می شود که وقتی موس را بر روی عنصر ببریم، رنگ پس زمینه عنصر به رنگ سبز (green) تبدیل شود.

به مثال زیر توجه کنید :

برای توضیحات و مثال های بیشتر، کلید شماره 26148 را بخوانید.

کلاس های (Class) مربوط به تغییر رنگ متن (text) درون عنصرها، در W3.CSS :

در کلاس های (Class) مربوط به تغییر رنگ متن (text) درون عنصرها، ابتدا عبارت w3-text- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :

این کلاس ها (Class)، رنگ متن درون عنصر را تغییر می دهند. به عنوان مثال، کلاس w3-text-red ، باعث می شود که رنگ متن درون عنصر برابر رنگ قرمز (red) باشد.

به مثال زیر توجه کنید :

برای توضیحات و مثال های بیشتر، کلید شماره 26149 را بخوانید.

کلاس های (Class) مربوط به تغییر رنگ متن (text) درون عنصرها، وقتی موس را بر روی عنصر می بریم، در W3.CSS :

در کلاس های (Class) مربوط به تغییر رنگ متن (text) درون عنصرها (هنگام بردن موس بر روی آنها)، ابتدا عبارت w3-hover-text- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :

این کلاس ها (Class)، باعث می شوند که وقتی موس را بر روی عنصر ببریم، رنگ متن (text) درون عنصر، تغییر کند. به عنوان مثال، کلاس w3-hover-text-yellow ، باعث می شود که وقتی موس را بر روی عنصر ببریم، رنگ متن (text) درون عنصر به رنگ زرد (yellow) تغییر کند.

به مثال زیر توجه کنید :

برای توضیحات و مثال های بیشتر، کلید شماره 26150 را بخوانید.

کلاس های (Class) مربوط به تغییر رنگ خطوط حاشیه (border) عنصرها، در W3.CSS :

در کلاس های (Class) مربوط به تغییر رنگ خطوط حاشیه (border) عنصرها، ابتدا عبارت w3-border- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :

این کلاس ها (Class)، رنگ خطوط حاشیه (border) عنصر را تغییر می دهند. به عنوان مثال، کلاس w3-border-blue ، باعث می شود که رنگ خطوط حاشیه (border) عنصر برابر رنگ آبی (blue) باشد.

به مثال زیر توجه کنید :

برای توضیحات و مثال های بیشتر، کلید شماره 26151 را بخوانید.

کلاس های (Class) مربوط به تغییر رنگ خطوط حاشیه (border) عنصرها، وقتی موس را بر روی عنصر می بریم، در W3.CSS :

در کلاس های (Class) مربوط به تغییر رنگ خطوط حاشیه (border) عنصرها (هنگام بردن موس بر روی آنها)، ابتدا عبارت w3-hover-border- نوشته می شود و سپس نام مربوط به رنگ، ذکر خواهد شد. مثل کلاس های زیر :

این کلاس ها (Class)، باعث می شوند که وقتی موس را بر روی عنصر ببریم، رنگ خطوط حاشیه (border) عنصر، تغییر کند. به عنوان مثال، کلاس w3-hover-border-green ، باعث می شود که وقتی موس را بر روی عنصر ببریم، رنگ خطوط حاشیه (border) عنصر به رنگ سبز (green) تغییر کند.

به مثال زیر توجه کنید :

برای توضیحات و مثال های بیشتر، کلید شماره 26152 را بخوانید.