Category: CSS How-to

Problem: Sometimes div class named clearfix. What is this clearfix and how to use this? Solution: The clearfix is a way for an element to automatically clear its floated children. Suppose your child element is an image. If its height Read more

Problem: You have a webpage with a dropdown menu. You want to style it. There are many solutions with javascript. But you need to style it using CSS only. Solution: Method-1:  Use appearance property HTML: CSS: Explanation: Here “appearance:none” property Read more

Problem: You have a div element. you need to center it horizontally and vertically in the browser. The HTML codes are: Solution: There are multiple ways to solve this problem. Method 1: CSS: Explanation: When you set “position:absolute”, the element Read more

Problem: There is a background for a container. The problem is that the background doesn’t cover the contents of that container. Now you need to stretch or scale to fill its container. Solution: The code: HTML: CSS: Explanation: background-size defines Read more

Problem: A webpage contains some contents with footer.  You want to keep the footer always at the bottom whether the contents go pretty far down or not even enough content to go all the way to the bottom of the Read more

Problem: You have a form that contains input fields with the placeholder. The default color of the placeholder is light gray. You need to change the color of the placeholder. Solution: If you want to change the color to pink, Read more

Problem: You want to embed a PDF file on your html page. And you’re looking for the best way to do that. Solution: The best way of embedding a PDF file is to use the <object> tag. The code: Explanation: Read more

Problem: You want to put a background on the contents (texts or image) and make it transparent using opacity. But you don’t want to change opacity of your contents. HTML: CSS: By doing this, both background and text become in Read more

Problem: There are two inline-block elements in your page. Suppose HTML: And, the CSS: Here, you used “display:inline-block” to control margin and padding on inline elements. But, this “inline-block” creates a problem making whitespaces between inline-block elements. You need to Read more