Learn the three-part structure of every CSS rule: selector, property, and value, plus the punctuation rules that hold it all together.
💡 The Concept
Every CSS rule follows the same pattern. Once you know the pattern, you can write rules for anything.
The Three Parts of a CSS Rule
Every CSS rule is built from three parts: a selector, a property, and a value.
Selector: The “selector” selects the HTML. This can be an HTML Element or it also can be defined by an HTML attribute, like class and id. In the example at right, the selector selects the <body> of the website and applies the following CSS to that selector.
Property: The property defines which aspect of the selector will be changed; for example, the color or the font.
Value: The value defines what the color, size or shape of the property. For example, if the property is “color”, then the value could be “blue”.
The selector is followed by curly braces, and the property:value statements go inside of the curly braces. The property and value are separated by a colon, and the property:value statement ends with a semicolon.
In plain English, the rule in the image says: Find the body element. Set its text color to navy.
The Punctuation Rules
CSS uses three pieces of punctuation to hold a rule together:
The selector is followed by curly braces{ } — all declarations go inside them.
Each property and value are separated by a colon (:).
Each declaration (property: value;) ends with a semicolon (;).
A missing semicolon or curly brace can cause your styles to break in unexpected ways. With a little practice the pattern becomes second nature, and most code editors will help you keep track of the punctuation.
p {
color: purple;
font-size: 18px;
}
Why is it called a Selector?
The CSS selector “selects” which CSS the property: values will be applied to.
Giant hand picking one of five men as an illustration of a CSS selector.
Exercise: Try It Yourself
Open JSFiddle.net and write your first CSS rule using the selector-property-value pattern.
Step 1. Open JSFiddle.net.
Step 2. In the HTML section, type a paragraph with some text:
<p>This text will be purple.</p>
Step 3. In the CSS section, write a rule that sets the text color of all paragraph elements to purple:
p {
color: purple;
}
Click Run and confirm your text turns purple. Notice the three parts: p is the selector, color is the property, and purple is the value.
❓ Frequently Asked Questions
Do I need to memorize CSS syntax?
Not in the way you might memorize a phone number, but you do need to reach the point where you can write a rule without thinking about the structure. The best way to get there is to write rules, not to study them. After a few exercises the pattern becomes automatic. What matters for now is that you can recognize the three parts when you see them and name them correctly. You will use this vocabulary in every lesson from here on.
Why do I have to learn the terms selector, property, and value?
These are the standard terms used in every CSS reference, tutorial, and documentation you will ever read. When you search for help online, look something up on MDN, or ask another developer a question, everyone uses these words. Learning the vocabulary now means you can communicate clearly and find answers on your own faster.
Is the semicolon necessary if there is only one property?
Technically the browser will usually render it correctly without one. But always include it anyway. When you add a second property later, it is easy to forget the semicolon after the first one, which breaks both declarations. A missing semicolon is one of the most common CSS errors beginners make. Making the semicolon a habit now prevents a confusing bug later.
Can I write multiple properties in one rule?
Yes, and this is how CSS is normally written. You can stack as many property: value declarations as you need inside a single set of curly braces, each ending with a semicolon. For example, you could set the color, font size, and background color of a paragraph all in one rule. There is no limit on how many declarations a rule can contain.
What is a declaration?
A declaration is the combination of a property and its value — the part that goes inside the curly braces. For example, color: purple; is one declaration. A CSS rule can contain one declaration or many. You will hear this term in documentation and DevTools, so it is worth knowing.
What happens if I misspell a property or value?
CSS silently ignores rules it does not understand. If you write colour: purple; instead of color: purple;, the browser will simply skip that declaration and move on. No error message, no crash. The style just will not apply. If a style is not working, check the spelling first. Browser DevTools will show crossed-out rules when a declaration is invalid.
Does the order of properties inside a rule matter?
Generally no. Within a single rule, the browser applies all declarations regardless of their order. The exception is shorthand properties like font or background, where the order of values within a single declaration does matter. For day-to-day CSS, write properties in whatever order makes the most sense to you — consistency within a file is more helpful than any particular order.
★ Key Takeaways
Every CSS rule follows a three-part pattern: a selector picks the element, a property names what to change, and a value sets how it should look. Curly braces, colons, and semicolons are the punctuation that holds the rule together. Next, you will learn the three ways to add CSS to an HTML page: inline styles, internal stylesheets, and external stylesheets. Knowing when to use each approach will help you write cleaner, more organized code.
