CSS સાથે વેબસાઈટ ફૉન્ટ કલર્સ કેવી રીતે બદલવી

સારી ટાઇપોગ્રાફિક ડિઝાઇન સફળ વેબસાઇટનો એક મહત્વપૂર્ણ ભાગ છે. CSS તમને વેબ પેજીસ પર ટેક્સ્ટ દેખાવ પર વધુ નિયંત્રણ આપે છે જે તમે બનાવેલ છે તે વેબ પૃષ્ઠો. આમાં તમે ઉપયોગમાં લીધેલ કોઈપણ ફોન્ટ્સના રંગને બદલવાની ક્ષમતા શામેલ છે.

બાહ્ય શૈલી પત્રક , આંતરિક શૈલી શીટનો ઉપયોગ કરીને ફૉન્ટ રંગ બદલી શકાય છે અથવા તે HTML દસ્તાવેજની અંતર્ગત ઇનલાઇન સ્ટાઇલનો ઉપયોગ કરીને બદલી શકાય છે. શ્રેષ્ઠ પદ્ધતિઓ સૂચવે છે કે તમારે તમારા CSS શૈલીઓ માટે એક બાહ્ય સ્ટાઇલ શીટનો ઉપયોગ કરવો જોઈએ. એક આંતરિક શૈલી પત્રક, જે તમારા દસ્તાવેજના "વડા "માં સીધી લખવામાં આવેલી શૈલીઓ છે, સામાન્ય રીતે માત્ર નાના, એક-પૃષ્ઠ સાઇટ્સ માટે ઉપયોગમાં લેવાય છે. ઇનલાઇન શૈલીઓ ટાળવી જોઈએ કારણ કે તેઓ જૂના "ફોન્ટ" ટેગની સમાન છે જે અમે ઘણા વર્ષો પહેલા રજૂ કર્યા હતા. તે ઇનલાઇન શૈલીઓ ફોન્ટ શૈલીનું સંચાલન કરવા માટે ખૂબ જ હાર્ડ બનાવે છે કારણ કે તમને તેમને ઇનલાઇન શૈલીના દરેક ઘટકમાં બદલવાની જરૂર છે.

આ લેખમાં, તમે શીખશો કે બાહ્ય સ્ટાઇલ શીટ અને ફકરા ટેગમાં ઉપયોગમાં લેવાતી શૈલીનો ઉપયોગ કરીને ફોન્ટ રંગ કેવી રીતે બદલવો. તમે ટેગ સહિતના ટેક્સ્ટને ફરતે કોઈપણ ટેગ પર ફોન્ટ રંગ બદલવા માટેની શૈલી શૈલીને લાગુ કરી શકો છો.

ફૉન્ટ રંગ બદલવા માટે શૈલીઓ ઉમેરી રહ્યા છે

આ ઉદાહરણ માટે, તમારે તમારા પૃષ્ઠ માર્કઅપ માટે HTML દસ્તાવેજ અને એક અલગ CSS ફાઇલ હોવી જરૂરી છે કે જે તે દસ્તાવેજ સાથે જોડાયેલ છે. એચટીએમએલ (HTML) ડોક્યુમેન્ટમાં તેનામાં સંખ્યાબંધ ઘટકો હશે. આ લેખના ઉદ્દેશ્ય માટે આપણે જે ચિંતિત છીએ તે ફકરા તત્વ છે.

અહીં તમારા બાહ્ય સ્ટાઇલ શીટનો ઉપયોગ કરીને ફકરા ટેગની અંદર ટેક્સ્ટનો ફોન્ટનો રંગ કેવી રીતે બદલવો તે છે.

રંગ મૂલ્યો રંગ કીવર્ડ્સ, RGB રંગ નંબરો, અથવા હેક્સાડેસિમલ રંગ નંબરો તરીકે વ્યક્ત કરી શકાય છે.

1. ફકરા ટેગ માટે શૈલી વિશેષતા ઉમેરો:
   1. પૃષ્ઠ {}
2. રંગની મિલકતને શૈલીમાં મૂકો તે મિલકત પછી કોલોન મૂકો:
   1. પી {રંગ:}
3. પછી મિલકત પછી તમારા રંગ મૂલ્ય ઉમેરો. અર્ધ-કોલન સાથે તે મૂલ્યને સમાપ્ત કરવાનું સુનિશ્ચિત કરો:
   1. પૃષ્ઠ {રંગ: કાળો;}

તમારા પૃષ્ઠમાં ફકરા હવે કાળા હશે

