CSS Tutorial - CSS Values








Unit Calculations

CSS3 lets you calculate units.

This is a flexible approach that gives you both control and precision when you create styles. 

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p {<!--  w  w w . j a v  a2s. c o  m-->
    background: grey;
    color:white;
    font-size:  20pt;
    width: calc(80% - 20px);
}
</style>
</head>
<body>
<p>this is a test.</p>
</body>
</html>

Click to view the demo

You use the calc keyword and parentheses to encompass a calculation. You can mix other units and perform basic math.





CSS Angles

You will need to use angles when you come to transforms.

You express angles as a number followed by a unit-for example, 360deg.

The following table shows the set of supported angle units.

Unit IdentifierDescription
degSpecifies the angle in degrees (values are from 0deg to 360deg)
gradSpecifies the angle in gradians (values are from 0grad to 400grad)
radSpecifies the angle in radians (values are from 0rad to 6.28rad)
turnSpecifies the angle in complete turns (1turn is equal to 360deg)




CSS Times

You can measure intervals using the CSS time.

Times are defined as a number of units followed by a time unit-for example, 100ms.

The following table shows the supported time units.

Unit IdentifierDescription
sSpecifies time in seconds
msSpecifies time in milliseconds (1s is equal to 1000ms)