Styled with External CSS
The layout, navigation, and grid below are controlled by an external stylesheet
linked in the <head>. Open DevTools and disable the stylesheet
to see how the page looks without it.
Box Model in Action
This box is built entirely with CSS properties:
border defines the outline,
padding adds inner spacing,
margin pushes it away from surrounding elements,
and a gradient background blends two colors diagonally.
Inspect it in DevTools to adjust any of these live.
CSS Grid Layout
HTML
CSS
JavaScript
Responsive
DevTools
Box Model
Browser DevTools Tip
Right-click anywhere on this page and select Inspect to open DevTools. From there you can select any element, modify its CSS properties in real time, and observe how changes to padding, margin, color, or layout affect the page without editing any files.