આ ઉદાહરણ રંગ કવરેજ - "બ્લેક" નો ઉપયોગ કરે છે. તે CSS માં રંગ ઉમેરવાનો એક માર્ગ છે, પરંતુ તે ખૂબ મર્યાદિત છે. "બ્લેક" અને "સફેદ" માટેના કીવર્ડ્સનો ઉપયોગ સરળ છે કારણ કે તે બે રંગ ખૂબ ચોક્કસ છે, પરંતુ જો તમે "લાલ", "વાદળી" અથવા "ગ્રીન" જેવા કીવર્ડ્સનો ઉપયોગ કરો છો તો શું થાય છે? તમે લાલ, વાદળી કે લીલા રંગની છાયા મેળવશો? તમે કીવર્ડ્સ સાથે જે રંગ છાંયો છો તે બરાબર સ્પષ્ટ કરી શકતા નથી. આ શા માટે હેક્સાડેસિમલ મૂલ્યો વારંવાર રંગ કીવર્ડ્સની જગ્યાએ ઉપયોગમાં લેવાય છે.

પૃષ્ઠ {રંગ: # 000000; }

આ CSS શૈલી તમારા ફકરાઓનો રંગ કાળા પર પણ સેટ કરશે, કારણ કે હેક્સ કોડ # 000000 કાળા અનુવાદિત કરે છે. તમે હેક્સ મૂલ્ય સાથે પણ લઘુલિપિનો ઉપયોગ કરી શકો છો અને તેને માત્ર # 000 તરીકે લખી શકો છો અને તમને તે જ વસ્તુ મળશે.

જેમ આપણે પહેલાથી જ ઉલ્લેખ કર્યો છે, હેક્સ વેલ્યુ સારી રીતે કામ કરે છે જ્યારે તમને રંગની જરૂર હોય છે જે ફક્ત કાળા અથવા સફેદ નથી. અહીં એક ઉદાહરણ છે:

પૃષ્ઠ {color: # 2f5687; }

આ હેક્સ વેલ્યુ ફકરાને વાદળી રંગ પર સેટ કરશે, પરંતુ મુખ્ય શબ્દ "વાદળી" થી વિપરીત, આ હેક્સ કોડ તમને વાદળીની ચોક્કસ છાંયો ગોઠવવાની ક્ષમતા આપે છે - સંભવતઃ ડિઝાઇનર તે પસંદ કરે છે કે જ્યારે તેઓ ઇન્ટરફેસને બનાવી રહ્યા હોય આ વેબસાઇટ આ કિસ્સામાં, રંગ મધ્ય રેન્જ, સ્લેટ જેવી વાદળી હશે.

છેલ્લે, તમે પણ ફોન્ટ રંગ માટે RGBA રંગ મૂલ્યોનો ઉપયોગ કરી શકો છો. આરજીસીએ હવે તમામ આધુનિક બ્રાઉઝર્સમાં સપોર્ટેડ છે, જેથી તમે આ મૂલ્યોને થોડી ચિંતા સાથે વાપરી શકો છો કે જે વેબ બ્રાઉઝરમાં સપોર્ટેડ નથી, પણ તમે એક સરળ ફોલબેક સેટ પણ કરી શકો છો.

પૃષ્ઠ {રંગ: આરજીબીએ (47,86,135,1); }

આ RGBA મૂલ્ય અગાઉ ઉલ્લેખિત સ્લેટ વાદળી રંગ જેવું જ છે. પ્રથમ 3 મૂલ્યો લાલ, લીલા અને વાદળી મૂલ્યોને સેટ કરે છે અને અંતિમ સંખ્યા એ આલ્ફા સેટિંગ છે. તે "1" પર સેટ છે, જેનો અર્થ "100%" થાય છે, તેથી આ રંગમાં કોઈ પારદર્શિતા હોતી નથી. જો તમે તેને દશાંશ નંબર પર સેટ કરો છો, જેમ કે .85, તે 85% અસ્પષ્ટમાં અનુવાદિત થશે અને રંગ સહેજ પારદર્શક હશે.

જો તમે તમારા રંગ મૂલ્યો બુલેટપ્રુફ કરવા માંગો છો, તો તમે આ કરશો:

પૃષ્ઠ {
રંગ: # 2f5687;
રંગ: આરજીબીએ (47,86,135,1);
}

આ વાક્યરચના પહેલા હેક્સ કોડને સુયોજિત કરે છે. તે પછી તે મૂલ્ય RGBA નંબર સાથે ઓવરરાઇટ કરે છે. આનો અર્થ એ છે કે RGBA ને સપોર્ટ કરતું નથી તેવા કોઈ જૂના બ્રાઉઝરને પ્રથમ મૂલ્ય મળશે અને બીજાને અવગણશે. આધુનિક બ્રાઉઝર CSS કાસ્કેડ દીઠ બીજાનો ઉપયોગ કરશે.