Values And Units In CSS

There are different ways to define different properties, some of them are discussed below.

Numeric Values

width: 80%;
height: 10em;
font-size: 1.25rem;
border-width: 5px;
animation-iteration-count: 5;
animation-duration: 750ms;
transform: rotate(360deg);

<length> Data Type

The <length> data type is used to specify sizing with two types of units: absolute and relative.

Absolute

Parrent element dose not have effect when using absolute units.

  • Fixed unit, always the smae size
  • Not affected by values in related elements
  • Example: px, cm, mm, pt

Relative

Parrent element have effect on child elements when using Relative units.

  • Relational sizing, not fixed.
  • Dependent upon values declared in parent and ancestor elements.
  • Example: em, rem, vw, vh

Unitless Values

  • Some numeric values do not require a unit.
line-height: 1.25;
  • Values can be declared using number only if the number is zero,
margin: 0px 2px;
/* same as */
margin: 0 2px;
  • Keywords also do not require a unit.
color: red;
font-size: medium;
font-weight: bold;

CSS Function Values

  • There are many css functions. The syntax always includes the function name and prenthesis.

Examples

/* Rotate an element */
transform: rotate(90deg);
/* Calculate a computer value.*/
width: calc(80% - 25px);
/* Embed an image to the background of element*/
background-image: url('myimage.png');

Initial Value

Initial values are defualt values that comes with browsers css(user agent style sheet), without adding any custom css.

/* initial value */
h1 {
  font-weight: bold;
}

1 rem = 16px

Previous
Next