Top 10 css interview questions and answers ( Part -2 )
- December 24, 2023
- Posted by: MainInstructor
- Category: Go JavaScript
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703418880_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Top 10 css interview questions and answers ( Part -2 )
This is a second part of the top 10 CSS interview questions and in the first part we looked at the first five questions the easy ones and in this tutorial we are going to look at the remaining five and if you haven’t been through the first one you can do so I’ll
Provide a link here so after you do that you can come back to this tutorial and welcome to Tex the tutorials alright so our very first question is what is a shadow dome and what is a use of shadow don’t basically and to answer it you can
Do it this way you need to first explain what it is and then give it a little example so to explain you can say that CSS is basically global which means if I write CSS for one element it can impact another element because because its global and often when we build a web
Component the web components are built independently and they are used in different projects so it means its own local CSS so when I use in any project it doesn’t it should not impact the the average CSS and vice-versa so the outer ship as CSI should not be impacting the
The component so we can use shadow dome which is nothing but a scoped subtree inside your element and the exam will go something like this so you have basically one element h3 which says welcome to our website and it has color blue so as you can see it shows welcome to our website
Blue it has an ID called shadow host and it has this template and if you know the templates are never rendered they’re used to you know take the content and you can inject it somewhere programmatically so this template is not being rendered here you can use this
JavaScript to take the content of the at the template and create a shadow dome inside this shadow host and the way it works is you first take the select element which is shadow host which is this and then you create a shadow root and then you build
You take you create an element called shadow child and you can make this innerhtml as this and as you can see it has it has it’s basically injecting this simple tag which also has h3 tag it’s called news widget but the h3 h3 color is green here and outside the
Color is blue so when it renders welcome to our website renders blue and the news widget is rendered in green and so this is how it really works it has its scoped CSF and the next question is how to build triangle using a pure CSS now you
Can use canvas or something like that to build triangles or different complex shapes but they’ll ask you how to build with a pure CSS circle or triangle so so circle is pretty much easy but let’s look at that triangle how to do it so for that I’m just gonna have an element
And I’m gonna give it a class try over here what I’m gonna do every element is basically rectangle so I’m gonna start with a rectangle and I’ll show you how exactly I can convert into a triangle all right so I have some little height width and some color I’m gonna rendered
It would render as a square one thing I can do is I can give it a little border when I do it it gives it a border now I can have a border of different colors each border top left right and bottom so for that I can just copy this four times
And each one I can give it a from color so bottom border top border bottom and the color would be blue so I have a square with four different borders what if I make the height and width zero pixels what would happen it looks something like this it’s like four triangles
And I can increase the size of the border and now I have a four triangles so if I hide the three triangles then out let’s see if I want to get yellow then I can hide these fours and I get yellow triangle so what I can do is
First of all I don’t need actually the white one here so I can remove this and then the blue and green I can make it trance the background color when I do that I get a yellow triangle and you can do the same thing and you can find one a
Different angle you can move the triangle also so this is how I build a triangle you may not remember all the syntax so if you can just show how to do it you can say using border you can build this triangle that should be sufficient you don’t have to really go
Into each syntax because it’s really hard to remember all the syntax these days and the probability is probably about 20% or even less I would say all right the next question is what are pseudo elements in CSS in order to explain it you can say something like this before giving example that pseudo
Elements are used to give elements your selectors and special effect and it will allow the some extra markup for the element without disturbing its environment a simple example would be lets say if I have some paragraph I would say is high and in the for the P
Tag I can do double colon and after this is pseudo element I can say content equal to injected to P tag or something like this when I run it it would say hi and it would say hi and you would see this injected into so whenever I have P
Tag it will always inject this continent now it has also after before before would add before the content of it also first letter first line something like that so you can say for a graph do something to the first letter let’s add something to the first line so these are the suger
Element and the utility of this would be let’s say if I want to inject a tooltip into any element I can do it by injecting a content of the tooltip and basically how it shows it when I hover over something so I can do something
Like this after P I can add a pseudo class hover and I can after that a single colon is pseudo class and double colon is pseudo element I add hover here and run it and whenever I do hi it adds this now the probability of this question is about 40 percent the next
Question is what are data attributes and their utilities and you can explain something like this in HTML if you want to store data you can use data attributes because the regular attributes are not suitable to store data and data attributes are designed to store data in da all right so here’s an
Example of data attributes so I have a div with class profile and I have data attributes and the data attributes always start with data – and so I have three attributes data – name text set data – YouTube name is text a tube and there – ID is one actually I have
Written a style here which would which I can access this data from the attribute and so the way you you you do it is if I say profile which is this element however means when I hover over this element add this content to be for some using the pseudo element that we discuss
In an in the last question and so what do we do with display:inline-block and content it would say attribute data – name and so it would access the attribute and make it a tooltip so when I do this it adds profile to it so it’s actually using the data into here data
Attribute imp inside here inside the style and inserting this content that I hover over it and there are lots of other uses so for example one of the important users when you are testing your code you can insert these data attributes everywhere and you can use
Those selectors you can use them as a selector all right so that’s about it folks again CSS is very wide area and you can ask question from any little nook so I’m sure there are so many questions beyond this ten question so I would like to know what you’ve been
Asked in your interview and if I would love to know some interesting questions and their answers as well so please send it in the I hope you learned something from this video and if you did please like subscribe and constructive
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
hello sir can you make a videos on algorithms.so that it is help ful for us for cracking the interviews.
I loved that triangle trick 🙂
have you all heard of styled component?It follows this Shadow css
Great Points! Thanks alot!
thanks, sir. very useful
You are the REAL SITH…. behind all the code —> TECHSITH
kiraak sirr..
Great Content .. Thank you!
5:36 it's spelled pseudo.
You're awesome 👍
that triangle trick is insane .. great video!
hey man just wanted to tell you that you're doing really great work! you definitely should have 10x more subscribers 🙂
It s just really useful. And expecting video about responsive design questions
Great explanation!!Thanks.This tutorial was really helpful.i was asked this question in my one of my interview. How we can display a smiley before and after a paragraph all inline using css? something like this "😊 paragraph 😊". please explain
Awesome Awesome information. Thanks man.
Can you share me the link for display block and inline CSS of yours
Thank you Techsith
Is it just me or does this video contain only 4 questions?)
I was asked : how to distribute two div in ratio of 80% & 20% using flex?
Thank you!
Just to remember, ::after is actually a pseudo-element, not a pseudo-class, though :after (with only one ":") is also supported by most browsers.
Could you use Css content: attr(data-something) & then > add A Javascript or Php function inside the Html Data Attribute. Just made me think of this and would be pretty interesting if it worked.
It was my interview today and the guy asked me about specificity… 😅😅 and I knew the answer and now I am watching this vid😄
What editor u have used to show examples … ??
difference beteen top and margin-top, i think its a bit tricky
naaaa 10 question kafi hai interview ke liye
mai ja ra kal Google interview dene
What is the editor you are using in this Tutorial ?
Some other questions like 12 grid bootstrap how to convert 16 grid and other if a psd layout is 1920 px then how to make it in 920px device
One thing a good explanation of attrbute is that if u want to add a dynamic content not with Dom but using CSS method is best way to do that
that triangle trick… wowowow
I recently gave an interview and asked this question
what is difference between display:inline and display:inline-block
Hands down one of the best front end channel on Youtube!
Mind blown!!! Never knew you could do tool tips that way. Thanks!
Very helpful review!!! Loved the music at the end too— 🙂
At the very beginning, I once failed a z-index question at an interview. 🙁
Really blown away …. The best VIRTUAL teaching I have ever seen. Above you're teaching, you're so cool boss. You're attitude and style, simply gains our attention
Can't believe i' just hearing about shadow dom
Awesome video
Thx I tweeted this!
Sir,I want to know about semantic html markups and web crawlers🙂
Awesome sir !! Thank you
Thank!! This is one of most useful tutorial for me!
Good tutorial but please dont try to fake the accent.
what is attr? is it function of css or css?
Brother… You are too good… Thanks for sharing this video
Your video is really helpful to me. Please make more new videos.
Best teacher on youtube hands down!! Loved the JS interview questions as well, was not familiar with a few of these CSS questions. Please keep making videos. I was a teacher in my former career and I have to give credit where credit is due, you are an EXCELLENT teacher.
your videos are awesome
You are amazing
Almost a week of learning stuff and i know further question to ask, others than the tldr below!
Do you ever heard of Lorem ipsum? (Just for open up)
What are Cookies and how can you use them?
What are Favicons? Harder one's:
Explain the transition propertys.
How would you accomplish color gradients with css?
How can you avoid XSS (Cross site scripting) and other Injections (e.g. within a given chatsystem)?
What are the key-functionalities of the common parallax-scrolling effect?
How would you do a loading- or progress-cycle with css only?
nice mustache
That shadow crap isn't supporting by most browsers, and it's about js mostly than css.