How-to articles, tricks, and solutions about CSS

How to Add HTML Entities with the CSS content Property

HTML provides entity name or entity number to use reserved characters. Learn how you can add HTML entities to your code with the CSS content property.

How to Add Indentation for the Second Line of an Ordered List

On this page, you can find out how it is possible to add an indentation for the second line of ordered lists. Read our snippet and find a solution to the problem.

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 Lines Before and After the Heading Text

If you are tired of standard heading styles then read this snippet and learn to add lines before and after heading giving it an attractive and unique style.

How to Add Multiple Background Images with CSS

Read about how to use multiple background images with the help of background-image, background-position, background-repeat properties. Also, see examples!

How to Add Non-Standard Fonts to a Website

In this tutorial, you can find some methods to make the design of your website attractive using unique fonts. See how you can use the @font-face rule property.

How to Add Opacity Cross Browser

The opacity property sets the level of transparency of an element. Learn how How to Set the Opacity with w3docs tutorial. Also, try the examples yourself.

How to Add Space Between Rows in the Table

How to Create Space Between Rows in the Table-Learn to create space between two rows in the table in a super-easy way. Try examples yourself.

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 the Marquee Effect without Using the Marquee Tag (with CSS, JavaScript and jQuery)

Learn the alternative ways of having continually scrolling text without using the obsolete <marquee> tag. See examples with CSS animations, JavaScript and jQuery.

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 Align a Checkbox and Its Label Consistently Cross-Browsers

Checkbox is one of HTML forms that is used on every website. This tutorial will show how to align checkboxes and their labels consistently across browsers.

How to Align Divs Side by Side

We’ll show you how to set divs side by side by using CSS flexbox, float and display properties. Also see examples.

How to Align Inline-Block Elements to the Top of Container

Read the snippet and find a solution to how to align inline-block elements to the top of the container. Also, see examples!

How to Align Labels Next to Inputs

In this snippet, you’ll learn how to align <label> elements next to <input> elements. Align labels to the right and left of inputs by using CSS properties.

How to Align the <span> Element to the Right of the <div>

Find out how to align a <span> element to the right of the <div> element in this tutorial. We’ll explain how you can do this with the CSS float property.

How to Align the Content of a Div Element to the Bottom

Let’s see how we can align the content of a div to the bottom by using the modern way with flexbox. Also see examples!

How to Align the Last Bootstrap Menu Item to the Right

In this tutorial, we will demonstrate how you can align the last menu item to the right in Bootstrap. Read the snippet and find some solutions to this problem.

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 Animate the Background of the Progress Bar

On this page, we’ll demonstrate how to animate the background of a progress bar created with the HTML <progress> element. Read this snippet to find the answer.

How to Apply CSS Style to the Element Name

In this snippet, we’re going to demonstrate how you can apply CSS styles to the name of the element. For that, you can use attribute selectors. See examples.

How to Apply CSS Styles to Only the Half of a Word or Character?

Learn how to make a word or character have half style or triple style. Use only CSS to get the effect, or do it with the help of JavaScript and jQuery.

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 Apply Multiple Transforms in CSS

There are many ways to apply multiple transforms. We’ll show how to achieve this using multiple values of the transform property and with nested classes.

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.