CSS values, units, and colors

CSS properties tell the browser what you want to change. CSS values tell the browser the exact setting to use.

For example, color is a property, and blue is a value. Together, they make a complete CSS declaration.

In this lesson, you will learn common CSS values for sizes and colors.

What a value does in CSS

A value completes a CSS declaration.

Different properties need different kinds of values:

• color needs a color value, such as blue or #2563eb.
• width needs a size value, such as 200px or 50%.
• font-size needs a text size value, such as 1rem.

<p class="intro">CSS values control how this text looks.</p>

<style>
  .intro {
    color: blue;
    font-size: 1.25rem;
  }
</style>

The browser reads each property and value together.

Absolute units: px

px means CSS pixels. It is an absolute unit, which means the size does not depend on the parent element.

<div class="user-card">Hello</div>

<style>
  .user-card {
    width: 300px;
    border: 1px solid black;
    padding: 16px;
  }
</style>

The card is 300px wide.

Use px when you need a small exact measurement, such as a border, icon size, or fixed spacing.

Do not put a space between the number and the unit. Write 300px, not 300 px.

Relative units: %, em, and rem

Relative units are calculated from something else.

• % is usually based on the size of the parent container.
• em is based on the font size of the current element.
• rem is based on the root font size of the page.

Relative units are useful because they can adapt as the page or text size changes.

When to use px

Use px when you need strict control over a small measurement.

This is useful for borders, icons, avatars, and small fixed details.

Be careful with large layout widths in px. A 900px layout may look fine on a laptop but overflow on a small phone.

When to use %

Percentages are fluid. They change based on the parent element.

If a parent is 800px wide, a child with width: 50% becomes 400px wide.

<div class="layout">
  <div class="half-width-card">Half width</div>
</div>

<style>
  .layout {
    width: 400px;
    border: 1px solid black;
  }

  .half-width-card {
    width: 50%;
    background-color: lightblue;
    padding: 12px;
  }
</style>

Use % for flexible layouts, columns, and elements that should respond to their container.

Remember that percentage width is based on the parent container's width. Percentage height is harder because the parent also needs a defined height.

When to use em

em scales with the current font size.

If an element has font-size: 16px, then 1em equals 16px and 2em equals 32px.

<button class="alert-button">Delete</button>

<style>
  .alert-button {
    font-size: 16px;
    padding: 0.75em 1.25em;
  }
</style>

Use em for spacing inside buttons and small components. If the button text gets larger, the padding grows with it.

Be careful when using em for font sizes in nested elements. Sizes can compound and become smaller or larger than expected.

When to use rem

rem means root em. It is based on the root font size of the page, usually the html element.

In many browsers, the default root font size is 16px, so 2rem is often 32px.

<h2 class="page-heading">Main heading</h2>

<style>
  .page-heading {
    font-size: 2rem;
  }
</style>

Use rem for consistent text sizes across a website.

If the root font size changes, all rem values scale from that root size. This can help users who increase their browser text size.

Runnable example: mixing units

This example mixes fixed and relative units.

<div class="container">
  <div class="percent-card">
    <p class="rem-text">This text uses rem units.</p>
  </div>
</div>

<style>
  .container {
    width: 400px;
    background-color: lightgray;
    padding: 20px;
  }

  .percent-card {
    width: 50%;
    background-color: white;
    border: 2px solid black;
  }

  .rem-text {
    font-size: 1.5rem;
    margin: 1em;
  }
</style>

The container has a fixed width. The card uses half of that width. The text uses rem, and its margin uses em.

Color names

CSS has named colors such as red, blue, black, white, and green.

<p class="warning-text">Check your form before sending.</p>

<style>
  .warning-text {
    color: red;
  }
</style>

Color names are useful for quick testing and simple examples.

For real projects, you will usually use hex, RGB, or HSL because they give you more control.

Hex colors

Hex colors use a # followed by six characters.

The characters represent red, green, and blue.

<button class="primary-button">Save</button>

