CSS Documentation

Values

Menu

Values

CSS values are the specific settings assigned to CSS properties. They define how a property should be applied to an element.

Types of CSS Values

CSS supports various types of values:

  • Keywords: Predefined values like 'auto', 'none', 'inherit'.
  • Lengths: Numeric values with units (e.g., px, em, rem, vh, vw).
  • Percentages: Relative values based on the parent element.
  • Colors: Can be specified using keywords, HEX, RGB, or HSL.
  • Functions: Such as rgb(), calc(), url().
  • Angles: Used for rotations (e.g., deg, rad, turn).
  • Time: Used for animations and transitions (e.g., s, ms).

Example

Here's an example of different types of CSS values:

.example {
ㅤwidth: 50%; /* Percentage */
ㅤheight: 100px; /* Length */
ㅤcolor: #ff0000; /* Color (HEX) */
ㅤbackground-color: rgb(0, 255, 0); /* Color (RGB) */
ㅤfont-size: 1.5em; /* Relative length */
ㅤtransform: rotate(45deg); /* Angle */
ㅤtransition: all 0.5s ease; /* Time */
}

Value Categories

CSS values can be categorized into:

  • Initial Values: The default value of a property.
  • Computed Values: Values that are resolved as much as possible without layout.
  • Used Values: The final values used for the actual layout.
  • Actual Values: The values applied by the browser after any approximations have been applied.

Understanding CSS values is crucial for precise control over the appearance and layout of web elements. Different types of values offer flexibility in designing responsive and visually appealing websites.