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

Last update on February 19 2024 13:02:17 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declaration of HTML5 document type -->
<html>
<head>
<title>How to set the left initial property to its default value</title><!-- Title of the HTML document -->
<style type="text/css">
/* CSS styling */
h1  {border-style: solid; /* Sets the border style for h1 elements to solid */
border-width: 10px; /* Sets the border width for h1 elements to 10 pixels */
}
h1.initial {border-left-style:initial;} /* Defines a class for h1 elements with a left border style set to initial */
</style>
</head>
<body>
<p>w3resource Tutorial</p><!-- Paragraph content -->
<h1 class="initial">Initial left border</h1><!-- h1 element with a left border style set to initial -->
<p>The effect depends on the border-color value</p><!-- Additional information about the effect of initial border style -->
</body>
</html>

Explanation:

This HTML document demonstrates how to set the left initial property to its default value for an h1 element.
The h1 elements have a common style with a solid border and a width of 10 pixels.
An additional CSS class named initial is defined to apply the initial border style specifically to the left side.
The h1 element with the class initial is used to demonstrate the left border with the initial style.
The comment indicates that the visual effect of the initial border style depends on the specified border color.

Live Demo:

See the Pen border-left-style-initial-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page