<style>
  .primary-button {
    background-color: #2563eb;
    color: #ffffff;
  }
</style>

Hex colors are common in design tools such as Figma.

Always include the #. Write #ffffff, not ffffff.

RGB colors

RGB stands for red, green, and blue.

The rgb() function uses three numbers from 0 to 255.

<div class="header-box">Blue box</div>

<style>
  .header-box {
    background-color: rgb(0, 0, 255);
    color: white;
    padding: 16px;
  }
</style>

rgb(0, 0, 0) is black. rgb(255, 255, 255) is white.

RGB can be easier to understand if you think of colors as amounts of red, green, and blue light.

RGBA colors and transparency

RGBA is like RGB, but it adds an alpha value.

The alpha value controls opacity:

• 0 means fully transparent.
• 0.5 means 50% visible.
• 1 means fully solid.

<div class="pattern-background">
  <div class="glass-card">
    <p>This box is 80% visible.</p>
  </div>
</div>

<style>
  .pattern-background {
    background-color: navy;
    padding: 40px;
  }

  .glass-card {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 8px;
  }
</style>

Use rgba() for overlays, see-through cards, and backgrounds placed over images or strong colors.

Do not use values above 1 for the alpha value.

HSL colors

HSL stands for hue, saturation, and lightness.

• Hue is a number from 0 to 360 on the color wheel.
• Saturation controls how intense the color is.
• Lightness controls how bright or dark the color is.

<p class="success-message">Saved successfully.</p>

<style>
  .success-message {
    color: hsl(120, 100%, 35%);
  }
</style>

HSL is useful when you want to adjust a color by hand.

For example, to make a color darker, you can lower the lightness percentage.

You can also use hsla() for transparency:

Comparing color formats

• Color names are easy to read but limited.
• Hex colors like #ff0000 are common in design tools.
• RGB like rgb(255, 0, 0) shows red, green, and blue values directly.
• RGBA like rgba(255, 0, 0, 0.5) adds transparency.
• HSL like hsl(0, 100%, 50%) is useful for adjusting color themes by hand.

Common beginner mistakes

• Writing spaces inside units, such as 20 px or 100 %. Use 20px and 100%.
• Forgetting the # in hex colors. Use #ffffff, not ffffff.
• Expecting height: 50% to work without a parent height.
• Using only px for full layouts, which can cause overflow on small screens.
• Using alpha values like 50 in rgba(). Use 0.5 for 50% visible.

Mini task

Look at this CSS rule:

What width will this box be if its parent container is 800px wide?

What visual effect does the background color have?

Answer: the box will be 400px wide. The background will be black with 50% opacity, so anything behind it can show through.

Short quiz

Question 1: Which unit is based on the root font size of the page?

Answer: rem.

Question 2: Which color format uses a # symbol?

Answer: Hex color.

Question 3: What does the alpha value do in rgba()?

Answer: It controls opacity, or how visible the color is.

Small challenge

Try styling the profile card below:

• Use px to add a border.
• Use rem to make the heading text larger.
• Use rgba() to give the paragraph a see-through background.
• Use a hex color for the button background.

<div class="profile-card">
  <h3 class="profile-name">Jane Doe</h3>
  <p class="profile-bio">Web developer in training.</p>
  <button class="profile-button">Follow</button>
</div>

<style>
  .profile-card {
    /* Add a 2px solid border */
  }

  .profile-name {
    /* Set the font size to 2rem */
  }

  .profile-bio {
    /* Add a white background with 50% opacity */
  }

  .profile-button {
    /* Set the background color to a hex color */
  }
</style>

One possible answer:

Summary

• Values are the settings applied to CSS properties.
• px is useful for exact fixed measurements.
• % is relative to the parent container.
• em scales from the current element's font size.
• rem scales from the root font size.
• Color names are simple but limited.
• Hex, RGB, and HSL are common ways to define exact colors.
• RGBA and HSLA add transparency with an alpha value.