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>
			<style type="text/css">
			p {
			    background: grey;
			    font-size:  20pt;
			    width: calc(80% - 20px);
			<p>this is a test.</p>

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.

Unit Description
deg Specifies the angle in degrees (values are from 0deg to 360deg)
grad Specifies the angle in gradians (values are from 0grad to 400grad)
rad Specifies the angle in radians (values are from 0rad to 6.28rad)
turn Specifies 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.

Unit Description
s Specifies time in seconds
ms Specifies time in milliseconds (1s is equal to 1000ms)