ബ്ലോഗർ: നിങ്ങളുടെ ബ്ലോഗിലെ കോഡിനുള്ള CSS ശൈലി
ബ്ലോഗർ എൻട്രിയിൽ ഞാൻ എങ്ങനെയാണ് കോഡ് റീജിയണുകൾ ഉണ്ടാക്കിയതെന്ന് ഒരു സുഹൃത്ത് എന്നോട് ചോദിച്ചു. എന്റെ Blogger ടെംപ്ലേറ്റിലെ CSS-നുള്ള ഒരു സ്റ്റൈൽ ടാഗ് ഉപയോഗിച്ചാണ് ഞാൻ ഇത് ചെയ്തത്. ഞാൻ ചേർത്തത് ഇതാ:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: ഇത് HTML ലക്ഷ്യമിടുന്ന ഒരു CSS നിയമമാണ്<p>
"കോഡ്" എന്ന ക്ലാസ് നാമമുള്ള ഘടകങ്ങൾ ഈ ക്ലാസിലുള്ള ഏത് ഖണ്ഡികയും ഇനിപ്പറയുന്ന പ്രോപ്പർട്ടികൾ അനുസരിച്ച് ശൈലിയാക്കും എന്നാണ് ഇതിനർത്ഥം.font-family: Courier New;
: ഈ പ്രോപ്പർട്ടി ഫോണ്ട് ഫാമിലിയെ "കൊറിയർ ന്യൂ" ആയി സജ്ജമാക്കുന്നു. ടാർഗെറ്റുചെയ്ത ഘടകങ്ങളിൽ ടെക്സ്റ്റിനായി ഉപയോഗിക്കുന്ന ഫോണ്ട് ഇത് വ്യക്തമാക്കുന്നു.font-size: 8pt;
: ഈ പ്രോപ്പർട്ടി ഫോണ്ട് സൈസ് 8 പോയിന്റായി സജ്ജമാക്കുന്നു. ടാർഗെറ്റുചെയ്ത ഘടകങ്ങളിലെ വാചകം ഈ ഫോണ്ട് വലുപ്പത്തിൽ പ്രദർശിപ്പിക്കും.border-style: inset;
: ഈ പ്രോപ്പർട്ടി ബോർഡർ ശൈലി "ഇൻസെറ്റ്" ആയി സജ്ജീകരിക്കുന്നു. ടാർഗെറ്റുചെയ്ത മൂലകങ്ങൾക്ക് ചുറ്റുമുള്ള അതിർത്തിക്കായി ഇത് മുങ്ങിപ്പോയതോ അമർത്തിയോ രൂപം സൃഷ്ടിക്കുന്നു.border-width: 3px;
: ഈ പ്രോപ്പർട്ടി ബോർഡർ വീതി 3 പിക്സലുകളായി സജ്ജമാക്കുന്നു. മൂലകങ്ങൾക്ക് ചുറ്റുമുള്ള ബോർഡർ 3 പിക്സൽ കട്ടിയുള്ളതായിരിക്കും.padding: 5px;
: ഈ പ്രോപ്പർട്ടി ടാർഗെറ്റുചെയ്ത മൂലകങ്ങൾക്കുള്ളിലെ ഉള്ളടക്കത്തിന് ചുറ്റും 5 പിക്സൽ പാഡിംഗ് ചേർക്കുന്നു. ഇത് വാചകത്തിനും ബോർഡറിനും ഇടയിൽ അകലം നൽകുന്നു.background-color: #FFFFFF;
: ഈ പ്രോപ്പർട്ടി പശ്ചാത്തല നിറം വെള്ളയായി സജ്ജീകരിക്കുന്നു (#FFFFFF). ടാർഗെറ്റുചെയ്ത ഘടകങ്ങളിലെ ഉള്ളടക്കത്തിന് വെളുത്ത പശ്ചാത്തലം ഉണ്ടായിരിക്കും.line-height: 100%;
: ഈ പ്രോപ്പർട്ടി ലൈൻ ഉയരം ഫോണ്ട് വലുപ്പത്തിന്റെ 100% ആയി സജ്ജീകരിക്കുന്നു. ഫോണ്ട് വലുപ്പത്തിനനുസരിച്ച് ടെക്സ്റ്റ് ലൈനുകൾ അകലത്തിലാണെന്ന് ഇത് ഉറപ്പാക്കുന്നു.margin: 10px;
: ഈ പ്രോപ്പർട്ടി മുഴുവൻ മൂലകത്തിനും ചുറ്റും 10 പിക്സലുകളുടെ മാർജിൻ ചേർക്കുന്നു. ഈ ഘടകത്തിനും പേജിലെ മറ്റ് ഘടകങ്ങൾക്കും ഇടയിൽ ഇത് സ്പേസ് നൽകുന്നു.
നൽകിയിരിക്കുന്ന CSS കോഡ് HTML ഖണ്ഡികകൾക്കുള്ള ഒരു ശൈലി "കോഡ്" എന്ന ക്ലാസ് ഉപയോഗിച്ച് നിർവ്വചിക്കുന്നു. ഇത് ഈ ഖണ്ഡികകൾക്കായി ഫോണ്ട്, ഫോണ്ട് വലുപ്പം, ബോർഡർ ശൈലി, ബോർഡർ വീതി, പാഡിംഗ്, പശ്ചാത്തല നിറം, ലൈൻ ഉയരം, മാർജിൻ എന്നിവ സജ്ജമാക്കുന്നു. ഒരു ബ്ലോഗർ പോസ്റ്റിലെ കോഡ് സ്നിപ്പെറ്റുകൾക്കോ മുൻകൂട്ടി ഫോർമാറ്റ് ചെയ്ത ടെക്സ്റ്റിനോ ഒരു പ്രത്യേക രൂപം നൽകുന്നതിന് ഈ ശൈലി പ്രയോഗിക്കാവുന്നതാണ്.
ഇത് എങ്ങനെ കാണപ്പെടുമെന്ന് ഇതാ:
p.code {
ഫോണ്ട് ഫാമിലി: കൊറിയർ ന്യൂ;
ഫോണ്ട് വലുപ്പം: 8pt;
ബോർഡർ ശൈലി: ഇൻസെറ്റ്;
ബോർഡർ വീതി: 3px;
പാഡിംഗ്: 5px;
പശ്ചാത്തല നിറം: #FFFFFF;
ലൈൻ-ഉയരം: 100%;
മാർജിൻ: 10px;
}
ഹാപ്പി കോഡിംഗ്!