Styling with CSS
Introduced| English | Meaning |
|---|---|
| padding/ˈpædɪŋ/ | The space between an element's content and its border in the CSS box model. |
| border/ˈbɔːdə/ | The boundary drawn around an element's content and padding in the CSS box model. |
| CSS/ˌsiː es ˈes/ | A style-sheet language used to control the presentation of documents such as HTML pages. |
| selector/sɪˈlektə/ | A pattern that identifies which elements a CSS rule applies to. |
| declaration/ˌdekləˈreɪʃn/ | In CSS, a property and value specifying one aspect of an element's presentation. |
| the box model/ðə bɒks ˈmɒdl/ | the box model |
| margin/ˈmɑːdʒɪn/ | margin |
| responsive design/rɪˈspɒnsɪv dɪˈzaɪn/ | responsive design |
| media query/ˈmiːdiːə ˈkwɪərɪ/ | A CSS condition that applies styles according to features of the display or environment, such as viewport width. |
A 320-pixel card still overflows a 320-pixel screen
- The card's declared width is not always its total width. Padding and borders can add space outside the content width.
- CSS 层叠样式表 applies presentation rules. A selector 选择器 chooses elements; a declaration 声明 gives a property and value, such as
color: navy.
Give one practical reason for keeping reusable presentation rules in a stylesheet.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Example: “A shared stylesheet lets us update matching cards consistently without editing every HTML element.”
Account for every part of the box
- The box model 盒模型 has content, padding 内边距, border 边框 and margin 外边距. Padding and border are inside the painted box; margin separates it from neighbours.
- With
content-box, width 320 px, padding 16 px on both sides and borders 2 px on both sides give 356 px before margins. Withborder-box, the declared 320 px includes that padding and border.
Arrange the box-model areas from the content outward.
Difficulty 3/5 · 200 coins + a small bonus on first completion today
Padding and border surround the content; margin separates the box from neighbours.
With content-box, content width is 320 px, left/right padding is 16 px each and left/right border is 2 px each. What is the width before margins, in pixels?
Difficulty 2/5 · 140 coins + a small bonus on first completion today
320 + 16 + 16 + 2 + 2 = 356 px.
Make the width flexible
- Responsive design 响应式设计 adapts content and layout to available space. This card fills its container up to 400 px, with padding and border included.
- Use the rule on an element with
class="card". Long unbroken content, parent margins and other rules still need checking; one declaration cannot guarantee the whole page fits.
.card {
box-sizing: border-box;
width: 100%;
max-width: 400px;
padding: 16px;
border: 2px solid currentColor;
overflow-wrap: anywhere;
}
Inside a 280 px container, this card is 280 px wide including its padding and border. Inside a 700 px container, it stops at 400 px. Its outer margins are still additional space.
A padded card should fill its container up to 400 px including its borders. Which rule set best fits?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
border-box includes padding and borders in the declared width. Parent layout and content still need testing.
Change layout only when it needs to change
- A media query 媒体查询 applies rules under a condition. For example, change two columns to one when they become too narrow to read.
- Choose the breakpoint from the content, then test several widths and larger text. Do not assume that all phones or all laptops have the same usable width.
Inspect the rule that actually wins
- The cascade considers factors including origin, importance and layers before selector specificity. For otherwise comparable rules, an ID is more specific than a class; a class is more specific than an element selector.
- When comparable rules have equal specificity, later source order can decide. Use browser developer tools to check matched rules, the loaded stylesheet and computed values.
!important participates in the cascade; it does not break CSS. Avoid using it as an unexplained patch. Check the cause first: a missing stylesheet, invalid declaration or overriding rule may all explain an unexpected result.
Two normal rules in the same origin and layer use the identical selector .card and set conflicting colours. No other deciding factors differ. Which colour wins?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Equal specificity does not make order irrelevant. For comparable tied rules, later source order decides.
!important is part of CSS cascade rules, but should not be used as an unexplained patch.
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Importance affects precedence. Inspect the conflict and use it deliberately rather than claiming it breaks CSS.
Match the observation to the next useful check.
Difficulty 2/5 · 140 coins + a small bonus on first completion today
Inspect the actual cause rather than assuming all failures come from specificity.
Test the box and the reading experience
- Try narrow and wide containers, keyboard focus and enlarged text. Check that text is readable in both colour themes and that content can wrap.
- Explain one overflow repair using the box calculation and one style conflict using the actual matching rules.
Calculate the whole box, prefer flexible sizes, then inspect the cascade. Specificity matters, but it is not the only deciding factor.
Source: W3C CSS cascade.
A card fits at normal text size but overflows when text is enlarged. What should you do?
Difficulty 1/5 · 100 coins + a small bonus on first completion today
Responsive behaviour includes changing text and content constraints, not only one viewport screenshot.