CSS Values and Units

CSS Values and Units¶

Numeric¶

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

Length datatype¶

Used to specify sizing with two types of units: absolute and relative.

Absolute¶

• Fixed unit.
• Not affected by values in relative elements.
• Examples:
• px: Pixel
• cm: Centimeter
• mm: Millimeter
• in: Inch
• pc: Pica (equal to 1/6 of an inch)
• pt: point (equal to 1/72 of an inch)
• width: 1000px;

Relative¶

• Relational sizing, not fixed.
• Dependent upon values declared in parent and ancestor elements.
• Example: em, rem, vw, vh.
• em: Represents inherited font-size of element.
• rem: Represents the font-size of the root element.
• 1vw = 1% of the width of the viewport.
• 1vh = 1% of the height of the viewport.
• vmin: Equal to the smaller of vw and vh.
• vmax: Equal to the larger of vw and vh.

Unitless Values¶

• Numbers only:

line-height: 1.25;  

• Keywords:

color: red;  

Function Values¶

transform: rotate(90deg);  
width: calc(80% - 20px);  
background-image: url("image.png");  

Comments

Comments