
How to add CSS border inside a div element
In this article, we will learn how to add a border inside an element using CSS. Let’s say we have two rectangular-shaped div elements on our page. And we want…
Read more
Detect Dark Mode | Color Mode Change using JavaScript and CSS
In this article, we will learn how to detect system dark mode and also detect color mode change using JavaScript and CSS. As we spend most of our time in…
Read more
Add CSS style to input type=file | Custom file input
In this article, we will see how we can create a custom file input by styling the input field of type=’file’ using CSS. To build a button/field to upload files…
Read more
How to allow input type=file accept only images
In this short post, we will see how to allow the input field with type=file to accept only images from users. Let’s say we have an input field as type=file….
Read more
How to change the color of hr tag using CSS
Here, we will learn how to change the color of HR element in our HTML using CSS style. To change the color of the HR tag in our HTML using…
Read more
How to make horizontal line in markdown
In this post, we will learn how to make a horizontal line in markdown. In HTML, we can create a horizontal rule by using the <hr/> tag. However, in markdown,…
Read more
Use emoji as list bullet points using CSS list-style
In this article, we will see how to style list bullet points with emoji in HTML. In HTML the available list styles are very limited and sometimes it may make…
Read more
Change image source (src) on hover using CSS
In this post, we will see how to change images on hover using CSS. We cannot change the <img> tag src (source) using CSS directly. For that, we have to…
Read more
Create a vertical line using Html and CSS
In this article, we will discuss the process of creating a vertical line using HTML and CSS, exploring the various ways and styles that we can utilize to achieve the…
Read more