Everything You Need to Know About CSS Style Rules

We can all agree that a well-designed website is essential for making a great first impression. What if I told you that mastering CSS style rules could be your golden ticket to creating eye-catching, professional-looking websites with ease?

In this guide, "Everything You Need to Know About CSS Style Rules," we'll walk you through the essentials of CSS, from selectors to properties, and show you the rules behind them.

Anatomy of a style rule

In the examples that follow, I'll include helpful comments to explain each part in detail so you can better understand how everything works.

Property

Properties in CSS are the attributes you can specify values for, like "color" and "font-size".

/* margin is the property */
p {
  margin: 32px;
}

Selector

A selector is a descriptor that lets you target specific elements on the page. In this case, we're selecting all nodes with the “apple” class.

/* .apple is the selector */
.apple {
  background-color: red;
  border-radius: 50%;
}

In this case, we're selecting all 'h1' tags (though a page should generally only have one h1!)

/* h1 is the selector */
h1 {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}

Declaration

A declaration is a combination of a property and a value. In this case, the first declaration has a property of "padding", and a value of "32px".

/* padding: 32px; is the first declaration */
/* white-space: pre-wrap; is the second declaration */
.code-snippet {
  padding: 32px;
  white-space: pre-wrap;
}

Rule

A rule, also known as a style, is a collection of declarations, targeting one or more selectors. A stylesheet is made up of multiple rules.

/* this entire bloc is a rule */
p {
  color: red;
  font-family: sans-serif;
}

In this example, we have two rules, and the first one targets all "p" tags.

p {
  font-size: 1rem;
}

.big-paragraph {
  font-size: 1.25rem;
  font-weight: 500;
}

Unit

Some values have units, like px, %, or em. In this case, our padding-top has a value of 24px, which is measured in the "px" unit.

/* px is the unit */
p {
  padding-top: 24px;
}