📚 Understanding CSS Values

Lesson: Understanding CSS Values

Objective: By the end of this lesson, you’ll understand what CSS values are and how they work with CSS properties to style elements.

What are CSS Values?

CSS values define the specific settings for each CSS property. For example, in color: blue;, blue is the value that sets the text color.

Each property has a range of accepted values. For instance, color can be assigned named colors like red, hexadecimal values like #FF0000, or even RGB values like rgb(255, 0, 0).

Common CSS Value Types

Here are the most commonly used CSS value types:

Keywords

Some properties accept predefined keywords. For example:

text-align: center; centers the text.
display: none; hides an element.
Common keywords: auto, none, block, inline, etc.

Color Values

Named Colors: color: blue;
Hexadecimal Colors: color: #00FF00;
RGB Colors: color: rgb(255, 0, 0);
HSL Colors: color: hsl(0, 100%, 50%);

Length Units

Used for properties like width, height, padding, and margin.

Absolute Units: px (pixels), cm (centimeters)

Relative Units: em, rem (based on font size), % (relative to container)

div {
padding: 20px; /* Absolute */
width: 50%;    /* Relative */
}

URLs

Used for properties that require a file link, like background-image.

   background-image: url('image.jpg');

Functions

CSS functions perform specific calculations or transformations.

rgb(), hsl() for colors
calc() for dynamic calculations
url() for linking images
```
width: calc(100% - 50px);
```

Percentages

Percentages are used relative to another value, such as the parent element’s dimensions.

   width: 80%;

Combining Properties and Values

When styling an element, each property you add must have an appropriate value to take effect.

button {
  background-color: #3498db;
  padding: 10px;
  font-size: 16px;
}

Summary

CSS values, when combined with properties, are what make styling specific. Understanding how to use different types of values helps you achieve precise styling on your web pages.