HTML CSS Exercise: Calculating Values With CSS3 calc()

Last update on March 04 2024 06:50:46 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!doctype html>
<html>
<head>
<title>HTML CSS Exercise - calculating values with CSS3</title><!-- Set the title of the HTML page -->
<style type="text/css">
/* CSS styles start here */

.container{
	/* Calculate the width */
	width: calc(500px - 10%); /* Set the width of the container using the calc() function to subtract 10% from 500px */

	background-color:#ec8007; /* Set the background color of the container */
	color:#fff; /* Set the text color of the container */
	text-align:center; /* Center-align the text within the container */
	padding:10px; /* Add padding around the content of the container */
	margin: 0 auto; /* Center the container horizontally on the page */
}

/* CSS styles end here */
</style>
</head>
<body>
<div class="container"><!-- Create a container div for content -->
	<p>CSS3 <em>calc</em> example</p><!-- Add a paragraph with emphasized text inside the container -->
</div>
</body>
</html>

Explanation:

This HTML code demonstrates the use of CSS3's calc() function to calculate values.
In the CSS, the .container class is defined to style a container div.
The width property of the container is set using the calc() function, which subtracts 10% from 500px.
This allows for responsive design, where the container width adjusts dynamically based on the viewport size.
Other styles like background color, text color, text alignment, padding, and margin are applied to the container for visual appearance and layout.
Inside the container, there is a paragraph element with emphasized text, serving as an example content.

Live Demo :

See the Pen calculate-values-with-calc()-answer by w3resource (@w3resource) on CodePen.

Supported browser


Yes	Yes	Yes	Yes	Yes