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 →
To create HTML anchor links that jump to another section of the page, you have to assign CSS ID for each section/element. And you have to use the ID followed by a “#” (hash) as the link. See the link pattern below. Note that each CSS ID should be unique and you can use the ID once on a page. However, you can use an ID multiple times on the same page when you don’t need linking behavior and when you need it for styling. But it’s a good practice to use a CSS class name when you need the […]
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 →