IT Course CSS Basics 021_Value Types, Units, Sizes, Colors

Numeric Types

In CSS, different values are used in different properties. Common numeric types are as follows:

• String: Text enclosed in single or double quotes, ensuring consistency in quote usage.
• Number: Integer or floating-point number. Such as 1024, -100, 0.255. Avoid using unitless numbers unless representing pure numerical values.
• Unit: Unit value type, such as 45deg, 5s, or 10px.
• Percentage: Percentage value type, such as 50%. Percentage values are commonly used for width, height, and other properties.
• Color Value: Hexadecimal, RGB, RGBA, HSL, HSLA, etc. Use appropriate color representation, considering color contrast and accessibility, avoiding overly bright or too similar colors.
• Keyword: Words with specific meanings, such as auto, initial, inherit, etc. Understand the meaning and function of keywords to ensure correct usage.

Units

Units in CSS are used to represent values of length, angle, time, frequency, and other properties.

Length Units:

In CSS, length units are used to represent dimensions and distances, applicable to various properties such as width, height, margin, padding, etc.

Relative Length Units:

• em: Relative to the font size of the parent element. 1.5em means the element’s font size is 1.5 times its parent element’s font size.
• rem: Relative to the font size of the root element (html element). 1rem equals the root element’s font size.
• ex: Usually used for vertical dimensions, relative to the height of lowercase letter “x”. (In most fonts, the lowercase x character is typically half the maximum character height)

Example:

1
.example {
2
  font-size: 16px;
3
  padding: 1.5em; /* 1em equals 24px */
4
  margin: 2rem; /* 2rem equals 32px */
5
  height: 2ex; /* Height is half the font size, i.e., 8px, equivalent to 16px */
6
}

Absolute Length Units:

• px: Pixel is the most basic unit on screen and the most widely used unit in CSS. Pixel size depends on monitor resolution.
• in: Inch is a length unit, commonly used to represent the size of monitors or other electronic devices. 1 inch equals 96 pixels.
• cm: Centimeter is a length unit, commonly used to represent the size of physical objects.
• mm: Millimeter is a length unit, commonly used to represent the size of paper or other printed materials.
• pt: Abbreviation for point, a unit used in traditional typography. 1pt equals 1/72 inch, approximately 0.352778 millimeters.
• pc: Abbreviation for pica, also a unit used in traditional typography. 1pc equals 12pt, approximately 4.21752 millimeters, 1pc equals 16 pixels. Recommended for print stylesheets or situations requiring exact print sizes.

Example:

1
.example {
2
  width: 200px;
3
  height: 2in; /* 2 inches, equals 192px */
4
  margin: 1cm; /* 1 centimeter */
5
  font-size: 12pt; /* 12 points */
6
}

Relative Percentage Units:

• %: Percentage represents the percentage size relative to the parent element. For example, width: 50% means the element’s width is 50% of its parent element’s width.

Example:

1
.example {
2
  width: 50%; /* Width is 50% of parent element's width */
3
  padding: 10%; /* Padding is 10% of element's width */
4
}

Viewport Units:

• vw: Percentage of viewport width, 1vw equals 1% of viewport width.
• vh: Percentage of viewport height, 1vh equals 1% of viewport height.
• vmin: The smaller of vw and vh.
• vmax: The larger of vw and vh.

Example:

1
.example {
2
  width: 50vw; /* Width is 50% of viewport width */
3
  height: 30vh; /* Height is 30% of viewport height */
4
}

Angle Units:

In CSS, angle units are used to represent angle values in rotation, transformation, and other properties.

deg (degrees):

• deg degree is the most commonly used unit for angles. A full circle has a total angle of 360 degrees.
• Used to represent rotation, gradient angles, etc.

Example:

1
.example {
2
  transform: rotate(45deg); /* Rotate element by 45 degrees */
3
  background: linear-gradient(45deg, red, yellow); /* 45-degree gradient background */
4
}

rad (radians):

• rad radian is the ratio of circumference to radius. A full circle has a total of 2π radians.
• Used in certain mathematical functions, transformations, etc.

Example:

1
.example {
2
  transform: rotate(1rad); /* Rotate element by 1 radian */
3
}

grad (gradians):

• grad represents the gradian unit. A full circle has a total of 400 gradians.
• Similar to degrees, used to represent rotation, gradient angles, etc.

1
.example {
2
  transform: rotate(50grad); /* Rotate element by 50 gradians */
3
}

turn:

• turn represents complete revolutions, equal to 360 degrees.
• Used to represent number of rotations.

1
.example {
2
  transform: rotate(0.5turn); /* Rotate half a turn, 180 degrees */
3
}

Time Units:

In CSS, time units are used to represent time values in animation, transition, animation delay, and other properties.

s (seconds)

• s represents the second unit.
• Used to represent animation duration, transition time, etc.

