CSS అంటే ఏమిటి అది ఎలా పని చేస్తుంది?

హలో, Ap Web Academyకి స్వాగతం, ఈ రోజు మనం కోడ్ ప్రోగ్రామింగ్ లో ఫ్రంట్ ఎండ్ వెబ్ డెవలప్ మెంట్ లోని మరియొక లాంగ్వేజ్ ఐన CSS గురించి నేర్చుకుందాం. CSS మరియు HTML హ్యాండ్ ఆన్ హ్యాండ్ పనిచేస్తాయి. ఇవి రెండు ఎలా పనిచేస్తాయి తెలియాలంటే ముందు మీకు CSS అంటే ఏమిటి అది ఎలా పని చేస్తుంది? అనే విషయం దానికన్నా ముందుగా HTML అంటే ఏమిటి? అది ఎలా పనిచేస్తుంది? మరియు HTML పేజీ ని క్రియేట్ చేయడం ఎలా? అనే విషయాలు మీకు కచ్చితంగా తెలిసి ఉండాలి. ఒక వేళ మీకు ఫై విషయాలు తెలియకపోతే CSS మీకు అర్ధం కాదు.

మనం మెయిన్ టాపిక్ లోకి వెళ్లే ముందుగా మీరు నా గురించి తెలుసుకోవచ్చు.

CSS అంటే ఏమిటి అది ఎలా పని చేస్తుంది?

ఇప్పుడు మనం మన మొదటి పార్ట్ CSS అంటే ఏమిటో తెలుసుకుందాం!

  • CSS అంటే క్యాస్కేడింగ్ స్టైల్ షీట్.
  • CSS మరియు HTML హ్యాండ్ ఆన్ హ్యాండ్ పని చేస్తాయి.
  • ఒక ఇంటి నిర్మాణం HTML ఐతే ఆ ఇంటి యొక్క రంగు,ఇంటీరియర్, స్టైలింగ్ మొదలైనవి CSS.
  • CSS అనేది HTML ను అందంగా ప్రెసెంట్ చేయటం లో అద్భుతమైన పాత్ర పోషిస్తుంది.
  • HTML ఒక వెబ్ పేజీ యొక్క స్ట్రక్చర్ ను తయారు చేయడం లో ఉపయోగపడుతుంది. ఉదాహరణకు : హెడ్డింగ్, పేరా వంటివి.
  • CSS ఒక వెబ్ పేజీ ఎలా కనపడాలి అనే దానికి ఉపయోగపడుతుంది. ఉదాహరణకు: హెడ్డింగ్ కలర్, పేరా టెక్స్ట్ సైజ్ లాంటివి.

ఇప్పడు మనం మన రెండవ పార్ట్ CSS ఎలా పనిచేస్తుంది? అనే విషయం తెలుసుకుందాం.

  • CSS కోడ్ కర్లీ బ్రేస్ మధ్యలో రన్ అవుతుంది ఉదా: { CSS }.
  • కర్లీ బ్రేస్ లో ప్రాపర్టీ మరియు వేల్యూ ఉంటాయి. ఉదా:{ ప్రాపర్టీ(కలర్) వేల్యూ(బ్లూ) }.
  • ప్రాపర్టీ కాలొమ్న్ తోటి వేల్యూ సెమి కాలొమ్న్ తోటి క్లోజ్ అవుతాయి. ఉదా: { color : blue ; }.
  • ఇప్పుదు మనం చెప్పుకున్న పాయింట్స్ అన్నిటిని కలిపి CSS డిక్లరేషన్ అని అంటారు.
  • మనం CSS స్టైలింగ్ అప్లై చేయడానికి సెలెక్ట్ చేసుకునే HTML టాగ్ ను CSS సెలెక్టర్ అంటారు.ఉదా: h1 {color : blue ;}.
  • CSS సెలెక్టర్ ఎప్పుడు కూడా CSS డిక్లరేషన్ కన్నా ముందు కర్లీ బ్రేస్ బయట ఉంటుంది. CSS సెలెక్టర్ తర్వాత ఒక స్పేస్ ఇచ్చి CSS డిక్లరేషన్ ఇవ్వాలి. ఉదా: సెలెక్టర్ { ప్రాపర్టీ: వేల్యూ; }.
  • ఏ విధంగా HTML ; అన్ని రకాల ఎలెమెంట్స్ మరియు టాగ్స్ HTML ఓపెనింగ్ HTML క్లోజింగ్ టాగ్స్ మధ్య రాస్తామో అదే విధంగా CSS కోడ్ మొత్తం అంటే అన్ని రకాల సెలెక్టర్స్ మరియు డిక్లరేషన్స్ కూడా STYLE టాగ్స్ మధ్య ఉంటాయి.
  • స్టైల్ టాగ్స్ అంటే ఓపెనింగ్ <STYLE> టాగ్ మరియు క్లోజింగ్ <STYLE> టాగ్. ఉదా: <STYLE> టోటల్ CSS </STYLE> .
  •  ఒక  CSS డాక్యుమెంట్ ను .CSS (dot CSS ) ఎక్సటెన్షన్ తో మాత్రమే సేవ్ చెయ్యాలి. లేదంటే అది పని చేయదు.

CSS కోడ్ ను HTML డాక్యుమెంట్ లో ఎక్కడ వాడాలి? ఎలా పని చేస్తుంది?

  • CSS కోడ్ మూడు డిఫరెంట్ స్టైల్స్ లో పని చేస్తుంది.

