How-to articles, tricks, and solutions about 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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”.

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.

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.

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.

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.

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.

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.

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.

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.