వర్గం: జల్లెడ

CSS తో వెబ్ పేజీల స్టైలింగ్ …

వెబ్ పేజీలు కంటికింపుగా కనిపించడం దాని స్టైలింగ్ మీద ఆధార పడి ఉంటుంది. ఎంత చక్కని కంటెంటు మీ వెబ్ పేజీలలో ఉన్నా దానిని సరిగా స్టైల్ చెయ్యకపోతే ఎవరూ చూడరు. నేను ఇంతకు ముందు రాసిన యూజబిలిటీ వ్యాసంలో కొంత దీని మీద చెప్పాను.

ఇప్పుడు అసలు వెబ్ పేజీలకు స్టైలింగ్ ఎలా చేస్తారో నాకు తెలిసినంత వరకూ చెబుతాను.

HTML టాగ్స్ ద్వారా చేస్తుందని అందరికీ తెలుసు. అంటే ఒక <P> అనే టాగ్ వాడితే పారాగ్రాఫ్ అని, <br> అంటే లైన్ బ్రేక్ కోసమనీ, ఇలా తయారు చేసారు. వాటిని ఉపయోగించి మనం వెబ్ పేజీలను రాస్తాము. అది ఒక ఫ్లో లా ఉంటుంది. ఎలాగంటే ముందు <HTML> టాగ్ తో మొదలవుతుంది. తరువాత <HEAD> టాగ్, తరవాత <BODY> టాగ్ అలాగన్నమాట.

ఇక కొద్ది కొద్దిగా విహరిణులు విస్తరించేసరికి ఎవరికి వారు (అప్పట్లో నెట్‌స్కేప్, ఇంటర్నెట్ ఎక్స్‌ప్లోరర్) తమ సొంత టాగులని ఉపయోగించడం మొదలుపెట్టారు. అలా కంపాటిబిలిటీ లేకుండా పోయింది అన్నమాట విహరిణుల మధ్య. అప్పుడే స్టాండర్డైజేషన్ మొదలెట్టారు. W3C (World Wide Web Consortium) HTML కి సంబంధించిన స్పెసిఫికేషన్లను మెయింటెయిన్ చేస్తుంది. స్టైలింగ్ విధానాల కోసం దాని చేత మెయిటెయిన్ చెయ్యబడే విధానం CSS

CSS పలు విధాలుగా రాయవచ్చు (వికీ నుండి):

  • External Stylesheet
  • Inline Style
  • Embedded Style

External Stylesheets: దీని ద్వారా అయితే మన స్టైలింగ్ ఆప్షన్స్ అన్నిటినీ మన HTML డాక్యుమెంటు లో కాకుండా ఇంకో వేరే డాక్యుమెంటులో భద్రపరుస్తాము. ఆ డాక్యుమెంటు .css అనే ఎక్స్టెన్షన్ తో ఉంటుంది. అలా తయారయిన డాక్యుమెంటు ని HTML పేజీకి ఆపాదించవచ్చు.

ఉదా: మీ HTML పేజీ ఇలా ఉందనుకోండి

<html>
<head>
<title>Example Document</title>
</head>
<body>
<h1>Example H1 Tag</h1>
</body>
</html>

అది ఇలా కనిపిస్తుంది.

దానికే ఓ స్టైల్‌షీట్ రాసి ఈ కింది విధంగా ఆ HTML పేజీకి అనుసంధానిస్తే ఇలా కనబడుతుంది.

style.css

h1 {
color: 000066;
text-align: center;
}

body {
font-family: Arial, serif;
}

example.html

<html>
<head>
<LINK REL=StyleSheet HREF=”style.css” TYPE=”text/css”>
<title>Example Document</title>
</head>
<body>
<h1>Example H1 Tag</h1>
</body>
</html>

ఇలా ఇంకో ఫైలులో స్టైలుని రాయటం External Stylesheet విధానం అన్నమాట.

