Selectors and declarations

A CSS rule contains a selector and declarations:

.article-title {
  color: #234;
  font-size: 2rem;
}

The selector chooses elements; each declaration combines a property and value. Comments use /* ... */.

Common selectors

p { color: #333; }                    /* type */
.card { padding: 1rem; }             /* class */
#main-title { font-weight: 700; }    /* id */
input[required] { border-color: red; } /* attribute */
nav a { text-decoration: none; }     /* descendant */
.card > h2 { margin-top: 0; }        /* direct child */
h1, h2 { line-height: 1.2; }         /* grouping */
a:hover { color: tomato; }           /* pseudo-class */
.article::before { content: ""; }   /* pseudo-element */

Prefer classes for reusable styles. IDs are useful for unique document targets, but are difficult to override. Avoid using !important as a normal solution; understand why the cascade selected another rule instead.

Units

Use px for fixed details, % for a proportion of a containing size, rem for sizes relative to the root font, and em for sizes relative to the current element. vw and vh represent viewport dimensions. Choose units based on whether content should scale or remain fixed.

Try the selectors shown above on your own page and inspect the matched rules in DevTools.