How-to articles, tricks, and solutions about CSS

How to style the select box. Learn 4 ways of replacing the annoying drop-down arrow and setting either a background-image instead of it or a punctuation mark.

Checkbox is one of the HTML forms used on every website, but mostly they are not styled and look the same. If you want to make your site more attractive for users, you can simply style your checkboxes. If you don’t know how to do that, now we will create

Learn the ways of styling and have attractive horizontal lines: how to change color and size, set images as horizontal lines and a pack full of various kinds of <hr> examples.

Nice and attractive buttons can fill the overall look of your website. Learn how to create and style buttons with the help of CSS. Also, see lots of examples!

Style comment boxes, change the background color, add a background image or set borders to your comment box. See all with examples.

In this snippet, we’re going to demonstrate how to style the even, odd, or both the even and odd items of an unordered list. See examples with each of them.

In this snippet, you will find out how to style input and submit buttons easily. Use various CSS properties to achieve this goal. Read the snippet and try examples.

Create and style file input with HTML and CSS in a tricky way. Follow the given steps and create code without including any JavaScript.

In this snippet, learn how you can style the selected label of a radio button. For that, you need to use the CSS :checked pseudo-class and some properties.

It's a common problem to truncate a multi-line string. In this snippet, we'll show how to do it with CSS properties. You can also use CSS pseudo-elements.

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.

Style Font Awesome icon color, size, shadow, create buttons and lists, animate, rotate and position icons. All in one place with detailed examples.

Today, icon fonts are quite common, and more and more developers are taking advantage of them in their designs. See how you can add them as a content.

A common question is how to align text next to an image vertically? Read this snippet and learn to do it step by step, as well as try different examples.

On this page, we’ll demonstrate how to vertically align a text within an HTML <span> element. Use the CSS align-items, text-align, or vertical-align properties.

In this snippet, we will demonstrate some techniques of vertically aligning an image within an HTML <div> element with responsive height. Read and try examples.

On this page, you can find some methods allowing to vertically align elements in a <div>. Read and find the method depending on the specific situation.

In this snippet, we’ll show how you can align the text next to a large Font Awesome icon. For that, use the CSS vertical-align and the line-height properties.

In this tutorial, learn how you can vertically align two <div> elements with Bootstrap. On this page, we’ll demonstrate some examples for Bootstrap 3.4.1 and 4.5.0.

This snippet will help you to align a <div> element for all browsers vertically. You will learn to do it step by step with our examples and explanations.

On this page, you’ll learn how to vertically align inline (inline-block) elements. Try examples with many different methods (CSS padding, vertical-align, etc.).

To position text vertically positioned with CSS you can use vertical-align, line-height, transform properties, flexbox. Learn more methods. Try examples.

In this snippet, we’ll demonstrate how to wrap a long string without any whitespace character. Use the CSS word-wrap property with the “break-word” value.

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.

In this tutorial, we’ll demonstrate how to wrap the content of a table cell. For that, you need to use either the CSS word-wrap or word-break property.