Interview Questions

Hello guys.

Welcome to our CSS series.

Till our last segment, we learned all that we can learn about CSS, the different points that are there, different CSS properties with all the CSS values we had covered.

So, today's segment is CSS interview questions.

I request if you're coming on this segment, our further segments related to learning CSS, different properties of CSS, what is CSS, etc.

You first finish those and only after that you come to CSS interview questions.

If you have successfully understood all our CSS segments, only after that, you can come to our interview questions which require deeper knowledge, that will be easy for you to understand.

So, I will request you to finish our CSS course.

And only after that take the CSS Interview Questions segment.

Before we move ahead with our CSS Interview Questions segment, I would like to tell you that all the interview questions that have been taken in today's segment, all these interview questions are important on a fresher level.

If you are a college pass out or if you have just done a certification course in CSS.

You want to go ahead with web development so in today's segment’s questions are the most basic and common questions, which come in the interview at a fresher level.

If you go on an experienced level, there are few questions in these which are moderate.

Which can come to a fresher as well as an experienced person.

So, today's segment is designed in that way.

Fresher and partially experienced level questions can be included in this.

There are possibilities that few questions could be outside of this.

If you're appearing for an interview, there are chances that those questions might not be there but those questions are based on practical exposure.

For that if you have done our CSS course, that will be very beneficial for you.

We will start with our today's Interview Questions segment.

In today's segment, the first question is what is CSS, if you're appearing for an interview for CSS, there are high chances of you getting this question.

What is CSS, we know that CSS is a stylesheet.

Stylesheet with the help of which we can give style and design to our web page or HTML program.

Like it is written here in the answer.

CSS stands for Cascading Style Sheets.

Always if you're asked in short form.

What is CSS?

You start by giving its full form.

CSS stands for Cascading Style Sheets.

After that, you can go ahead with it like, who has designed it?

 It has been designed by World Wide Web Consortium and why has it been designed?

To give style to the web pages.

It's a very simple question for the day.

What is CSS?

Our second question is.

What are the major versions of CSS?

Means till today the CSS that has been included, different CSS that has come into the market.

What are the versions of it?

We know that currently we use CSS 3 but prior to that which CSS were there and after that, if any new one has been included which we are not aware of.

So, which one is that?

So, the answer for this is CSS one came first.

CSS two came after that CSS 2.1 came after that with other changes.

And finally, the one that we use is CSS 3.

But CSS 4 is also available, which is exactly like CSS 3 with newer features.

So, the ones that are shown here are the major versions of CSS.

Next question is what are the different ways you could integrate CSS into your HTML page.

You have to tell different ways of CSS through which you can include it in the HTML page.

Normally, we know that we can make external CSS, external CSS files and we can include that in our web page.

We can even write one internal CSS in our head tag or style tag or in every element we can also add inline CSS.

So, in total, we have three ways, like it is written here.

You can integrate your style using the style tags in the head section.

Head section means the internal one.

You can integrate your style using inline means in every element, or you can write your CSS in a separate file, meaning you can write in style.CSS and add it to your HTML page.

You can even add it to your HTML page.

Our next question is what are the advantages of using CSS?

Even this is a very common question.

Why do we use CSS?

Usually, in the interview, it is asked in a way, let's say if I'm using CSS.

What is the need for me to use CSS?

Why do I have to use CSS?

Its answer is the same.

We have got CSS advantages.

Here they have mentioned three advantages.

First, the style of several documents can be controlled from a single site by using them means we can control a lot of documents using one document.

Means write one CSS document and add it to different web pages.

You can give the same style to each one of them through one page.

In one style.CSS, you can write CSS.

And you can design every web page accordingly.

So, this is one advantage.

The second advantage is that multiple HTML elements can have many documents where classes can be created.

Means we have more than one web page available, HTML pages.

So, in each one of them we can write one class to design and that class we will write in our CSS file.

We will write the CSS code in one place and all my elements, where all the classes have been added, will be designed.

To group styles in complex situations, selectors and grouping methods are used.

Means through CSS we get grouping methods available.

We get different selectors available, like Id, class, the universal selector, group selector etc.

So, we get different selectors through CSS means you want to give the same style to any two elements.

So, you can group them both together and write style CSS there.

If you don't use CSS then you have to write the same thing in both the elements individually.

So, to avoid this thing, what we do is we make use of CSS.

So, what does CSS give us?

It provides us with selectors and grouping.

Our next question is if we have advantages of CSS, we even have disadvantages of it.

In which all things the CSS doesn't work.

So, what are the advantages of CSS?

So, there are a few disadvantages of using CSS.

Like ascending by selectors is not possible means if with the help of selectors, we want to perform ascending operations that we cannot do.

For example, ascending descending.

Limitations of vertical control means usually what happens in CSS, if I have a class with me and I have written it on top then I define the same class again in the same style sheet file.

