1. Are Style Sheets case-sensitive?

Ans. No, style sheets are case-insensitive. But the content which is case-sensitive in HTML is case-insensitive in CSS too. However, the URLs and image directories can be case-sensitive. For example: image.png and Image.png are not the same.

2. Can I add comments in the Stylesheet too?

Ans. Yes, comments can be added to the stylesheet too. For VS Code or modern editors, type ctrl+/ to add comments if the stylesheet is linked externally.

3. What is the order of precedence of CSS, HTML, and JavaScript?

Ans. The order of precedence is JavaScript > Inline CSS > Internal CSS > External CSS > HTML.

4. Why does my CSS not render despite the right usage of the rules?

Ans. There can be two reasons for that: One, you haven’t linked CSS properly or the path and directory aren’t in the same folder in case of absolute declaration. For that, it is advised to use the complete path, so that you can access it in any folder without hassle.

The second reason could be the overriding of rules. Right-click your browser and open the inspection tool to better understand how the element is behaving.

5. How to add default styling to an element explicitly?

Ans. The keyword “initial” resets the CSS property to the default value.

6. What are web-kit style rules?

Ans. In some browsers, the rules of CSS aren’t supported implicitly. These extensions add CSS support rules to the browser and are mostly seen in the case of Safari.

7. What is tweening in animation?

Ans. Tweening stands for in-betweening and is a process to add an illusion of a frame between two rendering frames. It makes the animation smoother, but it isn’t much in use in CSS3 as the inbuilt CSS and keyframes are enough to smoothen the animation.

8. What are CSS counters?

Ans. CSS counters help to add automatic counting to the section of our website.

Syntax:

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

Counter reset marks the start of the counting and h1 and h2 are subsections of the same. The output of this code makes things clearer to you.