DEV Community

Cover image for Tricky CSS questions
Shubham Tiwari
Shubham Tiwari

Posted on

Tricky CSS questions

Hello Guys today i want to ask some basic but tricky questions in CSS which i found interesting.

Let's get started...

Ques. 1 - Why float elements make their parent container height 0px?

Ques. 2 - Why inline-block elements have default space between them even there is no margin?

Ques. 3 - How clearfix works in CSS ?

Ques. 4 - How to center element in absolute or relative positioning without using margins or paddings or text align?

Ques. 5 - Can we use margins in html email templates?

Ques. 6 - Can we manually provide width and height to span element and if no how can we do it?

Ques. 7 - how can we change the scrollbar styling in CSS?

Ques. 8 - Suppose you have 12 paragraphs , how can you target and give every fourth element a text color of violet?(this one not so tricky)

Ques. 9 - Suppose we have a triangle shape in a div how can we provide the shadow to the triangle ? (Box shadow will provide the shadow to the div element which will be sqaure but not to the triangle)

Ques. 10 - Suppose we have 5 elements and we provided an animation to all those 5 elements but we want to have a delay of 0.3s between every element, first will run after 0.3s, second will run after 0.6s and so on. How can we give that delay without using separate classes to those elements and using a single class to all elements?

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (14)

Collapse
 
carnold22265 profile image
Christopher Arnold

do you have an answer sheet, so I can see how many i got right? jk

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Yeah i have the answers which i found when i encounter these problems or questions but there could be better answers than these as i am still not a pro developers 😁

Answers -

  1. Float elements come out of the flow of the parent container and becomes visible for the parent container.So, the parent container behaves as empty and its height becomes 0px.
  2. When we set the elements as inline-block , there are spaces because while creating the html structure we have some spaces between the tags and also have new line space like we create two elements in different line.So, those spaces are added when we set those elements as inline-block.We can solve this using negative-margins.
  3. Clearfix hack fix the 0px height problem of float elements parent container.It is used with ::before and ::after pseudo-selector and using the clear property,it clears the floats on both the sides.
  4. position:absolute; top:50%; left: 50%; transform:translate(-50%,-50%); (also provide the height to the container if it is not larger)
  5. We should not use margins in html email templates as margins are not supported in outlook.com so the design will not be same as expected in outlook
  6. We cannot manually provide the width and height to span element but we can do it by making it a block element
  7. using the selectors - ::-webkit-scrollbar , ::-webkit-scrollbar-track ,::-webkit-scrollbar-thumb.
  8. p:nth-child(4n);
  9. Using the filter:drop-shadow()
  10. We can provide the different delay time to all the 5 elements using nth-child selector or we can use variables by provide a different variable value to each element and then calculate the delay value separately using calc(--var(variable_value))

IF YOU HAVE A BETTER ANSWERS OR APPROACH PLEASE MENTION IT HERE

Collapse
 
techman09 profile image
TechMan09

Question 11: What is the best way to center a Div, both verbally and horizontally in front of text?

Collapse
 
costdev profile image
Colin Stewart

Verbally:

GO TO THE MIDDLE IN FRONT OF TEXT

Horizontally:

.parent-with-text {
    position: relative;
}
.child-over-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

This question is officially in the list now 😂

Collapse
 
zacharia profile image
zacharia anam

Answer #1. overflow property visible;

Collapse
 
dhengghuring profile image
Ridho

Insightfull

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Yeah it is and the answers are also very helpful to understand the working of css

Collapse
 
devangtomar profile image
Devang Tomar

That was a nice read! Liked, bookmarked and followed, keep the good work! 🙌

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Thank you

Collapse
 
devarshishimpi profile image
Devarshi Shimpi

Thank You!!

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

😁😁

Collapse
 
jewelguidry profile image
JewelGuidry

Why CSS selectors mixed up with cases don't apply the styles? wazifa to make someone do what you want

Collapse
 
shubhamtiwari909 profile image
Shubham Tiwari

Can you please give an example related to this question like which type of selectors we will use with cases ?