A CSS rule is a complete styling instruction made of a selector and a block of properties.
The selector chooses which HTML elements the rule applies to so CSS can target content without changing the HTML.
Properties describe the visual changes, such as colour or spacing, using property: value;.
If a selector does not match anything, or a property is written incorrectly, the browser ignores that part and uses its default styling instead.
Read the CSS example below and identify the selector.
In the same example, identify the two properties and their values.
Explain which HTML elements would be affected by this rule.
p {
color: navy;
font-size: 18px;
}
7. Creating basic CSS rules
CSS rules use curly braces to contain one or more properties that apply to the selected elements.
Each property changes one aspect of appearance, and most properties need a semicolon to end the line so the browser can separate each instruction correctly.
Simple rules are useful because they confirm your stylesheet is linked and working.
Starting with obvious changes makes errors easier to spot because you can immediately see whether the browser applied the rule.
Add a rule that changes the page background colour.
Add a rule that changes the default text colour.
Save style.css.
body {
background-color: lightgray;
color: black;
}
8. Applying rules to specific elements
Selectors can target specific element types such as p and h2 using the tag name.
This allows different kinds of content to have different styling which helps the reader see structure without needing extra HTML.
When you style an element selector, every matching element on the page is affected.
If you accidentally target the wrong element, changes can appear everywhere and make the page harder to read so small tests are important.
Add a rule targeting p elements.
Add a rule targeting h2 elements.
Save the file.
p {
line-height: 1.5;
}
h2 {
color: darkblue;
}
9. Testing CSS in the browser
Browsers apply CSS rules when the page loads, so changes appear after a refresh.
If you forget to save your files, refreshing will show no difference which can look like the CSS is broken even when it is correct.
When styles do not appear, the most common cause is an incorrect href path in the <link>.
Another common cause is a syntax error like a missing brace, which can stop later rules from being read depending on where the mistake occurs.
Open your page in a browser.
Save index.html and style.css, then refresh.
Confirm at least one style change is visible.
10. What breaks when CSS is incorrect
Incorrect CSS usually does not stop a page from loading, but it can cause parts of the design to fall back to defaults.
This can make a site look inconsistent and make text harder to read even though the HTML content is still present.
Small CSS mistakes can be difficult to notice because the browser ignores invalid lines without warning.
Learning to check your file paths and braces early prevents bigger problems later especially when you start writing longer stylesheets.
