SENG1050 Chap.4 CSS Selectors, Properties and the Box Model
CSS Selectors, Properties and the Box Model
This chapter follows the Week 4 lecture, which the exam review stars for the structure of a CSS file and for selectors.
It explains why styling moved out of HTML, the three ways to attach CSS and when to use each, the cascade order and how specificity is scored, the full range of selector forms, common properties, units and colour values, and the box model, including why a stated width does not include padding, border or margin.
The lab that follows styles the same pages inline, then in an embedded sheet, then from an external file, and tests how the cascade resolves each conflict.
What this chapter covers
- 01
Why styling left HTML
- 02
Inline, embedded and external CSS
- 03
Rule syntax and comments
- 04
Cascade order and specificity
- 05
Combinators and pseudo-classes
- 06
Attribute, ID and class selectors
- 07
Units and colour values
- 08
The box model and box-sizing
Worked example · free
Work out how much space a styled box occupies
- 1Width applies to the content only, so the visible box from border to border is 200 + 2 x 10 + 2 x 2 = 224px.
- 1Margins sit outside the border, so the space occupied is 224 + 2 x 15 = 254px.
- 1With box-sizing: border-box the 200px includes padding and border, so the border box is 200px and the content shrinks to 200 - 20 - 4 = 176px.
Key terms
- Cascade
- The cascade is the order of priority that decides which style applies when several rules target the same element.
- Specificity
- Specificity is the weight of a selector, compared by counting IDs, then classes, then element types.
- Pseudo-class
- A pseudo-class selects elements by state or position, such as a:hover or li:nth-child(2n).
- Box model
- The box model describes an element as content wrapped in padding, then a border, then a margin.
- Margin collapse
- Margin collapse is the merging of adjacent vertical margins into a single margin.
- Combinator
- A combinator joins two selectors by relationship, such as a space for descendants or a plus sign for the next sibling.
CSS Selectors, Properties and the Box Model FAQ
Which wins, an ID selector or several classes?
The ID wins. Specificity compares IDs first, and only when the ID counts are equal does it look at classes, then element types. One ID outranks any number of classes, and if two selectors tie in every column the rule applied last takes effect.
When should I use inline, embedded or external CSS?
Put site-wide rules in an external file linked from every page, use an embedded style element for rules that apply to one document, and keep inline style attributes for rare one-off cases. An external file holds only rules, never style or head tags.
Why is my element wider than the width I set?
Width applies to the content area only, so padding and border are added on both sides and margins sit outside that. Setting box-sizing to border-box makes the stated width include padding and border.
What is the difference between a descendant and a child selector?
A descendant selector, written with a space as in div p, matches a paragraph at any depth inside a div. A child selector, written with a greater-than sign as in div > p, matches only paragraphs whose direct parent is the div.
How do em, rem and px differ?
A px is an absolute unit of one ninety-sixth of an inch. An em is relative to the parent element's font size, while a rem is relative to the root element's font size, so rem values stay predictable when elements are nested.
Exam move
Make a single page of selector flashcards: the selector form on one side and an example of what it matches on the other, and test yourself on a small piece of markup. Score six or seven selectors for specificity each session, writing the three counts every time. For the box model, sketch the four layers and recompute one width question a day until the arithmetic is automatic.
Use a temporary border on boxes in your own assignment pages to see where padding ends and margin begins.
Working through CSS Selectors, Properties and the Box Model in SENG1050? Sia is AskSia’s AI Computer Science tutor — ask any SENG1050 CSS Selectors, Properties and the Box Model question and get a clear, step-by-step explanation grounded in how SENG1050 is taught and assessed. Read this chapter free, then take your hardest questions to Sia.
