Top 10 css interview questions and answers

we all know that front-end interviews can be tough and especially CSS one can be really tricky so in this tutorial we are going to look at top 10 CSS interview questions and their answers and I'm gonna take you from easier than two tough ones and I'm also gonna show you probability of that question coming to your interview welcome to texted tutorials first question is what is box model or they can ask you this way what are the properties related to box model and to answer it you can say that CSS box model is a box that wraps around every single element in HTML which includes the content padding inside and then the border and then the margin in order to show it give it some style so I can say some height let's say 100 pixel some border 20 pixel and some margin 30 pixel background color let's say believe or something solid red and if I run this it would give me some border and in order to look at the bar the box model if I inspect it I would see here at the box model as you can see the content which is 100 pixel by 100 then I have a pairing which is kind of outside and then the border and in the margin this is call by default every box is content box so they also ask you another property which is box sizing and you can look at it so if I say box sizing here as you can see its content box which means that the content which is a center part of it which is 100 by 100 the height and width which is inside and everything is else is outside but the border box is if I say box sizing let's say as you can say box sizing is order box and run it it becomes quite smarter because now the border is part of the the box itself so the content shrinks so before it was like 100 pixel height and width and the content was also hundred pixel but because the border is 20 pixel it now gives a border inside so the con the overall box is the same size adjustable the the content shrinks to that 60 by 60 the probability of this question coming to an interview is very high a lot of almost I would say 70% of interview that I had this question came up one time I remember I just forgot to mention border I just said padding and margin and the content and the guy said you forgot one thing and I was like what did I forget and then I realized that I forgot border so just memorize it I would say you would know it but you know sometimes it just your brain freeze when you have our interview so all right the second question is what is specificity the way to answer is if you have for for for an element if you have two conflicting styles so let's say if you have one style that is changing their color or background color and you have a second style that is changing the background color of the same element then the browser has to decide which one to apply and it chooses space on the specificity and the specificity is nothing but set of rules that it it has so let's look at those rules and we're gonna just discuss some basic rules there are so many rules but we're gonna just look at some main those so that we get most of the things covered so let's say if you have an element and it has some text in and I can apply some style and I can say background color is in green I would get a box with green background color but what if I have a same div but different background color then which one your browser would choose would it be green or red so the first rule is if you have this kind of situation where this the same element tag and it has different conflicting styles then it would pick the last one here it's red so if I run this it would pick the red one so that's the first rule and to prove it if I obviously move this up and 1 it will become green because now green is the last second rule is let's say if I have a class here equal to name and here I'm just gonna say dot name so here the first edge is a common div and the second woman is specific to the name class in this case it should pick div dot name because it's more specific than just a regular div means it applies to show smaller sets of you know wherever you have class name and that's why it would pick this one it doesn't matter which one is up or down or last one in this case so if I move it up here it would still be green a turtle is let's say if I have ID call my ID here I can same my ID and run this ID wins over class even if I put ID up here it would still be ID because idea has a higher priority than class when it comes to specificity but what if I do this to a class now all the bets are off it would pick green because I said it's important enforcing this to pick this top probability of this question is I would say 40% the third question is how to allowing a block element inside another element basically aligning a lining Center now there are many different ways to answer this question because you can use tables you can use flexbox you can use CSS grades or you can do just plain old CSS positions to Center it and there are some other ways to do it but what they're asking is using the plain old CSS rather than using the Flex box or the other stuff I have a tutorial on this whole topic which explains the Flex box any other other methods I'll provide a link here which so for that let's have an outer div and we have inner div okay so we're gonna try to Center this inner div inside the outer div so the outer div and inner div is let's say and we can give some background color let's say this is yellow this is let's agree so right now the the inner div always stays at the left top corner by default now what I want to do is this to be exactly Center in the middle and to do it I can firstly what I have to do the outer div it has to have a position which is relative and the inner div has to have position which is absolute now what I have to do is I need this green one to be top 50% and when I do that it should move to the middle but not quite what it does it the the box itself moves 50% but it stopped so if you look at the top is actually 50% of the right in the middle so this line is the center line but what I wanted to do is I want half of it to be up here and half down so I want to move itself 50% but before that I would say left 50% when I do that it would also move 50% to left and so this corner is the center of the yellow cube so now I want this to move 50% of its size this side and 50% of the site on the top so for that I would use transform translate and I would say minus 50% - 50 % and now it will be in the center and since I've used a percentage which means even if I change the size of the outer box the inner box would still be Center and the probability of this question coming to interview is about maybe 20% of Sep alright the next question is what is the difference between static absolute relative and fixed position in CSS and this is a very important question and it is important to know this because if you're a CSS guy and if you don't know this question then it's really bad so I think it's very important know all right to explain this I have these three elements and by default they they are all stacked it goes by the nature of the flow which means if the first element here it will be stay there and the second element will come after in the natural order that's a static really means now if I change the second one position relative nothing would happen but if I apply some left right and bottom that's a if I say top 50 pixel or something like that and run it it would move 50 percent from this original position down top means it will have a 50 pixel top and the gap right similarly I can say bottom and it wouldn't move 50 percent up from this original position without affecting the element 1 & 3 as you can see element 1 and 3 are exactly where they were it just the the element 2 is moving around using the top bottom so and also you can explain the use of this because this doesn't disturb its environment that much compared to position absolute which we just looked at for the centering element now if you look at so the 2 so the 3 actually moved up as if to doesn't exist so like a 2 isn't actually in a separate space in a way so that disturbs the environment and now I can actually move and it's actually reference to its parent position so if I just say top zero means it would go up here which is its parent that the parent is the main container so that's the main difference and the fixed fix is almost like absolute but its reference to the entire page knowledge parent so it will stay wherever it is right now so let's say if I have 3 if I just replicate 3 many time and run it now I have 1 2 3 and the position is fixed so the 2 actually stays where it is and everything else is moving around it so you can use for like advertisement you know when you have a page advertisement which stays there even if you scrolling up and down the rest of the page so that's position and again if you want to discern it more I have a trail on it I provide a link here a probability of this question is also very high they may not ask you exactly the same question but it's related to the position you might get some question the next question is what is the difference between visit visibility:hidden and display:none so only this element is hidden but this other element is not hidden so if I run it as you can see the the top part is there but it's not being displayed that's why there is a gap here but if I say display:none the gap is no longer there that means the element doesn't exist inside the dome so it doesn't hold its position visibility hidden the element is in the dome but it's not visible and display:none is element not inside the dome so it's not even gonna render probability of this question is also very high I would say maybe 60% or so all right so this tutorial is getting a little bit longer so I'm gonna split into two tutorials so the next five questions I'll provide a link at the end of this tutorial so you can follow it and I hope you learned something from this tutorial and if you did please like subscribe and provide a constructive comment thank you you

Channel: techsith

Views: 334,278

Rating: 4.8935876 out of 5

Keywords: CSS interview questions, front-end interview, JavaScript Interview, CSS3, HTML5, techsith.com, techsith

Id: ZohZS6xLYE4

Length: 14min 46sec (886 seconds)

Published: Wed Nov 01 2017