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 →
There are a couple of ways you can align text to the bottom of a div using CSS. In this post, I will show you a couple of ways to do it. CSS for aligning text to the bottom The first and easiest way is using flexbox. Only two lines of CSS can make it happen. I have a CSS class of container for the div and that’s why I used the selector above. See my HTML markup below. Example 2: Using CSS position In this example, I will use the same HTML markup. And align the text to the […]
Read More →
To create a vertical divider or separator line in HTML, you have to use the CSS border property. You have horizontal rule (<hr>) in HTML but there is no vertical rule or <vr> tag in HTML. And this is why we need to create it differently. Let’s see how you can do that. How to create a vertical separator line in HTML? For the above vertical separator line, I have the following CSS. CSS See the HTML that will make things more clear. HTML As you see in the above HTML, I have a <span> tag with a CSS class […]
Read More →
You can deactivate links using the “pointer-events” CSS property. In this post, I will show you how to can disable a link on anchor tag (<a>), button, input, and CMS-based specific pages. How to disable a link? There are a couple of situations where you need this. Let’s explore them one by one. Disable link on HTML anchor tag This is how you can disable the click event for an anchor tag where you have the “HREF” attribute. Disable button link Deactivate links on input/submit Disable links on specific WordPress pages For example, you have a link that appears on […]
Read More →
There are two main ways you can position text over an image. Such as: (1) Placing the text over the image using the CSS position property, (2) Creating a background image for the text. In this post, I will show you both ways to place the text over an image. Also, I will answer some of the related questions that you need to know. Let’s get started. How to place text with an image using the CSS position property? To demonstrate the purpose, I have the following HTML. Using the above HTML, my image and text look like the screenshot […]
Read More →
In this post, I will show you a couple of examples to create space between flex items. Also, I will show you how to offset the space on mobile devices. Let’s get started. How to create space between flexbox items? To create space between flexbox items, you can use flex-basis which is very similar to the width property. As you see in the above screenshot, I have two items in the flexbox container. Before I write or explain any CSS, let’s see the HTML markup for the above layout. To create space between the items, I have flex-basis of 48% […]
Read More →
In this post, I will show how you can align an image on the right side of a div using CSS. You will also learn to align the image on the top-right, middle-right & bottom-right corners. Let’s get started. How to align an image on the right side? When we say about the right-aligned image, we generally mean to place it on the right-hand side and want the image to consume the full available height. But there are some cases, in which you may also need to arrange the image on the top, middle & bottom right. This is what […]
Read More →
To reverse columns on mobile or any other screens, you can use flexbox & its order property. If this does not make sense, I will show you now. But when actually do you need to reverse columns? I am happy to ask because this is exactly what I will show you now. Let’s imagine you have the following layout on a large device. As you see in the above screenshot, I have two rows. Each row contains two columns. Each of the right columns contains images. You will see this kind of layout a lot. Even you may have built […]
Read More →
There are hundreds of ways to create a preloader for your website. But in this post, I will show you how to create a gorgeous preload spinner only using HTML, CSS & a few lines of JavaScript. However, you can also convert/implement this preloader on a WordPress website. First, let’s see the preloader that we are going to build. In the live preview/example, the preloader loads for 3 seconds to show you. But on a real website, we want the preloader to disappear after the page finishes loading. And this time is not fixed or static. This DOM loading time […]
Read More →