HTML CSS

Understand the topic

CSS rules select elements and give them visual properties. You can place rules in a style element in head or in a separate stylesheet linked with link. External stylesheets keep shared design in one place. A class is a reusable hook for styling. Keep selectors clear and avoid depending on a deeply nested document structure.

Worked example

<style>
.notice { border-left: 4px solid #15803d; padding: 1rem; background: #f0fdf4; }
</style>
<p class="notice">New lessons are available.</p>

The .notice selector matches elements with class="notice". In a larger project, move the rule into styles.css and link it using <link rel="stylesheet" href="styles.css">.

Practice

Create a reusable class for two announcement paragraphs.

<style>.announcement { padding: 1rem; border: 1px solid #64748b; }</style>
<p class="announcement">The library is open.</p>
<p class="announcement">Saturday workshop starts at ten.</p>

Common mistake

A path in href must point to a real stylesheet. Check the Network panel if styling does not load.

HTML documentation