The default list items are vertically aligned in a list format. To make a horizontal list, you need to write some CSS for it. In this post, I will explain & show a couple of ways to create a horizontal list with CSS. Let’s get started. Different ways to create a horizontal list with CSS In these examples, you will see different CSS properties to make a horizontal list such as display, flex, float, etc. Throughout this post, I will use the following HTML for the list items until I introduce a new markup. So keep that in mind. Using […]
Read More →
CSS gradient border is a great opportunity to make your content stand out. Throughout my website, I used gradient borders that helped me to focus on important parts of a web page. And you can do the same using them. In this post, I will give you some examples of CSS gradient borders. Also, I will show how you can create your own border styles. Let’s get started. Examples of CSS gradient border From the examples listed below, you can copy-paste my CSS and change the color values exactly the way you want. Let’s see some of the cool gradient […]
Read More →
CSS gives you huge flexibility to select one or more HTML elements exactly the way you want. Using multiple classes & IDs and making a combination of both gives you the ability to do that. But you have to know how multiple CSS selectors work together to get the most out of it. In this post, I will show how you can use multiple classes & IDs in CSS, and make a combination of these two. Also, you’ll get some real-world code examples that will give you a clear concept of using them properly. How to use multiple CSS classes […]
Read More →
It’s easy to add borders to a table but making the table rounded is a bit trickier. Wood-made rounded tables are very common but it’s rare when it comes to making them with HTML & CSS. I used the “border-radius” property to make the rounded corners but it did not work. So I took a deep dive and come up with a couple of solutions to make a table rounded with CSS (not wood). In this post, I will show you a couple of ways to make rounded tables with CSS. Also, I will show you different types of rounded […]
Read More →
You can rotate text, images, and other HTML elements using the CSS transition property. The transition has a “rotate” function that can make rotation an element clockwise or anticlockwise. In this post, I will try to make you understand the CSS rotate function in depth. And will give you some real examples. So you can take these ideas to implement on your project without much spending time on it. Let’s start. Rotate a text using CSS In order to rotate a text, your first instinct should be to give it a class or ID so you can target it easily […]
Read More →
You can make text bold using the HTML <strong> and <b> tags. But these two are not only the options. You can also make any text bold in HTML using CSS. In this post, I will show you all the possible ways to bolding text in HTML. HTML bold text – all possible ways Using <strong> tag See its output below. Using <b> tag See its output below. As you see this output is similar to the last one. Bold text using CSS font-weight property As mentioned earlier, you’re just not limited to using the HTML <strong> & <b> tags. […]
Read More →
To break a line in HTML, the first option is to use the <br> tag. Also, you can create a new line using other ways. In this post, I will show how you can make a line break in HTML in a couple of different ways. Let’s get started. Create a new line in HTML using <br> tag Let’s say you want to break a line in a certain position in the paragraph. Write the <br> tag where you want to get a new line. See the HTML below. For the above HTML <br> tag, the last part of the […]
Read More →
A button is an inline element and not a block level. So only using margin: 0 auto will not center align the button. To center a button, you have to block its display property and then auto margin to the left & right. See my CSS below. This is how to can center align a button using CSS. See the output in the screenshot below. And I had the following HTML for the button. To make a custom style, see how to style buttons with CSS. You will also get a couple of professional button examples on that post (including […]
Read More →
In HTML, you create a link using the anchor (<a>) tag. And you create a button using the <button> tag. There are some similarities between links & buttons, and that’s why it’s confusing to some of us. Also, there is some difference between these two. Otherwise, there is no reason to create these two separate HTML tags. And as a web designer, you should know the difference. So you can use the right tag at the right time. Links vs buttons I will discuss the difference between these two in detail. And some of them are opinionated. For now, see […]
Read More →
There is no href attribute for the div. So to make an entire div a link, you have to wrap it inside an anchor tag. See the example HTML below. In the above code, you see that I have a couple of HTML elements such as a heading, image & paragraph. All these elements live inside a <div>. And this whole div is wrapped by an anchor tag (<a>). This is how you can make a whole div a link. If you click anywhere in the div no matter if it’s a heading, image, paragraph, button, or something else, it […]
Read More →