Table of contents
- Here is the list of the most frequently asked CSS interview questions
- What are the advantages of using CSS?
- What do you know about CSS sprites?
- What is Box Model in CSS? Which properties are a part of it?
- What are the limitations of using CSS?
- What are CSS preprocessors? What are Sass, Less, and Stylus? Why do people use them?
- Is it important to test the webpage in different browsers?
- What is viewport height and viewport width in CSS?
- Difference between reset vs normalize CSS? How do they differ?
- Conclusion
Hey Readers, hope you all are good and doing great. In today's world of tech, it's not easy to land a job while it's impossible to know answers to all questions that an interviewer may ask you.
People have no idea of what kind of questions should they expect when they apply for a Job. ๐คทโโ๏ธ In this article, I'll be sharing some frequently asked CSS questions. These are the ones that are asked in different interviews from many different developers and programmers at different levels. ๐
Before we go, I let you remind that Cascading Stylesheet Sheet is a stylesheet language that determines how the elements and content should look on the page. CSS is used to develop a consistent look and feel to the webpage. ๐
Here is the list of the most frequently asked CSS interview questions
What are the advantages of using CSS?
The main advantages of using CSS are the following:
- CSS provides a way to present the same content in multiple presentations formats on mobile, desktop, or laptop.
- Used effectively, the style sheet will be stored in the browser cache and they can be used on multiple pages, without having to download again.
- CSS is built effectively such that it can be used to change the look and feel completely by making small changes. To make a global change, simply change the style, and all elements in all web pages will be automatically updated.
What do you know about CSS sprites?
A sprite is a collection of many images put into a single image file to be used in a webpage, these are used because a webpage with too many images may take too long to load as it generates several server requests.
Using image sprites we can reduce the number of server requests and save bandwidth.
What is Box Model in CSS? Which properties are a part of it?
This is the most basic and most frequent question asked multiple times in multiple interviews, you should know.
CSS draws boxes during the layout process. Everything in CSS has a box around it, this is known as the box model. Each box is made up of four areas which are content
, padding
, border
, margin
.
This is how a box model looks like:
- ๐๐ผ๐ป๐๐ฒ๐ป๐: The content area contains just that: the content! For example: a text element's content area would be the
text content
. - ๐ฃ๐ฎ๐ฑ๐ฑ๐ถ๐ป๐ด: Padding area is the amount of empty space between its content and its border. This can be changed just by changing the element's padding, using the
padding-left
,padding-right
,padding-top
,padding-bottom
properties or by using the shorthand property which is more commonpadding: top, right, bottom, left
in their respective units) - ๐๐ผ๐ฟ๐ฑ๐ฒ๐ฟ: Area surrounding the padding. We can change an elementโs border using the
border-width
,border-style
, andborder-color
properties, or the shorthand property border. - ๐ ๐ฎ๐ฟ๐ด๐ถ๐ป: This is the outermost area of the box model. Similar to the others, we can also change the margin size.
What are the limitations of using CSS?
Main Disadvantages with CSS are:
- ๐๐ฟ๐ผ๐๐๐ฒ๐ฟ ๐ฐ๐ผ๐บ๐ฝ๐ฎ๐๐ถ๐ฏ๐ถ๐น๐ถ๐๐ ๐ถ๐๐๐๐ฒ๐ - Some style selectors are not supported in many old browsers. We have to determine whether the style we are using is supported or not using the
@support
selector. - ๐ก๐ผ ๐ฝ๐ฎ๐ฟ๐ฒ๐ป๐ ๐๐ฒ๐น๐ฒ๐ฐ๐๐ผ๐ฟ - Currently using CSS, you can't select a parent.
- ๐๐ฟ๐ผ๐๐ ๐๐ฟ๐ผ๐๐๐ฒ๐ฟ ๐ถ๐๐๐๐ฒ๐ - Some of the selectors behave differently in different browsers.
What are CSS preprocessors? What are Sass, Less, and Stylus? Why do people use them?
CSS preprocessors are the tools that help us to extend the basic functionality of the default CSS through their own scripting language. This helps us to use complex logic syntax like - functions, mixins, code nesting, inheritance to name a few in your default vanilla CSS.
SASS stands for Syntactically Awesome Style Sheet. SASS can be written in two different syntaxes using SASS or SCSS.
SASS Syntax:
$font-color: #ffe41e
$bg-color: #00f
#box
color: $font-color
background: $bg-color
SCSS Syntax
$font-color: #ffe41e;
$bg-color: #fcba03;
#box{
color: $font-color;
background: $bg-color;
}
- ๐ฆ๐๐ฆ๐ฆ uses
.sass
while ๐ฆ๐๐ฆ๐ฆ uses.scss
extension. - ๐ฆ๐๐ฆ๐ฆ doesn't use curly braces or semicolons while ๐ฆ๐๐ฆ๐ฆ uses these, just like CSS.
๐๐๐ฆ๐ฆ: less stands for Leaner Stylesheets. LESS is easy to add to any JavaScript project by using NPM or less.js file. This file uses .less
extension.
๐๐๐ฆ๐ฆ syntaxis the same as the SCSS with some exceptions. LESS uses @
to define the variable.
@font-color: #ffe41e;
@bg-color: #fcba03
#box{
color: @font-color;
background: @bg-color;
}
Stylus: Stylus offers a great flexibility in writing syntax, supports native CSS as well as allows omission of brackets, colons, and semicolons. It doesnโt use @
or $
for defining variables.
/* STYLUS SYNTAX WRITTEN LIKE NATIVE CSS */
font-color= #ffe41e;
bg-color = #fcba03;
#box {
color: font-color;
background: bg-color;
}
/* OR */
/* STYLUS SYNTAX WITHOUT CURLY BRACES */
font-color= #ffe41e;
bg-color = #fcba03;
#box
color: font-color;
background: bg-color;
Is it important to test the webpage in different browsers?
It's most important to test a website in different browsers when you're first designing it, or making major changes.
However, it's also important to repeat these tests periodically, since browsers go through a lot of updates and changes, and we know that some of the CSS properties do not support in many browsers.
What is viewport height and viewport width in CSS?
It's used to measure the height and width in percentage concerning the viewport.
If the height of the browser is equal to 1000px, 1vh is equal to 10px, similar for the width.
Difference between reset vs normalize CSS? How do they differ?
๐ฅ๐ฒ๐๐ฒ๐ ๐๐ฆ๐ฆ - CSS reset aims to remove all built-in browser styling. For example, paddings
, margin
, font-size
of all elements back to the same.
๐ก๐ผ๐ฟ๐ป๐ฎ๐น๐ถ๐๐ฒ ๐๐ฆ๐ฆ - aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies.
โ You can also modify answers as per your convenience, it's not recommended to cram these ones. Also, this article does not claim that you will find the exact same questions in your interview.
It's totally ok to feel stressed in interviews and everyone does, but just be yourself, you will gonna make it.
Also, a more important thing is that there is no one who knows all the answers and all frameworks of a language. So don't be shy to say no about the thing you don't know. This will not take your image down, but if you try to frame something that you don't know about, then there is a possibility that the interviewer will caught you. ๐ I'm saying again....just be yourself.
Ok! It's wrap-up time, that's pretty much for this blog. I'm getting late for an important meeting, see you in the next one.
Conclusion
- We have covered some of the frequently asked interview questions.
- If you find this useful, then please let me know in the comments below, and consider sharing it with your audience.
- More blogs related to this are about to come, follow Priyanshu to stay tuned. ๐
- Also, You can Join me on ๐ฆ Twitter, where I tweet more frequently about Tips and Resources for web developers.
- Good luck for your interview. ๐
- Thanks for Reading. ๐
You can extend your Support by Buying me a coffee here.๐ด
Published on: 03/20/2022.