HTML/CSS - 8

HTML/CSS - 8: Basic CSS Styling

In an earlier lesson, you used the style attribute to change one element at a time. That works, but it quickly becomes repetitive.

A better way to style several elements is to write CSS inside a <style> tag in the <head> of your page.

A basic CSS rule has two main parts: the selector chooses what to style, and the declarations inside { } describe how it should look.

For example: p { color: orange; } will change the text color of every <p> element on the page.

Your challenge: Style the headings and paragraphs on the page, then create a reusable CSS class called highlight.

✦ HTML Editor

▶ Live Output

What should you notice?

When you write a CSS rule for p, every paragraph on the page can receive that style automatically. You do not need to add style="" to each one.

For example: p { font-size: 18px; } affects every <p> element.

About classes: Sometimes you do not want to style every element in the same way. A class lets you create a reusable style that only affects the elements you choose.

In CSS, a class selector starts with a dot: .highlight

In HTML, you apply that class with: class="highlight"

Experiment: Add class="highlight" to a second paragraph. If your CSS is correct, both paragraphs should immediately share the same style.

Try this: Change the h1 color once inside your CSS. Notice that you only need to edit one rule rather than changing the HTML heading itself.

Good CSS habit: HTML describes the content and structure of the page, while CSS controls how that content looks. Keeping those jobs separate makes larger pages much easier to manage.

👀 Show Solution

<style>

  h1 {
    color: orange;
    font-size: 36px;
  }

  p {
    color: lightgray;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .highlight {
    background-color: darkblue;
    color: white;
    padding: 10px;
  }

</style>

The h1 rule styles the heading, the p rule styles every paragraph, and .highlight only affects elements that have class="highlight".