How-to articles, tricks, and solutions about CSS

How to Wrap Text in a <pre> Tag with CSS

The <pre> tag inserts a preformatted text into an HTML document. Since the <pre> tag doesn’t support wrapping, we’ll show how to do it with the help of CSS.

How to Set Border Opacity with CSS

You can set the border opacity using a RGBA color as a value for the CSS border property. In this snippet, we’re going to demonstrate how it can be done.

How to Control the Width of the <label> Tag

Since the <label> tag is an inline element, using the width property won’t have any effect. Here you can find some methods of adding width to the <label> tag.

How to Prevent Scrollbar from Repositioning Web Page

When you center a page, it may move slightly on some browsers when navigating between pages. In this snippet, we’ll demonstrate how to solve this problem.

How to Make Scrollbar Visible Only when Necessary

On this page, you’ll find some examples of making the scrollbar on <div> visible only when necessary using the overflow, overflow-y, and overflow-x properties.

How to Change the Style of the "title" Attribute Within an Anchor Tag

Since actually, we cannot style the “title” attribute inside an anchor tag, we suggest using some other methods of styling the tooltip inside an anchor tag.

How to Make the Div Height to Auto-Adjust to the Background Size

It is possible to make the <div> to automatically adjust to the background size without setting a specific height or min-height. In our snippet, we’ll show how this can be done.

How to Adjust the Position of List Style Image

In our snippet, we’ll show how to properly use the padding to overcome the difficulty of applying the padding not only to the list items but also to images.

How to Add Line Break Before an Element with CSS

In this tutorial, we’re going to show some ways of adding a line break before an element. For that, use the white-space property and ::before pseudo-element.

How to Add Style to the Parent Element when Hovering a Child Element

It is possible to style the parent element when hovering a child element. In this snippet, we’re going to demonstrate and explain how to do this step by step.

How to Add Colors to Bootstrap Icons with CSS

Using icons is great for every website. If you face the difficulty of adding color to Bootstrap icons, add the CSS color property. Change also the font-size.

How to Find an Element by CSS Class Name with XPath

XPath is a syntax helping to find the location of any element using XML path expression. In this snippet, we’ll show how to find an element by class name.

How to Apply Global Font to the Entire HTML Document

In this snippet, we’re going to apply a global font format to the whole HTML page. Read our snippet and find out how this can be done with and without !important.

How to Turn a Rectangular Image into a Cropped Square Image with CSS

In this snippet, we’ll show how you can turn a rectangular image into a cropped square. We’ll use CSS and turn an image into a square without distorting it.

How to Overlay Images with CSS

Overlays can be a great addition to the image and create an attractive website. In this snippet, you can find different examples of overlaying images with CSS.

How to Limit Border Length with CSS

You may come across the difficulty of making the border of an element shorter than its parent element. To overcome this, use CSS properties and HTML elements.

How to Stretch a Text with CSS

In this snippet, we’ll show how to stretch a text horizontally or vertically using CSS. For that, you can use the CSS transform property set to the “scale”.

How to Rotate the Content of the ::after or ::before Pseudo-Element

The content property is used with the ::after and ::before pseudo-elements. In this snippet, we’ll demonstrate how to rotate the content of these pseudo-elements.

How to Make a Div Stick to the Top of Screen when Scrolling with CSS and Javascript

This snippet will help you to make a <div> stick to the top of the screen when you scroll the page. Find out how to this using HTML, CSS, and Javascript.

How to Align the Placeholder Text of an Input Field in HTML

The ::placeholder pseudo-element allows styling the placeholder text of a form element. Here you will find out how to align an input field’s placeholder text.

How to Auto-Hide a Placeholder Text on Focus with CSS and jQuery

The placeholder attribute describes the expected value of an input field. See how to auto-hide placeholder text on focus using HTML, CSS, and jQuery.

How to Change the Input and Button Images with CSS

It may be difficult to style buttons, especially when we need to change them to images. You can change buttons to images with <input> and <button> elements.

How to Create Circles with CSS

There are many techniques used to create a circle in CSS. In our snippet, you can find some techniques that are widely used and have good browser support.

How to Center a Button Both Horizontally and Vertically within a Div

In our snippet you can find some solutions to the problem of centering a button within a <div>. One of our solutions to the problem also includes using Flexbox.

How to Add Both a Background Image and CSS3 Gradient to the Same Element

If you want to make your website more attractive, read this snippet and learn how to add both a background-image and CSS3 gradient to the same element.