CSS Properties: How to set column initial property to its default value?

Last update on February 21 2024 12:45:41 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to set column initial property to its default value</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
div{
column-count: initial; /* Sets the number of columns for the division element to its initial/default value */
   }
</style><!-- Ends the CSS style block -->
</head>
<body>
<div><!-- Starts a division element -->
<h1>w3resource Tutorial</h1><!-- Inserts an h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.In all the examples of our tutorials, we have used HTML for implementing CSS.</p><!-- Inserts a paragraph element with text describing CSS -->
</div><!-- Ends the division element -->
</body>
</html>

Explanation:

This HTML document demonstrates how to set the column initial property to its default value using CSS.
The CSS style block defines rules for the division element.
The column-count property for the division element is set to initial, which sets the number of columns to its initial/default value.
By setting the column-count property to initial, the division element will revert to the default behavior determined by the browser or any inherited styles.
The HTML body contains an h1 element with the text "w3resource Tutorial" and a paragraph element describing CSS.
This ensures that the number of columns for the division element is set to its default value, providing the default layout for the content.

Live Demo:

See the Pen column-initial-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page