CSS Ruleset Terminology - CSS-Tricks

Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today.

I was trying to think of the name of a thing in the CSS vernacular the other day. It made me think we should have some kind of reference right here on CSS-Tricks, as a site with CSS in the title probably ought to have! So, here’s the basics.

Breaking that down…

• The whole thing is a ruleset.
• The curly braces and everything inside is a declaration block.
• The bit before the opening curly brace is a selector.
• Each key/value pair, as separated by a colon and ending in a semicolon, is a declaration.
• In those key/value pairs, the key is a property (or property name), and the value is a value (or property value).

Marco Biedermann once created this diagram out of HTML and CSS itself, which I think is exceedingly clever:

See the Pen CSS Terminology by Marco Biedermann (@marcobiedermann) on CodePen.

More

• Louis Lazaris: CSS Terms and Definitions
• Divya Manian: CSS Vocabulary
• MDN: Syntax

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

1. Philipp Rudloff Permalink to comment# May 3, 2017

   The “whole thing” is called ruleset, so why are declarations not called rules?

   I would argue that what is called declaration block should be called the ruleset. A ruleset is being applied to a selector. Inside the ruleset are rules consisting of property and value.

   Is the selector part of the ruleset?

   • Keith J. Grant Permalink to comment# May 3, 2017

     Declarations are in fact called rules; they are a type of rule. There are other types of rules, too, such as at-rules (@import, etc.). So it’s valid, just a little less precise.

   • Amelia BR Permalink to comment# May 3, 2017

     I’ve never heard the term “rule set” before. But CSS 2.1 used “rule set” and “rule” interchangeably:

     A rule set (also called “rule”) consists of a selector followed by a declaration block.

     More recent CSS specs standardize on the name “rule”.

     A selector + declaration block is one type of CSS rule. Specifically, it is a “CSS Style Rule”. That’s to distinguish it from the other types of CSS rules, namely the @ rules. Both @ rules and style rules implement the CSSRule interface in the DOM (technically, CSSOM).

     Does it really make a difference to your day-to-day coding? Not unless you’re using the CSSOM interfaces. But I think the main point of Chris’ post is that it helps to have a consistent terminology when you’re talking about a programming language. The words may be made-up and arbitrary, but it helps to know what they mean.

     PS Chris: What about fleshing this out with other terms (like @-rules and so on) and adding it to the Almanac?

   • Alex Berkowitz Permalink to comment# May 3, 2017

     It could be due to the fact that CSS declarations aren’t always strictly adhered to. That is, other declarations can override them, which would seem to undermine their nature as strict rules. They’re more like suggestions, with the most specific one taking precedence. By definition rules are always supposed to be followed.

     At least, that’s my guess.

2. Pawel Grzybek Permalink to comment# May 3, 2017

   I always liked this one…

3. Brenden M Seidel Permalink to comment# May 3, 2017

   It seems like no matter how many times I look at these diagrams, I always seem to forget CSS terms when I’m talking with someone! Maybe a tattoo on my forearm is in order? #dedication

4. Bradley Staples Permalink to comment# May 3, 2017

   You can up a level as well to stylesheet and … stylesheets?

5. Ralph Mason Permalink to comment# May 8, 2017

   I was recently writing about @media, and wasn’t sure what to call it. An “@media rule”? I did a bit of searching, and found that it’s most commonly called an “@media directive”.

This comment thread is closed. If you have important information to share, please contact us.