CSS Fundamentals: Selectors, Properties and the Box Model
CSS styles HTML elements using selectors and property-value declarations. Selectors can target element types, classes, IDs, attributes, states, and relationships.
Summary
CSS styles HTML elements using selectors and property-value declarations. Selectors can target element types, classes, IDs, attributes, states, and relationships. For example, .card > p targets paragraphs that are direct children of elements with the card class.
The cascade resolves competing declarations by considering origin and importance, cascade layers, specificity, and other tie-breakers before source order. Within the same cascade precedence, ID selectors outrank class, attribute, and pseudo-class selectors, which outrank type selectors and pseudo-elements.
The box model consists of content, padding, border, and margin. Backgrounds extend through padding and, by default, beneath borders, but not into margins.
| Box sizing | Meaning of declared width | Margin |
|---|---|---|
| content-box | Content only; padding and borders increase the border-box width | Outside the border box |
| border-box | Content, padding, and borders combined | Outside the declared width |
For content-box, the border-box width is . Understanding this distinction helps prevent unexpected layout overflow.
🧠 Key Concepts
- Selector targeting
- Property-value declarations
- Cascade precedence
- Selector specificity
- Box model
- Box sizing
- Combinators
- Inheritance
- Margin collapse
🧠 Quick Check
See what you remember from the summary.
Which selector targets only paragraphs that are direct children of an element with the card class?
🧠 Flashcards Preview
Tap a card to reveal the definition.
Ready to quiz yourself?
Test what you remember with a full practice quiz on this note. Create a free account and start in seconds.
Full Notes
Read the original note content before deciding whether to save or study from it.
CSS Fundamentals: Selectors, Properties and the Box Model
📘 Overview CSS styles HTML elements by matching selectors and applying property-value declarations. The cascade resolves competing declarations, while the box model determines how content, padding, borders, and margins occupy layout space.
🧠 Key Idea Selectors determine which elements receive styles; properties determine their appearance and layout. An element's rendered dimensions depend on both its declared dimensions and its box-sizing model.
⚔️ Core Details: - Selectors target elements by type (p), class (.card), ID (#header), attribute ([disabled]), state (:hover), or relationship (.card > p). - A rule such as .card { color: navy; padding: 16px; } combines a selector with declarations; each declaration pairs a property with a value. - The cascade compares origin and importance, cascade layers, specificity, and other tie-breakers before source order determines the winner. - The box model consists of content, surrounding padding, a border, and outer margin; backgrounds extend through padding and, by default, beneath the border, but not into margins. - With content-box, border-box width is
More ways to study when you copy this note
Copy this note into your library to unlock focused practice sessions and long-term review.
Answer all questions first, then see feedback at the end — the way real exams work.
Focuses each session on what you got wrong, not what you already know.
Full timed exam with all questions, no pausing, and results at the end. Built for board exam prep.
Part of 🗄️ BS Information Systems — 1st Year
Browse this Review Set →More Computer Science notes
See all →More in Web Development
See all →More from NoteLib
Browse NoteLib's public notes →Copy this note to your library and get the full Study Pack instantly — summary, key concepts, and practice quiz included.