Chapter 1.1☕ 8 min read

CSS Basics — Selectors & Properties

Colors, fonts, selectors, specificity — the complete CSS foundation.

01What is CSS?

CSS = Cascading Style Sheets. HTML gives structure, CSS makes it beautiful. Without CSS, a web page looks like a plain text document. CSS controls colors, fonts, layout, animations — everything visual.

In real freelance projects, CSS means client-ready UI. A developer who truly knows CSS can deliver ₹50K-₹2L restaurant, portfolio, and e-commerce projects.

🍛

Real World Analogy: HTML = the raw ingredients (rice, mutton, spices). CSS = the dum cooking process that transforms those same ingredients into a perfect dish.

02CSS Selectors

CSS selector decides which HTML element gets styled. Understanding selectors = 50% of CSS done.

🏷️ Element Selector — p { } — Targets all <p> tags. Broad brush.
🎯 Class Selector — .card { } — All elements with a specific class. Reusable.
🔑 ID Selector — #hero { } — One unique element. Use only once per page.
🔗 Descendant Selector — .card p { } — Only <p> elements inside .card.
👶 Child Selector — .nav > li { } — Direct children only, not nested.
🎭 Pseudo-class — a:hover { } — Style change on mouse hover. For interactions.

/* Element selector — targets ALL paragraph elements */
p {
  color: #f97316;
  font-size: 18px;
}

/* Class selector — targets elements with class="highlight" */
.highlight {
  background: #fff7ed;
  padding: 16px;
  border-radius: 8px;
}

/* ID selector — targets element with id="hero" (use ONCE per page) */
#hero {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: white;
  padding: 80px 20px;
}

p { }Element selector — all <p> tags

.card { }Class selector — reusable, any element

#hero { }ID selector — unique, once per page

.nav li { }Descendant — any <li> inside .nav

.nav > li { }Child — direct children only

a:hover { }Pseudo-class — on mouse hover

03Specificity — Which Rule Wins?

When two CSS rules target the same element, specificity decides which one wins. This is core to CSS debugging.

Type Specificity Example

Inline style (1,0,0,0) style="color:red"

ID (0,1,0,0) #hero

Class / Attr / Pseudo-class (0,0,1,0) .card, :hover

Element / Pseudo-element (0,0,0,1) p, ::before

Specificity order: inline > ID > class > element. Same specificity? Last rule in the file wins (cascade).

04CSS Properties — Colors & Typography

The most used CSS properties — you'll use these in every single project.

/* Colors & Typography — the basics */
body {
  color: #1e293b;            /* Text color — dark slate */
  background: #f8fafc;      /* Background color — light gray */
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}

h1 {
  color: #f97316;           /* Orange heading */
  font-size: 32px;
  font-weight: 700;
}

.highlight {
  background: #fff7ed;      /* Light orange background */
  border: 2px solid #f97316;
  padding: 16px;
  border-radius: 8px;
}

colorText color — hex, rgb, hsl values

backgroundBackground color or image

font-familyFont stack — fallback fonts listed

font-sizeText size in px, rem, em, etc.

font-weightBoldness — 400 normal, 700 bold

line-heightSpace between lines — 1.6 is readable

05Exercise — CSS Editor Playground

Write CSS below and see instant preview. Experiment — nothing will break!

Open VS Code. Create css-basics.html.

Use the starter code below and experiment:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Basics Playground</title>
  <style>
    /* Try editing this CSS! */
    .box {
      color: #f97316;
      background: #fff7ed;
      font-size: 20px;
      font-weight: bold;
      padding: 24px;
      border-radius: 12px;
      text-align: center;
      font-family: Georgia, serif;
      border: 2px solid #f97316;
      box-shadow: 0 4px 20px rgba(249,115,22,0.2);
    }
    .box:hover {
      background: #f97316;
      color: white;
      transform: scale(1.02);
      transition: all 0.3s;
    }
  </style>
</head>
<body>
  <div class="box">🍛 Hello CSS! — DevInHyderabad</div>
</body>
</html>

Try these experiments:

Change color to your favorite color (try hex, rgb, hsl) Change font-family to Arial, Georgia, or monospace Add text-transform: uppercase Try different selector types — element, class, ID Check specificity — which rule wins when two target the same element?

💡

Try this: Change color to your favorite. Change font-family to Arial, Georgia, or monospace. Add text-transform: uppercase.

Done — Key Points:

✅ element selector = all elements, .class = reusable, #id = unique
✅ Specificity order: inline > ID > class > element
✅ color = text color, background = background color
✅ font-family, font-size, font-weight, line-height = typography
✅ Cascade = top to bottom, last rule wins (at same specificity)
✅ :hover, :focus, :first-child = pseudo-classes for interactions

Previous1.1 — CSS Basics 📋 All Chapters Next Chapter1.2 — Selectors & Specificity →