Then what happens in my first class will not be applicable.

On the contrary, my second class values will be applicable.

So, what is happening here is as and when we are coming down, if any code is written on the top, and again, I'm writing it down.

So, my second code overwrites the first one.

So, here we cannot control this thing.

As and when we come down vertically, in the same way the CSS will be applied.

So, the second point is that the limitations of vertical control means we cannot control the vertical code execution.

So, this becomes our limitation.

Third is no expressions.

We do not have expressions available with us.

We have got object-oriented programming, like JavaScript and Angular or CC++.

In that we have got expressions like a+b, c+d in which there are variables like a, b, etc.

So, like this, we cannot work with any of the variables in CSS.

So, CSS doesn't support expressions.

No column declaration means in CSS the columns are not declared.

You have to combine HTML and CSS and only then generate.

Pseudo class not controlled by dynamic behavior means hover, activate, deactivate, etc.

which are the pseudo classes.

These you cannot control dynamically; you have to define it mandatorily.

Rules, styles, targeting specific tests not possible.

Rules means our keyframe or media which we had used through our course and styling that we had provided.

Targeting means targeting some specific element, etc.

is not possible through text.

We will go ahead with our questions.

What is the difference between the usage of an ID and a class?

This is a very common question whenever you apply for an interview at that time ID and class difference is asked a lot of times.

Even now, if I appear for any of the interviews, I get this question even today.

As this is a very common question in CSS.

So, the difference between ID and class.

The first and the main difference is that in CSS, ID is used for unique identification.

If you want to define one specific element there you can use the ID.

Where does the class come in use?

If you want to select more than one element, and you want to provide them with the same styling, there you can make use of class.

So in id, id is unique.

A particular ID can be only assigned to a single element.

You can give the Id only to one element.

IDs are used when specific styling is being tried to be achieved over a single element.

This means that if you want to give styling to one element, you can assign the ID over there.

What is there in class?

Class is a collective way of targeting HTML elements for styling.

Means if you want to style more than one element, you can make use of class.

Classes are not unique and multiple elements can have the same class.

More than one element can have the same class.

In fact, multiple classes can also be added to the same element to achieve the desired style and look.

Means to more than one class also you can give the same element.

Means In short, if you see the conclusion, id can be given only to one element.

Classes, we can give to more than one element.

Our next question is to name a few prominent CSS frameworks?

Which all are the frameworks available in the market which you can use?

This question is an experienced level one.

If you're a fresher even then you can get it but there is a more possibility of an experienced person getting this question.

The answer for this is in the market, Bootstrap Foundation, Semantic UI and UI kit.

These four are such frameworks which we see usually being used by the people in the market.

Bootstrap is the most popular and highly popular and useful framework of CSS.

Even we are going to make a Bootstrap course.

If you want to go ahead in web development, I request that you take our Learnvern's Bootstrap course, so that you can get more powerful in CSS.

As the companies prefer the people who have basic knowledge and along with that they have worked on some or the other framework.

For example, if you know JavaScript, the frameworks of JavaScript, like React, Angular, view, even those you must know.

In the same way if you're working in CSS, you should at least know one framework of CSS.

So usually Bootstrap is the most popular one.

We will also conduct the same course.

So, I request you to learn the Bootstrap course, along with us.

So, here the available frameworks of CSS are Bootstrap, Foundation, Semantic UI and UI kit.

Next, we will move ahead with our questions.

What are the ways to assign a certain color to an element in CSS?

What are the different ways of assigning a particular color to one element?

It’s answer is we can normally give color in three different ways. For example, we can give it in hexadecimal notation.

In our CSS segment on colors, CSS colors.

we have deeply understood all these points in it.

How do different colors work, what is the logic behind them?

Like in hexadecimal notation, we use the hashtag and then in six digit we provide the color like 000000 then FFFFFF, in which first two-digit red, the next two-digit blue…sorry, first two red, second two green, and last two blue, it indicates.

Second is our RGB functional notation.

In which after RGB in parenthesis.

We write the count of all three colors, which is in between zero to 255.

Then comes HSL, hue, saturation, luminous, with help of which we can mostly generate light colors.

Which works on hue, saturation and how much light is required.

So, these are the three ways of defining the color.

You can see the detailed explanation on these three in our segment of CSS colors.

Next question is, explain the CSS box model and its different elements?

Even this question is of an experienced level.

It will come to a fresher as well as an experienced person.

The box model of CSS is that in the box model the most internal portion, that is our content portion.

The portion outside of it that is the padding portion.

The portion outside of it is the border portion and outside of it is our margin.

If you're considering any element of CSS, the HTML element.

For example, we have taken the h1 tag.

Now I'm writing some content inside the h1 tag.

Hi Learnvern.