1 ఇన్ లైన్ స్టైల్. ఇది HTML ఓపెనింగ్ టాగ్ లో రాస్తారు.
2 ఇంటర్నల్ స్టైల్ షీట్ . ఇది హెడ్ పార్ట్ లో ఉంటుంది.
3 .ఎక్స్టర్నల్ స్టైల్ షీట్. ఇది HTML డాక్యుమెంట్ తో సంబంధం లేకుండా విడిగా ఉంటుంది. దేనికి సంబంధించిన URL మాత్రం హెడ్ పార్ట్ లో లింక్ అయి ఉంటుంది

ఇప్పటి వరకు మనం థియరీ గురించి నేర్చుకున్నాం. ఇప్పుడు ప్రాక్టికల్ గా చూద్దాం.

  • ముందుగా ఒక HTML డాక్యుమెంట్ తయారు చేయండి. దానిని .
  • HTML (డాట్ HTML ) ఎక్స్ టెన్షన్ తో సేవ్ చేయండి.
  • ఇప్పుడు మనం ఇన్ లైన్ స్టైల్ ఎలా వర్క్ చేస్తుందో స్టెప్ బై స్టెప్ చూదాం.

ఉదా:

<!DOCTYPE html>

<html>

<head>

<title> put here your name or some words</title>

</head>

<body>

the key point is to write some words here. otherwise, your webpage not showing in the browser.

</body>

</html>

అసలు మేజిక్ ఇప్పుడు బిగిన్ అవుతుంది. కేర్ ఫుల్ గా అర్ధం చేసుకొని ప్రాక్టీస్ చెయ్యండి.

  • పైన కనపడే డాక్యుమెంట్, రా HTML డాక్యుమెంట్ అని లేదా బాయిలర్ ప్లేట్ కోడ్ అని పిలుస్తామని మనం ఇంతకూ ముందు ఆర్టికల్స్ లో నేర్చు కున్నాము .
  • మీరు ఆ డాక్యుమెంట్ ను ఓపెన్ చేస్తే మీకు “the key point is to write some words here. otherwise, your webpage not showing in the browser” అనే పదాలు బ్రౌజరు లో కనపడతాయి.
  • అలాగే పైన బ్రౌజరు టాబ్ లో “put here your name or some words” అని కనపడుతుంది.
  • ఇప్పుడొక స్టైల్ టాగ్ బాడీ ఓపెన్ టాగ్ లో ఆడ్ చేద్దాం.
  • ఏమి ఆడ్ చేయాలో అక్కడ ఆడ్ చేయాలో క్రింద బోల్డ్ లెటర్స్ లో ఇవ్వ బడింది.

<!DOCTYPE html>

<html>

<head>

<title> put here your name or some words</title>

</head>

<body style=”background-color: green”> the inline style. CSS code nested in HTML opening tag

the key point is to write some words here. Otherwise, your webpage not showing in the browser.

</body>

</html>

ఇప్పడు ఈ ఫైల్ సేవ్ చెయ్యండి. దీనిని మీ బ్రౌజరు లో ఓపెన్ చెయ్యండి. మీరు ఏమి గమనించారు. బ్రౌజరు బ్యాక్ గ్రౌండ్ కలర్ గ్రీన్ గా ఉంటుంది. అంటే ఇప్పుడు మనం CSS ఇన్ లైన్ స్టైల్ తోటి ఒక HTML డాక్యుమెంట్ బాడీ బ్యాక్ గ్రౌండ్ స్టైలింగ్ అప్లై చేసాం.

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

మీకు ఇంకా CSS అంటే ఏమిటి అది ఎలా పని చేస్తుంది? అనే విషయం లో కానీ లేదా మరి ఏదయినా విషయం లో కానీ సందేహాలు ఉంటే మీరు నన్ను కాంటాక్ట్ చేయ వచ్చు. అలాగే ఏదయినా చిన్న సందేహమైతే కామెంట్ లాగ అడగండి. ఈ ఆర్టికల్ మీ వారికి ఎవరికయినా ఉపయోగ పడుతుంది అనుకొంటే షేర్ చెయ్యండి. అలాగే ఎలాంటి మరిన్ని వివరణాత్మక ఆర్టికల్ కోసం మీ ఇమెయిల్ అడ్రస్ ను ఎంటర్ చేసి నా సైటును ఫాలో కావడం కానీ, లేదా యూజర్ గా రిజిస్ట్రేషన్ చేసుకోవడం ద్వారా గాని, లేదా నా సోషల్ లింక్స్ ఒక దానిని క్లిక్ చేయడం ద్వారా గాని మీరు నా ఆర్టికల్స్ ను పొందవచ్చు.

ఈ ఆర్టికల్ ను ఇంగ్లీష్ లో చదవాలనుకొంటే ఇక్కడ క్లిక్ చెయ్యండి.నా గురించి మరిన్ని వివరాలు తెలుసుకోవాలనుకొంటే అబౌట్ పేజీ ను దర్శించండి

Summary
CSS అంటే ఏమిటి అది ఎలా పని చేస్తుంది
Article Name
CSS అంటే ఏమిటి అది ఎలా పని చేస్తుంది
Description
CSS అంటే ఏమిటి అది ఎలా పని చేస్తుంది? ఒక ఇంటి నిర్మాణం HTML ఐతే ఆ ఇంటి యొక్క రంగు,ఇంటీరియర్, స్టైలింగ్ మొదలైనవి CSS. CSS అంటే క్యాస్కేడింగ్ స్టైల్ షీట్.
Author
Publisher Name
apwebacademy.com
Publisher Logo
Spread the love

ajay kumar

hello, Ap Wed Academy is a passion of an entrepreneur. a mind of web scientist I am doing a professional job in a well-named company. I don't have any degrees, I am not an English expert. but, a lot of interest and Enthusiasm about learning web concepts. that's why you're read my profile here. my goal is help people who want to learn web concepts.you can follow me by click one of my social links.

Leave a Reply