By Ronnie Mbuqe
Several CSS declarations may apply to one element. The cascade resolves them using factors including origin, importance, specificity and order.
Inspect the element's computed style to see the winning declaration. Guessing another colour in another stylesheet can add confusion without addressing the conflict.
The background changed, so why did the text become unreadable?
A navy panel with dark blue writing can contain perfectly valid CSS and still be unusable. One rule may set the background while a different, stronger rule sets the text. Changing the colour you can see in one stylesheet does not establish which declaration the browser actually uses.
Start with that real failure. We will compare two competing declarations, identify the winning colour and repair the component as a readable pair. You need only a basic idea of an HTML element; the relevant cascade rules are introduced alongside the example.
Practical examples: CSS
Website
A site-wide stylesheet turns repeated design decisions into a system: heading sizes, brand colours, content width and button states. Shared classes prevent every page from inventing its own design and allow one intentional change to improve many screens.
Mobile
Responsive rules rearrange content when space becomes limited. A four-column desktop grid may become one column on a phone, while flexible text and images avoid horizontal scrolling. Good mobile CSS changes layout without hiding essential information.
Cards
Cards combine border, background, padding and layout rules, but equal appearance should not force equal content height or tiny text. Reusable card classes work best when HTML carries the meaning and CSS handles only visual grouping and alignment.
Readable
Readable design depends on line length, line height, contrast, font size and spacing between ideas. CSS can make information attractive, but it must preserve focus indicators, zoom behaviour and sufficient contrast so visual polish does not exclude users.
Why can a width of 100 percent still overflow its container?
In the default content-box model, width describes the content area.
Trace the explanation
Padding and borders are added outside it. Border-box includes them within the specified width, which often makes responsive sizing easier to reason about.
Source and further reading: MDN Web Docs
The last rule in the file does not always win
CSS resolves conflicts using the cascade, including origin, importance, specificity and source order. A later ordinary rule can lose to an earlier important declaration. That is exactly how a dark text colour can survive after another rule gives the panel a dark background.
Inspect both properties separately: which declaration supplies the background, and which supplies the text colour? A readable component needs the pair to work together. Adding stronger and stronger global selectors may fix one panel while breaking unrelated cards.
Compare the declarations instead of guessing at another colour
Assume these are ordinary author declarations in the same cascade layer, with no inline or important declarations involved. .article p supplies dark text. The later .navy-panel p selector has the same specificity, so its colour wins by source order for a paragraph inside both classes.
.article p { color: #173451; }
.navy-panel { background: #123766; }
.navy-panel p { color: #ffffff; }
Now add an earlier important colour declaration and the ordinary later rule no longer necessarily wins. This is why blindly appending one more selector can fail. The first debugging task is to inspect the actual winning declaration, including its importance and layer.
A component repair should define a suitable background, paragraph colour and link colour within a narrow scope. Then check hover, keyboard focus and a narrow screen. The goal is a legible component in its states, not a single colour value that happens to look right once.
Under the stated simple conditions, what colour does the final rule give the paragraph? Type white or dark.
This checks a prediction about the worked example. It does not run server code, contact an API or change a booking.
White. The two paragraph selectors have equal specificity, so the later rule wins under the stated assumptions. This answer does not generalise to every important or layered stylesheet.Read the explanation without the checker
White. The two paragraph selectors have equal specificity, so the later rule wins under the stated assumptions. This answer does not generalise to every important or layered stylesheet.
In browser developer tools, inspect one colour and one background declaration separately. Explain where each winning value came from before changing either.
A content box is 300 px wide with 20 px padding on each side and no border. What is its total width in pixels?
Trace the explanation
300 + 20 + 20 = 340 px. With border-box and a declared width of 300 px, the padding would instead consume part of that 300 px. Margins remain separate.
Source and further reading: MDN Web Docs
Why can a perfect desktop layout overflow on a phone?
Fixed widths, unbroken content and grid minimums can prevent a component from shrinking. A narrow viewport exposes constraints that a wide screen hides.
Test a long link and a small screen. Flexible columns, suitable minimum widths and controlled wrapping address the cause rather than hiding overflow and cutting content away.
Style meaning without replacing it
Return to semantic HTML to see why CSS should present a real button, heading or navigation region instead of disguising generic containers. Then read JavaScript behaviour to understand how classes and states change when a menu opens, validation fails or fresh data arrives.
Fix the component boundary instead of recolouring the whole site
For a navy callout, explicitly define its paragraph, heading and link colours inside the callout's scope. For a light journey panel, keep a light background and dark text. This is clearer than relying on inherited colours from an unrelated article rule.
Then check a narrow viewport, a keyboard-focus state and a long link. A fixed-width card may look fine on a desktop but overflow a phone; a hover colour may become unreadable even when the resting state is correct. The useful question is whether the component remains legible in its actual states, not whether one screenshot looks attractive.
Should !important be added to every new CSS property?
No. It can be justified for a narrowly scoped compatibility repair, but widespread use makes future conflicts harder to reason about. First identify the winning rule and the intended component scope.
Questions about CSS Explained Simply
Is CSS hard to learn?
The basics are simple. Advanced layouts take practice, but beginners can learn useful CSS quickly.
Why does CSS break pages sometimes?
Because layout rules can conflict. Good CSS needs structure, testing and responsive thinking.
What is the cascade?
It is the set of rules the browser uses when more than one CSS declaration could apply to the same property. Specificity and source order are part of that decision.
When should I use Flexbox or Grid?
Flexbox is excellent for arranging items mainly in one direction, such as a toolbar or row of buttons. Grid is excellent when both rows and columns matter, such as a card gallery or page layout.
Why do mobile layouts need media queries?
A layout designed for a wide screen may become cramped on a phone. Media queries let CSS change column counts, spacing, font sizes and navigation behaviour at useful breakpoints.
Should every page have its own CSS file?
Not necessarily. Shared components should usually share styles. Page-specific CSS is useful when a page has a unique visual or interaction that does not belong in the global stylesheet.
Follow the browserWhat actually happens when CSS loads?
The browser first reads the HTML and builds a map of the elements on the page: headings, paragraphs, buttons, images and containers. It then reads the CSS rules and works out which rules apply to each element. A rule such as .warning { font-weight: bold; } does not create the warning; it changes how an existing element with that class is presented.
Several rules can target the same element. The browser resolves those conflicts using the cascade: importance, selector specificity and source order all matter. That is why a developer can change a rule and see nothing happen; the old rule may still be winning. Developer Tools in the browser are useful because they show which declarations are active and which have been crossed out.
Layout is more than colour and fonts
Modern CSS decides how a page rearranges itself. Flexbox is useful when items mainly flow in one direction, such as a row of navigation links. CSS Grid is useful when rows and columns work together, such as a dashboard. Media queries let the same page react to screen size, so a three-column desktop layout can become a single readable column on a phone.
HTML gives a page meaning. CSS decides how that meaning is presented without changing what the content actually is.
A card fits a laptop but spills off a narrow phone. Which measurements would you inspect first?
One reasoned response
Inspect the containing width, box-sizing, padding, borders and any fixed minimum width. Also check long unbroken text and inherited rules. Adding overflow:hidden may conceal the symptom without correcting the sizing.
Source and further reading: MDN Web Docs
Example: style a component without changing its meaning
CSS controls how HTML elements look and lay out. A class lets the same presentation rule be reused without repeating inline styles.
.notice {
padding: 1rem;
border-left: 4px solid #b94f12;
border-radius: 0.4rem;
line-height: 1.6;
}
.notice strong {
display: block;
margin-bottom: 0.25rem;
}
HTML would use class="notice" on the relevant element. The CSS adds spacing and a visual accent, but the content should still make sense if the styling fails to load. Check contrast, text resizing, narrow screens and focus indicators when styling interactive elements. Avoid changing broad selectors such as every p or every button unless the effect across the whole site is intended.
Sources
Sources and further reading
A closer lookA fixed card meets a narrow phone
Two cards each have width 400px and sit in a row. On a 360px viewport they overflow. Making the font smaller does not repair the layout model.
Work through the distinction
Use flexible tracks, a wrapping layout or a breakpoint that stacks the cards. Test long words and 200 percent zoom as well as the default text. A layout that works for short English labels may fail when real content is longer.
What addresses the layout problem?
Choose an answer to see feedback. You can try again.
Show the answer and explanation
Let cards adapt or stack. Use flexible tracks, a wrapping layout or a breakpoint that stacks the cards. Test long words and 200 percent zoom as well as the default text. A layout that works for short English labels may fail when real content is longer.