CHAPTER 02 · BEGINNER

CSS Syntax & Ways to Add CSS

CSS likhne ka ek clear syntax hota hai, aur CSS ko HTML page me add karne ke teen common ways hote hain: inline, internal aur external.

English + Hinglish17 min readPractice included

Basic CSS syntax

A CSS rule normally contains a selector and a declaration block. Each declaration contains a property and a value.

syntax.cssCSS

h1 {
  color: blue;
  font-size: 36px;
}

h1 = selector
color = property
blue = value
color: blue; = declaration
{ ... } = declaration block

Hinglish Explanation

Selector batata hai kis HTML element ko style karna hai. Curly braces ke andar property aur value likhte hain. Property aur value ke beech colon : aata hai, aur declaration ke end me semicolon ; lagana good practice hai.

Multiple declarations

One rule can contain many declarations. Keep each declaration on its own line so the CSS stays readable.

card.cssCSS

.card {
  background-color: white;
  color: #1e293b;
  padding: 20px;
  border-radius: 12px;
}

Readable code: Browser compact CSS bhi samajh leta hai, lekin learning aur maintenance ke liye clean indentation aur one-declaration-per-line better hota hai.

CSS comments

Use comments to explain useful context in CSS. CSS comments start with /* and end with */.

comments.cssCSS

/* Main page heading */
h1 {
  color: #0b7cff;
}

Tip

Har line ko comment mat karo. Comment tab useful hai jab code ka reason ya section purpose future me samajhna helpful ho.

1. Inline CSS

Inline CSS is written directly inside an HTML element using the style attribute.

inline.htmlHTML

<h1 style="color: blue; font-size: 36px;">
  Hello CSS
</h1>

Hinglish Explanation

Inline CSS directly ek particular element par lagta hai. Quick testing ya very small one-off case me useful ho sakta hai, lekin large website me repeated inline styles code ko messy bana dete hain.

Best practice: Normal website styling ke liye inline CSS ko default approach mat banao. Reusable styles ke liye external stylesheet zyada maintainable hoti hai.

2. Internal CSS

Internal CSS is written inside a <style> element, usually in the document <head>.

internal.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS</title>

  <style>
    body {
      background-color: #f8fafc;
    }

    h1 {
      color: #0b7cff;
    }
  </style>
</head>
<body>
  <h1>Internal CSS Example</h1>
</body>
</html>

Internal CSS affects that HTML document only.

When is it useful?

Single demo page, experiment ya small one-page example ke liye internal CSS convenient hai. Multiple pages me same design reuse karna ho to external CSS better hai.

3. External CSS

External CSS is stored in a separate .css file and connected to HTML with a <link> element.

index.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>External CSS Example</h1>
  <p>This page is styled from another file.</p>
</body>
</html>

styles.cssCSS

body {
  background-color: #f8fafc;
}

h1 {
  color: #0b7cff;
}

p {
  color: #475569;
}

Why external CSS is preferred

Ek CSS file ko multiple HTML pages ke saath connect kiya ja sakta hai. Isse design consistent rehta hai aur change ek jagah karne se multiple pages update ho sakte hain.

External CSS folder example

project structureFILES

my-website/
│
├── index.html
├── about.html
└── css/
    └── styles.css

If the CSS file is inside the css folder, connect it using the matching relative path:

HTMLLINK

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

Common bug: Agar external CSS apply nahi ho rahi, sabse pehle file name aur relative path check karo.

Inline vs internal vs external

quick comparisonGUIDE

Inline   → One element, quick one-off style
Internal → One HTML page
External → Reusable stylesheet for one or many pages

For most real websites, external CSS should be your main styling method. Internal and inline CSS still have valid use cases, but they should be chosen intentionally.

What if styles conflict?

When multiple CSS rules target the same element and property, the browser uses the cascade to decide which declaration wins. Source order, selector specificity, stylesheet origin and importance can all matter.

order.cssCSS

p {
  color: blue;
}

p {
  color: red;
}

Here both selectors have equal specificity, so the later declaration wins and the paragraph becomes red.

Do not memorize “inline always wins” as the full rule. Inline styles usually have strong author-level specificity, but the complete cascade has more rules. We will study selectors and specificity in the next chapter.

Common syntax mistakes

wrong.cssCSS

/* Wrong examples */
h1 {
  color blue;
  font-size = 30px;
}

p
  color: red;
}

correct.cssCSS

/* Correct */
h1 {
  color: blue;
  font-size: 30px;
}

p {
  color: red;
}

Property aur value ke beech : use karo, = nahi.
Declaration ko semicolon se separate karo.
Rule ke liye opening aur closing curly braces use karo.
Property names ki spelling exact rakho.
External stylesheet path correctly link karo.

Practice Task

Ek simple “CSS Methods” page banao aur teenon methods test karo.

Ek heading par inline CSS se color apply karo.
<style> element me internal CSS se page background set karo.
Ek separate external CSS file banao aur paragraph ka font size aur color style karo.
External stylesheet ko correct relative path se connect karo.
Same paragraph color ke do equal-specificity rules likho aur source order ka result observe karo.
Final version me reusable styling ko external stylesheet me move karo.