DEV Community

Cover image for Learn CSS Basics in 2026: Introduction, Syntax, Selectors & More (With Interview Tips)
Bikki Singh
Bikki Singh

Posted on • Originally published at codepractice.in

Learn CSS Basics in 2026: Introduction, Syntax, Selectors & More (With Interview Tips)

#css #beginners #tutorial #webdev

HTML gives your webpage a skeleton. CSS gives it a soul.

If you have been writing HTML and wondering why your pages still look like they belong in 1999, this guide is for you. We will cover CSS from the ground up — how it works, how to write it correctly, and how to talk about it confidently in a technical interview.

Let's get into it.

🎨 What Is CSS and Why Does It Matter?

CSS stands for Cascading Style Sheets. The "Cascading" part is important — it refers to the order of priority the browser uses when multiple rules apply to the same element. Understanding the cascade is what separates someone who "knows some CSS" from someone who actually debugs it efficiently.

Without CSS, the web is black-and-white text and blue underlined links. With CSS, you control:

  • Colors, fonts, and spacing
  • Layouts (grids, flexbox, columns)
  • Animations and transitions
  • Responsive behavior across screen sizes

💡 Interview tip: If asked "why CSS instead of HTML attributes for styling?", say this — "Separation of concerns and scalability. One CSS file can control the look of a thousand pages. Change it once, update everywhere." That answer lands.

📐 CSS Syntax: The Grammar You Cannot Skip

Every CSS rule follows the same structure:

selector {
  property: value;
}
Enter fullscreen mode Exit fullscreen mode
  • Selector — which HTML element to target
  • Property — what you want to change (color, font-size, margin)
  • Value — what to change it to (red, 16px, auto)

Here is a real example — styling an h1 for a portfolio page:

h1 {
  color: #2c3e50;
  font-size: 36px;
  text-align: center;
  text-transform: uppercase;
}
Enter fullscreen mode Exit fullscreen mode

Clean, readable, and professional.

Common mistake: forgetting the semicolon ; at the end of each declaration. Miss one, and the property below it may also stop working silently. Always double-check.

🎯 CSS Selectors: Target Exactly What You Want

This is where the real logic lives. Selectors tell the browser which elements to style.

The four you must know:

1. Element Selector

p {
  line-height: 1.6;
}
Enter fullscreen mode Exit fullscreen mode

Targets every <p> on the page. Useful for global defaults.

2. Class Selector (.)

.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}
Enter fullscreen mode Exit fullscreen mode

Apply the same class to multiple elements. This is your most-used selector in real projects.

3. ID Selector (#)

#featured {
  border: 2px solid gold;
}
Enter fullscreen mode Exit fullscreen mode

Targets one unique element. Use sparingly.

4. Descendant Selector

nav a {
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

Only targets <a> tags that live inside <nav>. Great for scoping styles.

⚠️ CSS Specificity — The Rule That Governs Conflicts

When two rules target the same element, specificity decides which one wins.

The hierarchy (low → high):

Element < Class < ID < Inline Style
Enter fullscreen mode Exit fullscreen mode

So if a paragraph has:

  • A class saying color: blue
  • An ID saying color: red

It will be red. The ID wins.

This is one of the most common interview and viva questions. Know it cold.

🔗 Three Ways to Add CSS to HTML 

<!-- 1. External CSS (Best for real projects) -->
<link rel="stylesheet" href="style.css">

<!-- 2. Internal CSS (Good for single pages) -->
<style>
  body { background: #f9f9f9; }
</style>

<!-- 3. Inline CSS (Emergency use only) -->
<p style="color: red;">This is inline.</p>
Enter fullscreen mode Exit fullscreen mode
Method Use Case Maintainability
External All real projects ✅ Best
Internal Single-page or email ⚠️ Moderate
Inline JS-driven or quick fixes ❌ Avoid

Debugging tip: If your CSS is not loading, the culprit is almost always the file path. If your stylesheet is inside an assets/ folder, the link must be href="assets/style.css" — not just href="style.css".

💬 CSS Comments: Write Code Your Future Self Will Thank You For 

/* ================================
   Navigation Styles
   Updated: June 2026
   ================================ */
.nav-menu {
  display: flex;
  gap: 16px;
}

/* Hiding mobile menu by default */
.nav-toggle { display: none; }
Enter fullscreen mode Exit fullscreen mode

Comments seem trivial until you open a 600-line CSS file three months later and have no idea what anything does.

Three practical uses:

  1. Section headers — break the file into logical chunks
  2. Explaining hacks — document why you used a specific z-index or browser fix
  3. Debugging toggle — comment out a block to isolate a bug without deleting code

When your code is reviewed during a placement drive or PR review, clear comments are a visible signal of professionalism.

🧠 5 CSS Interview Questions You Should Nail

These appear regularly in frontend technical rounds:

Q1: Difference between display: none and visibility: hidden?
display: none removes the element from the layout entirely. visibility: hidden hides it but keeps the space it occupied.

Q2: What is the CSS Box Model?
Every element is a box: Content → Padding → Border → Margin. Understanding this is essential for layout work.

Q3: How do you centre a div horizontally?

.container {
  width: 800px;
  margin: 0 auto;
}
/* Or with Flexbox: */
.parent {
  display: flex;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Q4: Explain CSS Specificity.
The scoring system that resolves style conflicts. Element = 1 point, Class = 10 points, ID = 100 points, Inline = 1000 points. Highest score wins.

Q5: Can one HTML element have multiple classes?
Yes.

<div class="card shadow large featured">...</div>
Enter fullscreen mode Exit fullscreen mode

Each class adds its own styles. This is the foundation of utility-first CSS frameworks like Tailwind.

✅ Quick Recap

Concept Key Takeaway
CSS Purpose Separates design from content; controls the visual layer
Syntax selector { property: value; } — always end with ;
Selectors Element, Class, ID, Descendant — know their specificity
Implementation External > Internal > Inline for real projects
Comments /* comment */ — use them for sections and debugging

🚀 What to Do Next

  1. Open VS Code, create index.html and style.css, and build a simple "About Me" card
  2. Practice each selector type — write them, don't just read them
  3. Revisit the five interview questions above until the answers feel automatic

For the complete in-depth guide with code examples, interactive quizzes, and topic-by-topic breakdowns, check out the full article on CodePractice 👇

🔗 Learn CSS Basics: The Complete 2026 Roadmap

Have a CSS question or a specificity nightmare you survived? Drop it in the comments — let's debug it together. 👇

Top comments (0)