Learning how to declare CSS multiple properties in one rule is a core skill that makes your stylesheets efficient, readable, and powerful — instead of writing separate rules for each style (color, size, font, alignment, spacing), you group them inside a single CSS rule to apply many instructions at once to the same HTML elements. In this guide, you’ll practice declaring CSS multiple properties for headings and paragraphs, create separate rules for different elements (h1, p, h2, h3, h4), and see how one styles.css file controls the entire look of your webpage.

This CSS tutorial for beginners builds directly on your css-practice project — you’ll edit styles.css and index.html to instantly see the results in the browser.

Prerequisites

  • Your css-practice project folder from previous lessons:
    • index.html (linked to css/styles.css)
    • css/styles.css
    • images/ folder (optional for now)
  • Visual Studio Code (or any editor) with Live Server extension recommended
  • Browser for preview

1. Declare CSS Multiple Properties in One Rule – Hands-On

Open css/styles.css and replace (or add) this rule for <h1>:

				
					h1 {
  color: blue;                  /* text color */
  font-size: 100px;             /* very large heading */
  font-family: Courier, monospace; /* monospace font with fallback */
  text-align: center;           /* center the text */
}

Save the file.

Make sure index.html has an <h1> tag (add it inside <body> if missing):

				
					<h2>A Sample Title</h2>

Save and refresh the browser — your heading should now be:

  • blue
  • 100 pixels tall
  • in Courier font
  • centered on the page

This is how to declare CSS multiple properties in one rule — one selector (h1) applies four different styles at once.

2. Create Separate Rules for Different Elements

Add this new rule below the h1 rule in styles.css:

				
					p {
  color: #333333;               /* dark gray text */
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  max-width: 700px;             /* prevents text from stretching too wide */
  margin: 0 auto;               /* centers the paragraph block */
}

Update index.html to add a paragraph:

				
					<h2>A Sample Title</h2>
<p>Some paragraph text that will be styled with our new CSS rule.</p>

Save both files and refresh — the paragraph is now:

  • dark gray
  • 20px readable size
  • in Arial (or Helvetica fallback)
  • centered and constrained to 700px width

You’ve now used CSS multiple properties in two separate rules — one for headings, one for paragraphs.

3. Practice: More CSS Multiple Properties for Headings

Add these rules to styles.css:

				
					h2 {
  color: red;
  font-size: 40px;
  text-align: center;
  margin-top: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
  text-align: center;
  margin-top: 30px;
}

h4 {
  color: green;
  font-size: 60px;
  text-align: center;
  margin-top: 20px;
}

Update index.html body:

				
					<h2>A Sample Title</h2>
<p>Some paragraph text that will be styled with our new CSS rule.</p>

<h2>This is red text with a size of 40 pixels.</h2>
<h3>This is purple text with a size of 50 pixels.</h3>
<h4>This is green text with a size of 60 pixels.</h4>

Refresh — each heading level gets its own unique look, but all use CSS multiple properties in their rules.

4. Why Declare CSS Multiple Properties in One Rule?

  • Efficiency — one rule updates many styles for all matching elements
  • Readability — grouped properties are easier to scan and maintain
  • Consistency — apply the same look (font, alignment, spacing) across similar elements
  • Scalability — add new elements later — just create a new rule with CSS multiple properties

5. Best Practices & Tips (2025–2026)

  • Indent properties 2–4 spaces inside { } — huge readability boost
  • Order properties logically (e.g., typography → layout → colors → effects)
  • Add comments for clarity:
				
					/* Main heading – large and centered */
h1 {
  color: blue;
  font-size: 100px;
  /* ... */
}
  • Use shorthand when possible (e.g., margin: 0 auto; instead of separate top/right/bottom/left)
  • Test live with Live Server in VS Code — instant feedback
  • Use DevTools (F12) → Elements → hover tags → see all applied CSS multiple properties

How to Declare CSS Multiple Properties – FAQ (2025–2026)

  1. How do I declare CSS multiple properties in one rule?
    List them inside { }, each ending with ;: color: blue; font-size: 20px;
  2. How many properties can I put in one CSS rule?
    As many as needed — browsers handle dozens without issue.
  3. Should I create separate rules for each HTML element?
    Yes — h1 { … }, p { … }, button { … } — keeps code organised.
  4. What happens if two rules target the same element?
    More specific rules override general ones (cascade rules).
  5. Best way to organise CSS multiple properties?
    Group by element, use comments, consistent order, and indentation.

Summary

You now know exactly how to declare CSS multiple properties in one rule and create separate rules for different HTML elements — the foundation of efficient, beautiful web styling.

Mastering CSS multiple properties lets you control colors, sizes, fonts, spacing, and layout across your entire page from clean, maintainable rulesets.

Keep your css-practice folder open — in the next lessons you’ll style images, master the box model, build layouts with Flexbox/Grid, and create modern, responsive websites.

Contact Us