Connecting CSS to an HTML Page

CSS file తయారు చేసిన తర్వాత, ఆ CSS file ను HTML page కు connect చేయాలి. అప్పుడే browser HTML content కు CSS styles ను apply చేస్తుంది.

External CSS అంటే ఏమిటి?

ఒక ప్రత్యేకమైన .css file లో styles రాసి, దానిని HTML document లోని <head> భాగంలో ఉన్న <link> element ద్వారా connect చేస్తే దాన్ని External CSS అంటారు.

CSS file ను HTML కు connect చేయడానికి సాధారణ syntax:

<link rel="stylesheet" href="styles.css">

rel=”stylesheet” అంటే link చేయబడుతున్న file ఒక stylesheet అని browser కు చెబుతుంది.
href=”styles.css” అంటే CSS file పేరు మరియు దాని location ను చెబుతుంది.

Files ఎక్కడ ఉంచాలి?

HTML file మరియు CSS file ఒకే folder లో ఉంటే, href=”styles.css” అని రాయవచ్చు.

ఉదాహరణకు:

project-folder/
  index.html
  styles.css

HTML file లో link సరైనదిగా ఉంటే browser ముందుగా CSS file ను load చేసి, అందులోని rules ను HTML elements పై apply చేస్తుంది.

CSS connection ఎందుకు ఉపయోగకరం?

ఒకే CSS file ను అనేక HTML pages కు connect చేయవచ్చు. దాంతో design ఒకే చోట నిర్వహించవచ్చు. CSS మార్చినప్పుడు ఆ stylesheet ను ఉపయోగిస్తున్న pages అన్నింటిలో మార్పు కనిపిస్తుంది.

ముఖ్యమైన విషయం

<link> element ను సాధారణంగా <head> లో ఉంచాలి. CSS file పేరు, spelling, extension, మరియు folder path సరిగ్గా ఉండాలి.

Simple Explanation

HTML page structure మరియు content ను ఇస్తుంది. CSS page appearance ను మార్చుతుంది. ఈ రెండింటిని కలపడానికి HTML లో <link rel=”stylesheet” href=”styles.css”> ను ఉపయోగిస్తాం.

HTML file పేరు index.html మరియు CSS file పేరు styles.css అయితే, రెండూ ఒకే folder లో ఉన్నప్పుడు ఈ link పనిచేస్తుంది. Browser HTML page తెరిచినప్పుడు styles.css ను చదివి, అందులోని styles ను page పై apply చేస్తుంది.

Real-Life Example

ఒక school లో notice board మరియు design rules ఉన్న separate handbook ఉన్నాయని ఊహించండి. Notice board లో content ఉంటుంది. Handbook లో text color, size, spacing వంటి design rules ఉంటాయి. ప్రతి notice board ఆ handbook ను follow చేస్తే అన్నింటికీ ఒకే design వస్తుంది. ఇదే విధంగా HTML page ను CSS file తో connect చేస్తే HTML content కు ఒకే విధమైన styling ఇవ్వవచ్చు.

Code Examples

HTML Page కు External CSS File ను Connect చేయడం

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Connected CSS Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>My Web Page</h1>
  <p>This page is connected to an external CSS file.</p>
  <button>Read More</button>
</body>
</html>

ఈ HTML file లోని element, అదే folder లో ఉన్న styles.css file ను connect చేస్తుంది. క్రింది CSS ను styles.css అనే separate file లో save చేయాలి.

Browser లో My Web Page అనే heading, ఒక paragraph, మరియు Read More button కనిపిస్తాయి. styles.css file లో ఇచ్చిన styles ప్రకారం వాటి రంగు, spacing, మరియు button design మారుతుంది.

styles.css File

body {
  font-family: Arial, sans-serif;
  background-color: #f2f7ff;
  padding: 24px;
}

h1 {
  color: #123b70;
}

p {
  color: #333333;
}

button {
  background-color: #123b70;
  color: white;
  border: none;
  padding: 10px 16px;
}

ఈ code ను styles.css అనే file లో save చేయాలి. HTML లోని element ఈ file ను load చేసినప్పుడు, body, h1, p, మరియు button selectors యొక్క styles సంబంధిత HTML elements పై apply అవుతాయి.

Page background light blueగా కనిపిస్తుంది. Heading dark blueగా, paragraph dark grayగా, మరియు button dark blue backgroundతో white textగా కనిపిస్తుంది.

Line-by-Line Explanation

<link rel=”stylesheet” href=”styles.css”>
ఈ line HTML page ను styles.css అనే external CSS file తో connect చేస్తుంది. rel=”stylesheet” వల్ల linked file CSS stylesheet అని browser కు తెలుస్తుంది. href లో CSS file పేరు లేదా path ఇవ్వాలి.

