- CSS Tutorial
- CSS Introduction
- CSS Syntax
- CSS Comments
- CSS Selectors
- CSS Fonts
- CSS Colors
- CSS Backgrounds
- CSS Box Model
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Text
- CSS Images
- CSS Links
- CSS Lists
- CSS Tables
- CSS Outline
- CSS Icons
- CSS Display
- CSS max-witdh
- CSS Position
- CSS z-index
- CSS Overflow
- CSS Float
- CSS Align
- CSS Opacity
- CSS Navigation Bar
- CSS Dropdowns
- CSS Forms
- CSS Units
- CSS !important
- CSS Specificity
- CSS Combinators
- CSS inline-block
- CSS Hover
- CSS Cursors
- CSS Selectors
- CSS Type Selector
- CSS Class Selector
- CSS ID Selector
- CSS Attribute Selector
- CSS Pseudo-class Selector
- CSS Pseudo-element Selector
- CSS Universal Selector
- CSS Advanced
- CSS Text Formatting
- CSS Gradients
- CSS Shadow
- CSS Rounded Corners
- CSS Text Effects
- CSS 2D Transform
- CSS 3D Transform
- CSS Border Images
- CSS Inherit
- CSS Transitions
- CSS Animations
- CSS Box Sizing
- CSS Tooltip
- CSS Masking
- CSS Pagination
- CSS Styling Images
- CSS object-fit
- CSS object-position
- CSS Buttons
- CSS Multiple Columns
- CSS Variables
- CSS Flexbox
- CSS Grid
- CSS Media Queries
CSS: Units
CSS units are essential for defining the size, spacing, and other layout properties of elements in a stylesheet. There are two main types of units in CSS: absolute and relative.
Absolute units are fixed and do not change based on other properties. They are useful for print media but can be problematic for screens due to varying sizes. Examples include:
px(pixels): 1px is 1/96th of 1 inch.cm(centimeters)mm(millimeters)in(inches): 1 inch is equal to 96 pixels.pt(points): 1 point is 1/72 of an inch.pc(picas): 1 pica is equal to 12 points.
Relative units are more flexible and adjust based on other properties, such as the size of the parent element or the viewport dimensions. They are ideal for responsive design. Examples include:
em: Relative to the font size of the element. 2em means twice the size of the current font.rem: Relative to the font size of the root element.vw(viewport width): 1vw is 1% of the width of the viewport.vh(viewport height): 1vh is 1% of the height of the viewport.vmin: 1% of the viewport’s smaller dimension.vmax: 1% of the viewport’s larger dimension.%: Relative to the parent element’s corresponding property.
The em and rem units are particularly useful for creating scalable layouts, as they adapt to the user’s settings, such as their browser’s default font size12.
Remember, when using CSS units, it’s important to consider the context and the medium in which your content will be displayed to choose the most appropriate unit. For screen-based designs, relative units like em, rem, vw, vh, vmin, and vmax offer the best flexibility and accessibility.