So, this is my content.

Hi Learnvern is my content.

So, this is my content.

Now I will give padding to this content, so that my content gives some space internally.

So, this is my padding portion.

Now I will assign the border to my content.

Let's say I give a five-pixel border.

If my border is this thick.

So, this is my border portion.

After the border I want that my h1 should be on a little bit of margin from both the sides.

So, this is our CSS box model.

Every model works on a box element, in which there are a total 4 things, content, padding, border and margin.

Our next question is what is the z index in CSS?.

What is the Z index actually?

This we have seen in detail.

We had covered it in detail in CSS’s Z index.

So, I request it if you want to learn more about it, you watch the segment on Z indexed from the CSS course.

Now, what is that Z index?

Like we know when we identify anything in stack means if you're writing something one upon the other or if you're placing the elements one upon the other.

So, which element will we see in the front view?

If I am keeping one element here, then in front of it, one element, the other element, then one more element.

If I'm keeping five, six elements, one behind the other.

So which element I will see in the front view completely.

That we will define with the help of Z index.

Z index’s value can be from zero to any positive number.

It can also be a negative number.

The element which will have the highest Z index value, that we will see foremost in the stack.

Which will be the lowest, maybe we might see it or maybe we might not see it or we can see it less or partially.

So, this was the Z index.

Then comes what pseudo elements are in CSS.

Even though this is an advanced level question, when we come to the expert or experienced level, this question gets asked.

What is a pseudo element?

Even this we have seen in the CSS’s pseudo elements segment.

Pseudo elements, normally, like it is written here, is a key word added to a selector that lets you style a specific part of the selected elements.

Our element's particular selected part only is styled with the help of pseudo elements.

Like if I want to design the first letter of the line, so I will use first letter.

If I want to design only the first line, I will use the first line.

Adding elements to the markup combined with content.

Means we can use before and after as well.

Then comes how you will target an element that is element one and element two with the same styling?

Means I have two elements, element one and element two.

I want to give the same styling to both the elements.

So how can I do this?

Very simple.

Put a comma between both elements and give it a CSS.

Like it is written here, element one comma element two.

And this is my CSS, property value.

With this we can give the same style to both the elements.

Then our question is, what are the different modules used in the current version of CSS?

The current version of CSS, which is our three and four mostly four.

 In that which module can we use?

So, in CSS four we use Selectors, Box Model, the question which we have just seen before, backgrounds and borders can be used, text effects can be used, 2d 3d transformation can be used, we can use animations, multiple column layout we use and we use user interfaces.

All these things we have covered in our course through individual segments.

If there is anything that you cannot understand from these, you can go into our CSS course and learn it.

Next question is what are the different media types allowed by CSS?

Which all are the media types the CSS allows?

So, in the media we allow all types.

First is for all media types.

We allow print, media print means when we want to print anything, @media print we can put and print it.

With @media speech, we can record speech.

If you work with the screen reader, if you want to pronounce whatever is written on the page, aloud.

You must be knowing, there are some words in Google which are difficult to pronounce.

So, at the side, we see a screen reader’s option, clicking on that, if you have an attached speaker, if you have a phone and you click on it, the phone has an inbuilt speaker.

So, you can hear the pronunciation of that word.

If on the webpage, you want to read out something, you want to make a speech out.

For that speech is used.

Then comes screen, @media screen.

This we have used in our responsive web designing segment in which we had learned media queries, in which at media only screen.

With it’s help on different screens how will my particular page look?

This we can see.

Our next question is what is responsive web design? (repeat)

This is what we had seen in our segment when we designed a web page in such a way that how it will look on our desktop, same content, how it will look on the laptop, after laptop how it will look on the tablet and on phone.

Means on different devices my web pages should be visible but properly.

We call that Responsive Web Design.

Responsive Design is an approach to web page creation that makes use of flexible layouts, flexible images, and cascading style sheet media queries.

Means we must use such a layout, with the help of which our layout looks flexible, images also look flexible and our style sheet also looks proper.

Usually what is the goal of responsive design?

Making such screens, making such web pages which vary according to our screen sizes.

Then comes what is the difference between visibility hidden and display none.

Even if this is our experienced level question, even today if any experienced level person is appearing for an interview, this question is asked to him: what is the difference between display none and visibility hidden?

So, what is the difference in display none?

When we use display none, at that time the element which is there, that element is also not visible to us and its space is also not occupied.

But what happens in visibility hidden?

We will not be able to see the element but its space is occupied over there.

So, this is the difference over here.

display none removes the element and also, it's related space.

Visibility hidden only removes the element but the space is there as it is.

Okay here display none means that the tag in question will not appear on the page at all.

Although you can still interact with it through the DOM.

That is fine.

There will be no space allocated means the space also will not be allocated.

Whereas what is there in visibility hidden?

