DEV Community: Priyanshu

CSS Interview Questions

Priyanshu — Sun, 20 Mar 2022 15:10:58 +0000

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, but you can feel more confident if you have known to some of those type of questions.

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 common padding: 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, and border-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.

Create Your Word Portrait using CSS

Priyanshu — Mon, 07 Feb 2022 04:42:46 +0000

In this article, I'll introduce you with the background-clip property of CSS, with the help of which, we will make our Word portrait. Even if you are a beginner at CSS and HTML, you'll be able to do that. 😃

You might have seen a word portrait? ofcourse yes! But if I ask you that, have you ever created Your word portrait by yourself using CSS? Might not! But don't be worry about that, this article is for you, and by the end of this article, you will be able to create one for yourself. 💻

Prerequisites

Before we get started, I recommend that you have these prerequisites to follow along with this article:

Very Basic HTML Knowledge
Basic CSS knowledge
Code Editing Software (or an account on Codepen.io)

Introduction

If I say that it's only 2 lines of code to create a portrait using CSS. You might think, I'm kidding you! 😅, but no, actually I'm not. You can indeed create a word portrait using CSS with only a few lines of code only, and this could be made possible by the background-clip property. Before we go, we first need to know about the background-clip property in CSS.

What is the `background-clip` property in CSS? What does it use for ??

In CSS, the background-clip property is used to add/clip Images, GIFs, Gradients, etc as a background of different content-boxes, elements including text. This property can be used for creating clip text, about which we will talk later in this article.

what can be the values of the `background-clip` property?

Let's have a look at the following flow-chart which shows the implementations of the background-clip property, that how background-clip works in different scenarios.

Including `text`, we have these values for the `background-clip` property: 👇👇

border-box is the default value. This allows the background to extend all the ways to the outside edges of the element's border.
padding-box clips the background to the outside edge of the padding region.
content-box clips the background to the outside edge of the element's content region.
initial sets the property to its initial/default value.
inherit applies the background-clip setting of the parent to the selected element.
text is used for adding a background clip to the text.

That was the theory part you need to know to get started, Let's now understand it better with the help of the following code example:

HTML Code:

<div class="container-fluid">
  <p class="border-box"> border-box extends background behind the borders</p>
  <p class="padding-box">padding-box clips the background till border</p>
  <p class="content-box"> content-box clips the background till padding area</p>
  <p class="text"> background is clipped to text</p>
</div>

CSS Style: This is how the background-clip property is implemented.

p {
  font-size: 2rem;
  border: 0.5rem dashed;
  padding: 2rem;
  color: #d00000;
  text-align: center;
  background-image: url('https://images.unsplash.com/photo-1642444525640-d3eb287ed389?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NDEyOTE3Nw&ixlib=rb-1.2.1&q=80&w=400');
}
/* default --> border-box */
.border-box {
  background-clip: border-box;
}
/* Padding-box */
.padding-box { 
  background-clip: padding-box;
}
/* content-box */
.content-box { 
  background-clip: content-box;
}
/* text */
.text {
  font-weight: bold;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Output:

This is how the background-clip property works in CSS. It clips this background to different boxes of an element as we have seen in the above example.

Animated Clip-Text

The above was the simple implementation of the background-clip property, but more interestingly, we can create an Animated clip-text by the use of this background-clip property, without using any animation property.

Here is how: You know what, for me, this was the best use case of this property when I discovered it accidentally. ☺️

HTML Code:

  <div class="clip-text">
    @Kumar_Sons_off
  </div>

CSS Code: You need the following CSS code for creating an animated-clip text.

.clip-text {
  /* You need a URL for a Gif */
  background: url(http://i.giphy.com/fsULJFFGv8X3G.gif);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;

  color: transparent; 
  // set to transparent, otherwise you won't see.

  width: 300px;
  height: 100px;
  box-sizing: border-box;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  flex-shrink: 0;
}

Output: This is how it looks.

Note: The background-clip: text property does not support many old browsers, So I created a GIF and added it here for the above output. But you can have the live codepen view from this CodePen link.

That was a lot much for the background-clip property for you to know, but let's have one more implementation or use case of this property.

CSS Word Portrait

I thought this is the most awaited part of this article. Finally, now, we are known enough to the background-clip property to create a word portrait. For that:

First of all, you need to have your photo with a plain background (for a better look) or it would be more better if it is with no background. You can use certain tools to remove background like remove.bg and all.
Code a Paragraph with the HTML of your wish. (don't forget to link the CSS file if you are using something other than codepen.io)
Use the CSS background-clip property and set its value to text like the following, and you need a direct link for your image if you are using Codepen.io. For that, you can use certain tools like postimages.org, or any other of your choice.

body {
  background-color: #000000;
}
/* adjust font accordingly */
p {
  background: url("https://i.postimg.cc/2jhGPtDJ/profile-pic-resized.png");
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 0.5rem;
  background-size: cover;
}

Output:

Here is the view of the most awaited output of this article.

As I mentioned before, the background-clip: text property is not supported in many versions of browsers that are still in use, so I've added an image here instead of the codepen live view. Yup, but you can see its live view from this CodePen. 😉

That's all you need to know about the background-clip property in CSS.

Conclusion

We have covered all one need to know about background-clip property.
I hope you find it useful. If yes, then let me know in the comments below, and consider sharing it with your friends.
I would love to see if you have tried creating your portrait, feel free to drop a link to your Portrait codepen below.
Also, You can Join me on Twitter 🐦, where I tweet more frequently about Tips and Resources for web developers.
Thanks for Reading.

You can extend your Support by Buying me a coffee here.🌴

Last updated on: 07/02/2022.

DEV Community: Priyanshu

CSS Interview Questions

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

Create Your Word Portrait using CSS

Prerequisites

Introduction

What is the background-clip property in CSS? What does it use for ??

what can be the values of the background-clip property?

Including text, we have these values for the background-clip property: 👇👇

Animated Clip-Text

CSS Word Portrait

Conclusion

What is the `background-clip` property in CSS? What does it use for ??

what can be the values of the `background-clip` property?

Including `text`, we have these values for the `background-clip` property: 👇👇