CSS Questions

Questions

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 eg: image.png and Image.png are not the same.

 

2. Can I add comments in the Stylesheet too?

Ans. Yes, the comments can be added to the stylesheet too. For VS code or modern editors, type ctrl+/ to add the comments if the style sheet 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 doesn’t render despite the right usage of the rules?

Ans. There can two reasons for that: One you haven’t linked CSS properly or the path and directory isn’t 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 understand better 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. Output of this code make things more clear to you.

Read more