Learning how to understand and create CSS rules (also called rulesets) is the single most important skill in any CSS tutorial — CSS rules are the fundamental instructions that tell the browser exactly how to style and position HTML elements. Every color, size, spacing, font, layout, hover effect, animation, and responsive behaviour on the modern web starts with a CSS rule. In this guide, you’ll write your first CSS rule, break down every single part (selector, declaration block, property, value), and see it instantly applied in the browser using your css-practice project from the previous lesson.

This is a perfect next step in our CSS tutorial for beginners series — by the end, you’ll confidently write and debug CSS rules like a pro.

Prerequisites

  • You have already completed the setup tutorial: css-practice folder with:
    • index.html (linked to css/styles.css)
    • css/styles.css (empty or with test styles)
    • images/ folder (optional for now)
  • Visual Studio Code (or any editor) open with the project folder
  • A modern browser (Chrome, Edge, Firefox) for live preview

1. Write Your First CSS Rule – Hands-On

Open css/styles.css and add this rule:

				
					h1 {
  color: blue;
}
  • Save the file.

Now make sure index.html has at least one <h1> tag (add it inside <body> if missing):

				
					<h2>A Sample Title</h2>
<p>This is a paragraph that stays black for now.</p>
  • Save index.html.
  • Open index.html in your browser (double-click or right-click → Open with Live Server in VS Code).
  • You should see the heading text turn blue — success! You just created and applied your first CSS rule.

Indentation tip: Notice that color: blue; is indented two spaces inside the curly braces { } — this is a best practice for readability in any CSS tutorial.

2. Break Down Every Part of a CSS Rule

Every CSS rule has exactly four components — understanding them is the foundation of writing good CSS:

  1. Selector Tells the browser which HTML elements to target. In our example: h1 → This is a tag selector — it styles every <h1> element on the page.
  2. Declaration Block Everything inside the curly braces { … } — contains one or more style declarations. In our example: color: blue;
  3. Property The specific style you want to change (e.g., color, font-size, margin, background-color). In our example: color → Always followed by a colon :
  4. Value The setting you assign to the property (e.g., blue, #0066cc, 16px, center). In our example: blue → Always ends with a semicolon ;

Visual breakdown:

				
					selector {
  property: value;
}

Example with multiple declarations (try adding these to styles.css):

				
					h1 {
  color: blue;
  font-size: 36px;
  text-align: center;
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
}

Refresh the browser — your heading should now be bigger, centered, and spaced nicely.

3. Practice: Add More CSS Rules

Add these rules to styles.css and save:

				
					p {
  color: #333333;            /* dark gray text */
  font-size: 18px;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;            /* centers the paragraph */
}

button {
  background-color: #0066cc; /* blue background */
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0052a3; /* darker blue on hover */
}

Update index.html body with a button:

				
					<button>Click Me</button>

Refresh the browser:

  • Paragraphs are styled and centered
  • Button is blue with hover effect

This shows how multiple CSS rules work together — the heart of learning how to understand and create CSS rules.

4. Common Beginner Mistakes & Fixes

  • Rule not applying?
    • Check <link> path in HTML: href=”css/styles.css” (correct folder)
    • Save both files before refreshing
    • Browser cache: Ctrl+F5 (hard refresh)
    • DevTools (F12) → Elements tab → inspect <h1> → see if rule appears (and isn’t crossed out)
  • Curly/smart quotes?
    • Never copy from Word — type ” directly in editor
  • Syntax error?
    • Missing ; after value
    • Missing } at end of block
    • Wrong selector spelling (e.g., H1 instead of h1)

Next Steps in This CSS Tutorial for Beginners

You now know how to understand and create CSS rules — selectors target elements, declaration blocks hold styles, properties define what to change, values set how. In the next lessons you’ll:

  • Master different selector types (class, ID, attribute, descendant, pseudo-classes)
  • Style text in depth (fonts, weights, line-height, letter-spacing)
  • Understand the box model (margin, padding, border, width/height)
  • Build layouts with Flexbox and CSS Grid
  • Create responsive designs (media queries)
  • Add interactive effects (hover, focus, transitions)

Keep your css-practice folder open — you’ll build on it in every lesson.

Contact Us