OnlineCBT
Read a rule as selector plus declarations
A CSS rule selects matching elements and assigns property values. Curly braces enclose the declaration block. A colon separates a property from its value; semicolons separate declarations.
.notice {
color: #7c2d12;
background-color: #fff7ed;
padding: 1rem;
border-left: 0.25rem solid #c2410c;
}Here .notice is the selector. Every element with that class is eligible for these declarations. This does not mean the rule always wins: other applicable declarations participate in the cascade.
A complete fragment to test
Bring your admit card.
This paragraph has no notice class.
Only the notice receives the orange-tinted background and left border. Add the same class to the paragraph and compare the result. Class matching uses the class attribute, not the element's text content.
Invalid values and recovery
padding: 16; is invalid for a nonzero length because the unit is missing. Use 16px or 1rem. A zero length can generally omit its unit. An unrecognized property/value is normally ignored rather than making the entire stylesheet unusable. Missing braces or semicolons can have wider effects because they alter how following text is parsed.
Comments and formatting
CSS comments use /* explanation */. Ordinary CSS does not use JavaScript-style // comments. Put one declaration on each line while learning. Consistent formatting makes it easier to spot misspelled properties and accidentally merged declarations.
Shorthand caution
A shorthand such as border or background can reset related longhand properties you did not explicitly mention. When a previously configured background image disappears, inspect later background shorthand declarations before assuming the image URL is broken.
Exercise and answer
Write a .success rule with dark green text, a pale green background and 12px padding. Deliberately misspell padding once and inspect the ignored declaration. Then restore it. The browser should retain valid color declarations even when the unrelated padding declaration is invalid.
