Responsive School Site: Floats, Cascade and Dark Mode
A school's new website has a horizontal navigation bar built with floated list items, a fixed 1000 px wrapper, and a two-column main area made with floats and a clearfix. On the computer lab's 1366 px screens it looks correct. On a teacher's phone the navigation items wrap awkwardly and the second column drops below the first. The page loads an external stylesheet at css/site.css, but one heading that should be dark green stays blue; the HTML has style='color: blue' on that heading, and site.css contains h2 { color: #1b5e20; } later. The print preview shows the navigation and footer, wasting paper. The school also wants a dark mode for evening classes. The web host serves the site over HTTP, and the CSS file is requested over HTTP as well. The student suggests adding !important to every rule and using a table for layout.
1. Explain, using the cascade and specificity, why the heading stays blue and give the best fix.
Read the worked answer
Inline style has higher priority than any normal author stylesheet rule. In specificity terms, an inline declaration beats a type selector such as h2, so style='color: blue' wins over h2 { color: #1b5e20; } even though the stylesheet rule comes later. An !important declaration in the author stylesheet would override a normal inline declaration, but adding !important everywhere is not the right fix: it makes the cascade unpredictable and hard to maintain. The clean fix is to remove the inline style from the heading and give it a class, for example class='section-title', then style .section-title { color: #1b5e20; } in site.css. If the HTML cannot be edited, a temporary h2 { color: #1b5e20 !important; } works, but document it. Also confirm the stylesheet path and clear the browser cache, because a 404 or cached CSS would produce a similar symptom, but here the inline style is the definite cause.
2. Propose a robust responsive layout replacing floats, including the navigation and two columns, and explain why it fixes the mobile symptoms.
Read the worked answer
Replace the fixed 1000 px wrapper and floats with a mobile-first flex or grid layout. Add a viewport meta tag: width=device-width, initial-scale=1. Use .wrapper { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 1rem; box-sizing: border-box; }. Navigation: nav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }; on narrow screens set flex-direction: column. Main area: main { display: grid; grid-template-columns: 1fr; gap: 1rem; } and at @media (min-width: 48em) { main { grid-template-columns: 2fr 1fr; } }. Flex and grid items can shrink and wrap without needing a clearfix, and the second column will not drop unpredictably. Tables should not be used for layout because they couple content order to visual order, are hard to make responsive, and harm accessibility. Test at 320 px, 768 px and 1366 px widths.
3. How should the print stylesheet and dark mode be implemented without duplicating all rules, and what is the security concern about the CSS URL?
Read the worked answer
Use a print media query rather than duplicating rules: link the main stylesheet normally, then add @media print { nav, footer, .sidebar, .no-print { display: none; } body { color: #000; background: #fff; } a[href]::after { content: ' (' attr(href) ')'; } }. For dark mode, define custom properties on :root such as --bg, --text and --accent, then override them in @media (prefers-color-scheme: dark). Optionally add a data-theme='dark' attribute on html toggled by a small script and saved in localStorage. This reuses one set of rules. The CSS URL over HTTP is a security concern: an attacker on the network can modify the stylesheet, deface the page, or use CSS to leak data; it also causes mixed-content blocking if the page later moves to HTTPS. Serve the CSS over HTTPS, keep it same-origin, and use Subresource Integrity if it comes from a CDN.