CSS Questions

1. Is CSS case-sensitive?

No, CSS itself is not case-sensitive. You can write COLOR, color, or Color—they all work. However, file names, URLs, and image paths are case-sensitive, so background-image: url(banner.PNG) is different from url(Banner.png).

2. How can I add comments in CSS?

Absolutely! Comments are written like this:

				
					/* This is a CSS comment */

They help you organize your code without affecting the output. In VS Code, just press Ctrl + / to quickly comment or uncomment lines.

3. Why is my CSS not showing up?

There could be a few reasons:

The CSS file is not properly linked in your HTML.
The file path is incorrect (double-check directory names).
CSS rules are being overridden by more specific selectors or inline styles.
Use the browser’s Inspect tool (right-click → Inspect) to debug and find what’s actually applied.

4. What's the correct order of CSS application?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

				
					JavaScript (manipulates styles) >
Inline CSS (style="") >
Internal CSS (<style> tags) >
External CSS (linked stylesheet) >
HTML default styles

5. How do I reset a CSS property to its default?

Use the initial keyword. Example:

				
					h1 {
  font-size: initial;
}

It removes custom styling and restores the default browser style for that property.

6. What are vendor prefixes like -webkit- or -moz-?

Some CSS features need special support for specific browsers. Vendor prefixes are used for that:

				
					-webkit-transform: rotate(10deg); /* For Chrome/Safari */
-moz-transform: rotate(10deg);    /* For Firefox */

7. What’s the difference between a border and an outline?

Border takes up space and can have rounded corners.
Outline does not affect layout and can’t be rounded.
Use outline mostly for accessibility (like when a button is focused).

8. What are CSS counters and how do they work?

CSS counters help in auto-numbering headings or sections dynamically.

Example:

				
					h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

This creates: Section 1., Section 2., etc. Useful for books, quizzes, or document-style layouts.

9. What is tweening in CSS?

Tweening (in-betweening) is an animation technique to create smooth transitions between two points. In CSS, we use @keyframes and transition to simulate tweening automatically—no manual effort needed!

10. Can I animate CSS without JavaScript?

Yes! CSS supports built-in animations using @keyframes, transition, and the animation shorthand. You can control everything from timing to direction—all without JS.