Glossary of CSS Terms: Essential CSS Vocabulary Explained

This glossary explains the CSS terms you will see in documentation, tutorials, browser tools, and code reviews. It is designed to help beginners understand the language of CSS and give intermediate developers a quick reference for the concepts that matter most when styling web pages.

Quick answer: CSS terms describe the parts of style rules and the way styles are applied to elements. If you understand words like selector, property, value, cascade, and specificity, you can read most CSS articles and debug most styling problems.

Difficulty: Beginner

You'll understand this better if you know: basic HTML element names, how browsers display web pages, and the idea that styles can be written in a stylesheet or directly on an element.

1. What Is the CSS Glossary?

A CSS glossary is a reference list of the words and phrases used to describe CSS syntax, behavior, and layout. It does not teach one feature in depth; instead, it gives you the meaning of the terms you need to understand CSS documentation and conversations with other developers.

CSS vocabulary includes the names of selectors, properties, values, and layout concepts.
Technical accuracy matters because many CSS problems come from confusing similar terms.
Shared language helps you read browser dev tools, error messages, and style guides more confidently.
Reference value makes this article useful while learning, reviewing, or troubleshooting.

Some glossary terms describe syntax, such as declaration or rule set. Others describe how CSS behaves, such as inheritance, cascade, and specificity.

2. Why CSS Terms Matter

CSS is easy to copy and paste before it is easy to understand. The glossary terms help you move from guessing to reading CSS with precision, which saves time when styles do not behave as expected.

For example, if a style is not applying, the cause might be a low-specificity selector, an overridden declaration, or a value that is invalid for the property. Knowing the right term helps you search for the right solution.

CSS vocabulary also matters because browser developer tools use these terms directly. Panels may show computed styles, matched rules, and inherited properties. Without the glossary, those labels can feel confusing even when the fix is simple.

3. Core CSS Terms at a Glance

This section defines the most important terms you will see again and again in CSS work.

Selector — the pattern that chooses which HTML elements receive styles.
Declaration — one property-value pair inside a rule.
Property — the style feature being set, such as color or margin.
Value — the setting applied to the property, such as red or 16px.
Rule set — a selector plus its declarations.
Cascade — the process the browser uses to decide which styles win.
Specificity — the score that helps determine which selector is stronger.
Inheritance — when some properties pass from a parent element to a child element.
Box model — the sizing model made of content, padding, border, and margin.
Computed style — the final value the browser calculates for an element.

Selectors, properties, and values

A selector points to elements, a property names the style being changed, and a value supplies the actual setting. Together they create a declaration such as color: blue.

The cascade and specificity

The cascade is the browser’s decision-making process for resolving conflicts. Specificity is one of the main factors inside that process, along with source order and !important.

The box model

The box model describes how space around elements is measured. It is essential for understanding width, spacing, alignment, and overflow.

4. Key CSS Terms with Examples

The examples below show how the glossary words appear in real CSS.

Rule set

A rule set combines a selector with one or more declarations. This is the basic structure of most CSS files.

p {
  color: blue;
  margin-bottom: 1rem;
}

In this example, p is the selector, and each line inside the braces is a declaration.

Declaration block

The declaration block is the part inside the braces. It holds all the declarations that apply to the selected elements.

h1 {
  font-size: 2rem;
  line-height: 1.2;
}

This structure is often called a CSS rule, rule set, or style rule in casual conversation.

Pseudo-class

A pseudo-class describes a special state of an element, such as hover or focus. It is written with a single colon.

a:hover {
  text-decoration: underline;
}

This rule applies when the user points to a link with a pointer device.

Pseudo-element

A pseudo-element styles part of an element or inserts generated content. It is written with a double colon in modern CSS.

p::first-line {
  font-weight: bold;
}

Pseudo-elements are useful when you want to target a specific visual part of an element instead of the entire element.

Media query

A media query applies styles only when a condition is true, such as a screen width range.

@media (min-width: 48rem) {
  .sidebar {
    display: block;
  }
}

Media queries are central to responsive design because they let one stylesheet adapt to different devices and viewport sizes.

5. Practical Use Cases for CSS Terms

These terms are not just textbook definitions. You use them when reading, writing, and debugging styles every day.

Explaining why a rule does not apply because another selector has higher specificity.
Reading browser dev tools to find the computed value for a property.
Choosing whether a child element inherits a font-related property from its parent.
Deciding whether spacing should be handled with margin, padding, or gap.
Understanding how a media query changes layout at a breakpoint.
Reviewing team code where people refer to declaration blocks, pseudo-classes, and the cascade.

In each case, the term helps you describe the problem precisely, which makes the fix easier to find and explain.

6. Common Mistakes

Mistake 1: Confusing a selector with a declaration

Beginners often call every part of a CSS rule a selector. In reality, the selector chooses the element, while the declaration changes a style.

Problem: If you mix up these terms, it becomes hard to understand which part of the rule is targeting the element and which part is setting the style.

button {
  background-color: green;
}

Fix: Identify the selector and the declaration separately.

/* selector */
button
/* declaration */
background-color: green;