Example:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9
.example{
10
    transition: background-color 1s ease; /* Define transition property and time */
11
}

ms (milliseconds)

• ms represents the millisecond unit. 1 second equals 1000 milliseconds.
• Used for more precise time control.

Example:

1
.base{
2
    width: 200px;
3
    height: 200px;
4
    background-color: #3498db;
5
}
6
.base:hover{
7
    background-color: #e74c3c;
8
}
9

10
.example{
11
    transition: background-color 2000ms ease; /* Define transition property and time */
12
}

Frequency Units:

In CSS, frequency units are used to represent the frequency of periodic events. The common frequency unit is Hz (Hertz), representing the number of cycles per second.

Hz (Hertz)

• Hertz is the most commonly used unit for frequency, representing the number of cycles per second.
• Used to represent the frequency of vibration, rotation, and other effects in animations.

Example:

1
.example {
2
  animation: shake 1s infinite; /* Vibration frequency is 1 Hertz, infinite loop */
3
}

kHz (kilohertz)

• Kilohertz is a frequency unit representing thousands of cycles per second. 1 kHz equals 1000 Hz.
• Used in some high-frequency scenarios, such as sound frequency.

Example:

1
.example {
2
  audio {
3
    frequency: 5kHz; /* Sound frequency is 5 kilohertz */
4
  }
5
}

Resolution Units:

In CSS, resolution units are used to represent pixel density of images or prints.

dpi (dots per inch)

• dpi represents dots per inch, i.e., the pixel density per inch of an image or print.
• Commonly used in print stylesheets to determine image clarity when printing.

Example:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 300dpi; /* Image pixel density is 300dpi when printing */
5
}

dppx (dots per pixel)

• dppx represents dots per pixel, i.e., the pixel density per physical pixel on screen.
• Usually used in responsive design to adapt to different screen pixel densities.

Example:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 300px 200px;
4
  background-resolution: 2dppx; /* Image displays on 2x pixel density screen */
5
}

dpcm (dots per centimeter)

• dpcm is a resolution unit representing dots per centimeter.
• Used in print stylesheets or media queries to adjust styles and images to adapt to different resolutions or printing devices.

Example:

1
.example {
2
  background-image: url('image.png');
3
  background-size: 2dpcm 3dpcm; /* Image displays at 2 dots per cm horizontal resolution and 3 dots per cm vertical resolution */
4
}

Size

Sizes in CSS can be used to control element dimensions.

width and height Properties

Used to set element width and height respectively, generally using length units such as pixels (px), percentage (%), em, rem, etc.

Example:

1
.example {
2
  width: 300px;
3
  height: 200px;
4
}

max-width and max-height Properties

Used to set maximum width and maximum height of elements respectively, generally using length units such as pixels (px), percentage (%), em, rem, etc.

Example:

1
.example {
2
  max-width: 100%;
3
  max-height: 500px;
4
}

min-width and min-height Properties:

Example:

1
.example {
2
  min-width: 200px;
3
  min-height: 100px;
4
}

Color

Keyword Colors

Colors represented by some predefined keywords, such as: red, blue, green, etc.

Example:

1
.example {
2
  color: red; /* Red */
3
  background-color: blue; /* Blue */
4
}

Hexadecimal Colors

RGB colors represented by six-digit or three-digit hexadecimal numbers. The six-digit format is #RRGGBB, where RR, GG, BB represent red, green, and blue color values respectively. The three-digit format is #RGB, with each character representing a color channel.

Example:

1
.example {
2
  color: #ff0000; /* Red */
3
  background-color: #00f; /* Blue */
4
}

RGB and RGBA Colors

Colors represented using the rgb() function, accepting three parameters for red, green, and blue color values, with a range of 0-255. rgba() is similar to rgb(), but with an additional transparency parameter, with a range of 0-1.

Example:

1
.example1 {
2
  color: rgb(255, 0, 0); /* Red */
3
  background-color: rgb(0, 0, 255); /* Blue */
4
}
5

6
.example2 {
7
  color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
8
  background-color: rgba(0, 0, 255, 0.7); /* Semi-transparent blue */
9
}

HSL and HSLA Colors

Colors represented using the hsl() function, accepting three parameters for hue, saturation, and lightness. Hue ranges from 0-360, saturation and lightness range from 0%-100%. hsla() is similar to hsl(), but with an additional transparency parameter, with a range of 0-1.

Example:

1
.example1 {
2
  color: hsl(0, 100%, 50%); /* Red */
3
  background-color: hsl(240, 100%, 50%); /* Blue */
4
}
5

6
.example2 {
7
  color: hsla(0, 100%, 50%, 0.5); /* Semi-transparent red */
8
  background-color: hsla(240, 100%, 50%, 0.7); /* Semi-transparent blue */
9
}

RGB Color Reference Table (oschina.net)