CSS syntax and basic selectors

CSS rules tell the browser how HTML should look. Once you understand the basic rule structure, you can control colors, text size, buttons, cards, and many other visual parts of a page.

What a CSS rule looks like

A CSS rule has two main parts:

• A selector, which tells the browser what HTML to style.
• A declaration block, which tells the browser how to style it.

The declaration block is wrapped in curly braces {}.

Selector, property, and value

Inside the declaration block, CSS uses declarations. Here is what each part means:

• The property is the visual feature you want to change, such as color or font-size.
• The value is the setting you choose for that property, such as blue or 32px.
• The colon : separates the property from the value.
• The semicolon ; marks the end of the declaration.

A declaration is written as:

Semicolons are important because they help the browser understand where one CSS instruction ends and the next one begins.

First code example

<h1 class="page-title">My first styled page</h1>
<p>This paragraph uses an element selector.</p>
<button id="main-button">Start</button>

<style>
  h1 {
    color: blue;
  }

  .page-title {
    font-size: 32px;
  }

  #main-button {
    background-color: green;
  }
</style>

Code walkthrough

The <style> block contains three CSS rules.

The first rule uses the h1 selector to find the heading and make its text blue.

The second rule uses .page-title to find elements with the class page-title and set the font size to 32px.

The third rule uses #main-button to find the element with the ID main-button and change the button background color to green.

Element selectors

Element selectors target HTML tags directly.

For example, this rule styles every paragraph on the page:

<p>First paragraph</p>

<p>Second paragraph</p>

<style>
  p {
    color: green;
  }
</style>

Element selectors are useful for setting simple default styles, but they affect every matching tag.

Class selectors

Class selectors let you style specific elements without changing every element of the same type.

A class selector starts with a period ..

<p class="highlight">This paragraph is highlighted.</p>

<p>Another paragraph.</p>

<style>
  .highlight {
    color: orange;
  }
</style>

You can reuse the same class on many elements.

ID selectors

ID selectors are used for one unique element on a page.

An ID selector starts with #.

<button id="main-button">Start</button>

<style>
  #main-button {
    background-color: yellow;
  }
</style>

In normal HTML, the same ID should be used only once per page. If you need to style many elements the same way, use a class instead.

Grouped selectors

Grouped selectors let multiple selectors share the same style. Separate each selector with a comma.

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>Another paragraph.</p>

<style>
  h1,
  h2,
  p {
    color: blue;
  }
</style>

This rule applies the same blue text color to h1, h2, and p elements.

Mini task

Look at this CSS rule:

Identify the selector, property, and value.

Answer:

• The selector is button.
• The property is color.
• The value is white.

Short quiz

Question 1: What symbol starts a class selector?

Answer: A period ..

Question 2: What symbol starts an ID selector?

Answer: A hash #.

Question 3: Why do CSS declarations usually end with semicolons?

Answer: To mark where one instruction ends before the next one begins.

Small challenge

Try styling the practice card below:

• Change the heading color using the class selector.
• Change the paragraph size using the class selector.
• Give the button a new background color using its ID.

<h2 class="card-title">Practice card</h2>
<p class="card-text">Style this text with CSS.</p>
<button id="practice-button">Click me</button>

<style>
  /* put your CSS below */

</style>

Summary

• A CSS rule has a selector and a declaration block.
• Declarations are written as property: value;.
• Element selectors style all matching HTML tags.
• Class selectors start with . and can be reused.
• ID selectors start with # and should be unique on a page.
• Grouped selectors use commas to apply the same style to multiple selectors.