Your first stylesheet

01A rule has two parts

A selector chooses elements. Declarations inside braces set properties and values. Keep a shared stylesheet for styles used by several pages.

/* styles.css */
p {
  color: #333;
  line-height: 1.7;
}

/* In your HTML head: */
/* <link rel="stylesheet" href="styles.css"> */

02Classes are reusable

A class can style many elements. Use descriptive names such as .card or .note. Avoid names that only describe a temporary color or position.

<article class="card">A project</article>
<style>
.card { padding: 24px; border: 1px solid #ddd; }
</style>

03Understand the cascade

When rules compete, origin, importance, layers and specificity affect which declaration wins. For otherwise equal rules, the later one wins. Inspect computed styles instead of adding !important everywhere.

.note { color: #555; }
.note { color: #222; } /* wins over the earlier equal rule */

04Try it yourself

Change the border radius and padding. Watch how spacing changes the card.

Further reading

Use the MDN learning guides and HTML Living Standard for deeper explanations and current browser guidance.