w3docs logo
  1. Snippets
    2. ›
  2. html

How-to articles, tricks, and solutions about HTML

How to Calculate Text Width with JavaScript

Read this JavaScript tutorial and learn about the best method of calculating the text width. Read about the advantages of the method over other methods.

html javascript HTML5 number math canvas

How to Calculate the Width of an Element with the CSS calc() Function

In this snippet, you’ll learn how to calculate the width of an element with the CSS calc() function. See examples, where we mix percentages and pixels.

html css div width

How to Center a Background Image Inside a Div

In this tutorial, find out how you can center your background image within a <div> element. For that, use the CSS background and background-size properties.

html css image alignment background div

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.

html css alignment flexbox div

How to Center a Text Inside the CSS :before Pseudo-Element

In this snippet, you will find out how it is possible to center a text within the CSS :before pseudo-element. Try an example and find its description to make it clear.

html css alignment pseudo-elements

How to Center an Image with the CSS text-align Property

In this snippet, you can see a trick, which can help to center an <img> element with the CSS text-align property. Use a <div> and apply the style to it.

html css image alignment

How to Center the Text in the HTML Table Row

In this snippet, we’ll demonstrate and explain examples of centering a text in the table row. For that purpose, you can use the CSS text-align property.

html css text alignment table

How to Change Selected Value of a Drop-Down List Using jQuery

In this tutorial, you will read and learn about jQuery methods that are used to change the selected value of a drop-down list via its text description.

html css javascript jQuery input textarea data types

How to Change the Color of an <hr> Element

The HTML <hr> element is a block-level element and creates a horizontal line. In this snippet, find out how to style a horizontal line by adding a color to it.

html css color style

How to Change the Color of the First Word in a Text

In this tutorial, you can see how to change the color of the first word of a text. For that, use the CSS :before pseudo-element with the content property.

html css color pseudo-elements