Embedded Style: మన స్టైలింగ్ ని HTML లోనే ఎంబెడ్ చెయ్యడం ఇంకో విధానం. అదెలా అంటే

<html>
<head>
<title>Example Document</title>
<style type=”text/css”>
h1 {
color: 000066;
text-align: center;
}

body {
font-family: Arial, serif
}
</style>
<body>
<h1>Example H1 Tag</h1>
</body>
</html>

పై విధంగా రాయవచ్చు.

Inline Style: ఇక మూడో విధానం స్టైలుని మన HTML ఎలిమెంటు తో పాటే ఉంచడం. అది ఈ కింది విధంగా

<html>
<head>
<title>Example Document</title>
</head>
<body style=”font-family: Arial, serif”>
<h1 style=”color: 000066; text-align: center;”>Example H1 Tag</h1>
</body>
</html>

పై మూడు విధాలలో మన సౌలభ్యాన్ని బట్టి వాడుకోవచ్చు.

ఒక వెబ్ పేజీ ని తగినట్టుగా డిజైన్ చెయ్యడం అంత సులభం కాదు. తగిన రంగులు, ఫాంటులు, టెక్స్ట్ సైజులు వాడకపోతే అసలు నప్పదు.

మనకు వివిధ బ్లాగు అగ్రిగేటర్లు ఉన్నాయి. అన్నిట్లోకీ మనం కూడలి నే ఎక్కువగా ఎందుకు వాడతాము. మంచి ఫీచర్లు ఒక కారణమయితే అంతకన్నా మంచి డిజైన్ అసలు కారణం. మంచి ఫీచర్లున్నా కానీ సరిగా డిజైన్ చెయ్యకపోతే దానిని వాడలేము.

ఇది చెప్ప్పినందుకు జల్లెడ వారికి కోపమొస్తే రావు గాక.

ఉదా: జల్లెడ ని తీసుకుంటే దాంట్లో కూడలి కంటే తొందరగా టపాలు ప్రత్యక్షమవుతాయి. చక్కగా శోధన అదీ కూడా ఉంచారు. అంతా బానే ఉంది కానీ ఆ పేజీ తెరవగానే నాకు దానిని వాడబుద్ధి కాదు. ఎందుకంటే అది అసలు కంటికింపుగా ఉండదు. మొదట్లో వారు ఓ సారి ఫీడ్‌బాక్ అడిగినప్పుడు సరి చెయ్యమని చెప్పినట్టు గుర్తు.

ఆ డిజైన్ వారికి నప్పినట్టు అనిపించవచ్చు. కానీ నాకు మాత్రం నచ్చలేదు. అందుకే నేను నా సొంత డిజైన్ తయారు చేసుకున్నాను దానికి, నా సొంత CSS ద్వారా. ఒక జిడ్డుకోతి స్క్రిప్టు ద్వారా దానిని జల్లెడ కి జతచేసాను. ఇప్పుడు నేను నాకు కావలసినట్టు వాడుకుంటున్నాను.

ముందు తరవాత పేజీల చిత్రాలు మీరు ఈ కింద చూడవచ్చు.

స్క్రిప్టు కావాలంటే ఇక్కడ నుండి దిగుమతి చేసుకోవచ్చు.

ఇక ముగించే ముందు నా అభిప్రాయం ఒకటి చెబుతా. మీరు వెబ్ పేజీలను డిజైన్ చేసేటప్పుడు ముద్దు మెథడాలజీ, అదే నండీ KISS (Keep It Simple and Stupid) ఫాలో అయితే మంచిది. స్టైలింగ్ చెయ్యాలని చెప్పి అతిగా రంగులు, హంగామా తగిలిస్తే మొదటికే మోసం వస్తుంది. చక్కని స్టైలింగుతో రాసి మాకు మరిన్ని మంచి వెబ్ పేజీలు ప్రసాదించండి 🙂