Web Development - CSS Selectors
CSS Syntax
CSS rules tell the browser how to style HTML elements. Each rule has a selector and a set of declarations.
Structure of a CSS Rule
A CSS rule looks like this:
Example
Basic CSS rule:
selector {
property: value;
}
Each CSS rule consists of:
- Selector - points to the HTML element you want to style.
- Property - the aspect of the element you want to change (like color or font-size).
- Value - what you want the property to be set to.
This example sets all paragraphs to blue and centers the text.
Comments in CSS
Comments are ignored by browsers and help you explain your code.
They start with /* and end with */.
Whitespace and Formatting
Extra spaces or line breaks in CSS don't affect how it works. You can format your code neatly for readability.
Example
Both are valid:
p {color: red;}
p {
color: red;
}
Best Practices
- Always end each property with a semicolon (
;). - Use comments to describe sections of your stylesheet.
- Keep selectors clear and meaningful.
- Organize your styles logically (e.g., layout, typography, colors).
Summary
- CSS syntax:
selector { property: value; } - Each rule defines how elements should appear.
- Multiple selectors can share the same rule.
- Inline styles override external and internal styles.
Next, you'll learn about CSS Selectors - how to target specific elements and apply your styles effectively.