body {
ఈ selector మొత్తం HTML body భాగాన్ని select చేస్తుంది. దీని లోపల రాసిన styles page యొక్క ప్రధాన content area పై apply అవుతాయి.

font-family: Arial, sans-serif;
body లో ఉన్న text కు Arial font ను ఇవ్వడానికి ఈ declaration ఉపయోగించబడుతుంది. Arial అందుబాటులో లేకపోతే browser sans-serif font ను ఉపయోగిస్తుంది.

background-color: #f2f7ff;
మొత్తం page background కు light blue రంగు ఇస్తుంది.

padding: 24px;
Page content మరియు browser window edge మధ్య 24 pixels లోపలి ఖాళీని ఇస్తుంది.

h1 {
HTML లోని <h1> element ను select చేయడానికి h1 selector ఉపయోగించబడుతుంది.

color: #123b70;
h1 heading text కు dark blue రంగు ఇస్తుంది.

p {
HTML లోని అన్ని paragraph elements ను select చేస్తుంది.

color: #333333;
Paragraph text ను dark gray రంగులో చూపిస్తుంది.

button {
HTML లోని button element ను select చేస్తుంది. ఈ rule block లోని declarations button appearance పై apply అవుతాయి.

background-color: #123b70;
Button background కు dark blue రంగు ఇస్తుంది.

color: white;
Button లోని text ను white రంగులో చూపిస్తుంది.

Try It

Try this CSS code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Connection Practice</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>CSS is Connected</h1>
  <p>Change the styles.css file and refresh this page.</p>
</body>
</html>

/* Save the CSS below as styles.css in the same folder. */
body {
  font-family: Arial, sans-serif;
  background-color: #fff8e7;
  padding: 20px;
}

h1 {
  color: #9a3412;
}

p {
  color: #444444;
}

Try It Yourself »

Practice

Practice: పై code ను రెండు files గా ఉంచండి: HTML భాగాన్ని index.html లో, CSS భాగాన్ని styles.css లో save చేయండి. తరువాత HTML file ను browser లో open చేయండి. Page background ను light greenగా మరియు heading ను dark greenగా చూపించడానికి styles.css ను edit చేయండి.

Hint: index.html లోని <link rel=”stylesheet” href=”styles.css”> line ను మార్చకండి. styles.css లో body యొక్క background-color మరియు h1 యొక్క color values ను మార్చండి.

Common Mistakes

HTML లో <link rel=”style” href=”styles.css”> అని రాయడం.
rel value ఖచ్చితంగా stylesheet గా ఉండాలి: <link rel=”stylesheet” href=”styles.css”>.

CSS file పేరు styles.css అయినా href=”style.css” అని వేరే పేరు ఇవ్వడం.
href లో ఉన్న file name, నిజమైన CSS file name తో exact గా match కావాలి.

CSS file ను వేరే folder లో ఉంచి, href లో సరైన path ఇవ్వకపోవడం.
రెండు files ఒకే folder లో ఉంచండి లేదా CSS file ఉన్న folder కు సరైన relative path ఇవ్వండి.

CSS file ను .txt extension తో save చేయడం, ఉదాహరణకు styles.css.txt.
File name చివర .css extension మాత్రమే ఉండేలా save చేయండి: styles.css.

Interview Questions

HTML page కు external CSS file ను ఎలా connect చేస్తారు?

Answer: HTML document యొక్క <head> లో <link rel=”stylesheet” href=”styles.css”> ను రాస్తారు.

rel=”stylesheet” యొక్క ఉపయోగం ఏమిటి?

Answer: Link చేయబడుతున్న file ఒక CSS stylesheet అని browser కు తెలియజేయడానికి rel=”stylesheet” ఉపయోగిస్తారు.

href attribute లో ఏమి రాస్తారు?

Answer: CSS file పేరు లేదా CSS file కు వెళ్లే path ను href attribute లో రాస్తారు.

HTML మరియు CSS files ఒకే folder లో లేకపోతే ఏమి చేయాలి?

Answer: CSS file ఉన్న location కు సరైన relative path ను href లో ఇవ్వాలి.

Exam Questions

External CSS ను connect చేయడానికి ఉపయోగించే HTML element ఏది?

Answer:

<link> element.

సరైన CSS connection statement ను రాయండి.

Answer:

CSS link ను HTML document లో సాధారణంగా ఏ భాగంలో ఉంచాలి?

Answer:

<head> భాగంలో.

HTML file పేరు index.html, CSS file పేరు main.css. ఇవి ఒకే folder లో ఉంటే href value ఏమిటి?

Answer:

href=”main.css”

Quick Revision

External CSS కోసం HTML లో <link> element ఉపయోగించాలి.
సాధారణ syntax: <link rel=”stylesheet” href=”styles.css”>.
rel=”stylesheet” linked file CSS అని browser కు చెబుతుంది.
href లో CSS file పేరు లేదా path ఇవ్వాలి.
HTML మరియు CSS files ఒకే folder లో ఉంటే file name మాత్రమే href లో సరిపోతుంది.
File name, extension, spelling, మరియు path సరిగ్గా ఉండాలి.
CSS link ను సాధారణంగా HTML యొక్క <head> లో ఉంచాలి.

Connecting CSS to an HTML Page