The tag will also be not visible but the tag is rendered, it just isn't seen on the web page.

Means the tag will be rendered.

It will not be visible but it will not be seen on the screen.

But the tag will be rendered there.

Means in display none tag will not be rendered means the element is not there.

In visibility hidden the tag will be rendered.

The element is over there.

But it will not be visible.

Then comes to explain the concept of specificity in CSS.

In CSS what is a specificity?

Specificity means our hierarchy in which way we give style to our elements.

Like we know highest specificity is of an ID, on second level it is of a class then of the element.

So, this is our specificity, if anyone asks what is the concept of specificity.

So, the concept is specificity means by which browser decides which CSS property values are the most relevant to an element.

Means to our elements if more than one CSS properties have been applied, so the browser will decide which CSS property has to be applied.

It means if I have given id and class to one division.

So, which CSS property will be applied?

So, definitely the ID one will be applied because the specificity of an ID is more than the class specificity.

Our next question is what is CSS Flexbox?

Again, even this is an experienced level question.

Understanding flex box is a little tricky.

Answering this can also be slightly tricky.

It depends on which way you've been asked this question.

If you're experienced, even then, answering about Flexbox can be difficult because in CSS four Flexbox have been included.

In CSS three, but it is used differently.

Flexbox theoretical answers can be given in this way.

The Flexbox layout officially called CSS flexible box layout module is a new layout module in CSS three.

It is made to improve the items align, directions and order in the container, even when they are with dynamic or even unknown size.

If more than one element is of an unknown size, and they are dynamic but still how to align all of them, how to give them directions left, right, etc.

and in which order we have to place them?

How can this happen easily?

With the help of CSS Flexbox property?

The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space.

Means with the help of flex what happens is if I have an element, and I'm not defining anything to it, it will sit on my leftmost corner.

Means this corner which is right here.

Here my element will be placed.

If I want that I should place more than one element.

Then in this corner, the second one then third one, in this way it will start placing itself.

Now I want the rest of the space that is there, even that should be properly occupied. What can I do about that?

I will place CSS’s flex property properly so that the content can be justified, the space can be justified.

Every space should be properly occupied.

Means between every element there should be proper space and around the element also there should be proper space.

Means in padding and margin, this space should be properly differentiated.

Even when we have taken the segmental on CSS flex property, in that we have given a detailed level description.

How do we work with this flex property?

So, this is our question.

How does Flexbox work?

This works with space, the space is properly occupied between every element and in it’s surrounding.

Next question is what are vendor prefixes?

Even this is a fresher plus experienced level question that, what is vendor prefixes?

When you had done our CSS course, you must have seen that in some of the CSS properties we had used hyphen, Web Kit hyphen, these keywords we had used.

 Then in some places we had used hyphen O and, in some places, we had used hyphen M O Z, moz.

So, what are these three things?

These three are our vendor prefixes.

What is the vendor prefix?

If any CSS property doesn't run from a normal syntax in our browser then we add the vendor's prefix to it, so that our CSS property gets to properly run and work in our so and so browser.

So, these are our vendor prefixes.

Like WebKit, this is common to all the browsers, Chrome,  Safari, new version of Opera and all iOS browsers.

From all these if we have used WebKit.

Then other CSS property properly works.

If we see that some property is not working in Firefox then we prefix that property with the hyphen M O Z, Mozilla.

Then for Opera we add O.

If we have Microsoft version, like Microsoft Edge or Internet Explorer, so in that we add Ms.

Usually in our new browsers, we don't need to add these vendor prefixes because they normally support properly but if there are some users who are using old browsers, in that case, we can add the vendor prefixes and we can run our web pages properly with the vendor designs.

Our last question is what is a CSS selector?

So, in total, we have five types of selectors.

This is our fresher level question.

In CSS, we have an element selector.

Like there is div, we directly write div and give it style?

ID selector which we use through hashtag, class selector which we use through star, we use it through a dot, universal selector, we use it through class and group selector.

Like we had seen in the previous question, element one comma element two.

So, these are our different selectors.

With the help of selectors we can select the elements as it is or we can select them with variations.

We can select more than one element.

So, guys, this was our today's session in which we conducted interview questions.

In this session, we have tried to cover all the questions, how much ever types of questions can be covered, we have tried to cover them all, which comes on our expert level, experience level and also on the fresher level.

I hope these questions are very useful for you.

When you will appear for the interviews, if there is any question from this that you have not understood, you can tell us on forums.learnvern.com.

If there is any other question which has not been included in this but you want some understanding on that question, if you're not understanding it, if it is outside the scope, that is not a problem, but it should be from CSS itself.

Even that you can ask us on forum.learnvern.com.

We will try to revert to those questions of yours with the solution.

So, guys, wish you all the best for your CSS interviews.

Thank you.