Cascade Style Sheets - పరిచయం
CSS Style Sheet అనేది ఒక వెబ్ పేజ్ లో డిస్ప్లే అయ్యే "content లేదా text" అనగా హెడ్డింగ్స్ పారగ్రాఫ్స్ images మొదలైనవి వీటన్నింటినీ వివిధ రకాల style లలో మనకు కావలసిన విధంగా డిస్ప్లే చేయటానికి ఉపయోగపడుతుంది. నిజానికి css code ను మూడు విధాలుగా వ్రాస్తారు. అవి (i) internal - అనగా అదే వెబ్ పేజ్ లో రాయడం (ii) external - అనగా వేరొక పేజ్ లో వ్రాసి దాన్ని కావసిన వెబ్ పేజ్ లోకి వాడుకోవడం (iii) inline - అనగా అదే line లో వ్రాయడం. ప్రస్తుతం మనం మొదటి పద్దతిలో వ్రాయబడిన css code అనగా internal style sheet లో వ్రాయబడిన css code గురించి తెలుసుకుందాం.
CSS Example
పై ఉదాహరణను గమనించినట్లయితే ఈ <head> ,</head> ట్యాగ్ ల నడుమ గల ప్రదేశాన్ని హెడ్ సెక్షన్ అంటారు. css code అనేది హెడ్ సెక్షన్ లో ఈ <style> ,</style> ట్యాగ్ ల మధ్య వ్రాయబడి ఉంది.
CSS Syntax
ప్రతి declaration అనేది ";" (semicolon) తో end (ముగియుట) అవుతుంది మరియు అది కర్లీ బ్రాకెట్స్ "{ }" ల నడుమ ఉంటుంది. Selector ,Property మరియు Value ఈ మూడింటి క్రమాన్ని గుర్తుపెట్టుకోండి. పై ఉదాహరణలో body{ background - color : Cornsilk;} అని వ్రాయబడి ఉంది.అనగా వెబ్ పేజ్ యొక్క కలర్ "Cornsilk" అని అర్థం.తరువాత h3 లో color : orange ; అనిఉంది. అంటే <h3>,</h3> ట్యాగ్ ల నడుమ రాసే మీ heading "orange" కలర్ లో వెబ్ పేజ్ పై కనబడుతుంది. కలర్ల పేర్లకంటే వాటి కోడ్స్ ని రాయడం మంచి పద్ధతి.text-align:center; అంటే <h3>,</h3> ట్యాగ్ ల నడుమ రాసే మీ టెక్స్ట్ (heading) అనేది వెబ్ పేజ్ పై సెంటర్ లో కనబడుతుంది. తరువాత పారగ్రాఫ్ p లోని font size : 20px; అంటే మీకు అర్థం అయ్యే ఉంటుంది. అనగా <p></p> ఈ ట్యాగ్ ల నడుమ రాసే అక్షరాల సైజ్ అని అర్థం. ఇలా css లో ఉన్న మిగతా అన్నింటి గురించి క్లుప్తంగా క్రింద తెలుసుకుందాం. ("ఒక చిన్న మాట ... మీకు సులువుగా అర్థం అయ్యేందుకు మాత్రమే తెలుగులో వివరిచడం జరిగింది కొన్ని పదాలు మీరు ఇంగ్లీష్ లోనే చదవడం గుర్తుపెట్టుకోవడం చేయండి వాటిని తర్జుమా చేస్తే నాకు జీర్ణం కాదు ఎవరికీ వినడానికి బాగోదు.") sample webpage పేజ్ లో ఒక పారగ్రాఫ్ మాత్రమే ఉంది. ఉదాహరణకు రెండు (2) పారగ్రాఫ్ లు ఉన్నాయ్ అనుకోండి. ఈ రెండు పారగ్రాఫ్ లను వేర్వేరు కలర్లలో డిస్ప్లే చేయాలనుకోండి. అప్పుడు ఎలా ? ఇక్కడే "id selector" , "class selector" అనేవి ఉపయోగపడతాయి.
Next >>