Menu
CSS

CSS Values

CSS Values

CSS values are used in conjunction with CSS properties to determine how elements are styled and displayed on a web page. They can be keywords, numbers, lengths, colors, URLs, and more. Here is a detailed overview of various CSS values categorized by their types:

 

1. Keywords

Keywords are predefined constant values used in CSS properties.

 

1.1. inherit

  • Applies the value of the parent element.
color: inherit;

 

1.2. initial

  • Applies the default value of the property.
color: initial;

 

1.3. unset

  • Resets the property to its inherited value if it inherits from its parent or to its initial value if it does not inherit.
color: unset;

 

1.4. none

  • Used in various properties to indicate no value.
display: none;

 

2. Numbers

Numbers can be integers or floating-point numbers used in various properties like z-index, opacity, etc.

 

2.1. Integer

  • An integer value.
-index: 10;

 

 

2.2. Floating-Point

  • A decimal value.
opacity: 0.75;

 

3. Lengths

Lengths specify a distance measurement. They can be absolute or relative units.

 

3.1. Absolute Units

Fixed units that are not relative to other elements.

3.1.1. px (pixels)

font-size: 16px;

3.1.2. cm (centimeters)

margin: 2cm;

3.1.3. mm (millimeters)

padding: 5mm;

3.1.4. in (inches)

border-width: 1in;

3.1.5. pt (points)

font-size: 12pt;

3.1.6. pc (picas)

margin: 1pc;

 

3.2. Relative Units

Units that are relative to other measurements.

3.2.1. em (relative to the font-size of the element)

padding: 2em;

3.2.2. rem (relative to the font-size of the root element)

margin: 1.5rem;

3.2.3. % (percentage, relative to the parent element)

width: 50%;

3.2.4. vw (viewport width)

width: 50vw;

3.2.5. vh (viewport height)

height: 50vh;

3.2.6. vmin (minimum of viewport width or height)

font-size: 2vmin;

3.2.7. vmax (maximum of viewport width or height)

font-size: 2vmax;

 

4. Colors

Colors define the color of text, borders, backgrounds, etc. They can be specified using color names, hexadecimal values, RGB, RGBA, HSL, and HSLA.

 

4.1. Named Colors

  • Predefined color names.
color: blue;

 

4.2. Hexadecimal

  • Six-digit codes representing RGB values.
color: #ff0000;

 

4.3. RGB

  • Specifies colors using the red, green, and blue components.
color: rgb(255, 0, 0);

 

4.4. RGBA

  • RGB plus alpha (opacity).
color: rgba(255, 0, 0, 0.5);

 

4.5. HSL

  • Specifies colors using hue, saturation, and lightness.
color: hsl(120, 100%, 50%);

 

4.6. HSLA

  • HSL plus alpha (opacity).
color: hsla(120, 100%, 50%, 0.3);

 

5. URLs

URLs are used in properties that reference external resources like images, fonts, etc.

 

5.1. URL

  • Specifies the location of the resource.
background-image: url('image.jpg');

 

6. Functions

CSS functions are used to calculate values, define color transformations, etc.

 

6.1. calc()

  • Allows mathematical expressions.
width: calc(100% - 50px);

 

6.2. var()

  • Allows the use of custom properties (variables).
color: var(--main-color);

 

6.3. rgb(), rgba(), hsl(), hsla()

  • Defines colors.
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);
color: hsl(120, 100%, 50%);
color: hsla(120, 100%, 50%, 0.3);

 

6.4. url()

  • References a URL.
background-image: url('image.jpg');

 

CSS