DEV Community

Adebiyi Itunuayo
Adebiyi Itunuayo

Posted on

Day 002 on My journey to becoming a CSS Pro with Keith Grant

#webdev #beginners #css #frontend

Continuing from Day 001

I just learned that CSS is basically about declaring rules, simple. And the "C" in CSS (cascade) is literally a set of rules the browser follows to resolve conflicts when styling. Simple: the cascade = conflict resolution.

So what does a CSS rule declaration even look like? Keith drops a clean example:

h1 {
  font-family: serif;
}
Enter fullscreen mode Exit fullscreen mode
  • h1: that’s a type/tag selector (remember <h1></h1> in HTML?).
  • font-family: serif;: this is a declaration, made up of a property (font-family) and a value (serif).
  • Curly braces { } holding one or more declarations: declaration block.
  • Selector + declaration block together: ruleset (aka rule).

Now here’s the fun part: Keith points out that while the strict, spec definition of "rule" means selector + declaration block, some devs in the real world use "rules" loosely.

If a dev says "the CSS rules for headings", they probably mean all styles that touch <h1>, <h2>, etc., not just one tiny rule.
If a dev says "I added two rules: font-size and color", what they really added were two declarations inside one rule.

So, the formal meaning:

/* One rule */
h1 {
  font-family: serif;
}

/* Multiple rules */
h1 {
  color: red;
}
p {
  font-family: serif;
}
Enter fullscreen mode Exit fullscreen mode

And the loose/common usage some devs throw around:

  • "Rules for <h1>": they mean all styles, including browser defaults and author styles.
  • "Two rules inside this selector": they mean two declarations.

Since I'm aiming to be a CSS pro, I’ve got to know both the strict definitions and the slang devs use in real life.

Top comments (0)