OnlineCBT
Learn CSS
Build one readable component before styling a whole page.
Give structure a visual presentation
HTML describes content and meaning. CSS controls presentation: color, spacing, typography and layout. A useful stylesheet makes the page easier to read and use; it should not be required to understand the content's basic order.
First styling experiment
Place the style element in your document's head and the article in its body. The article should appear as a centred card on a wide screen. max-width limits long lines without forcing a fixed width on a narrow screen. Padding creates internal breathing room; margin separates the card from surrounding content.
How to inspect a rule
Open browser developer tools, select the article and inspect its Styles and Computed panels. Toggle padding off: the border moves closer to the text. Change the background to a different color. A crossed-out declaration usually lost in the cascade; an invalid declaration may be ignored.
Do not lose semantics
A large font does not turn a paragraph into a heading. A styled span does not provide the behavior of a button. Keep semantic HTML and keyboard-operable controls, then use CSS to support them. Never convey an error by red color alone; include an explanatory message.
Practice
- Change the maximum width to 24rem and observe line wrapping.
- Remove border-radius and compare the shape.
- Zoom the page to 200% and confirm the text remains readable without clipping.
- Explain which property affects internal spacing. Answer: padding.
हिन्दी संकेत: पहले readable HTML बनाएं, फिर CSS से spacing और layout सुधारें।
