The Complete CSS Properties Interactive Tutorial

Table of Contents

What are CSS properties

CSS is basically: pick an element and tell the browser how it should look. The “tell it how” part is done with properties and their values.

A property is the setting name, like color, padding, font-size.
A value is what you assign to it, like hotpink, 24px, 700.
A declaration is one property-value pair: color: hotpink;
A rule is a selector plus declarations: .card { color: hotpink; }

.demo-title {
  color: #ef233c;
}

.demo-title {
  color: #0077b6;
}

.demo-title {
  color: #111;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.panel {
  border: 3px solid #111;
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
}

.demo-title {
  font-size: 26px;
  margin: 0;
}

.small {
  margin: 0;
  opacity: 0.85;
}


  
    A CSS property changes a specific thing
    Here we only change color. Everything else stays put.

CSS properties and values syntax

Most declarations follow this format: property: value;

Values come in different “shapes”:

Keywords: block, none, center, bold
Lengths: px, rem, em, %, vh
Colors: #111, rgb(0 119 182), hsl(350 85% 55%)
Functions: calc(), clamp(), min(), max()

Beginner tip: if a property looks like it accepts “numbers”, it usually needs a unit (like 16px or 1rem). If it looks like it accepts “words”, it probably uses keywords (like display: grid).

Choose a value for display: block inline-block flex grid