The corrected version makes it easier to talk about CSS accurately and debug problems faster.

Mistake 2: Thinking inheritance applies to every property

Some properties inherit automatically, but many do not. This leads to confusion when a child element does not look like its parent.

Problem: Properties such as margin and border do not inherit by default, so expecting them to cascade from a parent causes surprises.

.card {
  border: 1px solid black;
}

.card span {
  /* border will not automatically inherit */
}

Fix: Set the property on the child if you want the same result, or choose an inheritable property such as color when appropriate.

.card {
  border: 1px solid black;
}

.card span {
  border: 1px solid black;
}

The fix works because inheritance is property-specific, not universal.

Mistake 3: Using specificity as if it were the same as source order

Specificity and source order both matter, but they are not the same thing. A stronger selector can beat a later rule, which surprises many developers.

Problem: If a more specific selector already applies, simply moving another rule lower in the stylesheet may not change the result.

#nav a {
  color: red;
}

a {
  color: blue;
}

Fix: Use a selector with appropriate specificity or simplify the earlier rule.

.nav-link {
  color: blue;
}

The corrected version works because the selector strategy is consistent instead of relying on a weaker rule to override a stronger one.

7. Best Practices

Use glossary terms precisely in your own notes

When you write CSS comments or discuss a bug, name the exact concept. Saying “the selector is too specific” is more useful than saying “CSS is broken.”

/* This selector is too specific and hard to override */
header nav ul li a {
  color: white;
}

Precise language helps you see design problems before they grow into maintenance problems.

Learn terms together with behavior

A term is easier to remember when you connect it to real behavior. For example, learn inheritance alongside font properties and specificity alongside override bugs.

body {
  font-family: system-ui;
}

button {
  /* inherits font-family unless overridden */
}

Learning the behavior with the term makes the concept stick.

Use consistent naming for layout concepts

Words like margin, padding, gap, and alignment are not interchangeable. Each describes a different kind of spacing or placement.

.toolbar {
  display: flex;
  gap: 0.75rem;
}

Using the correct spacing term makes layout decisions easier to reason about and explain.

8. Limitations and Edge Cases

Some CSS terms are informal and can vary by context. For example, people may say “rule,” “rule set,” or “style rule” to mean the same thing.
The same term can behave differently depending on the property. Inheritance applies to some properties but not all.
Browser dev tools may use technical labels like computed, specified, and used value. These are related but not identical.
Some selectors look similar but behave differently, such as pseudo-classes and pseudo-elements.
The cascade can be affected by source order, specificity, and origin, so one glossary word rarely tells the whole story.
Shorthand properties can set multiple longhand properties at once, which makes debugging more complex than reading a single term might suggest.

A glossary is a map, not a replacement for practice. The terms become more useful as you see them in real stylesheets and browser tools.

9. Practical Mini Project

This mini project shows several glossary terms working together in a small, complete stylesheet.

Imagine a simple article card with a title, body text, and a button. The goal is to demonstrate selectors, declarations, inheritance, pseudo-classes, and the box model in one place.

article {
  max-width: 32rem;
  padding: 1.5rem;
  border: 1px solid #d0d7de;
  border-radius: 0.75rem;
}

article h2 {
  margin-top: 0;
  font-size: 1.5rem;
}

article p {
  color: #444;
}

article a {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #2563eb;
  color: white;
  text-decoration: none;
}

article a:hover {
  background: #1d4ed8;
}

This example includes a rule set for the card, inherited text behavior from the container, a pseudo-class for interaction, and spacing values that work together in the box model.

10. Key Points

A CSS glossary explains the language used to describe styles, selectors, and layout behavior.
A selector chooses elements, while a declaration sets a style.
The cascade and specificity determine which styles win.
Inheritance applies to some properties, but not all of them.
The box model explains how content, padding, border, and margin create space.
Terms like pseudo-class, pseudo-element, and media query describe special CSS behavior that you will use often.

11. Practice Exercise

Use the glossary terms you learned to label the parts of the following CSS rule and identify which concepts are involved.

Name the selector.
Name each declaration.
Identify one property that affects spacing.
Identify whether the rule uses inheritance, specificity, or a pseudo-class.

Expected output: You should be able to say that .card a:hover is the selector, color: white is a declaration, margin-top affects spacing, and :hover is a pseudo-class.

Hint: Read the rule from left to right and separate the targeting part from the styling part.

.card a:hover {
  margin-top: 1rem;
  color: white;
}

Solution: The selector is .card a:hover. The declarations are margin-top: 1rem and color: white. The spacing property is margin-top, and the special selector part is the pseudo-class :hover.

12. Final Summary

The glossary of CSS terms gives you the vocabulary needed to read stylesheets, browser dev tools, and CSS tutorials with confidence. Once terms like selector, declaration, cascade, specificity, inheritance, and box model become familiar, CSS becomes much easier to reason about.

Remember that the point of a glossary is practical understanding, not memorization. The more you connect each term to real CSS behavior, the faster you will recognize why a style works, why it fails, and how to fix it.

If you want a strong next step, review CSS selectors and the box model in more depth, then practice explaining your own styles using the terms from this glossary.