در نمونه بالا، تغییر رنگ متن در یک پاراگراف خاص از وب سایت صورت می‌گیرد؛ اما کاربران تنها محدود به عوض کردن رنگ در پاراگراف‌ها یا قسمتی از نوشته نمی‌شوند و می‌توانند این کار را برای سایر المان‌های صفحات مثل عناوین یا لینک‌ها نیز انجام دهند. برای مثال جایگزین کردن تگ <p> با <h2> موجب تغییر رنگ تیتر می‌شود یا تبدیل آن به تگ <a> رنگ لینک را عوض می‌نماید. در صورت نیاز میتوانید از <span> نیز برای تغییر رنگ هر حجم از متن بهره بگیرید.
علاقه‌مندان می‌توانند رنگ پس‌زمینه را هم از طریق استایل‌دهی درون خطی عوض کنند. برای این کار تنها کافی است تا عبارت color را با background-color جایگزین کنید. سایر موارد مثل آدرس‌دهی رنگ‌ها مثل قبل است و در نهایت یک کد مشابه نمونه زیر در اختیار خواهید داشت که پس‌زمینه را به رنگ بنفش تغییر می‌دهد:
<p style="background-color: purple">
۳.۲ تغییر رنگ متون با استایل‌دهی داخلی (Embedded / Internal CSS)
هنگام تغییر رنگ متن در صفحات با استفاده از شیوه استایل‌دهی داخلی، باید رنگ مورد نظر را در تگ‌های <style> قرار دهیم. برای مثال شروع یک سند HTML با این ویژگی مشابه زیر خواهد بود.
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: purple;
}
</style>
</head>
چنین کدی باعث می‌شود تا رنگ تمامی پاراگراف‌های متن به بنفش تغییر پیدا کند. همانند روش استایل‌دهی درون خطی، میتوانید از انتخابگرهای مختلف برای تغییر رنگ المان‌های دیگر صفحه نیز بهره بگیرید. همچنین به جای استفاده از نام رنگ، میتوانید از سایر استاندارد‌ها مثل RGB و HSL نیز کمک بگیرید که مشابه با نمونه زیر خواهند بود.
<!DOCTYPE html>
<html>
<head>
<style>
<p> {
color: hsl(276, 100%, 50%),
}
</style>
</head>
۳.۳ تغییر رنگ متون با استایل‌دهی خارجی (External CSS)
آخرین شیوه برای تغییر رنگ متن در صفحات وب با CSS، بهره‌گیری از استایل‌دهی خارجی است. در این روش، کدهای CSS داخل یک فایل جداگانه از HTML قرار می‌گیرد که معمولا با نام‌های style.css یا stylesheet.css ذخیره می‌شود. این فایل حاوی تمام استایل‌های مرتبط با وب سایت از جمله رنگ متن، اندازه فونت، حاشیه‌ها، رنگ پس‌زمینه و… خواهد بود و به طور کلی نحوه نمایش سایت و خواص بصری آن را برعهده دارد.
جهت کار با استایل‌دهی خارجی باید به سراغ استفاده از انتخابگرها (Selectors) بروید تا بتوانید خواص قسمت‌های مختلف را تعیین کنید. برای مثال کد زیر می‌تواند رنگ تمامی متن‌های body در یک وب سایت را به بنفش تغییر دهید.
body {color: purple;}
توجه داشته باشید که مانند دو قسمت قبل، میتوانید به جای استفاده از نام یک رنگ، از مقادیر RGB و HEX در کنار HSL استفاده نمایید. توصیه می‌شود هنگام ویرایش و تغییر فایل style.css از یک ویرایشگر کد (مثل Visual Studio Code) استفاده نمایید.
کدام یک از روش‌های استایل‌دهی (CSS) بهتر است؟
در قسمت‌های قبلی انواع روش‌های استایل‌دهی قابل استفاده برای تغییر رنگ متن در صفحات وب را توضیح دادیم. اما تعدد آن‌ها ممکن است موجب سردرگمی کاربران شود و انتخاب را برای آن‌ها سخت کند. به طور کلی شیوه استایل‌دهی درون خطی (Inline CSS) بیشتر برای ترتیب دادن تغییرات سریع مورد استفاده قرار می‌گیرد؛ زیرا امکان افزودن آن به صورت مستقیم در فایل HTML وجود دارد. همچنین اگر بخواهید رنگ تنها یک قسمت (مثل یک پاراگراف خاص) را تغییر دهید، بهتر است به سراغ این روش بروید؛ زیرا سریع‌تر از سایر گزینه‌ها است و از پیچیدگی خاصی نیز برخوردار نیست.
البته استایل‌دهی درون خطی معایب مختص به خود را نیز دارد که یکی از بزرگترین آن‌ها، افزایش حجم نهایی فایل HTML به شمار می‌رود. احتمالا می‌دانید که هر چقدر حجم این فایل بیشتر باشد، مدت زمان طولانی‌تری برای بارگذاری صفحه یا وب سایت مورد نیاز خواهد بود. در سوی دیگر اضافه کردن CSS به فایل HTML می‌تواند آن را بهم ریخته و نامنظم جلوه دهد؛ در نتیجه معمولا این مسیر برای استفاده‌های عمومی توصیه نمی‌شود.