.boxes {
  display: block;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.note {
  border: 2px dashed #111;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.boxes {
  border: 3px solid #111;
  border-radius: 18px;
  padding: 12px;
  background: #f6f6f6;
  gap: 10px;
}

.boxes > div {
  border: 2px solid #111;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fff;
  font-weight: 650;
}

.hint {
  margin: 0;
  opacity: 0.85;
}


  Same HTML, different display values.
  
    One
    Two
    Three

CSS properties list and cheat sheet

There are a lot of CSS properties, so the goal isn’t “memorize everything”. A good cheat sheet is really a system:

Know the common families: layout, spacing, typography, color, backgrounds, borders, effects, animation.
Recognize patterns: margin and padding behave similarly, border-* properties group together, font-* properties group together.
Use your browser DevTools: change values live, then copy what works.

CSS properties with examples

Let’s do a “guided tour” across multiple property families: spacing, borders, and shadows. These are great because they’re visual and beginner-friendly.

.card {
  border-radius: 0px;
  box-shadow: 0 0 0 #111;
}

.card {
  border-radius: 18px;
  box-shadow: 0 12px 0 #111;
}

.card {
  border-radius: 999px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.25);
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.card {
  border: 3px solid #111;
  background: #fff;
  padding: 18px;
  display: grid;
  gap: 10px;
}

.card h4 {
  margin: 0;
}

.card p {
  margin: 0;
  opacity: 0.85;
  line-height: 1.5;
}


  
    Same card, different vibes
    border-radius changes the corners. box-shadow changes depth.

CSS properties for images

Images are special because they have their own “intrinsic size”. In CSS, you often place images inside a container and decide how they should fit.

Use width and height to control size.
Use object-fit to control how the image fills its box.
Use object-position to choose the “focus point” when cropping.
Use filter for effects like blur and grayscale.

.photo img {
  object-fit: cover;
  object-position: 50% 50%;
  filter: none;
}

.photo img {
  object-fit: contain;
  object-position: 50% 50%;
  filter: none;
}

.photo img {
  object-fit: cover;
  object-position: 20% 40%;
  filter: grayscale(1) contrast(1.1);
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.photo {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  overflow: hidden;
  width: min(720px, 100%);
  aspect-ratio: 16 / 9;
}

.photo img {
  width: 100%;
  height: 100%;
  display: block;
}

.caption {
  margin: 0;
  opacity: 0.85;
}


  
    
  
  
    object-fit controls sizing behavior, object-position controls the crop focus, and filter adds effects.

Learn more about object-fit in the CSS Object-Fit Interactive Tutorial, and about filters in the CSS Filters Interactive Tutorial.

CSS properties for text

Typography is where CSS starts to feel like design. These are the most-used text properties:

font-family chooses the font.
font-size sets size.
font-weight sets thickness.
line-height controls vertical rhythm (very important for readability).
letter-spacing adjusts spacing between letters.
text-align aligns text (start, center, end).

.text-demo {
  font-family: system-ui, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: start;
}

.text-demo {
  font-family: system-ui, Arial, sans-serif;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-align: start;
}

.text-demo {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 18px;
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: 0.06em;
  text-align: center;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.panel {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.panel h4 {
  margin: 0;
}

.text-demo {
  margin: 0;
  opacity: 0.9;
}


  
    Text feels different with just a few properties
    
      CSS typography is mostly about combining font-size, line-height, and font-weight in readable ways.

Learn more about font properties in the CSS Font Interactive Tutorial.

CSS properties for text formatting

“Formatting” is when you change how text behaves or appears without changing the font itself. Common formatting properties include:

text-transform (uppercase, lowercase, capitalize)
text-decoration (underline, thickness, style)
text-shadow (shadows behind text)
white-space, overflow, text-overflow (truncation and wrapping)

.format {
  text-transform: none;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.format {
  text-transform: uppercase;
  text-decoration: underline;
  text-shadow: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.format {
  text-transform: none;
  text-decoration: none;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.panel {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.panel h4 {
  margin: 0;
}

.format {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  max-width: 54ch;
}


  
    Text formatting: style and behavior
    
      This is a longer sentence on purpose so you can see wrapping or truncation when we switch properties like
      white-space and text-overflow.

Learn more in the CSS Uppercase Interactive Tutorial, in the CSS Text Decoration Interactive Tutorial, in the CSS Text Shadow Interactive Tutorial, and in the CSS Ellipsis Interactive Tutorial.

CSS properties for buttons

Buttons are a perfect playground for beginner CSS because they mix spacing, borders, color, and interactive states. A common approach is:

Base styles on the button itself (padding, border, border-radius, background, color).
Add interaction on :hover and :focus-visible.
Use transition to make changes feel smooth.

.button {
  background: #111;
  color: #fff;
  border-radius: 12px;
}

.button:hover {
transform: translateY(-2px);
}

.button:focus-visible {
outline: 3px solid #0077b6;
outline-offset: 3px;
}

.button {
  background: #ef233c;
  color: #fff;
  border-radius: 999px;
}

.button:hover {
  transform: translateY(-2px) scale(1.02);
}

.button:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
}

.button {
  background: transparent;
  color: #111;
  border-radius: 14px;
  box-shadow: inset 0 0 0 3px #111;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 3px #0077b6;
}

.button:focus-visible {
  outline: 3px solid #ef233c;
  outline-offset: 3px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
  display: grid;
  gap: 12px;
}

.panel {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  padding: 18px;
  display: grid;
  gap: 12px;
  width: fit-content;
}

.button {
  border: 0;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.help {
  margin: 0;
  opacity: 0.85;
  max-width: 48ch;
}


  
    
    
      Buttons usually need a visible :focus-visible style for keyboard users.
      Try tabbing to the button.

Learn more in the CSS Padding Interactive Tutorial, in the CSS Rounded Corners Interactive Tutorial, and in the CSS Transition Interactive Tutorial.

CSS properties for background image

Background images are different from <img>: they’re meant for decoration, patterns, and hero sections.

background-image sets the image.
background-size controls scaling (cover and contain are classics).
background-position chooses the focal point.
background-repeat controls tiling.

.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.hero {
  background-size: 120px;
  background-position: 18px 18px;
  background-repeat: repeat;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.hero {
  border: 3px solid #111;
  border-radius: 18px;
  box-shadow: 0 12px 0 #111;
  min-height: 260px;
  padding: 18px;
  display: grid;
  align-content: end;
  gap: 6px;
  background-color: #fff;
  background-image: url("https://picsum.photos/1200/700");
}

.hero h4 {
  margin: 0;
  color: #111;
  background: rgba(255, 255, 255, 0.85);
  width: fit-content;
  padding: 8px 10px;
  border-radius: 12px;
}

.hero p {
  margin: 0;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.85);
  width: fit-content;
  padding: 8px 10px;
  border-radius: 12px;
}


  
    Background image properties
    Cover, contain, or tile: same image, totally different result.

Learn more in the CSS Background Interactive Tutorial.

CSS properties for table

Tables come with built-in browser styles, so a few specific properties do a lot of heavy lifting:

border-collapse controls whether borders merge.
border-spacing adds space between cells (only when not collapsed).
table-layout affects column sizing behavior.

.table {
  border-collapse: separate;
  border-spacing: 10px;
}

.table {
  border-collapse: collapse;
  border-spacing: 0;
}

.table {
  border-collapse: collapse;
  table-layout: fixed;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.table {
  width: min(720px, 100%);
  border: 3px solid #111;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.table th,
.table td {
  border: 2px solid #111;
  padding: 10px 12px;
  text-align: start;
}

.table th {
  background: #f6f6f6;
}

.note {
  margin: 0;
  opacity: 0.85;
  max-width: 70ch;
}


  
    Try switching between border-collapse modes. Then try table-layout: fixed to see how columns behave.
  

  
    
      
        Plan
        Price
        Notes
      
    
    
      
        Starter
        $9
        Good for small projects
      
      
        Pro
        $19
        A bit more room to grow
      
      
        Team
        $49
        Shared access and admin controls

Plan	Price	Notes
Starter	$9	Good for small projects
Pro	$19	A bit more room to grow
Team	$49	Shared access and admin controls

CSS properties for anchor tag

Links (<a>) are interactive text, so they need both styling and accessibility. The most important idea: don’t remove focus styles without replacing them.

color changes link color.
text-decoration controls underlines (often better than removing them).
:hover and :focus-visible give feedback.

a {
  color: #0077b6;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
color: #ef233c;
}

a:focus-visible {
outline: 3px solid #111;
outline-offset: 3px;
}

a {
  color: #111;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 rgba(0, 119, 182, 0.4);
}

a:hover {
  box-shadow: inset 0 -10px 0 rgba(239, 35, 60, 0.35);
}

a:focus-visible {
  outline: 3px solid #0077b6;
  outline-offset: 3px;
}

a {
  color: #111;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

a:hover {
  color: #ef233c;
}

a:focus-visible {
  outline: 3px solid #ef233c;
  outline-offset: 3px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.panel {
  border: 3px solid #111;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.panel p {
  margin: 0;
  line-height: 1.6;
  max-width: 70ch;
}

kbd {
  border: 2px solid #111;
  border-radius: 8px;
  padding: 2px 6px;
  font-weight: 700;
  font-family: ui-monospace, Menlo, monospace;
}


  
    
      This is a sentence with a
      styled anchor tag
      inside it.
      Try Tab to focus the link.

Learn more in the CSS Link Interactive Tutorial.

CSS properties for body tag

Styling the body is where you set your page defaults: fonts, base colors, background, and comfortable spacing. Think of it as setting the “room temperature” for your whole site.

Use font-family, font-size, and line-height for readable defaults.
Use color and background for the overall theme.
Use margin to remove the browser’s default page margins (if you want full control).

body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: #111;
  background: #ffffff;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.page {
  padding: 18px;
}

.card {
  border: 3px solid currentColor;
  border-radius: 18px;
  padding: 16px;
  max-width: 780px;
}

.card h4 {
  margin: 0;
}

.card p {
  margin: 0;
  opacity: 0.9;
  max-width: 70ch;
}

.badge {
  display: inline-block;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 700;
  margin-top: 10px;
  width: fit-content;
}


  
    Body styles = site defaults
    
      Change the snippet to see how global typography and colors affect everything.
      This is why body is a great place for “base” properties.
    
    Default vibes

How to keep learning properties

If you’re a beginner, the fastest way to grow is to practice in categories:

Layout: display, flex, grid, gap, position
Spacing: margin, padding, width, max-width
Typography: font-*, line-height, text-*
Visual style: color, background, border, box-shadow
Interaction: :hover, :focus-visible, transition, cursor

When you meet a new property, ask two questions: What type of values does it accept? and What element(s) does it apply to?

Padding Border radius Font size

.practice {
  padding: 16px;
  border-radius: 18px;
  font-size: 18px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  max-width: 980px;
  padding: 18px;
  font-family: system-ui, Arial, sans-serif;
}

.practice {
  border: 3px solid #111;
  background: #fff;
  box-shadow: 0 12px 0 #111;
  line-height: 1.5;
}

.practice h4 {
  margin: 0;
}

.practice p {
  margin: 0;
  opacity: 0.85;
  max-width: 70ch;
}


  
    Practice playground
    
      Sliders are a nice way to learn “numeric” properties. Move them and watch how the design changes.

CSS Properties Conclusion

CSS properties are the building blocks of styling. Each one has its own purpose, accepted values, and quirks. By understanding the most common properties and how to experiment with them, you can start to build your own designs from scratch.

Leave the first comment (Cancel Reply)

You must be logged in to post a comment.