Properties & Values

Difficulty: Beginner

CSS properties define what aspect of an element you want to style, and values define how you want to style it. There are hundreds of CSS properties covering everything from text formatting (color, font-size, text-align) to layout (display, position, flex) to visual effects (transform, opacity, filter). Each property accepts specific types of values - color values for color properties, length values for sizing, keywords for display modes, etc.

Properties can be categorized into several groups. Text properties control typography: font-family, font-size, font-weight, line-height, text-align, text-transform, letter-spacing, word-spacing. Box model properties control spacing and sizing: width, height, padding, margin, border. Display and layout properties control how elements are arranged: display, position, flex, grid. Visual properties control appearance: background-color, color, opacity, box-shadow, border-radius. Understanding which properties exist and what values they accept is the core skill of CSS.

Shorthand properties let you set multiple related properties in a single declaration. For example, instead of writing padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 20px; you can write padding: 10px 20px; (vertical horizontal). Common shorthand properties include margin, padding, border, background, font, flex, and grid. Shorthand values follow specific ordering rules - for margin and padding, the order is top, right, bottom, left (clockwise from top). If you provide fewer values, they are duplicated: two values means vertical/horizontal, one value applies to all four sides.

CSS colors can be specified in multiple formats. Named colors (red, blue, cornflowerblue) are human-readable but limited to 147 predefined names. Hexadecimal codes (#ff0000, #f00) are the most common format, using RGB values in base-16. RGB/RGBA functions (rgb(255, 0, 0), rgba(255, 0, 0, 0.5)) specify red, green, blue channels with an optional alpha (opacity) channel. HSL/HSLA functions (hsl(0, 100%, 50%)) use hue (0-360 degrees), saturation, and lightness - many developers find HSL more intuitive for adjusting colors.

Vendor prefixes like -webkit-, -moz-, -ms-, and -o- were historically needed for experimental CSS properties. As browsers adopted standards, the need for prefixes has largely disappeared for most properties. Modern build tools like Autoprefixer can automatically add needed prefixes based on your browser support targets. In 2026, you rarely need to write vendor prefixes manually for standard properties. However, some cutting-edge features may still require them.

Code examples

Common CSS Properties by Category

/* Typography */
.text-content {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #374151;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Box Model */
.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  margin: 16px 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

/* Visual */
.card {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  opacity: 1;
}

/* Layout */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

CSS properties fall into categories: typography (fonts, text), box model (sizing, spacing), visual (colors, shadows), and layout (display, positioning). Learning the most common properties in each category is key.

Shorthand Properties

/* MARGIN shorthand */
.box-a { margin: 10px; }                /* all sides: 10px */
.box-b { margin: 10px 20px; }           /* vertical: 10px, horizontal: 20px */
.box-c { margin: 10px 20px 30px; }      /* top: 10, horizontal: 20, bottom: 30 */
.box-d { margin: 10px 20px 30px 40px; } /* top, right, bottom, left */

/* BORDER shorthand */
.bordered {
  border: 2px solid #3b82f6; /* width style color */
}

/* BACKGROUND shorthand */
.hero {
  background: #1e293b url('bg.jpg') no-repeat center / cover;
  /* color image repeat position / size */
}

/* FONT shorthand */
.heading {
  font: bold 24px/1.4 Georgia, serif;
  /* weight size/line-height family */
}

/* Longhand equivalents of margin: 10px 20px */
/*
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
*/

Shorthand properties combine multiple related properties into one declaration. Margin and padding use clockwise order: top, right, bottom, left. Border combines width, style, and color. Shorthand keeps CSS concise.

Color Formats

/* Named colors (147 available) */
.named { color: coral; }
.named2 { color: cornflowerblue; }

/* Hexadecimal */
.hex-full { color: #ff6347; }  /* Full 6-digit hex */
.hex-short { color: #f63; }   /* 3-digit shorthand (same as #ff6633) */
.hex-alpha { color: #ff634780; } /* 8-digit hex with alpha (50% opacity) */

/* RGB and RGBA */
.rgb { color: rgb(255, 99, 71); }
.rgba { color: rgba(255, 99, 71, 0.5); } /* 50% opacity */

/* HSL and HSLA */
.hsl { color: hsl(9, 100%, 64%); }  /* hue, saturation, lightness */
.hsla { color: hsla(9, 100%, 64%, 0.5); }

/* Modern CSS color syntax (space-separated) */
.modern-rgb { color: rgb(255 99 71 / 0.5); }
.modern-hsl { color: hsl(9 100% 64% / 0.5); }

CSS supports multiple color formats. Hex codes are the most common. HSL is often easier to work with when you need to adjust lightness or saturation. RGBA and HSLA add transparency via the alpha channel.

Key points

Shorthand properties reset omitted sub-properties to their initial values. For example, background: red resets background-image, background-position, etc. to defaults.
The font shorthand requires at minimum font-size and font-family. Other values like weight and line-height are optional.
CSS custom properties (variables) let you define reusable values: --primary: #3b82f6; then use them with var(--primary).
Modern CSS color syntax uses spaces instead of commas and a slash for alpha: rgb(255 99 71 / 0.5).

Concepts covered

CSS Properties, Property Values, Shorthand Properties, Color Values, Keywords, Vendor Prefixes